一．选择器：
1.元素选择器（标签选择器）：可以根据标签的名字来从页面中选取指定的元素。
语法：
标签名 { }
比如p则会选中页面中的所有p标签，h1会选中页面中的所有h1标签。
2.类选择器：可以根据元素的class属性值选取元素。
语法：
.className { }
比如.hello会选中页面所有class属性为hello的元素。
3.ID选择器：可以根据元素的id属性值选取元素。
语法：

id { }

比如#box会选中页面中id属性值为box的元素，和class属性不同，id属性是不能重复的。
4.复合选择器（交集选择器）：可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。
语法：
– 选择器1选择器2{}
例如div.box1会选中页面中具有box1这个class的div元素。
5.并集选择器：可以同时使用多个选择器， 多个选择器将被同时应用指定的样式。
语法：
选择器1,选择器2,选择器3 { }
比如p,.hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素。
6.通用选择器，可以同时选中页面中的所有元素。
语法：
{ }
7.后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。
语法：
祖先元素+空格+后代元素+空格+后代元素 { }
比如p strong 会选中页面中所有的p元素内的strong元素。
8.属性选择器：可以挑选带有特殊属性的标签。
语法:
[属性名]
[属性名="属性值"]
[属性名~="属性值"]
[属性名|="属性值"]
[属性名^="属性值"]
[属性名$="属性值"]
[属性名="属性值"]
9.子元素选择器：可以给另一个元素的子元素设置样式。
语法：
父元素 > 子元素{}
比如body > h1将选择body子标签中的所有h1标签。
10.兄弟选择器：除了根据祖先父子关系，还可以根据兄弟关系查找元素。
语法:
查找后边一个兄弟元素：兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素：兄弟元素 ~ 兄弟元素{}
11.其他子类选择元素
:first-child
选择第一个子标签
:last-child
选择最后一个子标签
:nth-child
选择指定位置的子元素
:first-of-type
:last-of-type
:nth-of-type
选择指定类型的子元

二．伪类和伪元素
1.链接定义样式
正常链接
a:link
访问过的链接
a:visited（只能定义字体颜色）
鼠标滑过的链接
a:hover
正在点击的链接
a:active
2.其他
获取焦点
:focus
指定元素前
:before
指定元素后
:after
选中的元素
::selection
3.段落定义样式
首字母
:first-letter
首行
:first-line
三．否定伪类
否定伪类：可以帮助我们选择不是其他东西的某件东西。
语法:
:not(选择器){}
比如p:not(.hello)表示选择所有的p元素但是class为hello的除外。
四．继承
就像父亲的财产会遗传给儿子一样，在CSS中祖先元素的样式，同样也会被子元素继承。
继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上。比如为父元素设置了字体颜色，子元素也会应用上相同的颜色。当然并不是所有的样式都会被继承。
五．选择器的权重
在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。
比如：
body h1
h1
上边的两个选择器都会选择h1元素，如果两个选择器设置的样式不一致，不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用那个样式呢？CSS中会默认使用权重较大的样式。
1.选择器的优先级
内联样式： 1000
id选择器： 100
类、属性、伪类选择器： 10
元素选择器： 1
通配符： 0
计算权重需要将一个样式的全部选择器相加，比如上边的body h1的权重是20，h1的权重是10，所以第一个选择器设置的样 式会优先显示。
六．文本标签
1.<em>和<strong>
em标签用于表示一段内容中的着重点，strong标签用于表示一个内容的重要性。这两个标签可以单独使用，也可以一起使用。
例：
<p>
<strong>警告：任何情况下不要接近僵尸。</strong>
他们只是 <em>看起来</em> 很友好，实际上他们是为了吃你的胳膊！
</p>
通常em显示为斜体，而strong显示为粗体
2.<i>和<b>
i标签会使文字变成斜体，b标签会使文字变成粗体。这两个标签和em和strong类似，但是这两个标签没有语义。所以根据html5标准，当我们只想设置文本 特殊显示，而不需要强调内容时就可以使用i和b标签。
3.<small>
small标签表示细则一类的旁注，通常包括 免责声明、注意事项、法律限制、版权信息等。
浏览器在显示small标签时会显示一个比父元素小的字号。
例：<p><small>©2018北财. 保留所有权利.</small></p>
4.<city>
使用cite标签可以指明对某内容的引用或参考。例如，戏剧、文章或图书的标题，歌曲、电影、照片或雕塑的名称等。
例：
<p>
<cite>《七龙珠》</cite>讲的是召唤神龙的故事。
</p>
5.<blockquote>和<q>
blockquote和q表示标记引用的文本，blockquote用于长引用，q用于短引用。在两个标签中还可以使用cite属性来表示引用的地址。
孟子曾经说过：
<blockquote>天将降大任于是人也...</blockquote>
他说的真对啊！
<p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>

