【第二部分 | CSS】2：点缀一下html元素

深碍√TFBOYSˉ_ 2023-09-26 09:53 28阅读 0赞

**目录**

| 前言

| CSS字体属性

设置字体样式 font-family

设置字体大小 font-size

设置字体粗细 font-weight

设置字体风格 font-style （斜体）

上述四个属性合起来写

| CSS文本属性

设置字体颜色 color

设置水平对齐方式 text-align

设置文本装饰 text-decoration

设置文本缩进 text-indent

设置行间距 line-height

文本属性总结

| CSS背景

背景颜色

背景图片 · 基础

背景图片 · 平铺

背景图片 · 位置 及 坐标

背景图片 · 固定 or 滚动

上述 5 种属性连写 的语法格式

背景透明、填充

总结

| CSS 的引入方式

内部样式表（嵌入式）

行内样式表（行内式）

外部样式表（链接式）

引入方式总结

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

### | 前言 ###

在本专栏中的【第一部分 | HTML】中，我们学习了HTML的基本用法。

默认的HTML自带部分CSS样式，但是那太丑了，我们本节学习一下给HTML内的元素加个皮肤。

###    **| CSS字体属性** ###

#### **设置字体样式 font-family** ####

*  在style中使用 **font-family**设置字体的样式 如 “宋体、雅黑”
 *  若在 font-family 中定义了多个字体，则按照 **从左到右，找到第一个找得到的字体样式** 进行展示
 *  该样式理论上是在 style 标签中定义，但是实际开发的时候 我们也可以选择把 <body> 标签定义上字体样式
    
    ![420915dff7c4466ca4d4857d66ecff6d.png][]

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

#### **设置字体大小 font-size** ####

*  不要忘记 size大小的单位为像素（px）
 *  特例：标题标签比较特殊，需要特别指定大小

![264c7417511647f5a204ca663a5241de.png][]

![5e961ba5a8cb48cf86908a94917e9efc.png][]

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

#### 设置字体粗细 font-weight ####

![ebfbcd1708ea43b9a956cc1b15de814d.png][]

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

#### **设置字体风格 font-style （斜体）** ####

注意： 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

![892f3f766d9e437eb80cc154b4cc5b73.png][]

#### 上述四个属性合起来写 ####

**目前学过的所有字体属性 小结**

![5782b49322a2451fb3319ecc47dd187d.png][]

### **| CSS文本属性** ###

字体属性：文字的样式、大小、粗细、风格等……

文本属性：文字的颜色、对齐方式、装饰文本、文本缩进、行间距等……

#### **设置字体颜色 color** ####

![9bff6a83bbb74dfebeac4a99a3e3915f.png][]

![8cd11770e6f141da8295aa93433b0eac.png][]

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

#### **设置水平对齐方式 text-align** ####

只能实现水平的对齐方式。

![0c1bd075612f40bdafa15bcf79d7cec8.png][]

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

#### 设置文本装饰 text-decoration ####

![9d6d510b494f4c998e07d2bf9ad853fe.png][]

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

#### **设置文本缩进 text-indent** ####

文本缩进有两种单位：px（像素）和em（相对单位）

![2e8d9fb0009e4c14b9d97955d186ed15.png][]

####    **设置行间距 line-height** ####

**语法**

![7484555f209b4b969ec907f59f41ab4f.png][]

![4028f707ce954088900b2f98628783c2.png][]

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

#### 文本属性总结 ####

![06bdb6a561124e63a7aa1a7a33fbf9b9.png][]

###  ###

###    **| CSS背景** ###

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

#### **背景颜色** ####

语法 （默认颜色值为透明：transparent）

![4e521419d9fe4cb1a8229a7b9d27b525.png][]

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

#### **背景图片 · 基础** ####

基本语法

background-image 属性描述了元素的背景图像。

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

![4889732cc18440f2b08c802fc9a4e3c7.png][]

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

#### **背景图片 · 平铺** ####

基本语法

background-repeat 属性规定了当 “图片大小” 小于 “容器大小” 的时候，图片平铺的方式（以何种方式重复）

![1a7073fa8a2b48c8844d9f717ea62a40.png][]

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

#### **背景图片 · 位置 及 坐标** ####

基本语法

![fe00f410ffca47138753d598113e835b.png][]

坐标位置 x y 的坐标值

*  第一类坐标值：方位名词 **top center bottom left right**
    
     *  如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
     *  如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
 *  第二类坐标值：百分数，由浮点数字和单位标识符组成的长度值 如**以图片左上角为原点，距离左侧、右侧 20px 50px**
    
     *  如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
     *  如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

#### 背景图片 · 固定 or 滚动 ####

背景图片固定的话，可以制作 [视差滚动效果][Link 1]

![470097372e494c80ad9e4034857836be.png][]

#### **上述 5 种属性连写 的语法格式** ####

相较于 \[\]，背景的连写没有特定的属性书写顺序，但一般约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

![de1732fbfe2d4fe7b06ecbcf1110acca.png][]

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

#### **背景透明、填充** ####

语法: **rgba( 3个rgb坐标 ，透明度 ) alpha数值越小越透明**

注意:background: rgba( x1, x2, x3, x4, alpha透明度) 不能和 background-color 同用

![7d2fd08be1d14fa5b44de6ae3cc6e19e.png][]

