前端css语法基础

element语法

生成标签，直接输入标签名，按tab键即可
如果想要生成多个相同标签，加上*即可。如div*3就可以快速生成3个div
如果有父子关系的标签，可以用>。如ul > li
如果有兄弟关系的标签，用+即可。如div+p
如果生成带有类名或 id 的，直接输入.demo或者#two ，按tab键即可
如果生成的div类名是有顺序的，可以用自增符号$ 。如.name$*3
如果想要在生成的标签内部写内容可以用{}表示

CSS引入方式

内嵌式（内联样式）
- 只作用于当前页面，没有实现结构与样式分离
css
```
<style>
  h1 {
    color: red;
    font-size: 40px;
  }
</style>
```
1
2
3
4
5
6
外链式（外链样式）
- 作用于多个页面，最常用，需要使用link标签引入外部的css文件
html
```
<link rel="stylesheet" href="CSS路径">
```
1

行内式（行内样式）

作用于当前标签，不建议使用

html

<标签名 style="属性1：属性值1; 属性2：属性值2;">内容</标签名>

CSS属性书写顺序

更多规范可以参考：腾讯前端书写规范

布局定位属性
1. display
2. float、position
3. clear
4. visibility、overflow
盒子模型 + 背景
1. width、height
2. margin、padding、border
3. background
文本内容属性
1. color、font
2. text-decoration
3. text-align
4. line-height
5. white-space
其他属性（修饰）
1. cursor
2. border-radius
3. text-shadow
4. box-shadow

类选择器个数推荐不超过三个

CSS三大特性

层叠性：相同样式会覆盖
继承性：text- 、 font- 、line- 、 color属性（不影响布局的，大概率能够继承）
vertical-align不能继承
优先级：
选择器 选择器权重
继承、* (0, 0, 0, 0)
元素选择器 (0, 0, 0, 1)
类选择器，伪类选择器 (0, 0, 1, 0)
ID选择器 (0, 1, 0, 0)
行内样式 (1, 0, 0, 0)
!important 无穷大
如果都是继承，则会直接继承父级标签或者最近的祖先标签

选择器	选择器权重
继承、`*`	(0, 0, 0, 0)
元素选择器	(0, 0, 0, 1)
类选择器，伪类选择器	(0, 0, 1, 0)
ID选择器	(0, 1, 0, 0)
行内样式	(1, 0, 0, 0)
`!important`	无穷大

CSS选择器

基础选择器

标签选择器（0 0 0 1）

css

p {
    /* CSS属性和值 */
}

类选择器（0 0 1 0）

css

.s1 {
    /* CSS属性和值 */
}

ID选择器（0 1 0 0）

css

#s1 {
    /* CSS属性和值 */
}

通配符选择器（0 0 0 0）

css

* {
    /* CSS属性和值 */
}

!important > 行内样式 > ID选择器 > 类选择器 | 属性选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

基本选择器	特点	用法
通配选择器	选中所有标签，一般用于清除样式	`* { color: red }`
元素选择器	选中所有同种标签，但是不能差异化选择	`h1 { color: red }`
类选择器	选中所有特定类名 (class) 的元素。用的最多，使用频率很高	`.say { color: red }`
ID选择器	选中特定id值的那个元素 (ID唯一)	`#earthy { color: red }`

复合选择器

基本复合选择器

后代选择器：元素1 元素2

css

ul li {
	color: red;
}

子代选择器：元素1>元素2

css

/* 选中指定元素中，符合要求的子元素 */
div>a {
	color: red;
}

相邻兄弟选择器：元素1+元素2

css

/* 选中指定元素后，符合条件的相邻兄弟元素 */
div+p {
	color:red;
}

所谓相邻，就是紧挨着他的下一个

通用兄弟选择器：选择器1~选择器2

css

/* 选中指定元素后，符合条件的 所有 兄弟元素 */
div~p {
	color:red;
}
/* 这里选择的是div后的全部兄弟p标签 */

并集选择器：元素1, 元素2

css

#high,
.rich,
.beauty {
    font-size: 40px;
	background-color: skyblue;
	width: 200px;
}

并集选择器优先级是单独计算的

