CSS样式表和选择器
CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS 将网页内容和显示样式进行分离，提高了显示功能。
css的语法
选择器{ 属性名: 属性值; 属性名: 属性值; }
或者：
选择器 {
k: v;
k: v;
k: v;
k: v;
}解释：
- 选择器代表页面上的某类元素，选择器后一定是大括号。
- 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。
- 冒号和属性值之间可以留一个空格（编程习惯的经验）。
- 如果一个属性有多个值的话，那么多个值用空格隔开。
<style type="text/css">
p{
font-weight:bold;
font-style:italic;
color:red;
}
</style>css 代码的注释
/*注释内容*/CSS 的一些简单常见的属性
字体颜色：color
字体颜色：font-size
背景颜色：background-color
加粗：font-weight
斜体：font-style:italic
下划线：text-decoration:underline
CSS 和 HTML 结合的方式
CSS 和 HTML 的结合方式有 3 种：
行内样式：在某个特定的标签里采用 style属性。范围只针对此标签。
<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>内嵌样式表：在页面的 head 里采用<style>标签。范围针对此页面。
<style type="text/css">
p {
font-weight: bold;
font-style: italic;
color: red;
}
</style>
<body>
<p>洗白白</p>
<p style="color:blue">你懂得</p>
</body>引入外部样式表 css 文件的方式。这种引入方式又分为两种： - 1、采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link> - 2、采用 import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;
-
（1）采用
<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>-
stylesheet：定义的样式表 -
alternate stylesheet：候选的样式表
-
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三种样式"></link>- （2）采用 import，必须写在
<style>标签中，并且必须是第一句。例如：@import url(a.css) ;
CSS 的四种基本选择器
基本选择器：
- 标签选择器：针对一类标签
p{ font-size:14px; }（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。
（2）无论这个标签藏的多深，一定能够被选择上。
（3）选择的所有，而不是一个。
- ID 选择器：针对某一个特定的标签使用
#mytitle{ border:3px dashed green; } -
（1）只能有字母、数字、下划线。
-
（2）必须以字母开头。
-
（3）不能和标签同名。比如 id 不能叫做 body、img、a。
-
HTML 页面，不能出现相同的 id，哪怕他们不是一个类型。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！
- 类选择器：针对你想要的所有标签使用
.one{ width:800px; }-
特性 1：类选择器可以被多种标签使用。
-
特性 2：同一个标签可以使用多个类选择器。用空格隔开。举例如下：（正确）
<h3 class="teshu zhongyao">我是一个h3啊</h3>-
（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。
（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
-
通用选择器（通配符）：针对所有的标签都适用（不建议使用）
- 通用选择器，将匹配任何标签。不建议使用，IE 有些版本不支持，大网站增加客户端负担。
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
* {
margin-left: 0px;
margin-top: 0px;
}类上样式，id 上行为。意思是说，class属性交给 css 使用，id属性交给 js 使用。
CSS 的几种高级选择器
-
后代选择器：用空格隔开
- 对于
E F这种格式，表示所有属于 E 元素后代的 F 元素，有这个样式。空格就表示后代。
后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。
后代选择器，描述的是祖先结构。
- 对于
<style type="text/css">
.div1 p {
color: red;
}
</style>
/*空格就表示后代。.div1 p 表示.div1的后代所有的p。后代选择器，描述的是一种祖先结构。*/-
在 VS Code 中输入
p#haha，按 tab 键后，会生成<p id="haha"></p>。在 VS Code 中输入
p.haha，按 tab 键后，会生成<p class="haha"></p>。
-
交集选择器：选择器之间紧密相连
- 定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如
div.haha，再比如p.special。
如果后一个选择器是类选择器，则写为
div.special；如果后一个选择器 id 选择器，则写为div#special。 - 定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>交集选择器测试</title>
<style type="text/css">
h3.special {
color: red;
}
</style>
</head>
<body>
<h3 class="special zhongyao">标题1</h3>
<h3 class="special">我也是标题</h3>
<p>我是段落</p>
</body>
</html>- 并集选择器（分组选择器）：用逗号隔开
p,
h1,
#mytitle,
.one {
color: red;
}- 伪类选择器
1.子代选择器，用符号>表示
div > p {
color: red;
}
/*div 的儿子 p。和 div 的后代 p 的截然不同。*/
<div>
<p>我是div的儿子</p>
</div>2.序选择器
设置无序列表<ul>中的第一个<li>为红色：
<style type="text/css">
ul li:first-child {
color: red;
}
</style>ul li.first{ color:red; } ul li.last{ color:blue; }3.下一个兄弟选择器
+表示选择下一个兄弟
<style type="text/css">
h3 + p {
color: red;
}
</style>CSS选择器：伪类（伪类选择器）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS伪类</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.nav{
width: 960px;
height: 50px;
border: mediumslateblue;
margin: 100px auto;
}
.nav ul{
list-style: none;
}
.nav ul li{
float: left;
width: 120px;
height: 50px;
text-align:center;
line-height: 50px;
}
.nav ul li a{
display: block;
width: 120px;
height: 50px;
}
.nav ul li a:link ,.nav ul li a:visited{
text-decoration: #00cc66;
background-color: aliceblue;
color: black;
}
.nav ul li a:hover {
background-color: gold;
}
</style>
</head>
<body>
<div class="nav" >
<ul>
<li><a href="1">protest</a></li>
<li><a href="2">web</a></li>
<li><a href="3">pwn</a></li>
<li><a href="4">reverse</a></li>
<li><a href="5">misc</a></li>
<li><a href="6">crypto</a></li>
</ul>
</div>
</body>
</html>
ps:其实不写.link和.visited也是可以兼容的
/*a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。*/
.nav ul li a{
display: block;
width: 120px;
height: 50px;
text-decoration: none;
background-color: purple;
color:white;
}
.nav ul li a:hover{
background-color: orange;
}CSS的继承性和层叠性
有疑惑建议参考原文进行学习
CSS盒模型
浮动
定位属性
CSS3选择器
之前的选择器：
div标签选择器.box类名选择器#boxid选择div p后代选择器div.box交集选择器div,p,span并集选择器div>p子代选择器*: 通配符div+p: 选中div后面相邻的第一个pdiv~p: 选中的div后面所有的p
CSS3选择器与 jQuery 中所提供的绝大部分选择器兼容。
属性选择器
[ ]
^：开头 $：结尾 *：包含E[title]选中页面的E元素，并且E存在 title 属性即可。E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc。E[attr~=val]选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。E[attr|=val]表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的。E[title^="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头。E[title$="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾。E[title*="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc。
结构伪类选择器
伪类选择器的标志性符号是 :。
CSS中有一些伪类选择器，比如:link、:active、:visited、:hover，这些是动态伪类选择器。-
E:first-child匹配父元素的第一个子元素E。 -
E:last-child匹配父元素的最后一个子元素E。 -
E:nth-child(n)匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。 -
E:nth-child(odd)匹配奇数 -
E:nth-child(even)匹配偶数 -
E:nth-last-child(n)匹配父元素的倒数第n个子元素E。 -
E:first-of-type匹配同类型中的第一个同级兄弟元素E。 -
E:last-of-type匹配同类型中的最后一个同级兄弟元素E。 -
E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E。 -
E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E。 -
E:empty匹配没有任何子节点（包括空格等text节点）的元素E。 -
E:target匹配相关URL指向的E元素。要配合锚点使用。
伪元素选择器
伪元素选择器的标志性符号是 ::
E::before设置在 元素E 前面（依据对象树的逻辑结构）的内容，配合content属性一起使用。E::after设置在 元素E 后面（依据对象树的逻辑结构）的内容，配合content属性一起使用。
E:after、E:before在旧版本里是伪类，在 CSS3 这个新版本里是伪元素。新版本里，E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待， 这样做的目的是用来做兼容处理。
E::first-letter设置元素 E 里面的第一个字符的样式。E::first-line设置元素 E 里面的第一行的样式。E::selection设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）。
