一、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
- content
六、行内元素/块元素
- 行内元素：a b br i span input select
- 块元素：div、h1~h6、p、ul、ol、table、hr、form、li等
- 两者之间转换:display
七、overflow属性
- 设置当对象的内容超过其指定高度及宽度时如何管理内容
八、visibility VS display属性
-
visibility 该属性主要是为了隐藏和显示元素,<p style="visibility:hidden">第一段落</p> 隐藏p，占位置。
- display 该属性主要是为了隐藏和显示元素，<p style=" display:none;">第一段落</p> 隐藏p，不占位置。
九、css浮动
- 使块级元素并排，float:left; float:right；
- 清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清除任何标签，但是缺点是增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)
::after {
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
十、定位
- 绝对定位：position:absolute；相对于的是窗体的位置。
- 相对定位：position:relative；相当于的是其父元素的位置。
- 固定定位：position:fixed； 固定在页面内。
- 默认定位： position：static；该元素出现在文档的常规位置，不会重新定位。
十一、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>