交集选择器：元素1元素2

css

p.beauty {
	color: blue;
}

属性选择器

选中属性值符合一定要求的元素

语法：

[属性名]：选中具有某个属性的元素
[属性名="值"]：选中包含某个属性，且属性值等于指定值的元素
[属性名^="值"]：选中包含某个属性，且属性值以指定的值开头的元素
[属性名$="值"]：选中包含某个属性，且属性值以指定的值结尾的元素
[属性名*="值"]：选择包含某个属性，属性值包含指定值的元素

css

/* 选中具有title属性的元素 */
div[title] {
  color: red;
}

/* 选中title属性值为content的元素 */
div[title="content"] {
  color: red;
}

/* 选中title属性值以a开头的元素 */
div[title^="a"] {
  color: red;
}

/* 选中title属性值以u结尾的元素 */
div[title$="u"] {
  color: red;
}

/* 选中title属性值包含g的元素 */
div[title*="g"] {
  color: red;
}

伪类选择器

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的

比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类

状态性伪类

基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去

:link 应用于未被访问过的链接
:hover 应用于鼠标悬停到的元素
:active 应用于被激活的元素
:visited 应用于被访问过的链接，与:link互斥
:focus 应用于拥有键盘输入焦点的元素

结构性伪类

CSS3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁

所有兄弟元素中的第一个：:first-child
所有兄弟元素中的最后一个：:last-child
所有兄弟元素第n个：:nth-child(n)、倒数: nth-last-child(n)
所有同类型兄弟元素的第一个：:first-of-type
所有同类型兄弟元素的最后一个：:last-of-type
所有同类型兄弟元素的第n个：:nth-of-type(n)、倒数：nth-last-of-type(n)

n从0开始计算，因此2n、even为偶数、2n+1、odd为奇数、-n+3前三个、n+5从第五个开始到最后一个为止

除此之外，还有：

根元素：:root
空元素：:empty（空格也算内容）
否定伪类：:not(选择器)满足除括号内元素
UI伪类：
- :checked被选中的复选框或单选按钮
- :enable可用的表单元素（没有 disabled 属性）
- :disabled不可用的表单元素（有 disabled 属性）

伪元素选择器

用于创建一些不在文档树中的元素，并为其添加样式

实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。比如，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式

CSS3规范中要求使用单冒号:用于CSS3伪类，双冒号::用于 CSS3伪元素，目的是区分伪类和伪元素

::first-letter 选择元素文本的第一个字
::first-line 选择元素文本的第一行
::before 在元素内容的最前面添加新内容
::after 在元素内容的最后面添加新内容
::selection 匹配用户被用户选中或者处于高亮状态的部分
::placeholder 匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效

CSS颜色

颜色名

直接使用颜色对应的英文单词，编写比较简单，例如：red、green、blue、purple、orange、gray

更多颜色名参考：color

rgb(a)

使用 红、黄、蓝 这三种光的三原色进行组合，这其实相当于一个调色盘，值大小对应颜色的浓度

r 表示红色
g 表示绿色
b 表示蓝色
a 表示 透明度

css

/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */

/* 混合出任意一种颜色 */
color:rgb(138, 43, 226) /* 紫罗兰色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */

/* 也可以使用百分比表示一种颜色（用的少） */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */

opacity不透明度

opacity值为0~1的小数，0 为完全透明（整个元素）

opacity 与 rgba 的区别？
opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度
rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度

HEX(A)

HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝进行组合（六位十六进制数）

格式为：#rrggbb（r，g，b范围为0~f）

css

color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */

/* 如果每种颜色的两位都是相同的，就可以简写*/
color: #ff0011;/* 可简为：#f01 */

/* 但要注意前三位简写了，那么透明度就也要简写 */
color: #ff112299;/* 可简为：#f129 */

HSL(A)

HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为：hsl(色相, 饱和度, 亮度)

色相（H）：取值范围是 0~360 度，具体度数对应的颜色如下图：

饱和度（S）：取 0-100%，指色彩的纯度，越高色彩越纯，低则逐渐变灰
亮度（L）：取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化
透明度（A）：取值 0~1 之间，代表透明度

