前端：一、CSS

「爱情、让人受尽委屈。」 2023-10-04 19:27 37阅读 0赞

### 一、css基本概念 ###

1.1css认识

（1）css定义：层叠样式表

（2）css的作用： 给页面中的Html标签设置样式

1.2css引入方式

1.内嵌式
    <style> 
    p {
    color: red; 
    } 
    </style>
    
    2.外联式
    <link rel="stylesheet" href="./style.css">
    
    3.行内式
    <p style="color: green;">我也是一个p标签</p>

### 二、选择器 ###

2.1标签选择器

Ø 结构：**标签名** \{ css属性名：属性值； \}

Ø 作用：通过标签名，找到页面中所有这类标签，设置样式

Ø 注意点：

1.  标签选择器选择的是一类标签，而不是单独某一个
2.  标签选择器无论嵌套关系有多深，都能找到对应的标签

2.2类选择器

Ø 结构：**.\***\*类名\*\* \{ css属性名：属性值； \}

Ø 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

Ø 注意点：

1.  所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2.  类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3.  一个标签可以同时有多个类名，类名之间以空格隔开
4.  类名可以重复，一个类选择器可以同时选中多个标签

2.3 id选择器

Ø 结构：**\#id\***\*属性值\*\* \{ css属性名：属性值； \}

Ø 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

Ø 注意点：

1.  所有标签上都有id属性
2.  id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3.  一个标签上只能有一个id属性值
4.  一个id选择器只能选中一个标签

2.4通配符选择器

Ø 结构：**\*** \{ css属性名：属性值； \}

Ø 作用：找到页面中所有的标签，设置样式

Ø 注意点：

1.  开发中使用极少，只会在极特殊情况下才会用到
2.  在基础班小页面中可能会用于去除标签默认的margin和padding

### 三、字体与文本样式 ###

**3.1** 字体样式

（1）字体大小：font-size

（2）字体粗细：font-weight

（3）字体样式：font-style

（4）字体类型：font-family

**3.2** 文本样式

（1）文本缩进：text-indent

（2）文本水平对齐方式：text-align

（3）文本修饰：text-decoration

3.3 line-height行高

Ø 应用：

（1）让单行文本垂直居中可以设置 line-height : 文字父元素高度

（2）网页精准布局时，会设置 line-height : 1 可以取消上下间距

3.4颜色

（1）文字颜色：color

（2）背景颜色：background-color

四种表示方式：关键词、rgb、rgba、十六进制

### 四.复合选择器 ###

4.1后代选择器：空格

Ø 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素

Ø 选择器语法：**选择器\***\*1\*\* **选择器\***\*2 \{ css \}\*\*

Ø 结果：• 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

Ø 注意点：

1.  后代包括：儿子、孙子、重孙子……
2.  后代选择器中，选择器与选择器之前通过 空格 隔开

**4.2** **子代选择器** **>**

Ø 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素

Ø 选择器语法：**选择器\***\*1 >\*\* **选择器\***\*2 \{ css \}\*\*

Ø 结果：

• 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

Ø 注意点：

1.  子代只包括：儿子
2.  子代选择器中，选择器与选择器之前通过 **>** 隔开

**4.3** **并集选择器** **,**

Ø 作用：同时选择多组标签，设置相同的样式

Ø 选择器语法：**选择器\***\*1\*\* **， 选择器\***\*2 \{ css \}\*\*

Ø 结果：

• 找到 选择器1 和 选择器2 选中的标签，设置样式

Ø 注意点：

1.  并集选择器中的每组选择器之间通过 **,** 分隔
2.  并集选择器中的每组选择器可以是基础选择器或者复合选择器
3.  并集选择器中的每组选择器通常一行写一个，提高代码的可读性
4.

4.4 hover伪类选择器

Ø 作用：选中鼠标**悬停**在元素上的**状态**，设置样式

Ø 选择器语法：选择器**:hover** \{ css \}

Ø 注意点：

1.  伪类选择器选中的元素的**某种状态**

4.5结构伪类选择器

**（**1）作用与优势：

作用：根据元素在HTML中的结构关系查找元素

优势：减少对于HTML中类的依赖，有利于保持代码整洁

场景：常用于查找某父级选择器中的子元素

**（**2）选择器

E：firdt-child\{\}

E: last-child\{\}

E：nth-child(n)\{\}

E：nth-last-child(n)\{\}

Ø n的注意点：

