美化网页常用属性

川长思鸟来 2023-09-27 21:50 107阅读 0赞

**目录**

1.编辑网页文本

1.1标签

1.2字体属性

1.2.1字体类型

1.2.2字体大小

1.2.3字体风格

1.2.4字体粗细

1.2.5 font 属性

1.3 文本排版

1.3.1水平对齐

1.3.2垂直对齐

1.3.3首行缩进

1.3.4文本行高

1.4文本修饰

1.4.1文本颜色

1.4.2文本装饰

1.4.3文本阴影

2.超链接伪类

2.1 hover 悬停

2.2 link 未访问样式

2.3 其他样式

3.列表样式

4.背景样式

4.1背景颜色

4.2背景图像

4.3背景重复

4.4背景定位

--------------------

## 1.编辑网页文本 ##

### 1.1<span>标签 ###

对特殊文本进行单独标记，便于单独修饰

示例：![092c98b310884874809d3e955e0e2086.png][]

![8decfb126ae4421593d6b92fc7065a61.png][]

结果：![61770badc2fe442bb2e5f63b078fc00e.png][]

### 1.2字体属性 ###

#### 1.2.1字体类型 ####

代码：![063667e7c3244dcfab08382858601e39.png][]

结果：![310fa95d2e0944d0be2bdcb962cef789.png][]

#### 1.2.2字体大小 ####

代码 ：![59b19ab189934e1b8c96e3300b7f3e4f.png][]

结果： ![f1a5a8624a4a46f3b7a060207d8866a8.png][]

#### 1.2.3字体风格 ####

代码：![6f38de4fa32846be94c295a6b9397f32.png][]

![bc0a46c4e8854cf3b7321146f8037396.png][]

结果： ![f747cf3d56674191b20cee78c6616563.png][]

#### 1.2.4字体粗细 ####

相关属性：![31fb6db8337340caa361bddb924edff5.png][]

代码：![3b8ffc6a45844666a0cb8dd87300b849.png][]

![a047ca9203594c6b9c0bbf41eb834018.png][]

结果：![0da59b486ff942c7bd9220c598efc38c.png][]

#### 1.2.5 font 属性 ####

代码：![031478c7daa74d58b04bebf54ae849bf.png][]

![f9282c963f4d4adc83528e96f88247ca.png][]

结果：![d0de295795f345e9ab3f44fbc35d58a9.png][]

### 1.3 文本排版 ###

#### 1.3.1水平对齐 ####

代码：![6836b88ce3144ccfb711635090fbea8b.png][]

![524acd5bd79f4796aae59ef904fb0888.png][]

结果：![f4c8bee7a98b4f0182aded3437f63a97.png][]

#### 1.3.2垂直对齐 ####

代码：![3d43d7b5ab9b4bf7a4dc177aedc52901.png][]

![112f119184a14e788c6af8f26f1fd90b.png][]

结果：![79fa25a463a040bdb5ae89d7c3b32646.png][]

#### 1.3.3首行缩进 ####

代码：![54ca9547af624ef0a3b30d8f41a8a4fb.png][]

![31e566245b7d4ca59d751ec0f71e1198.png][]

结果：![76f14d59d00c4b1fa7f1abea79f4d5ce.png][]

#### 1.3.4文本行高 ####

代码：![17997b1e0dd24697bdf182292655d6c1.png][]

![0a978f9d5bb34278a0da4a6bb8beeb88.png][]

结果：![901521fa97cf4256936dc66883883bb4.png][]

### 1.4文本修饰 ###

#### 1.4.1文本颜色 ####

代码：![7f7cd467be564d04b3e5172850a6e422.png][]

![f24d06f181c84673b62b9216c17a1d63.png][]

结果：![ce3ca42fb6e24ec8aa820e228745820f.png][]

#### 1.4.2文本装饰 ####

代码：![5339295b32374845a800eeb30bc01ae3.png][]

![def2d9e5dc144b68a00393595ccf7138.png][]

结果：![a5c1839543b144089292d57c8c320354.png][]

#### 1.4.3文本阴影 ####

代码：![ceaaca2e3d0c4a7c8f2645f406fdc801.png][]

结果：![f25da15d87f8462eb5776373fc75bace.png][]

## 2.超链接伪类 ##

### 2.1 hover 悬停 ###

代码：![ecb62152e5c043268de93be9ff263926.png][]

![3aae52132b114b72846d3be2c4cd0ef9.png][]

结果：![debf09f4e7a448469a98c2a9281b4ace.png][]

### 2.2 link 未访问样式 ###

代码：![77a7f825638a46d9812610f71e9c21e7.png][]

![dd806ec8bb7f4687983cff668759eeea.png][]

结果：![ec1f1356e76044958b667417b094b5f1.png][]

### 2.3 其他样式 ###

（1）除了hover，link两个常用样式以外，还有visited（已访问）和active（点击时）两种

（2）如果使用了link和visited，要将hover放在link与visited之后

## 3.列表样式 ##

代码：![b25615012de743db9481b4a76aaeed03.png][]

