CSS，中文叫层叠样式表，样式表，css不是编程语言，作为一种与浏览器交流的工具,css用来描述 HTML 元素的的样式，比如大小，颜色，字体等等。
CSS语法规则
CSS这门语言的语法特别简单，只有一句：选择器{属性：属性值;属性：属性值;…},如果说CSS有难点，就是这门语言不断增加的词汇了，CSS的词汇无外乎三大类:选择器，属性和属性值，CSS的词汇是英文的，如果你英文很好，那么学习CSS很简单，反之就悲催了，虽然现在大部分IDE有代码补全的功能，但还是需要大量记忆的。
CSS的发展就是一个不断补充的过程，所以在使用CSS的时候，不需要像HTML那行申明使用的标准，高版本的浏览器认识高版本的CSS定义，低版本的浏览器略过不认识的CSS定义。
CSS有3个特性：
1.继承： 子元素可以继承父元素的样式。例外：a标签的文字颜色和下划线不继承，h1~h6的字体大小不继承,background属性不继承。
2.层叠: 是浏览器处理冲突的一个能力
层叠性只有在多个选择器选中“同一标签”，然后又设置了“相同的属性”，才会发生层叠性，这个时候一个属性就会将另一个属性层叠掉
3.优先级（权重）: 当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定。
优先级判断的三种方式：
- 是否是直接选中（间接选中就是指继承）；如果是间接选中，那么就是谁离目标近就继承谁
- 是否是相同的选择器，如果都是直接选中并且都是同类型的选择器，那么就是谁写在后面就听谁的
- 不同选择器：如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠
顺序是：！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承>浏览器缺省设置
网页中怎样使用CSS
网页中常用下面3种方式使用样式表，各有优缺点，这个可以在页面中去体会。
1、外部样式表
在HTML的标签中，使用<link>标签中引用。网页中引入外部样式表，可以使使用该样式表的网页保持相同的风格，避免重复定义可以极大提高工作效率。
<link rel="stylesheet" type="text/css" href="./mycss.css">
2、内部样式表
将 CSS 放置在<style>标签中，该元素包含在 HTML的head内。
<style>
body{font-size:14px;color:#333333}
</style>
3、内联样式
内联样式是仅影响一个元素的CSS声明。
<strong style="font-size: 18px">CSS简介</strong>
css选择器
每一条css样式定义被{}分隔成两部分，{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
CSS选择器具有隐式迭代的特点，无需循环遍历符合选择器要求的每个元素，比如声明 p{font-size:14px}，页面中所有的没有匹配其他规则的p标签中的文字都会显示为14px,使用起来相对方便。
选择器包括：
| 选择器 | 例子 | 说明 | 备注 |
|---|---|---|---|
| 通配符选择器 | * | 选择全部元素 | |
| 类选择器 | .intro | 选择所有class="intro"的元素 | |
| ID选择器 | #myID | 选择所有id="myID"的元素 | |
| 元素选择器 | p | 选择所有p元素 | |
| 群组选择器 | div,p | 选择所有<div>元素和<p>元素 | |
| 同级元素通用选择器 | p~ul | 选择前面有 <p> 元素的每个同级的<ul> 元素。 | css3 |
| 后代选择器 | div p | 选择<div>元素内的所有<p>元素 | |
| 子选择器 | div>p | 选择所有父级是<div> 元素的 <p> 元素 | |
| 相邻选择器 | div+p | 选择所有紧接着<div>元素之后的<p>元素 | |
| 属性选择器 | [target] | 选择所有带有target属性元素 | |
| 伪类选择器 | a:visited | 选择所有访问过的链接 | |
| 伪元素选择器 | p:before | 在每个<p>元素之前插入内容 |
属性选择器
可以为拥有指定属性的 HTML 元素设置样式
| 选择器 | 例子 | 描述 | 备注 |
|---|---|---|---|
| [attribute] | [target] | 选择带有 target 属性所有元素。 | 用于选取带有指定属性的元素。 |
| [attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 “flower” 的所有元素。 | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 “en” 开头的所有元素。 | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | a[src^=“https”] | 选择其 src 属性值以 “https” 开头的每个 <a> 元素。 | css3,匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 “.pdf” 结尾的所有 <a> 元素。 | css3,匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | a[src*=“abc”] | 选择其 src 属性中包含 “abc” 子串的每个 <a> 元素。 | css3,匹配属性值中包含指定值的每个元素。 |
伪类选择器
同一个标签，根据其不同的状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
| 选择器 | 例子 | 描述 | 版本 |
|---|---|---|---|
| :link | a:link | 选择所有未被访问的链接。 | |
| :visited | a:visited | 选择所有已被访问的链接。 | |
| :active | a:active | 选择活动链接。 | |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 | |
| :focus | input:focus | 选择获得焦点的 input 元素。 | |
| 结构性伪类选择器 | |||
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 | 3 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 | 3 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 | 3 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 | css3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 | css3 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 | css3 |
| :empty | p:empty | 选择没有子元素的每个 <p> 元素（包括文本节点）。 | css3 |
| :empty | p:empty | 选择没有子元素的每个<p> 元素（包括文本节点）。 | css3 |
| :target | #news:target | 选择当前活动的 #news 元素。 | css3 |
| 用户界面(UI)有关的伪类 | |||
| :enabled | input:enabled | 选择每个启用的 <input> 元素，一般用于input，select和textarea | css3 |
| :disabled | input:disabled | 选择每个禁用的 <input> 元素，一般用于input，select和textarea | css3 |
| :checked | input:checked | 选择每个被选中的 <input> 元素。 | css3 |
| :not(selector) | :not（p） | 选择非 <p> 元素的每个元素。 | css3 |
| ::selection | ::selection | 选择被用户选取的元素部分。 | css3 |
| ::placeholder | input::placeholder | 设置对象文字占位符的样式。 | css3 |
超链接（a标签）的四种状态，对应4个伪类
:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
伪元素选择器
并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器
| 选择器 | 例子 | 描述 |
|---|---|---|
| :first-letter | p:first-letter | 选择每个<p> 元素的首字母。 |
| :first-line | p:first-line | 选择每个 <p> 元素的首行。 |
| :before | p:before | 在每个 <p> 元素的内容之前插入内容。 |
| :after | p:after | 在每个 <p> 元素的内容之后插入内容。 |
CSS选择器的效率
id选择器（#myid）
类选择器（.myclassname）
元素选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[target=_blank]）
伪类选择器（a:hover,li:nth-child(2)）
上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最低。
CSS属性
每一条css样式定义被{}分隔成两部分，{}之后的部分是样式声明，样式声明的语法是分号分隔的一组属性：属性值组成。
{属性：属性值;属性：属性值;…}。
CSS属性和属性值得词汇量比较大，这里简单做个分类。
1、与网页排版相关的属性，设定的是元素对网页空间的使用，将在盒模型和定位中讲解
包括display 属性，盒模型相关属性、定位属性、弹性盒相关属性
2、与排版和动画无关的属性，将在CSS样式属性详解中讲解。
包括字体、文字、背景、列表、表格、轮廓、鼠标样式、阴影、滤镜等属性。
3、CSS动画有关的属性，CSS3动画中讲解。
CSS属性中的单位
尺寸
| 单位 | 描述 |
|---|---|
| px | 像素 (计算机屏幕上的一个点) 9pt=12px |
| % | 百分比 |
| em | 1em 等于当前的字体尺寸。 |
| rem | 1em 等于当前的字体尺寸。 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| ex | 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) |
| pt | 磅 (1 pt 等于 1/72 英寸) |
| pc | 12 点活字 (1 pc 等于 12 点) |
颜色
学过设计的人应该不陌生，前端只要了解就可以了，在css中最常用的是十六进制颜色和RGB颜色。
| 单位 | 描述 | 备注 |
|---|---|---|
| (颜色名) | 颜色名称 (比如 red) | |
| #rrggbb | 十六进制数表示颜色 (比如 #ff0000) | |
| rgb(x,x,x) | R：红色 G:绿色 B：蓝色，取值范围都是0-255 (比如 rgb(255,0,0)) | |
| rgb(x,x,x,x) | RGB 值加上透明度，透明度取值范围0-1，rgba(255,0,0,0.5) | css3 |
| hsl(x,x,x) | 通过色相、饱和度、亮度设置颜色 hsl(360,50%,50%) | css3 |
| hsla(x,x,x,x) | 同上，增加透明度 hsla(360,50%,50%,0.5) ，透明度取值范围0-1 | css3 |
hex十六进制颜色
RR(red红色)，GG(green绿色)，BB(blue蓝色)。取值范围必须介于0-9、A-F(a-f)，不区分大小写
#ff0000值呈现的是红色，因为红色的组成设置为最高(ff)，而其他设置为0，同理#00ff00为绿色，#0000ff为蓝色
#000000值为黑色
#ffffff值为白色
RGB颜色
RGB(红，绿，蓝)，每个参数定义颜色的亮度，取值范围为0-255之间的整数，或者一个从0%-100%之间的整数百分比值。
HSL颜色
H:色相指示颜色的种类，0和360是红色，接近120的是绿色，240是蓝色。
S：饱和度指示颜色的鲜艳程度，有效值为0~100%为0时必然显示黑白灰这三种最不鲜艳的颜色。
L：亮度指示颜色的明亮程度，有效值为0~100%。0%必然为黑色，100%必然为白色。