css的认知与样式-526互联

# 1.介绍

## 目录

- [1. 介绍](#1-介绍)

- [2. CSS语法](#2-CSS语法)

- [3. CSS注释](#3-CSS注释)

- [4. CSS中的颜色值](#4-CSS中的颜色值)

- [5. CSS长度单位](#5-CSS长度单位)

- [6. html引入CSS的三种方法](#6-html引入CSS的三种方法)

- [6.1 行内样式（内联样式）](#61-行内样式内联样式)

- [6.2 内嵌样式](#62--内嵌样式)

- [6.3 外部样式](#63-外部样式)

- [7 选择器](#7-选择器)

- [7.1 标签选择器](#71-标签选择器)

- [7.2 类选择器](#72-类选择器)

- [7.3 ID选择器](#73-ID选择器)

- [7.4 通配所有元素](#74-通配所有元素)

- [7.5 分组选择器](#75-分组选择器)

- [7.6 选择器的优先级](#76-选择器的优先级)

- [7.7 派生选择器](#77-派生选择器)

- [7.8选择器的权重](#78选择器的权重)

- [7.9 最⾼权重](#79-最权重)

- [7.10 css三⼤特性](#710-css三特性)

- [7.10.1 层叠性](#7101-层叠性)

- [7.10.2 继承性](#7102-继承性)

- [7.10.3 优先级](#7103-优先级)

#### 1. 介绍

- CSS是Cascading Style Sheets的英文缩写,即层叠样式表

- Html【Hyper Text Markup Language】

- CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).

- CSS是用于布局与美化网页的

- CSS能实现内容与样式的分离，方便团队开发

- CSS是由W3C的CSS工作组产生和维护的

- 1996年W3C正式推出了CSS1

- 1998年W3C正式推出了CSS2

- 2007年W3C正式推出了CSS2.1

- 2011年W3C正式推出了CSS3,目前仍在持续完善中

#### 2. CSS语法

CSS 由选择器、属性、属性值组成

> 选择器{

> 样式属性名1：样式属性值1;

> 样式属性名2：样式属性值2;

> .....

> }

选择器通常是指需要改变样式的 HTML 元素

属性是指希望设置的样式属性

属性和值之间用冒分开，多个属性之间加分号隔开

CSS是大小写不敏感的,在CSS语法中推荐使用小写

```html

如：body{color:red；font-size:20px}

```

#### 3. CSS注释

CSS里面的注释使用C语言编程中一样的约定方法去指定，注释的内容会被浏览器忽略，可用于为样式表加注释及调试使用。

CSS注释格式如下：

```css

div{

/* 设置宽度为200px */

width:200px;

}

```

#### 4. CSS中的颜色值

1. 十六进制表示方式 #rrggbb

> 如:#ffcc00 十六进制 0-F

1. 简单十六进制表示方式；#rgb

> 如:#fc0

1. rgba表示方式； rgba(x,x,x,a) 其中x是一个0-255的整数值

> 如:rgb(255,204,0,)

1. 百分比实现rgb形式；rgb(x%,x%,x%) 其中x是一个0-100的整数值

> 如rgb(100%,80%,0%)

1. 颜色英文单词表示方式如:red

#### 5. CSS长度单位

- 相对长度单位：

px 像素（Pixel）

% 百分比

em : Element meter 根据文档字体计算尺寸

rem :Root element meter 根据根文档（ body/html ）字体计算尺寸

ex : 文档字符“x”的高度

ch : 文档数字“0”的的宽度

vh : View height 可视范围高度

vw : View width 可视范围宽度

- 绝对长度单位：

in英寸（Inch）

pt 点（Point）

cm 厘米（Centimeter）

mm 毫米（Millimeter）

换算比例：1in = 2.54cm = 25.4 mm = 72pt

- calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度

calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

calc()函数支持 “+”, “-“, “ \*”, “/” 运算；

calc()函数使用标准的数学运算优先级规则；

calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小

calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度

calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

calc()函数支持 “+”, “-“, “ \*”, “/” 运算；

calc()函数使用标准的数学运算优先级规则；

calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小

calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

案例一：使用vh和vw实现div占满整个页面

```html

<style>

margin: 0;

padding: 0;

}

div{

width: 100vw;

height: 100vh;

background-color: aqua;

}

</style>

```

案例二：使用calc实现左侧固定，右侧自适应效果

```html

<style>

margin: 0;

padding: 0;

}

.box{

overflow: hidden;

background-color: antiquewhite;

}

.left{

width: 200px;

height: 200px;

background-color: red;

float: left;

}

.right{

width: calc(100% - 200px);

height: 300px;

background-color: green;

float: left;

}

</style>

<body>

</div>

</body>

```

#### 6. html引入CSS的三种方法

引入方式

- 行内样式（内联样式）

- 内部样式（内嵌样式）

- 外部样式

#### 6.1 行内样式（内联样式）

```html

<h1 style="color:red">这是⾏内样式的使⽤⽅式</h1>

```

#### 6.2 内嵌样式

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.text{

color:red;

}

</style>

</head>

<body>

<h1 class="text">这是内部样式引⼊⽅式</h1>

</body>

</html>

```

#### 6.3 外部样式

通过 link 标签引⼊

```html

```

其中 href 属性是外部样式表⽂件的URL

```html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

```

通过@import引入

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

@import url('../css/demo.css');

</style>

</head>

<body>

</body>

</html>

```

或者在css文件中引入

```css

@import url('../css/demo.css');

div{

color:red;

}

```

注意：@import必须在css样式的第一行进行引入，否则不生效

7 选择器

css 选择器⽤于选择你想要的元素的样式的模式

要使⽤css对HTML⻚⾯中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要⽤到CSS选择器

HTML⻚⾯中的元素就是通过CSS选择器进⾏控制的

7.1 标签选择器

选择器名称为html标签名称

```css

p { text-indent:3em; } /*当中的选择器是p*/

h1{ color:red; } /*当中的选择符h1*/

```

7.2 类选择器

选择器名称以 . 开始，后面再加上对应元素class属性值

```html

<style>

.dark-row{ background-color:#EAEAEA; }

</style>

```

7.3 ID选择器

选择器名称以#开始，后面再加上对应元素的id属性值

将对应元素的id属性值设为id选择器名称

```html

<style>

#main{ text-indent:3em; } /*ID名称main前加上一个#号*/

</style>

```

7.4 通配所有元素

```css

*{font-size:12px;color:#888}

```

7.5 分组选择器

```css

h1, h2, p {

text-align: center;

color: red;

}

```

7.6 选择器的优先级

ID选择器 >类选择器>标签选择器>通配符选择器

7.7 派生选择器

- 后代选择器: 以空格分隔

- 子元素选择器: 以>分隔

- 相邻兄弟选择器:以+分隔

- 普通兄弟选择器:以\~分隔

```html

<style>

/*相邻兄弟选择器

选中和第一个元素相邻的第二个元素*/

p + b {

color: red;

}

/*普通兄弟选择器

匹配和第一个元素后面的所有同级元素；*/

p ~ b {

color: blue;

}

</style>

<li>1

<p>这是一段段落</p>

<p>这是一段段落2</p>

</li>

<li>2

<p>这是一段段落</p>

</li>

</ul>

```

7.8选择器的权重

权值等级划分，一般来说是划分4个等级：

| 类型 | 权重 |

| -------------------------------------------------------------------------------- | ------------------------ |

| 内联样式 | 如: style=" "，权值为1000 |

| ID选择器 | 如：#name，权值为0100 |

| class类选择器，伪类和属性选择器 | 如.name，权值为0010 |

| 标签选择器和伪元素选择器 | 如div p，权值为0001 |

| 通用选择器（ \*）、子选择器（>）、相邻选择器（+）、同胞选择器（\~）、继承通用选择器（ \*）、子选择器（>）、相邻选择器（+）、同胞选择器（\~）、继承 | 如 \*，权值为0000如 \*，权值为0000 |

计算规则

| css选择器表达式 | 特指度计算结果 |

| ------------------------- | ------- |

| p | 1 |

| p.large | 11 |

| p#large | 101 |

| div p#large | 102 |

| div p#large ul.list | 113 |

| div p#large ul.li.list li | 114 |

7.9 最⾼权重

!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。

当 !important 规则被应⽤在⼀个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，⽆论它处在声明列表中的哪个位置。

- css选择规则的权值不同时，权值高的选择器优先

- css选择规则的权值相同时，后定义的选择器规则优先

- css属性后面加 !important 时，无条件绝对优先

总体来说： !important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器

注意：减少选择器的个数：“在css规则中尽可能的使用较少的选择器”。

7.10 css三⼤特性

7.10.1 层叠性

- 所谓层叠性是指多种CSS样式的叠加

- 层叠性是浏览器处理冲突的⼀个能⼒,如果⼀个属性通过两个相同选择器设置到同⼀个元素上，那么这个时候⼀个属性就会将另⼀个属性层叠掉（覆盖）

- 样式不冲突，不会层叠

- 样式冲突；就会层叠；按照优先级，决定哪个样式⽣效

#### 7.10.2 继承性

- CSS 的继承特性指的是应⽤在⼀个标签上的⼀些 CSS 属性被传到其⼦标签上；就是被⼦标签继承

- 不是所有的样式都会被⼦标签继承，字体类font- ; ⽂本类 text- ；颜⾊color ；⾏⾼line-height 等可以被继承

- a标签⽐较特殊，没有办法通过继承改变a标签的字体颜⾊

#### 7.10.3 优先级

- 权重的优先级，决定哪个样式最终⽣效

- 权重相同：后者⽣效；权重不同：权重⾼者⽣效