一、CSS的定义方式
1.内部样式：<style></style>
2.行间样式：<div style="100px;height:100px;">
3.外部样式：<link rel="stylesheet" type="text/css" href="地址" >
注：浏览器异步加载html、css、js文件
二、CSS选择器
1.常用选择器：类选择器、id选择器、标签选择器、通配符选择器
/*类选择器*/
/*假设页面有一个或多个同类名元素，且该类元素有一些共同的样式特性。当然通常我们的设计逻辑是有这样一些共同特性元素的需求，预先设计编写一组样式表，用来描述具备特定需求的元素。*/ /*假设有需求是有一些元素的宽高为100px,内边距和外边距为0，文本内容，文本溢出部分被剪切*/ .exa{ width: 100px; height: 100px; margin:0 auto; padding: 0 auto; text-align: center; line-height: 100px; overflow: hidden; }
标签选择器与类选择器的使用逻辑非常相似，就是用来描述页面同一类标签的元素的样式。类选择器使用程序员自己在元素属性上定义的class属性值来选定（.类名），点加类名的方式来设置。而标签选择器直接使用标签名即可。
id选择器就是使用元素上定义的id属性值来设置，在di属性值前面加上井号“#”就可以实现，设置的特定的一个元素的样式。实际开发中并不建议使用id选择器来设置样式表，根据项目和开发手册要求来定。
通配符使用的应该是最少的一种，出现在常用名单里的原因是我们每个样式表的第一行都是用星号“*”,即通配符来去除元素原本的默认样式，如元素的默认边距、列表标签的默认序列号、超链接元素的默认字体颜色和下划线、统一全局字体大小和字体及颜色等一系列应用。
2.父子选择器/派生选择器
基于标签选择器、类选择器、id选择器的父子关系进行筛选需要匹配的元素，每级条件用空格间隔。
/*比如有需求是：找到页面中id为“showcase”的div下，所有有序列表的列表项内的img元素中，设置样式为宽300px，高200px，内外边距为0像素,超出部分隐藏*/ div #showcase ul li img{ margin: 0 auto; padding: 0 auto; width: 100px; height: 100px; overflow: hidden; }
3并列选择器
这个选择器也是基于标签选择器、类选择器、id选择器来实现的，通过基础选择器组合，有别于父子选择器的是并列选择器的每个基础选择器之间不加空格。
/*例如有需求是：有一类元素是div并且都有类名是showcase和primary的样式是，宽高249px；内外边距为0，边框1像素蓝色*/ div.showcase.primary{ width: 249px; height: 249px; padding: 0 auto; margin: 0 auto; border: 1px solid blue; }
4.直接子元素选择器
是在父子选择器的基础上演变而来的一个选择器，比如要找到一个div元素下的子元素em，但是在其他子元素下面还有em，所以就不能使用div em的父子选择器来实现了，这时候就可以采用直接子元素选择器div > em，在父子选择器的基础上添加一个大于号，中间可以加空格也可以不加空格。这样就是可以实现匹配一个元素下的子元素，而不会影响到其他后代元素。
5属性选择器
在通常的情况下我们使用类名作为选择器或者id选择器其本质都是属性选择器，所谓的属性选择器就是使用元素的属性和属性值作为匹配条件。
语法：[属性值=属性值]
属性值的类型与元素上的一致，不需要发生改变。
/*比如有需求是找到img元素的图片名称是figure的元素，并设置宽300px，高250px，超出部分隐藏*/ img[src*="figure"]{ width: 300px; height: 250px; overflow: hidden; }
注意留意中间出现的一个符号“*”，在属性选择器中还存在^、$、~、|四个特殊的符号。
星号（*）表示在属性值中出现了指定的字符串。
（^）表示在属性值内有以指定字符串开头的属性值。
（$）表示在属性值内有以指定字符串结尾的属性值。
（~）表示在属性值内有指定的属性值。
（|）表示在属性值整个以指定的字符串开头。
[class="aaa bbb ccc"]{...} /*(^)匹配属性值内有指定的字符开头的属性*/ [class^="a"]{...} [class^="b"]{...} [class^="c"]{...} /*(|)匹配属性值以指定的字符串开头*/ [class|="a"]{...} [class|="aa"]{...} [class|="aaa b"]{...} ...
6.分组选择器
分组选择器就是同时有多个选择器同时匹配一个样式列表，使用逗号间隔。
.exa,div #showcase ul li img,div.showcase.primary,img[src*="figure"]{...}
7.伪类选择器
通过指定伪类设置元素样式，伪类即为不需设置就存在的类，css语法自有的类。在一定程度上解决了行为特性的需求。
| :active | 向被激活的元素添加样式 |
| :focus | 向拥有键盘输入焦点的元素添加样式 |
| :hover | 当鼠标悬浮元素上方时，向该元素添加样式 |
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :first-child | 向元素的第一个子元素添加样式 |
| :lang | 向带有指定lang属性的元素添加样式 |
三、伪元素
1.在一个标签内，内容前后隐式的存在逻辑上的两个元素，内容的逻辑前是：before，内容的逻辑后是：after
2.在css中选取伪元素的语法：标签名::before/after
3.伪元素中的content样式属性可以设置伪元素的内容，这个样式只存在伪元素中，必须写content才能生效（content:"";）
4.伪元素是行级元素
| :first-letter | 向文本的第一个字母添加特殊样式(只是应块级元素) |
| :first-line | 向文本的首行添加特殊样式（只适应块级元素） |
| :before | 在元素之前添加内容 |
| :after | 在元素之后添加内容 |
伪元素是由HTML语法给每一个标签内置的虚拟但真实存在的元素，这里的属性其实质是虚拟标签的class值
四、css样式权重
!important infinity 正无穷 写在样式后面
行间样式 1000
id 100
class|属性|伪类 10
标签 | 伪元素 1
通配符 0
注：计算机的：正无穷+1 > 正无穷
权重数值采用的256进制计算。
css复合样式的权重采用权重值相加，谁的权重值的和大使用谁。