前端之CSS
CSS是为网页的骨架添加样式的。
CSS的注释：/**/
CSS就是由选择器和声明组成，其中声明包括属性名和属性值。
CSS引入的几种方式
行间式：
<p style="color: red">Hello world.</p>
外联式：
就是通过link标签引入外部的css文件，这个是最规范的写法。
内联式：
就是写在body标签上在style标签里面的。
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
CSS选择器：
基本选择器：
标签选择器
p {color: "red";}
类选择器
.c1 { font-size: 14px; }
p.c1 {
color: red;
}
id选择器
#c1 { font-size: 14px; }
p.#c1 {
color: red;
}
通用选择器
* { font-size: 14px; }
组合选择器
后代选择器：
/*li内部的a标签设置字体颜色*/ li a { color: green; }
父子选择器
/*所有父极是li标签的a标签设置字体颜色*/ li>a { color: green; }
毗邻（相邻）选择器
/*跟li同级别的在li下面的第一个a标签设置字体颜色*/ li+a { color: green; }
弟弟选择器
/*跟li同级别的在li下面的所有a标签设置字体颜色*/
li~a { color: green; }
属性选择器
/*用于选取带有指定属性的元素。*/ p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; }
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
color: red;
}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
color: yellow;
}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
color: green;
}
分组和嵌套选择器
分组：
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div, p {
color: red;
}
上面的代码为div标签和p标签统一设置字体为红色。
通常，我们会分两行来写，更清晰:
div,
p {
color: red;
}
嵌套：
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
.c1 p {
color: red;
}
伪类选择器：
/* 未访问的链接 */
a:link {
color: #FF0000
}
/* 鼠标移动到链接上 */
a:hover {
color: #FF00FF
}
/* 选定的链接 */
a:active {
color: #0000FF
}
/* 已访问的链接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
伪元素选择器：
first-letter 常用的给首字母设置特殊样式： p:first-letter { font-size: 48px; color: red; } before /*在每个<p>元素之前插入内容*/ p:before { content:"*"; color:red; } after /*在每个<p>元素之后插入内容*/ p:after { content:"[?]"; color:blue; } before和after多用于清除浮动。
选择器的优先级排序(由高到低):
行间式>id选择器>类选择器>标签选择器
我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？
其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
