*CSS的定义
》CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
》CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
》CSS就是控制页面布局和样式
》HTML和CSS的关系：
HTML结构层,负责从语义的角度搭建页面结构
CSS样式层,负责从审美的角度美化页面
JavaScript行为层,负责从交互的角度提升用户体验
*引入CSS的方法
注意：所有的标签都有一个默认样式，我们称为浏览器样式，或者默认样式
》行内样式
通过标签的style属性设置标签样式
》嵌入样式
在head标签中，嵌套一个style标签，在style标签中可以书写CSS的样式内容。
》外连式
在head标签中，嵌套一个link标签
*CSS注释
CSS的注释语法/*注释的内容*/，，，，一般用于模块的注释
*标签选择器
标签选择器就是选择当前页面中相同名字的标签。
*通配符选择器
通配符*代表所有的标签。通过通配符选择器可以选择页面中的所有的标签。穿透力很强。
*ID选择器
HTML标签中ID的属性值在一个页面中必须是唯一的。
ID选择器是可以帮助我们选择当前页面中唯一id值的标签，也就是根据标签的id属性值进行选取设置样式。ID选择器的的符号是#号
*类选择器
类选择器就是选取页面中所有标签的class属性值相同的一类标签。
类选择器的符号是：. (点)
*ID选择器和Class选择器的区别
1、相同的Class属性值，可以在HTML中出现多次。ID属性值在页面中只能出现一次。
2、一个class的属性可以有多个值，也就是说一个标签可以有多个类。
注意：建议大家尽量使用类选择器。使用ID时候情况：当确实能唯一确定当前页面中标签只会出现一次，这时候可以使用ID选择器。如果不能保证相同的作用的标签在页面中只出现一次，那么这时候就选择使用类选择器。
*复合选择器---标签式制定选择器
标签指定式复合选择器，要求必须是标签开头然后其他选择器。
比如：h3.demo {} ,需要同时满足既是标签h3又拥有demo类才能被选择到。
*后代选择器
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
后代不仅仅包括儿子，还包括子子孙孙。
注意：后代选择器可以从左向右理解。但是真正浏览器在执行的时候是从右向左进行执行过滤的。
*子代选择器
子代选择器，是让CSS选择器智能选择儿子辈的元素。
例如：h1 > strong {color:red;}
解读为：选择器h1 > strong可以解释为“选择作为h1元素子元素的所有strong元素”。
尖括号和选择器之间可以有空格也可以没有，没有限制。
建议:选择器和尖括号间有空格。
*属性选择器
属性选择器就是根据html标签的属性进行过滤选择。
》h1[id] { color: red; }
》h1[id][class] { font-size: 17px; }
》input[type="text"] { background-color: purple; }
*伪类选择器
:link
伪类将应用于未被访问过的链接。IE6不兼容，解决此问题，直接使用a标签。
:hover
伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接，IE7+所有元素都兼容。
:active
伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited
伪类将应用于已经被访问过的链接
:focus
伪类将应用于拥有键盘输入焦点的元素。
*伪元素选择器
伪元素是控制内容
:first-line伪元素
:first-letter伪元素
注释：以上两个伪元素只能用于块级元素
:first-child伪元素，选择属于第一个子元素的元素。
例如：span:first-child{} /*选择属于第一个子元素的所有span标签。*/
:before与:after伪元素，可以设置元素之前后之后的 内容，并且配合content设置相关内容。比如：#demo:after,#demo:before { content:"--";display:block; }
注意：content属性只能跟 伪元素:before和:after共用。
Display:block.是设置标签为块级元素，独占行。
*CSS层叠性
CSS的层叠性，也就是说后来设置的样式会层叠（覆盖）之前的样式，层叠性的前提示CSS的选择器的优先级相同。
*CSS继承性
CSS的继承性是指，子容器的样式会继承父容器的样式。但并不是所有的样式都能继承。只有部分样式能继承，比如：文字相关字体大小、颜色、字体样式、行高、鼠标样式等。盒子相关的样式都不能继承，比如：宽高、背景色、边距、浮动、绝对定位等。
*CSS的优先级
比较CSS的优先级的时候：
1、首先比较行内样式，行内样式优先级最高。如果嵌入样式和行内样式同时设置样式时，行内样式优先级最高。
2、其次是内嵌样式的优先级比较：
内嵌样式的，ID选择器对应的样式优先级最高。
其次是Class样式
再次是标签选择器样式，
再次是通配符选择器设置的样式
后面是继承的样式，
结论一：继承的样式要大于默认的样式，demo
结论二： 通配符选择器的样式的优先级比继承样式的优先级要高。
结论三：标签的选择器的优先级要高于通配符选择器的优先级。
结论四：类选择器的样式的优先级要高于标签选择器的样式的优先级。
结论五：id选择器的优先级高于 类选择器的优先级
结论六：行内样式的选择器的优先级高于id选择器的优先级。
注意：复合选择器的样式优先级核算：
复合选择器的优先级根据四个层次来算，首先是行内最高。
其次，比较所有的id选择器的个数，个数多的为高。
再次比较类选择器的个数，个数多的为高，
最后比较标签选择器的个数，个数多的为高。
*CSS的标签模式设置Display属性
isplay可以控制标签的显示模式。
display：none | inline | block | inline-block
继承性：无
display值的解释：
none：此元素不被显示，在文档中被移除。
block：此元素按块级元素显示：前后带换行符，自己占一行。内联元素 → 块元素
inline：此元素按内联元素显示：1个挨着1个。块元素 → 内联元素
inline-block：按行内标签进行排版，但是可以设置宽高，而且高度可以影响行高
案例1：display改变标签的模式，行内转块级，块级转行内。
案例2：通过CSS隐藏HTML标签
通过设置Display为none，那么可以让这整个标签在页面中移除掉。
注意：1、/*display: none;*/ /*直接把当前标签从页面中直接移除了，不影响页面的布局
/*visibility: hidden;*/ /*这个只是不显示，但还是占用页面的空间
2、行内元素不能设置宽高，只能通过他的内容来撑开他的宽度和高度。如果你设置了宽高是不会影响行内元素的显示的。
*CSS颜色表示
1、RGB模式
语法：color: rgb(33,33,33);
取值：0-255，也可以用百分比：0% - 100%
2、十六进制
*长度单位
px：像素点，像素就是显示器显示的一个点。
em：1em等于当前的字体大小，例如：当前元素的字体大小为16px，那么1em = 16px。
注意：在PC时代主要以px为主。在移动web时代主要以：em、rem、pw、ph、百分比等来做布局的设置。
*文字大小设置
font-size
*字体设置
font-family
注意：
1、各种字体之间必须使用英文状态下的逗号隔开。
2、中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
3、如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
4、尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
*字体系列
衬线体：字体有一些修饰的东西，让字体变的美观。
非衬线体：没有修饰。
font-famliy: tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
1、前面的字体都查找失败后，在系统中找一种sans-serif字体作为默认字体。
2、注意顺序，如果把sans-serif放前面去，后面的都失效了。
*设置字体颜色
color：
建议最好使用十六进制的方式来写
*设置字符间距
letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。
可以设置连续汉字（汉字间没有空格）的间距，也可以设置英文字母之间的间距。
letter-spacing: 10px;
*设置单词间距
word-spacing属性用于定义英文单词之间的间距。也可以设置汉字中出现断字的距离（比如：文字间出现空格等）
*行高设置
行高的CSS定义：行高是两行文本基线的距离。实际上就是：文本的高度+一倍的行距。
一行文本的高度正好是：0.5倍行距+文本的高度+ 0.5倍行距
四线：
Ø文字顶端的线，称为顶线。
Ø中线：穿过x中心的线为中线。
Ø小写X字母底部的线为基线。
Ø文字底部的线为底线。
*text-decoration:文本装饰
text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：
删除线
none：没有装饰（正常文本默认值）。
underline：下划线。
overline：上划线。
line-through：删除线。
*text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
*text-indent:首行缩进
text-indent属性用于设置段落首行文本的缩进，只能设置于块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,建议使用em作为设置单位。
*空白符的处理
Normal：正常的显示，如果宽度不够进行折行显示。
Nowrap：即使超过盒子的宽度，文本也不进行换行显示。
Pre：写html代码的时候是什么样式的，显示就显示成什么样的。
网友评论