前端之CSS初识

一、CSS介绍CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
二、CSS语法2.1 CSS实例每个CSS样式由两个组成部分：选择器和声明。声明有包括属性和属性值。每个声明之后用分号结束。

文章插图
2.2 CSS注释—注释是代码之母/*这是注释*/三、CSS的几种引入方式3.1 行内样式行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>3.2 内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head><meta charset="UTF-8"><title>Title</title><style>p {background-color: #2b99ff;}</style></head>3.3 外部样式【前端之CSS初识】外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<link href="https://tazarkount.com/read/mystyle.css" rel="stylesheet" type="text/css"/>四、CSS选择器4.1 基本选择器4.1.1 标签选择器通过标签名直接查找：
/*查找所有的p标签*/p {color: "red";}4.1.2 ID选择器通过id值查找标签（关键符号为#）：
/*查找id为d1的标签*/#d1 {background-color: red;}4.1.3 类选择器通过class值查找标签（关键符号为.）：
/*查找所有含有c1样式类的标签*/.c1 {font-size: 14px;}/*查找含有c1样式类的p标签*/p.c1 {color: red;}注意：
样式类名不要用数字开头（有的浏览器不认）；
标签中的class属性如果有多个，要用空格分隔；
4.1.4 通用选择器/*body内所有的标签*/* {color: white;}4.2 组合选择器4.2.1 后代选择器（特征符号为空格）/*查找div内部所有的后代span*/div span {color: red;}4.2.2 儿子选择器（特征符号为>）/*查找div内部所有的儿子span*/div > span {color: greenyellow;}4.2.3 毗邻选择器（特征符号为+）/*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/div + span {color: pink;}4.2.4 弟弟选择器（特征符号为~）/*查找同级别下面所有的span(不需要紧挨着)*/div ~ span {color: deeppink;}4.3 属性选择器

/*查找含有name属性名的标签*/[name] {color: red;}/*用于选取带有指定属性的元素 。*/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;}

4.4 分组和嵌套4.4.1 分组当多个标签的样式相同的时候，我们没有必要重复地为每个标签都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置标签样式。
例如：
/*查找div或者p*/div,p {color: red;}上面的代码为div标签和p标签统一设置字体为红色。
通常，我们会分两行来写，更清晰：
div,p {color: red;}4.4.2 嵌套多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
.c1 p {color: red;}直接筛选：
/*查找id为d1的div标签*/div#d1 {color: red;}/*查找class为c1的div标签*/div.c1 {color: red;}4.5 伪类选择器

/* 未访问的链接 */a:link {color: #FF0000}/* 鼠标移动到链接上（重点掌握，很多网址都在用！！！）*/a:hover {color: #FF00FF} /* 选定的链接 */ a:active {color: #0000FF}/* 已访问的链接 */a:visited {color: #00FF00} /*input输入框获取焦点时样式*/input:focus {outline: none;background-color: #eee;}

4.6 伪元素选择器4.6.1 first-letter常用的给首字母设置特殊样式（也是一种文档布局的方式）：
p:first-letter {font-size: 48px;color: red;}4.6.2 before

/*在每个<p>的元素之前插入内容*(通过css动态渲染文本属于特殊文本，无法选中)/p:before {content:"*";color:red;}

4.6.3 after

/*在每个<p>元素之后插入内容*(通过css动态渲染文本属于特殊文本，无法选中)/p:after {content:"*";color:blue;}

before和after多用于清除浮动。
4.7 选择器的优先级4.7.1 CSS继承继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色也会应用到段落的文本中。
body {color: red;}此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0 。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
p {color: green;}此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
4.7.2 选择器的优先级我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个标签并为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？
其实按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

文章插图
相同选择器不同导入方式的情况：选择器系统遵循就进原则从上往下谁离被渲染标签更近谁说了算。
除此之外还可以通过添加 !important 方式来强制让样式生效，但并不推荐使用。因为如果过多的使用 !important 会是样式文件混乱不易维护。