LZ-Says：风平浪静之后，还会存在什么？
前言
前端好玩的有很多，不同的属性，不同的组合，生成 666 的页面。
But，LZ 还是有很多都是属于知其然而不知其所以然。
Today，简单回顾有关 CSS 那点事儿～
一、CSS 简述
伪前段一枚，如有不正，欢迎指正。
- 总说 CSS ，CSS，那么什么是 CSS 呢？
CSS(Cascading Style Sheets) 层叠样式表，它用来描述网页的行为、表现，也就是最终用户所见到网页的样子。
在 CSS 中，主要分为如下几种样式：
- 内部样式（行内样式）： 将 CSS 样式直接写到 style 中且当前 Settings 只对当前元素起作用。此方式不方便复用，耦合度太高。
<p style="color:red;"></p>
- 内部样式： 将 CSS 样式写到头部中的 style 标签内。
<head>
<style type="text/css"> <!-- 说明此文本是 css -->
/**
* CSS 注释
*/
</style>
</head>
- 外部样式： 将共有 CSS 样式提取一个 css 文件中，随后在使用的页面中通过 link 进行引入即可，这样可以使结构和表现分离，并且可以通过浏览器的缓存加快用户访问，提升用户访问体验性。
<link rel="stylesheet" type="text/css" href="CSS 地址(相对地址)" />
二、CSS 语法
CSS 语法相对来说比较简单，主要由俩部分构成：
- 选择器： 通过选择器器可以选中⻚页⾯面中指定的元素，并且将声明块中的样式应⽤用到选择器器对应的元素上。
- 声明块： 声明块紧跟选择器器后⾯面，内部主要为 n 组值对结构，⽤用来描述当前样式;多个声明间使用 ; 隔开且声明样式名以及样式值之间使⽤用 : 来连接。
简单举个例子：
div p {
color:#666;
}
这里简单提起下有关元素的内容：
- 块级元素例如： p、h1~6。特点：独占⼀行；
- div 属于默认块元素，且没有默认值；
- 内联元素(⾏内元素)，只占⽤自身⼤大⼩小的元素，例如：a、img、span；span 同样没有默认值，一般用来设置某种状态；
- 块元素主要⽤于⻚面中的布局，⽽内联元素则主要⽤于显示内部内容；
- a 元素可以包含任意元素，但是不能包含自身；
- p 元素不不能放置任何的块元素。
而关于元素之间的层级，这里简单说下：
<div>
<p>
<span></span>
</p>
<p>
<span></span>
</p>
<span></span>
<div>
以上述代码段为例，我们可以简单知晓其具有如下几类元素：
- 父、子元素；
- 祖先、后代元素；
- 兄弟元素
其次，来简短说明他们之间的关系：
- 父元素： 直接包含⼦元素的元素；
- 子元素： 直接被⽗元素包含的元素；
- 祖先元素： 直接或间接包含后代元素的元素，父元素也是祖先元素；
- 后代元素： 直接或间接被祖先元素包含的元素，子元素也是后代元素；
- 兄弟元素： 拥有相同⽗元素的元素。
最后我们来描述下代码段中的元素关系：
- body 算 div 的父元素，div 算 p 的父元素；
- span 算 p 的子元素，p 算 div 的子元素；
- div 算 span 的祖先元素，body 算 span 的祖先元素；
- span 算 div 的后代元素，p 算 div 的后代元素；
- span 算 p 的兄弟元素。
三、元素选择器
下面开始列举有意义的事儿咯。
- 通配选择器： 为当前页面所有元素设置样式。
![在这里插入图片描述]()
- 元素选择器： 通过元素选择器选中该⻚面中所有指定元素设置样式。
![在这里插入图片描述]()
- ID 选择器： 通过元素 ID 属性选中唯一的一个元素设置样式。
![在这里插入图片描述]()
- 类选择器： 为相同 class 属性值的元素设置样式。
![在这里插入图片描述]()
- 并集选择器： 可以同时选中多个选择器对应的元素并设置样式。
![在这里插入图片描述]()
- 交集选择器（复合选择器）： 可以同时选中满足多个选择器的元素并设置样式。例如设置 p 标签且 class 为 test 的元素样式，如下。
![在这里插入图片描述]()
- 后代元素选择器： 选中指定元素的指定后代元素。
![在这里插入图片描述]()
选中 ID 为 name 的元素且后代 id 为 id 的元素并设置样式。
![在这里插入图片描述]()
- 子元素选择器： 为指定父元素下的指定子元素设置样式（注意：IE 6 及以下不支持子元素选择器）
![在这里插入图片描述]()
- 兄弟选择器： 选择某个元素的兄弟选择器。
![在这里插入图片描述]()
- 伪类元素选择器： 表示元素的某种状态，例如已访问、未访问等。
/**
* 默认样式
*/
a:link{
color:blue;
}
/**
* 访问过的样式，只能设置字体颜色，原因涉及到用户隐私
*/
a:visited{
color:blue;
}
/**
* 表示鼠标移上的样式 （IE 6 不支持超链接以外内容使用）
*/
a:hover{
color:blue;
}
/**
* 激活时样式 表示当前超链接被点击（点击中） （IE 6 不支持超链接以外内容使用）
*/
a:active{
color:blue;
}
/**
* 获取焦点时样式
*/
input:focus{
color:blue;
}
/**
* 选中文本时样式
*/
p::selection{
...
}
/**
* 设置第一个字样式
*/
p:first-letter{
}
/**
* 设置第一行样式
*/
p:first-line{
...
}
/**
* 元素最前边样式
*/
p:before{
...
}
/**
* 元素最后面样式
*/
p:after{
...
}
- 否定伪类选择器： 从已选中的元素中剔除某些元素。
/**
* 为除了 className = "" or id = "" 的 p 元素设置某种样式
*/
p:not(className/ID){
...
}
- 选择指定属性元素
![在这里插入图片描述]()
- 选取指定属性的元素
![在这里插入图片描述]()
当然还包含其他类型属性，如下：
<style>
/**
* 选中第一个子元素
*/
p:first-child {
...
}
/**
* 选中最一个子元素
*/
p:last-child {
...
}
/**
* 选中任意一个子元素
*/
p:nth-child(选中位置/even 表示偶数位置的子元素/odd 表示奇数的子元素)) {
...
}
/**
* 选中第一个子元素
*/
p:first-of-type {
...
}
/**
* 选中最一个子元素
*/
p:last-of-type {
...
}
/**
* 选中任意一个子元素
*/
p:nth-of-type {
...
}
</style>
type 和 child 区别在于
child 在所有子元素中查找，而 type 则在当前类型的子元素排列
- 列举特殊的属性： title 可为任意标签指定
![在这里插入图片描述]()
样式的继承
例如页面中所有文字均为 30 px，则只需要简单设置如下：
body{
font-size=30px;
}
也就是说在 CSS 中，父类元素的样式会被子元素继承，背景定位等样式不会被继承。
选择器优先级
按照数字划分级别，如下所示：
- 内联样式优先级 1000
- ID 选择器优先级 100
- 类和伪类优先级 10
- 元素选择器优先级 1
- 通配优先级 优先级 0
- 继承的样式 无优先级
个人公众号
不定期发布博文，最近有点忙，感谢老铁理解，欢迎关注～
