web开发学习之旅---css第一天

时间:2021-11-16 04:51:01

一、css全称

  • Cascade Style Sheet层叠样式表

二、css引入方式

  • 行内样式:<h2 style="color:#0F0">Hello World</h2>
  • 内部样式:

    <style type="text/css">

    h2{color:#F00;}

    </style>

  • 外部样式:方式1:<link href=“a.css”  type=“text/css” rel=“stylesheet”/> (推荐), 方式二:<style type="text/css">@import url("a.css");// @import “a.css”;</style>
  • 优先级:行内样式  > 内部样式 > 外部样式   就近原则
  • link和@import的区别:1、@import只能引入31次css文件 2、当页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式,然后突然样式会出现,网速慢的时候还挺明显。3、由于@import是CSS2.1提出的,@import只有在IE5以上的才能识别,而link标签无此问题

三、css选择器

  • 标记选择器,如:h2{color:red;}
  • 类选择器,如:.a{color:red;}
  • id选择器,如:#a{color:red;}
  • 优先级:id选择器>类选择器>标记选择器

四、理解 !important

  • 默认情况下,CSS规则按级层覆盖,例如在.CSS文件中的定义可以被style标签的定义覆盖,反之则不行。然而,对覆盖平衡而言,加上一个“!important”就优先于正常的CSS规则。例如:box{color:red !important;}
  • ie7,ie8,firefox,chrome等高端浏览器下,已经可以识别 !important属性, 但是IE 6.0仍然不能完全识别

五、盒子模型

  • border
  • padding
  • margin

web开发学习之旅---css第一天

六、行内元素/块元素

  • 行内元素:span等
  • 块元素:div、h1~h6、p、ul、ol、table、hr等
  • 两者之间转换:display

七、overflow属性

  • 设置当对象的内容超过其指定高度及宽度时如何管理内容

八、visibility VS display属性

  • visibility 该属性主要是为了隐藏和显示元素,<p style="visibility:hidden">第一段落</p> 隐藏p,占位置。
  • display 该属性主要是为了隐藏和显示元素,<p style=" display:none;">第一段落</p> 隐藏p,不占位置。

九、css浮动

  • 使块级元素并排,float:left; float:right;
  • 清除浮动:clear:both;

十、绝对定位、相对定位

  • 绝对定位:position:absolute; 相对于的是窗体的位置。
  • 相对定位:position:relative;相当于的是其父元素的位置。

十一、z-index

  • CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对z-index 属性普遍的认识.

十二、滤镜

  • css滤镜的标识符是“filter”,总体的应用上和其他的css语句相同
  • 网站变灰:
       <style>html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>
       <style type="text/css">html {filter: gray}img{filter:gray;}</style>
 
十三、background
  • background-image
  • background- repeat
  • background-position

软谋在线教育,最适合大学生、上班族的在线软件培训,主要教授asp.net动态网站制作,yy教育房间远程实时授课,每节课录制成高清视频课后分享,老师白天八小时全职在线辅导,不懂就问。加qq群:138800420 即可免费试听。

web开发学习之旅---css第一天