6. ^{和
   _{sup和sub用于定义上标和下标。
   上标主要用于表示类似于103中的3。
   下标则用于表示类似余H2O中的2。
   7.<ins>和<del>
   ins表示插入的内容，显示时通常会加上下划线。
   del表示删除的内容，显示时通常会加上删除线。
   8.<code>和<pre>
   如果你的内容包含代码示例或文件名，就可以使用code元素。pre元素表示的是预格式化文本可以使用。pre包住code来表示一段代码。
   <pre>
   <code>
   function fun(){ alert("hello");
   }
   </code>
   </pre>
   9.有序列表：ol li
   <ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   </ol>
   10.无序列表：ul li
   <ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   </ul>
   11.定义列表：dl dd dt
   <dl>
   <dt>定义项1</dt>
   <dd>定义描述1</dd>
   <dt>定义项2</dt>
   <dd>定义描述2</dd>
   <dt>定义项3</dt>
   <dd>定义描述3</dd>
   </dl>
   七．文本格式化
   1.单位
   1.1px
   如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个像素，也就是1px，对于不同的显示器来说一个像素的大小是不同的。
   1.2百分比
   也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则100%就是16px，200%就是32px。
   1.3em
   em和百分比类似，是相对于font-size说的
   1em = 1font-size
   2.颜色
   在CSS中可以直接使用颜色的关键字来代表一种颜色。
   2.1十六进制颜色
   比如：#6600FF，66代表红色的浓度，00代表绿色的浓度，FF代表了蓝色的浓度。数字缩短为3个字符，如将#6600FF缩短为#60F。
   2.2RGB值
   计算机中常用的RGB值来表示颜色。可以使用0255的数值，也可以使用0%100%的百分比数。R(红)G(绿)B(蓝)
   – RGB(100%,0%,0%)
   – RGB(0,255,0)
   2.3RGBA
   RGBA表示一个颜色和RGB类似，只不过比RGB多了一个A（alpha）来表示透明度，透明度需要一个0-1的值。0表示完全透明，1表示完全不透明。
   – RGBA(255,100,5,0.5)
   八．文字大小
   font-size用来指定文字的大小。
   1.字体(一)
   通过font-family可以指定标签中文字使用的字体。
   例如：
   p{font-family:Arial}
   上边这行代码指定了p标签中使用名为arial作为字体，计算机中安装了我们指定的字体时，它才会显示，否则这行代码是没有意义的。
   2.字体(二)
   通过font-family可以同时指定多个字体。
   例如：
   p{font-family:Arial , Helvetica , sans-serif}
   如上我实际上指定了三种字体，浏览器会优先使用第一个，如果没有找到则使用第二个，以此类推。这里面sans-serif并不是指的具体某一个字 体。而是一类字体。
   4.字体分类
   serif（衬线字体）
   sans-serif（非衬线字体）
   monospace （等宽字体）
   cursive （草书字体）
   fantasy （虚幻字体）
   5.斜体和粗体
   font-style用来指定文本的斜体。
   指定斜体：font-style:italic
   指定非斜体：font-style:normal
   font-weight用来指定文本的粗体。
   指定粗体：font-weight:bold
   指定非粗体：font-weight:normal
   6.小型大写字母
   font-variant属性可以将字母类型设置为小型大写。在该样式中，字母看起来像是稍微缩小了尺寸的大写字母。
   – font-variant:small-caps
   7.字体属性的简写
   font可以一次性同时设置多个字体的样式。
   语法：
   – font:加粗 斜体 小型大写 大小/行高 字体
   这里前边几个加粗、斜体和小型大写的顺序无所谓，也可以不写，但是大小和字体必须写且必须写到后两个。
   8.行间距
   line-height用于设置行高，行高越大则行间距越大。
   行间距 = line-height – font-size
   9.大写化
   text-transform样式用于将元素中的字母全都变成大写。
   大写：text-transform:uppercase
   小写：text-transform:lowercase
   首字母大写：text-transform:capitalize
   正常：text-transform:none
   九．文本修饰
   1.text-decoration属性，用来给文本添加各种修饰。通过它可以为文本的上方、下方 或者中间添加线条。
   可选值：
   underline
   overline
   line-through
   None
   2.字母间距和单词间距
   letter-spacing用来设置字符之间的间距。
   word-spacing用来设置单词之间的间距。
   这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，而负数代表减少距离。
   3.设置文本的对齐方式
   text-align用于设置文本的对齐方式。
   可选值：
   left：左对齐
   right：右对齐
   justify：两边对齐
   center：居中对齐
   4.设置首行缩进
   text-indent用来设置首行缩进。该样式需要指定一个长度，并且只对第一行生效。}}