HTML详解连载（5）

r囧r小猫 2023-10-14 18:54 36阅读 0赞

#### HTML详解连载（5） ####

*  专栏链接 \[link\](http://t.csdn.cn/xF0H3)
 *   *  下面进行专栏介绍
 *  开始喽
 *   *  行高：设置多行文本的间距
     *   *  属性名
         *  属性值
         *  行高的测量方法
     *  行高-垂直居中
     *   *  技巧
     *  字体族
     *   *  属性名
         *  属性值
         *  示例
         *  扩展
     *  font 复合属性
     *   *  使用场景
         *  复合属性
         *  示例
         *  注意
     *  文本缩进
     *   *  属性名
         *  属性值
     *  文字对齐方式
     *   *  作用：控制内容水平对齐方式
         *  属性名：text-aline
         *  属性值
         *  水平对齐方式-图片
     *  文本修饰线
     *   *  属性名
         *  属性值
     *  color文字颜色
     *   *  属性名
         *  属性值
         *   *  颜色表示方式
             *   *  颜色关键字-颜色英文单词
                 *  十六进制表示法-\#RRGGBB
                 *  提示
     *  调试工具-谷歌浏览器
     *   *  作用
         *  打开调试工具
         *  调试工具细节
     *  复合选择器
     *   *  定义
         *  作用
     *  后代选择器
     *   *  写法
         *  子代选择器
         *   *  选择器写法
         *  并集选择器
         *   *  写法
         *  交集选择器
         *   *  写法
             *  注意
     *  伪类选择器
     *   *  鼠标悬停状态
         *   *  选择器
             *  强调
             *  伪类-超链接
             *   *  状态
                 *  注意

## 专栏链接 [link][] ##

### 下面进行专栏介绍 ###

本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记  
进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。

## 开始喽 ##

![在这里插入图片描述][ac3db430eb26450fa0c088cd8dcee9d4.png]

### 行高：设置多行文本的间距 ###

#### 属性名 ####

line-height

#### 属性值 ####

数字+px  
数字（当前标签font-size属性值的倍数）

#### 行高的测量方法 ####

从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）

### 行高-垂直居中 ###

#### 技巧 ####

行高属性值等于盒子高度属性值

### 字体族 ###

#### 属性名 ####

font-family

#### 属性值 ####

字体名

#### 示例 ####

font-family：楷体;

#### 扩展 ####

font-family属性值可以写多个字体名，各个字体间用逗号隔开，执行顺序是从左到右依次查找  
font-family属性最后设置一个字体族名，网页开发建议使用无衬线字体

### font 复合属性 ###

#### 使用场景 ####

设置网页文字公共样式

#### 复合属性 ####

属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开  
font：是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

#### 示例 ####

div {
     font:italic 700 30px/2 楷体;
    }

#### 注意 ####

字号和字体值必须书写，否则font属性不生效

### 文本缩进 ###

#### 属性名 ####

text-index

#### 属性值 ####

数字+px  
数字+em（1em=当前标签的字号大小）

### 文字对齐方式 ###

#### 作用：控制内容水平对齐方式 ####

#### 属性名：text-aline ####

#### 属性值 ####

left-左对齐（默认）  
center-居中  
right-右对齐

#### 水平对齐方式-图片 ####

text-aline本质是控制内容的对齐方式，属性要设置给内容的父级

### 文本修饰线 ###

#### 属性名 ####

text-decoration

#### 属性值 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>underline</td> 
   <td>下划线</td> 
  </tr> 
  <tr> 
   <td>line-through</td> 
   <td>删除线</td> 
  </tr> 
  <tr> 
   <td>overline</td> 
   <td>上划线</td> 
  </tr> 
 </tbody> 
</table>

### color文字颜色 ###

#### 属性名 ####

color

#### 属性值 ####

##### 颜色表示方式 #####

###### 颜色关键字-颜色英文单词 ######

rgb表示法-rgb（r,g,b)-rgb三原色 取值0-255  
rgba表示法-rgba（r,g,b,a)a表示透明度 取值0-1

###### 十六进制表示法-\#RRGGBB ######

###### 提示 ######

只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色。

### 调试工具-谷歌浏览器 ###

#### 作用 ####

检查、调式代码；帮助程序员发现代码问题、解决问题

#### 打开调试工具 ####

F12  
![在这里插入图片描述][f60f2cc469b54c569e081bf9811ffe58.png]

#### 调试工具细节 ####

1.如果是错误的属性有黄色叹号  
2.CSS属性的前面有多选框，如果勾选：属性生效

### 复合选择器 ###

#### 定义 ####

由两个或多个基础选择器，通过不同的方式组合而成

#### 作用 ####

更准确、更高效的选择目标元素（标签）

### 后代选择器 ###

选中某元素的后代元素

#### 写法 ####

父选择器 子选择器\{CSS属性\}，父子选择器之间用空格隔开。

#### 子代选择器 ####

选中某元素的子代元素（最近的子级）

##### 选择器写法 #####

父选择器>子选择器\{CSS属性\}，父子选择器之间用>隔开

#### 并集选择器 ####

选中多组标签设置相同的样式

##### 写法 #####

选择器1，选择器2，…选择器N\{CSS属性\}，选择器之间用，隔开

#### 交集选择器 ####

选中同时满足多个条件的元素

##### 写法 #####

选择器1选择器2\{CSS属性\}，选择器之间连携，没有任何符号

##### 注意 #####

如果交集选择器中由标签选择器，标签选择器必须书写在最前面

![在这里插入图片描述][69ee19c5dbfa4a72a30df7416d6a4d5c.png]

### 伪类选择器 ###

伪类表示元素状态，选中元素的某个状态设置样式

#### 鼠标悬停状态 ####

##### 选择器 #####

hover{CSS属性}

##### 强调 #####

任何标签都可以设置鼠标悬停状态

##### 伪类-超链接 #####

###### 状态 ######

:link	访问前
    :visited访问后
    :hover	鼠标悬停
    :action 点击时（激活）

###### 注意 ######

如果要给超链接设置以上四个状态，应按照LVHA的顺序书写

[link]: http://t.csdn.cn/xF0H3
[ac3db430eb26450fa0c088cd8dcee9d4.png]: https://img-blog.csdnimg.cn/ac3db430eb26450fa0c088cd8dcee9d4.png
[f60f2cc469b54c569e081bf9811ffe58.png]: https://img-blog.csdnimg.cn/f60f2cc469b54c569e081bf9811ffe58.png
[69ee19c5dbfa4a72a30df7416d6a4d5c.png]: https://img-blog.csdnimg.cn/69ee19c5dbfa4a72a30df7416d6a4d5c.png