CSS: Cascading Style Sheets , 层叠样式表，是一种用来设置html中的标记<tag>的显示方式的语言。
CSS定义方式：
- 选择器 { 属性：值； 属性：值； 属性：值；... }
CSS使用方式：
- 内联样式：在html文件的标记内使用style关键字
例子1：html中的代码片段
- 内联样式：在html文件的标记内使用style关键字
<p style="color:#f00;font-size:20px">这是内联样式</p>
- 内部样式：在html文件中使用<style>定义样式，并在文件中的其它标记内使用
例子2：html中的代码片段
- 内部样式：在html文件中使用<style>定义样式，并在文件中的其它标记内使用
<head>
<style type="text/css">
body {
background-image:url("images/bg.png");
}
.h2class {
color: #f00;
font-size:20px;
}
</style>
</head>
<body>
<h2 class="h2class">这里使用的是内部样式</h2>
</body>
- 外部样式：在css文件中定义样式，在html文件中<head>内链接该css文件并在<body>内使用
例子3：css文件（style.css）中的代码片段
- 外部样式：在css文件中定义样式，在html文件中<head>内链接该css文件并在<body>内使用
h3{
font-size:16px;
color: #00f;
}
html文件中的代码片段
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h3>这里使用的是外部样式：即style.css中定义的样式</h3>
</body>
CSS选择器的分类：
1. 元素/标签选择器：即使用html的标记作为选择器，如body, p, li ...
p{ color: blue; }
2. 类选择器：对html标记中定义了该class的类起作用，可以多个类一起使用
.bluecontent{ color: blue; }
.comment{ font-style: italic; }
<p class="bluecontent comment">这里使用了两个类选择器</p>
3. id选择器：对html标记中某个定义了该id的标记起作用，一个id值在一个html内不可重复
#nickname{ font-style: bold; color: red;}
<p id="nickname">这是你的昵称，使用了id选择器</p>
4. 属性选择器：为带有特定属性的html标记设置样式
- 4.1 [attribute] { } 用于选取带有指定属性attribute的元素
[target]{ color: #666 }
<a href="index.html">首页</a>
<a href="jianshu.com" target="_blank">简书</a>
4.2 选择器[attribute="value"] { } 用于选取符合选择器且带有指定属性attribute且该属性的值为value的元素
4.3 选择器[attribute1="value"][attribute2][attribute3] { } 用于选取符合选择器且带有指定属性attribute1、attribute2、attribute3且该属性attribute1的值为value的元素
4.4 选择器[attribute~="value"] { } 用于选取符合选择器且带有指定属性，且值包含了value的元素
p[class~="comment"] { font-style: italic; }
<p class="bluecontent comment">上面的选择器对这里有效</p>
- 4.5 [attribute*="value"]{ } 用于选取带有指定属性attribute且其值包含value的元素，value不必是完整的值
[class*="at"] { color: yellow; }
<p class="batest">这个文本会是什么颜色？</p>
- 更多属性选择器的用法见下表：
| 选择器 | 例子 | 解释 |
|---|---|---|
| [attribute] | [target] | 选择带有target属性的所有元素 |
| [attribute = value] | [target="_blank"] | 选择target属性为"_blank"的所有元素 |
| [attribute ~= value] | img[title~="flower"] | 选择带有包含"flower"一词的title属性的每个<img>元素 |
| [attribute |= value] | [lang |= "en"] | 选择带有以"en"开头的lang属性的所有元素 |
| [attribute ^=value ] | a[href^="https"] | 选择href属性值以"https"开头的所有<a>元素 |
| [attribute $= value] | a[href$=".php"] | 选择href属性值以".php"结尾的所有<a>元素 |
| [attribute *=value ] | [class*="tea"] | 选择class属性值包含字符串"tea"的所有元素 |
5. 组合/关系选择器
- 5.1 后代选择器
div a{color:yellow;}
<a href="index.html">链接1的颜色</a>
<div><a href="jianshu.com">和链接2的颜色不一样</a></div>
<div><p>< a href="jianshu.com">链接3的颜色和链接2的颜色一样</a></p></div>
- 5.2 子选择器
div > a { color:yellow; }
<a href="index.html">链接1的颜色</a>
<div>< a href="jianshu.com">和链接2的颜色不一样</a></div>
<div><p>< a href="jianshu.com">链接3的颜色和链接2的颜色也不一样</a></p></div>
- 5.3 相邻选择器
div + p { color:yellow; }
对紧邻div之后的p起作用
6. 伪类选择器：不存在的类，仅表示符合状态的那类元素
:first-child 第一个子元素
:last-child 最后一个子元素
p {color:black}
p:first-child {color:green}
p:last-child {color:blue}
<p>文本1</p>
<p>文本2</p>
<p>文本3</p>
<p>文本4</p>
其他伪类： a:link { }，a:visited { }, :active { }, :hover { }
否定的伪类： p:not() { }
p:not(first-child) { color:blue }
<p>文本1</p>
<p>文本2</p>
<p>文本3</p>
7. 伪元素选择器：伪元素也是不存在的元素，表示元素的特殊状态
- ::before在元素之前插入内容
p::before{content:url(/actor.png);}
<p>在这行文字之前会插入一个图片</p>
::after在元素之后写入内容
::first-letter选择元素的首字母
::first-line选择元素的首行
::selection选择用户选择的元素部分
