【web前端开发】CSS文字和文本样式

ゝ一世哀愁。 2023-09-27 15:26 167阅读 0赞

#### 文章目录 ####

*  前言
 *  字体大小
 *  字体粗细
 *  字体样式
 *  字体
 *  font复合属性
 *  文本缩进
 *  文本水平对齐方式
 *  文本修饰线
 *  行高
 *  颜色
 *  标签水平居中
 *  ⭐思维导图

## 前言 ##

本篇文章主要讲解CSS中的文字和文本样式及一些实用技巧.文章最后有思维导图.

## 字体大小 ##

`属性名:font-size`  
取值: 数字+px

注意:

*  谷歌浏览器默认字体大小为16px
 *  单位需要设置,否则无效

## 字体粗细 ##

`属性名: font-weight`

**取值有两种**:

1.  关键字: normal(正常) bold(加粗)
2.  数字100~900: 400(正常) 700(加粗)

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

加粗标签:<strong></strong>
    粗体标签:<b></b>

虽然在HTML中,strong和b标签也有加粗的效果,不过还是建议使用CSS设置字体加粗的样式

## 字体样式 ##

这里的字体样式指的是否倾斜

`属性名:font-style`  
取值: normal(正常)是默认值 italic(倾斜)

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

## 字体 ##

`属性名:font-family`  
常见取值:具体字体1,具体字体2,具体字体3,…,字体系列

*  常见字体:微软雅黑,黑体,宋体,楷体等
 *  字体系列:sans-serif, serif,monospace等

注意:

*  取值有多个,浏览器会依次查找,如果电脑没有安装这个字体,就会显示下一个字体
 *  `如果前面的字体都没有安装,就会显示最后字体系列的任意一个字体`
 *  如果字体中存在多个单词,推荐使用引号包裹
 *  `最后一项字体系列不需要使用引号包裹`
 *  尽量使用电脑常用的字体,以保证用户浏览网页能正确显示

## font复合属性 ##

font复合属性就是对前面的字体样式的一种简写属性  
`属性名:font(符合属性)`  
取值:font-style font-weight font-size font-family`(顺序固定,用空格隔开)`  
取值只能省略前面两个,省略了就相当于是默认值

## 文本缩进 ##

`属性名:text-indent`  
取值:数字+px或者数字+em

**注意:1em 相当于 当前标签的font-size大小**

一般文本缩进都是首行缩进2个字符,`如果要进行首行缩进两个字符,建议使用em. 直接写text-indent: 2em 就可以了`

至于为什么不使用数字+px的这种形式.  
是因为浏览器的默认字体大小是16px,如果要用数字+px的这种形式,就需要写text-indent: 32px  
但是不推荐这么写,因为万一字体的大小改了,取值就变成修改后字体的大小乘2+px了

## 文本水平对齐方式 ##

> `属性名:text-align`

取值:

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td>左对齐</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>右对齐</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>居中对齐</td> 
  </tr> 
 </tbody> 
</table>

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

## 文本修饰线 ##

`属性值:text-decoration`

取值:

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

效果:  
![在这里插入图片描述][2b084ff076344602af1c8d3d62f3518f.png]

这里有一个经常会用到的地方:

*  `⭐可以使用text-decoration: none 来去除a标签的下划线`

例如:  
![在这里插入图片描述][8219dfbc48404c1e8b5b3fc3490158ec.png]

## 行高 ##

`属性名:line-height`  
作用:控制一行的上下间距

取值:

1.  数字+px
2.  倍数(当前font-size的倍数)

`行高由上间距,文字高度和下间距组成`  
![在这里插入图片描述][73094e78477248cb867de50170c46df2.png]

*  line-height: 1 可以取消文本的上下间距

行高有一个比较常用的地方: 让文字行高和盒子的高度一样时,文字会在中间显示  
![在这里插入图片描述][e65ede97bbe442c28ba79756dd73fbba.png]  
**注意这里的效果与设置text-align: center的区别**  
行高也在写在font(符合属性)中

`写法:font-style font-weight font-size/line-height font-family`  
注意 font-size 和 line-height 之间使用的是`/`

## 颜色 ##

设置颜色在前端中用到的还是比较多的,所以还是要了解一下的  
属性名的有很多,就不一一列举了,取值要说一下

取值:

<table> 
 <thead> 
  <tr> 
   <th>颜色表示方式</th> 
   <th>表示方式</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>关键字</td> 
   <td>预定义的颜色名</td> 
   <td>如:red,blue,green等</td> 
  </tr> 
  <tr> 
   <td>rgb</td> 
   <td>红绿蓝三原色,每项取值为0~255</td> 
   <td>rgb(0~255 , 0~255, 0~255)</td> 
  </tr> 
  <tr> 
   <td>rgba</td> 
   <td>红绿蓝三原色,<code>a表示透明度,a的取值为(0~1)</code></td> 
   <td>rgba(0~255 , 0~255, 0~255, 0~1)</td> 
  </tr> 
  <tr> 
   <td>十六进制</td> 
   <td>#开头 将数字转换为16进制</td> 
   <td>#000000 #ff0000等 也可以简写 如:#f00 #000</td> 
  </tr> 
 </tbody> 
</table>

## 标签水平居中 ##

`标签水平居中: margin: 0 auto`

效果如图:  
![在这里插入图片描述][de556ed3133f4b089693a008ec18ad46.png]  
我们平时使用的页面主体部分应该是在我们屏幕中间的.这也是使用标签水平居中的方法实现的.  
简单解释一下这里,margin是外边距.后面会在盒子模型中详细介绍,`0 auto: 上下外边距为0,左右自适应相同值`

## ⭐思维导图 ##

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

> 感谢你的观看!希望这篇文章能帮到你!  
> [web前端开发专栏][web]在不断更新中,欢迎订阅!  
> “愿与君共勉,携手共进!”  
> ![在这里插入图片描述][8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]

[49d805df69ab41afbed6ef801b68708e.png]: https://img-blog.csdnimg.cn/49d805df69ab41afbed6ef801b68708e.png
[bbbc165fb43f45e8944e4f459fe026cd.png]: https://img-blog.csdnimg.cn/bbbc165fb43f45e8944e4f459fe026cd.png
[dd06c0f93daa4b80a3327ab5fa07f001.png]: https://img-blog.csdnimg.cn/dd06c0f93daa4b80a3327ab5fa07f001.png
[2b084ff076344602af1c8d3d62f3518f.png]: https://img-blog.csdnimg.cn/2b084ff076344602af1c8d3d62f3518f.png
[8219dfbc48404c1e8b5b3fc3490158ec.png]: https://img-blog.csdnimg.cn/8219dfbc48404c1e8b5b3fc3490158ec.png
[73094e78477248cb867de50170c46df2.png]: https://img-blog.csdnimg.cn/73094e78477248cb867de50170c46df2.png
[e65ede97bbe442c28ba79756dd73fbba.png]: https://img-blog.csdnimg.cn/e65ede97bbe442c28ba79756dd73fbba.png
[de556ed3133f4b089693a008ec18ad46.png]: https://img-blog.csdnimg.cn/de556ed3133f4b089693a008ec18ad46.png
[2bf2fae9f4504573bbba17ae065e5e62.png]: https://img-blog.csdnimg.cn/2bf2fae9f4504573bbba17ae065e5e62.png
[web]: https://mp.csdn.net/mp_blog/manage/column/columnManage/12118781
[8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]: https://img-blog.csdnimg.cn/8fbf2a7f2d0e4db782e58035677a303d.png#pic_center