CSS概念及其引入方式
css 概念即特性
css，英文Cascading Style Sheets，中文名：级联样式表。层叠样式表。
css是一种表现语言，是对网页语言的补充。
css用于网页的风格设计，包括字体，颜色，位置等。
css的两个特性：层叠，继承
层叠：层叠样式生效的优先级：
内联样式->内部样式->外部样式->浏览器默认效果。
继承，就是css属性可以从父元素向下传递到子元素。
css使用的4中方式：
引入外部样式文件，导入外部样式文件，使用内部样式定义，使用内联样式定义。
1. 引入外部样式文件：
<link type="text/css" rel="stylesheet" href="css样式文件的url"/>
2. 导入外部样式文件：
<style type="text/css">
@import "css样式文件的url";
</style>
3. 使用内部样式定义：
<style type="text/css">
div {
background-color: #ffffff;
width: 300px;
height: 300px;
}
</style>
4. 使用内联样式定义：
<div style="background-color: #ffffff; width: 100px; height: 100px;">
</div>
css的选择器
元素选择器
元素 {样式声明 }
span {
background-color: DodgerBlue;
color: #ffffff;
}
通配符选择器，用"*"表示
*.warning {color:red;}
属性选择器
CSS 属性选择器通过已经存在的属性名或属性值匹配元素。
[attr] 表示带有以 attr 命名的属性的元素。
[attr=value] 表示带有以 attr 命名的属性，且属性值为 value 的元素。
[attr~=value] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
[attr|=value] 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
[attr^=value] 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
[attr\|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或者后面跟着连字符“-”
[attr$=value] 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
[attr*=value] 表示带有以 attr 命名的属性，且属性值包含有 value 的元素。
[attr operator value i] 在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。
[attr operator value s] 在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。
`
/* 存在title属性的<a> 元素 */
a[title] {
color: purple;
}
/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
background-color: gold;
}
/* 包含 "example" 的链接 */
a[href*="example"] {
background-color: silver;
}
/* 包含 "insensitive" 的链接,不区分大小写 */
a[href*="insensitive" i] {
color: cyan;
}
/* 包含 "cAsE" 的链接，区分大小写 */
a[href*="cAsE" s] {
color: pink;
}
/* 存在class属性并且属性值包含"logo"的<a>元素 */
a[class~="logo"] {
padding: 2px;
}
/* 以 ".org" 结尾的链接 */
a[href$=".org"] {
color: red;
}
派生选择器
派生选择器根据元素在其位置的上下文关系定义样式，分为：相邻兄弟选择器，通用兄弟选择器，子元素选择器，后代选择器
相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
/* 图片后面紧跟着的段落将被选中 */
img + p {
font-style: bold;
}
兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。
p ~ span {
color: red;
}
子选择器，当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素.
元素1 > 元素2 {样式声明 }
span { background-color: white; }
div > span {
background-color: DodgerBlue;
}
-----------
<div>
<span>Span 1. In the div.
<span>Span 2. In the span that's in the div.</span>
</span>
</div>
<span>Span 3. Not in a div at all</span>
效果：
Span 1. In the div. Span 2. In the span that’s in the div.
Span 3. Not in a div at all.
后代选择器，当使用 ␣ 选择符 (这里代表一个空格,更确切的说是一个或多个的空白字符) 连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) . 后代选择器与 子选择器 很相似, 但是后代选择器不需要相匹配元素之间要有严格的父子关系.
元素1 元素2 {样式声明 }
Id 选择器
#demo {
border: red 2px solid;
}
类选择器
.类名 {样式声明 }
等效
[class~=类名] {样式声明 }
span.classy {
background-color: DodgerBlue;
}
伪类选择器
伪类以冒号(:)开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格。
:active样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link，:hover 和 :visited。为保证样式生效，需要把 :active 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。
| 伪类名 | 说明 |
|---|---|
:active |
向被激活的元素添加样式 |
:focus |
向拥有输入焦点的元素添加样式 |
:hover |
向鼠标悬停在上方的元素添加样式 |
:link |
向未被访问的链接添加样式 |
:visited |
向已被访问的链接添加样式 |
:first-child |
向元素添加样式，且该元素是它的父元素的第一个子元素 |
:lang |
向带有指定lang属性的元素添加样式 |
a:link { color: blue; } /* 未访问链接 */
a:visited { color: purple; } /* 已访问链接 */
a:hover { background: yellow; } /* 用户鼠标悬停 */
a:active { color: red; } /* 激活链接 */
p:active { background: #eee; } /* 激活段落 */
<style>
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
</style>
<body>
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
</body>
效果：
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。由::before 和::after 生成的伪元素 包含在元素格式框内， 因此不能应用在替换元素上， 比如<img>或<br> 元素。
q::before {
content: "«";
color: blue;
}
::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
:first-letter 向文本的第一个字母添加样式
:first-line 向文本的第一行添加样式
