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

  

CSS

上一篇:webpack运行时遇到的问题


下一篇:java密码MD5加密