![9d590bcb62da485ba0d102f5779f69b4.png][]

结果：![78a025a6e36a41ba9c0600c088045cce.png][]

## 4.背景样式 ##

### 4.1背景颜色 ###

代码：![6ab11c1ebff04232bd3b893f44f008f4.png][]

结果：![5d5c1d00574441c7acee329224c655c3.png][]

### 4.2背景图像 ###

代码：![ab0f6a1fd2164a45a07992a3b44c9a5e.png][]

结果：![b4bac1d299e74af6bf55c1a794b60cc4.png][]

### 4.3背景重复 ###

代码：![c38caf9284214ff59edfd02e72ad98fa.png][]

结果：![bac97d781a284959afbc4a5d5d5a5356.png][]

### 4.4背景定位 ###

代码：![923749002e80482ba59202af2e0704b1.png][]

![ba2412ab8c454ed9a3066180a862f4ba.png][]

结果：![d11d9f46fd3740299487bf04c41b7fbc.png][]

[092c98b310884874809d3e955e0e2086.png]: https://img-blog.csdnimg.cn/092c98b310884874809d3e955e0e2086.png
[8decfb126ae4421593d6b92fc7065a61.png]: https://img-blog.csdnimg.cn/8decfb126ae4421593d6b92fc7065a61.png
[61770badc2fe442bb2e5f63b078fc00e.png]: https://img-blog.csdnimg.cn/61770badc2fe442bb2e5f63b078fc00e.png
[063667e7c3244dcfab08382858601e39.png]: https://img-blog.csdnimg.cn/063667e7c3244dcfab08382858601e39.png
[310fa95d2e0944d0be2bdcb962cef789.png]: https://img-blog.csdnimg.cn/310fa95d2e0944d0be2bdcb962cef789.png
[59b19ab189934e1b8c96e3300b7f3e4f.png]: https://img-blog.csdnimg.cn/59b19ab189934e1b8c96e3300b7f3e4f.png
[f1a5a8624a4a46f3b7a060207d8866a8.png]: https://img-blog.csdnimg.cn/f1a5a8624a4a46f3b7a060207d8866a8.png
[6f38de4fa32846be94c295a6b9397f32.png]: https://img-blog.csdnimg.cn/6f38de4fa32846be94c295a6b9397f32.png
[bc0a46c4e8854cf3b7321146f8037396.png]: https://img-blog.csdnimg.cn/bc0a46c4e8854cf3b7321146f8037396.png
[f747cf3d56674191b20cee78c6616563.png]: https://img-blog.csdnimg.cn/f747cf3d56674191b20cee78c6616563.png
[31fb6db8337340caa361bddb924edff5.png]: https://img-blog.csdnimg.cn/31fb6db8337340caa361bddb924edff5.png
[3b8ffc6a45844666a0cb8dd87300b849.png]: https://img-blog.csdnimg.cn/3b8ffc6a45844666a0cb8dd87300b849.png
[a047ca9203594c6b9c0bbf41eb834018.png]: https://img-blog.csdnimg.cn/a047ca9203594c6b9c0bbf41eb834018.png
[0da59b486ff942c7bd9220c598efc38c.png]: https://img-blog.csdnimg.cn/0da59b486ff942c7bd9220c598efc38c.png
[031478c7daa74d58b04bebf54ae849bf.png]: https://img-blog.csdnimg.cn/031478c7daa74d58b04bebf54ae849bf.png
[f9282c963f4d4adc83528e96f88247ca.png]: https://img-blog.csdnimg.cn/f9282c963f4d4adc83528e96f88247ca.png
[d0de295795f345e9ab3f44fbc35d58a9.png]: https://img-blog.csdnimg.cn/d0de295795f345e9ab3f44fbc35d58a9.png
[6836b88ce3144ccfb711635090fbea8b.png]: https://img-blog.csdnimg.cn/6836b88ce3144ccfb711635090fbea8b.png
[524acd5bd79f4796aae59ef904fb0888.png]: https://img-blog.csdnimg.cn/524acd5bd79f4796aae59ef904fb0888.png
[f4c8bee7a98b4f0182aded3437f63a97.png]: https://img-blog.csdnimg.cn/f4c8bee7a98b4f0182aded3437f63a97.png
[3d43d7b5ab9b4bf7a4dc177aedc52901.png]: https://img-blog.csdnimg.cn/3d43d7b5ab9b4bf7a4dc177aedc52901.png
[112f119184a14e788c6af8f26f1fd90b.png]: https://img-blog.csdnimg.cn/112f119184a14e788c6af8f26f1fd90b.png
[79fa25a463a040bdb5ae89d7c3b32646.png]: https://img-blog.csdnimg.cn/79fa25a463a040bdb5ae89d7c3b32646.png
[54ca9547af624ef0a3b30d8f41a8a4fb.png]: https://img-blog.csdnimg.cn/54ca9547af624ef0a3b30d8f41a8a4fb.png
[31e566245b7d4ca59d751ec0f71e1198.png]: https://img-blog.csdnimg.cn/31e566245b7d4ca59d751ec0f71e1198.png
[76f14d59d00c4b1fa7f1abea79f4d5ce.png]: https://img-blog.csdnimg.cn/76f14d59d00c4b1fa7f1abea79f4d5ce.png
[17997b1e0dd24697bdf182292655d6c1.png]: https://img-blog.csdnimg.cn/17997b1e0dd24697bdf182292655d6c1.png
[0a978f9d5bb34278a0da4a6bb8beeb88.png]: https://img-blog.csdnimg.cn/0a978f9d5bb34278a0da4a6bb8beeb88.png
[901521fa97cf4256936dc66883883bb4.png]: https://img-blog.csdnimg.cn/901521fa97cf4256936dc66883883bb4.png
[7f7cd467be564d04b3e5172850a6e422.png]: https://img-blog.csdnimg.cn/7f7cd467be564d04b3e5172850a6e422.png
[f24d06f181c84673b62b9216c17a1d63.png]: https://img-blog.csdnimg.cn/f24d06f181c84673b62b9216c17a1d63.png
[ce3ca42fb6e24ec8aa820e228745820f.png]: https://img-blog.csdnimg.cn/ce3ca42fb6e24ec8aa820e228745820f.png
[5339295b32374845a800eeb30bc01ae3.png]: https://img-blog.csdnimg.cn/5339295b32374845a800eeb30bc01ae3.png
[def2d9e5dc144b68a00393595ccf7138.png]: https://img-blog.csdnimg.cn/def2d9e5dc144b68a00393595ccf7138.png
[a5c1839543b144089292d57c8c320354.png]: https://img-blog.csdnimg.cn/a5c1839543b144089292d57c8c320354.png
[ceaaca2e3d0c4a7c8f2645f406fdc801.png]: https://img-blog.csdnimg.cn/ceaaca2e3d0c4a7c8f2645f406fdc801.png
[f25da15d87f8462eb5776373fc75bace.png]: https://img-blog.csdnimg.cn/f25da15d87f8462eb5776373fc75bace.png
[ecb62152e5c043268de93be9ff263926.png]: https://img-blog.csdnimg.cn/ecb62152e5c043268de93be9ff263926.png
[3aae52132b114b72846d3be2c4cd0ef9.png]: https://img-blog.csdnimg.cn/3aae52132b114b72846d3be2c4cd0ef9.png
[debf09f4e7a448469a98c2a9281b4ace.png]: https://img-blog.csdnimg.cn/debf09f4e7a448469a98c2a9281b4ace.png
[77a7f825638a46d9812610f71e9c21e7.png]: https://img-blog.csdnimg.cn/77a7f825638a46d9812610f71e9c21e7.png
[dd806ec8bb7f4687983cff668759eeea.png]: https://img-blog.csdnimg.cn/dd806ec8bb7f4687983cff668759eeea.png
[ec1f1356e76044958b667417b094b5f1.png]: https://img-blog.csdnimg.cn/ec1f1356e76044958b667417b094b5f1.png
[b25615012de743db9481b4a76aaeed03.png]: https://img-blog.csdnimg.cn/b25615012de743db9481b4a76aaeed03.png
[9d590bcb62da485ba0d102f5779f69b4.png]: https://img-blog.csdnimg.cn/9d590bcb62da485ba0d102f5779f69b4.png
[78a025a6e36a41ba9c0600c088045cce.png]: https://img-blog.csdnimg.cn/78a025a6e36a41ba9c0600c088045cce.png
[6ab11c1ebff04232bd3b893f44f008f4.png]: https://img-blog.csdnimg.cn/6ab11c1ebff04232bd3b893f44f008f4.png
[5d5c1d00574441c7acee329224c655c3.png]: https://img-blog.csdnimg.cn/5d5c1d00574441c7acee329224c655c3.png
[ab0f6a1fd2164a45a07992a3b44c9a5e.png]: https://img-blog.csdnimg.cn/ab0f6a1fd2164a45a07992a3b44c9a5e.png
[b4bac1d299e74af6bf55c1a794b60cc4.png]: https://img-blog.csdnimg.cn/b4bac1d299e74af6bf55c1a794b60cc4.png
[c38caf9284214ff59edfd02e72ad98fa.png]: https://img-blog.csdnimg.cn/c38caf9284214ff59edfd02e72ad98fa.png
[bac97d781a284959afbc4a5d5d5a5356.png]: https://img-blog.csdnimg.cn/bac97d781a284959afbc4a5d5d5a5356.png
[923749002e80482ba59202af2e0704b1.png]: https://img-blog.csdnimg.cn/923749002e80482ba59202af2e0704b1.png
[ba2412ab8c454ed9a3066180a862f4ba.png]: https://img-blog.csdnimg.cn/ba2412ab8c454ed9a3066180a862f4ba.png
[d11d9f46fd3740299487bf04c41b7fbc.png]: https://img-blog.csdnimg.cn/d11d9f46fd3740299487bf04c41b7fbc.png