CSS

1、CSS选择器写法

CSS规则 = 选择器 + 声明块

### 选择器

选择器：选中元素

1. ID选择器：选中的是对应id值的元素
2. 元素选择器
3. 类选择器

### 声明块

出现在大括号中

声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。

2、CSS书写位置

1. 内部样式表

书写在style元素中

2. 内联样式表，元素样式表

直接书写在元素的style属性中

3. 外部样式表[推荐]

将样式书写到独立的css文件中。

1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存，从而提高页面响应速度
3). 有利于代码分离（HTML和CSS），更容易阅读和维护

3、常见样式声明

# 常见样式声明

1. color

元素内部的文字颜色

**预设值**：定义好的单词

**三原色，色值**：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达，色值。

```
rgb表示法：
rgb(0, 255, 0)
hex（16进制）表示法：
#红绿蓝
```

淘宝红：#ff4400, #f40
黑色：#000000，#000
白色：#ffffff, #fff
红：#ff0000, #f00
绿：#00ff00, #0f0
蓝：#0000ff, #00f
紫：#f0f
青：#0ff
黄：#ff0
灰色：#ccc

2. background-color

元素背景颜色

3. font-size

元素内部文字的尺寸大小

1）px：像素，绝对单位，简单的理解为文字的高度占多少个像素
2）em：相对单位，相对于父元素的字体大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素（html），则使用基准字号。

> user agent，UA，用户代理（浏览器）

4. font-weight

文字粗细程度，可以取值数字，可以取值为预设值

> strong，默认加粗。

5. font-family

文字类型

必须用户计算机中存在的字体才会有效。

使用多个字体，以匹配不同环境

sans-serif，非衬线字体
   
6. font-style

字体样式，通常用它设置斜体

> i元素，em元素，默认样式，是倾斜字体; 实际使用中，通常用它表示一个图标（icon）
   
7. text-decoration

文本修饰，给文本加线。

> a元素
> del元素：错误的内容
> s元素：过期的内容

8. text-indent

首行文本缩进

9.  line-height

每行文本的高度，该值越大，每行文本的距离越大。

设置行高为容器的高度，可以让单行文本垂直居中

行高可以设置为纯数字，表示相对于当前元素的字体大小

10.  width

宽度

11.  height

高度

12.  letter-space

文字间隙

13. text-align

元素内部文字的水平排列方式

4、选择器类型

## 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

p {
  text-align: center;
  color: red;
}


## id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

这条 CSS 规则将应用于 id="para1" 的 HTML 元素：

#para1 {
  text-align: center;
  color: red;
}



## 类选择器
类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

.center {
  text-align: center;
  color: red;
}


## 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。

实例
下面的 CSS 规则会影响页面上的每个 HTML 元素：

* {
  text-align: center;
  color: blue;
}


## CSS 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。

以下CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}
最好对选择器进行分组，以最大程度地缩减代码。

如需对选择器进行分组，请用逗号来分隔每个选择器。

可以对代码中的选择器进行分组：

h1, h2, p {
  text-align: center;
  color: red;
}

## 属性选择器：https://www.w3school.com.cn/css/css_attribute_selectors.asp
## 伪类选择器：https://www.w3school.com.cn/css/css_pseudo_classes.asp
## 伪元素选择器：https://www.w3school.com.cn/css/css_pseudo_elements.asp