CSS字体

字体系列：font-family。使用 , 来使其添加后备值

css

div {
	font-family: "STCaiyun","Microsoft YaHei",sans-serif
}

字体大小：font-size
字体粗细：font-weight100~1000数字越大字越粗，100~300等同于lighter，400~500等同于normal，600及以上等同于bold
字体样式：font-style（normal、italic、oblique）

字体属性复合写法：

font：font-style font-weight font-size/line-height font-family

字体族必须是最后一位、字体大小必须是倒数第二位，且字体连写必须保留size和family这两个属性

CSS文本

文本颜色：color（重点）

css

/*关键词:*/
background-color: pink;

/*rgb:*/
background-color:rgb(255, 255, 255);

/*rgba:*/
background-color: rgba(0, 0, 0, .5);

/*十六进制*/
background-color: #ff6700;

文本间距
- 字母间距： letter-spacing
- 单词间距： word-spacing （通过空格识别词）
- 属性值为像素（ px ）正值让间距增大，负值让间距缩小
文本修饰：text-decoration
- none（无装饰线，常用）、underline（下划线）、overline（上划线）、line-through（删除线）
对齐文本：text-align
- 在HTML中，行内块元素、行内元素，会被当成文本处理，即可以使用text-align使其居中（给父元素设置）
- left（左对齐）、center（居中对其）、right（右对齐）
文本缩进：text-indent （em为当前文字倍数）
行间距（行高）：line-height

可选值：

normal ：由浏览器根据文字大小决定的一个默认值
像素( px )
数字：参考自身 font-size 的倍数（常用）
百分比：参考自身 font-size 的百分比

css

div {
	line-height: 60px;
	line-height: 1.5;
	line-height: 150%;
    }

line-height 和 height 关系
设置了 height ，那么高度就是 height 的值
不设置 height，会根据 line-height 计算高度

CSS背景

背景颜色：background-color：transparent（默认，无色透明）
背景图片：background-image：none | url（url）
- url 值是指向外部资源（比如图片）的路径。根据 CSS 规范，url 值可以选择性地使用引号
- url("路径")、url(路径)
- 大多数情况都可以省略引号。只有在特殊情况下，比如路径中包含 某些特殊字符，或者路径中包含空格，才需要使用引号来确保路径的正确解析（无论你选择是否使用引号，都不会影响样式的正确解析和渲染。只需确保指定的路径是正确的，并根据需要选择是否使用引号来提高代码的可读性和清晰度）
背景图片大小：background-size
- 数字：width height
- 百分比
- contain：1 : 1会让图片与盒子一致；非比例关系会留白
- cover：1 : 1会让图片与盒子一致；非比例关系仍会拉满，图片变形
背景平铺：background-repeat：repeat（重复平铺）| no-repeat| repeat-x | repeat-y（垂直重复）
背景图位置：background-position
- 水平：left、center、right
- 垂直：top、center、bottom
- 取单值则另一个值默认为 center
背景附着：background-attachment：scroll | fixed（固定）

复合写法：没有固定顺序，但大小必须写到位置后面

css

/*建议前四个连写，size独写*/
background: color image repeat position/size;

背景颜色半透明：background：rgba（0,0,0,0.3）盒子背景半透明

前端css语法基础 ​

element语法 ​

CSS引入方式 ​

CSS属性书写顺序 ​

CSS三大特性 ​

CSS选择器 ​

基础选择器 ​

复合选择器 ​

基本复合选择器 ​

属性选择器 ​

伪类选择器 ​

状态性伪类 ​

结构性伪类 ​

伪元素选择器 ​

CSS颜色 ​

颜色名 ​

rgb(a) ​

HEX(A) ​

HSL(A) ​

CSS字体 ​

CSS文本 ​

CSS背景 ​

前端css语法基础

element语法

CSS引入方式

CSS属性书写顺序

CSS三大特性

CSS选择器

基础选择器

复合选择器

基本复合选择器

属性选择器

伪类选择器

状态性伪类

结构性伪类

伪元素选择器

CSS颜色

颜色名

rgb(a)

HEX(A)

HSL(A)

CSS字体

CSS文本

CSS背景