1.  n为：0、1、2、3、4、5、6、……
2.  通过n可以组成常见公式
    
    偶数 2n、even 奇数2n+1、2n-1、odd
    
    前五个 -n+5 第五个往后 n+5

### 五、背景 ###

**5.1** **背景颜色**

Ø属性名：**background-color**

Ø 属性值：

• 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……

Ø 注意点：

• 背景颜色默认值是**透明**： rgba(0,0,0,0) 、transparent

• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

**5.2** **背景图片**

Ø属性名：**background-image**

Ø 属性值：background-imgge:url（图片地址）

Ø 注意点：

1.背景图片中url中可以省略引号

2.背景图片默认是在水平和垂直方向平铺的

3.背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

**5.3** **背景平铺**

Ø属性名：**background-repeat**（bgr）

Ø 属性值：repeat,no-repeat,repeat-x,repeat-y

**5.4** **背景位置**

Ø属性名：**background-position**

Ø 属性值：**background-position**：水平方向位置 垂直方向位置

1.方位名词（水平：left，center，right 垂直：top，center，bottom）

2.数字＋px（坐标：圆点（0，0）盒子的左上角）

Ø 注意点：

• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

**5.5** **背景相关属性连写**

Ø属性名：**background**

Ø 属性值：

• 单个属性值的合写，取值之间以空格隔开

Ø 书写顺序：

•推荐：background：color image repeat position

Ø 省略问题：

• 可以按照需求省略

• 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()

Ø 注意点

如果需要设置单独的样式和连写① 要么把单独的样式写在连写的下面

② 要么把单独的样式写在连写的里面

### 六、显示模式 ###

**6.1** 块级元素

Ø属性：display：**block**

Ø 显示特点：

1.  独占一行（一行只能显示一个）
2.  宽度默认是父元素的宽度，高度默认由内容撑开
3.  可以设置宽高

Ø 代表标签：

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

6.2行内元素

Ø属性：display：**inline**

Ø 显示特点：

1.  一行可以显示多个
2.  宽度和高度默认由内容撑开
3.  不可以设置宽高

Ø 代表标签：

a、span 、b、u、i、s、strong、ins、em、del……

6.3行内块元素

Ø属性：display：**inline-block**

Ø 显示特点：

1.  一行可以显示多个
2.  可以设置宽高

Ø 代表标签：

input、textarea、button、select……

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

6.4元素显示模式转换

Ø 目的：改变元素默认的显示特点，让元素符合布局要求

Ø 语法：display：inline-block 转成行内块元素

display：inline 转成行内元素

display：block 转成块元素

### 七、盒子模型 ###

**盒子模型**

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域 （border）、外边距区域（margin ）构成，这就是 盒子模型

**7.1** **内容区域的宽度和高度**

Ø 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小

Ø属性：width / height

Ø 常见取值：数字+px

7.2 边框（border ）

（1）边框（border）**单个属性**

Ø 作用：给设置边框粗细、边框样式、边框颜色效果

Ø 单个属性：border-width\\border-style\\border-color

**（**2）边框（border） **连写形式**

Ø属性名：border

Ø 属性值：单个取值的连写，取值之间以空格隔开

如：border : 10px solid red;

（3）边框（border） **单方向设置**

Ø 场景：只给盒子的某个方向单独设置边框

Ø 属性名：border - 方位名词

Ø 属性值：连写的取值

7.3 内边距（ **padding** **）**

Ø 作用：设置 边框 与 内容区域 之间的距离

Ø属性名：padding

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！

7.4 外边距（margin）

Ø 作用：设置边框以外，盒子与盒子之间的距离

Ø属性名：margin

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！

### 八、浮动 ###

（1）作用：网页布局

• 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右

Ø属性名：**float**

Ø 属性值：left，right

Ø 特点：

1.  浮动元素会脱离标准流（简称：脱标），在标准流中不占位置，相当于从地面飘到了空中
2.  浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.  浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4.  浮动元素会受到上面元素边界的影响
5.  浮动元素有特殊的显示效果 （一行可以显示多个 ，可以设置宽高 ）

Ø 注意点：

浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中

（2）清除浮动clear:both

Ø 含义：清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

Ø 原因：

子元素浮动后脱标 → 不占位置

Ø 目的：

需要父元素有高度，从而不影响其他网页元素的布局

方法：

**① 直接设置父元素高度**

② 给父元素设置overflow : hidden