#### 总结 ####

![a3539676b3a44aba9c1f8ccd0a7c77a8.png][]

### | CSS 的引入方式 ###

#### 内部样式表（嵌入式） ####

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中

![05071873b8ec4c8abeec0727860ebd5e.png][]

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

#### 行内样式表（行内式） ####

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式

![462f1384ea4146ae87d3484d9105047a.png][]

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

#### **外部样式表（链接式）** ####

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入 到 HTML 页面中使用.

引入外部样式 的步骤

1.  新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2.  在 HTML 页面中，使用 标签引入这个文件。 《 link rel="stylesheet" href="css文件路径" 》

示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="css/6.外部样式表.css">
    </head>
    <body>
        <p id="id01">使用外部样式表引入css文件</p>
    </body>
    </html>

/*css内的所有内容 等价于原先写在 <style> 标签中的内容*/
    #id01{
        color: pink;
    }

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

#### 引入方式总结 ####

![92db2017c94d4a268f4585cbfff6ad6f.png][]

[420915dff7c4466ca4d4857d66ecff6d.png]: https://img-blog.csdnimg.cn/420915dff7c4466ca4d4857d66ecff6d.png
[264c7417511647f5a204ca663a5241de.png]: https://img-blog.csdnimg.cn/264c7417511647f5a204ca663a5241de.png
[5e961ba5a8cb48cf86908a94917e9efc.png]: https://img-blog.csdnimg.cn/5e961ba5a8cb48cf86908a94917e9efc.png
[ebfbcd1708ea43b9a956cc1b15de814d.png]: https://img-blog.csdnimg.cn/ebfbcd1708ea43b9a956cc1b15de814d.png
[892f3f766d9e437eb80cc154b4cc5b73.png]: https://img-blog.csdnimg.cn/892f3f766d9e437eb80cc154b4cc5b73.png
[5782b49322a2451fb3319ecc47dd187d.png]: https://img-blog.csdnimg.cn/5782b49322a2451fb3319ecc47dd187d.png
[9bff6a83bbb74dfebeac4a99a3e3915f.png]: https://img-blog.csdnimg.cn/9bff6a83bbb74dfebeac4a99a3e3915f.png
[8cd11770e6f141da8295aa93433b0eac.png]: https://img-blog.csdnimg.cn/8cd11770e6f141da8295aa93433b0eac.png
[0c1bd075612f40bdafa15bcf79d7cec8.png]: https://img-blog.csdnimg.cn/0c1bd075612f40bdafa15bcf79d7cec8.png
[9d6d510b494f4c998e07d2bf9ad853fe.png]: https://img-blog.csdnimg.cn/9d6d510b494f4c998e07d2bf9ad853fe.png
[2e8d9fb0009e4c14b9d97955d186ed15.png]: https://img-blog.csdnimg.cn/2e8d9fb0009e4c14b9d97955d186ed15.png
[7484555f209b4b969ec907f59f41ab4f.png]: https://img-blog.csdnimg.cn/7484555f209b4b969ec907f59f41ab4f.png
[4028f707ce954088900b2f98628783c2.png]: https://img-blog.csdnimg.cn/4028f707ce954088900b2f98628783c2.png
[06bdb6a561124e63a7aa1a7a33fbf9b9.png]: https://img-blog.csdnimg.cn/06bdb6a561124e63a7aa1a7a33fbf9b9.png
[4e521419d9fe4cb1a8229a7b9d27b525.png]: https://img-blog.csdnimg.cn/4e521419d9fe4cb1a8229a7b9d27b525.png
[4889732cc18440f2b08c802fc9a4e3c7.png]: https://img-blog.csdnimg.cn/4889732cc18440f2b08c802fc9a4e3c7.png
[1a7073fa8a2b48c8844d9f717ea62a40.png]: https://img-blog.csdnimg.cn/1a7073fa8a2b48c8844d9f717ea62a40.png
[fe00f410ffca47138753d598113e835b.png]: https://img-blog.csdnimg.cn/fe00f410ffca47138753d598113e835b.png
[Link 1]: https://im.qq.com/index
[470097372e494c80ad9e4034857836be.png]: https://img-blog.csdnimg.cn/470097372e494c80ad9e4034857836be.png
[de1732fbfe2d4fe7b06ecbcf1110acca.png]: https://img-blog.csdnimg.cn/de1732fbfe2d4fe7b06ecbcf1110acca.png
[7d2fd08be1d14fa5b44de6ae3cc6e19e.png]: https://img-blog.csdnimg.cn/7d2fd08be1d14fa5b44de6ae3cc6e19e.png
[a3539676b3a44aba9c1f8ccd0a7c77a8.png]: https://img-blog.csdnimg.cn/a3539676b3a44aba9c1f8ccd0a7c77a8.png
[05071873b8ec4c8abeec0727860ebd5e.png]: https://img-blog.csdnimg.cn/05071873b8ec4c8abeec0727860ebd5e.png
[462f1384ea4146ae87d3484d9105047a.png]: https://img-blog.csdnimg.cn/462f1384ea4146ae87d3484d9105047a.png
[92db2017c94d4a268f4585cbfff6ad6f.png]: https://img-blog.csdnimg.cn/92db2017c94d4a268f4585cbfff6ad6f.png