1.2 CSS字体属性、文本属性与引入方式

Bertha 。 2022-11-19 01:15 210阅读 0赞

**声明**：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1.  H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-]
2.  JavaScript系列 ：[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]

### 文章目录 ###

*   *  3. CSS字体属性
     *   *  3.1 字体系列
         *  3.2 字体大小
         *  3.3 字体粗细
         *  3.4 文字样式
         *  3.5 字体复合属性
     *  4. CSS文本属性
     *   *  4.1 文本颜色
         *  4.2 对齐文本
         *  4.3 装饰文本
         *  4.4 文本缩进
         *  4.5 行间距
     *  5. CSS引入方式
     *   *  5.1 内部样式表
         *  5.2 行内样式表
         *  5.3 外部样式表
         *  5.4 CSS样式总结
         *  5.4 CSS样式总结

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

## 3. CSS字体属性 ##

*CSS Fonts（字体）属性用于定义***字体系列、大小、粗细和文字样式**（如斜体）\*

### 3.1 字体系列 ###

*CSS使用 font-family 属性定义文本的字体系列*

p {
         
        font-family:"微软雅黑";
    }
    div {
        
        font-family: Arial, "Microsoft Yahei", "微软雅黑"; 
    }

尽量使用系统默认自带字体，最常见的字体：body\{font-family: ‘Microsoft Yahei’, tahoma, arial, ‘Horagino Sans GB’;\}

### 3.2 字体大小 ###

CSS使用 font-size属性定义字体大小

p {
        
        font-size: 20px;
    }

*  px(像素)大小是我们网页的最常用的单位，谷歌浏览器默认文字大小为16px
 *  不同浏览器可能默认字体大小不一致，所以尽量给明确的大小，不要使用默认值
 *  可以给body指定整个页面文字的大小，但是标题标签比较特殊，需要单独指定文字大小

### 3.3 字体粗细 ###

CSS使用 font-weight 属性定设置字体粗细

.bold {
        
        /* font-weight: bold; */  		/* normal(正常，400)，bold（加粗,700） */
        font-weight: 700;              /* 实际开发中，提倡使用数字表示加粗或变细（100-900），注意不跟单位！！ */
    }
    h2 {
        
        /*font-weight: normal;*/       
        font-weight: 400;         /* 标题一般需要单独指定，而不使用body */
    }

### 3.4 文字样式 ###

CSS使用 font-style 属性设置文本的风格

p {
        
        font-style: normal;
    }

<table> 
 <thead> 
  <tr> 
   <th align="center">属性值</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">normal</td> 
   <td align="center">默认值，浏览器会显示标准的字体样式</td> 
  </tr> 
  <tr> 
   <td align="center">italic</td> 
   <td align="center">浏览器会显示斜体的字体样式</td> 
  </tr> 
 </tbody> 
</table>

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

### 3.5 字体复合属性 ###

复合属性可以把以上文字样式综合来写，这样可以更节约代码

body {
        
    	/*font: font-style font-weight font-size/line-height font-family;   各个属性空格隔开，不能够调换顺序（倾斜。加粗，大小，字体）*/
        font: italic 700 16px 'Microsoft yahei';
    }

注意：不需要设置的属性可以省略（取默认值），但是必须保留font-size和font-family属性，否则font属性将不起作用

## 4. CSS文本属性 ##

*CSS Text (文本) 属性可定义文本的外观，比如文本的颜色，对齐文本、装饰文本、文本缩进、行间距等。*

### 4.1 文本颜色 ###

color属性用于定于文本的颜色

div {
        
        color: red;
    }

<table> 
 <thead> 
  <tr> 
   <th>颜色表示</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>预定义的颜色值</td> 
   <td>red、green、blue、pink。。。</td> 
  </tr> 
  <tr> 
   <td>十六进制（开发中最常用）</td> 
   <td>#FF0000、#FF6600、#29D794</td> 
  </tr> 
  <tr> 
   <td>RGB代码</td> 
   <td>rgb(255, 0, 0)或 rgb(100%, 0%, 0%)</td> 
  </tr> 
 </tbody> 
</table>

### 4.2 对齐文本 ###

text-align属性用于设置元素内文本内容的水平对齐方式

div {
        
    	text-align: center;    /*本质是让盒子里的文字水平居中对齐 */
        text-align: right;
        text-align: left;   /*左对齐，默认值*/
    }

### 4.3 装饰文本 ###

text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。

div {
        
        text-decoration: underline;
    }
    a {
        
        text-decoration: none;  /*常用来取消链接a自带的下划线*/
    }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>none</td> 
   <td>默认，没有装饰线（最常用）</td> 
  </tr> 
  <tr> 
   <td>underline</td> 
   <td>下划线，链接a自带下划线（常用）</td> 
  </tr> 
  <tr> 
   <td>overline</td> 
   <td>上划线（几乎不用）</td> 
  </tr> 
  <tr> 
   <td>line-through</td> 
   <td>删除线（几乎不用）</td> 
  </tr> 
 </tbody> 
</table>

### 4.4 文本缩进 ###

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

div {
        
        text-indent: 10px;
    }

通过设置该属性，所有元素的第一行都会缩进一个给定的长度，甚至该长度可以为负值

p {
        
        text-indent: 2em;
    }

**em**是一个相对单位，就是当前元素（font-size）的一个文字的大小，如果当前元素没有设置大小，就会按照父元素的一个文字大小

### 4.5 行间距 ###

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

p {
        
        line-height: 26px; /*字体默认16px，则上下间距各为5px*/
    }

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KkZO9RBk-1618323117595)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210413214026899.png)\]][img-KkZO9RBk-1618323117595_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210413214026899.png]

## 5. CSS引入方式 ##

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类

*  行内样式表（行内式）
 *  内部样式表（嵌入式）
 *  外部样式表（链接式）

### 5.1 内部样式表 ###

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

*  <style>标签理论上可以放到html文档中任意位置，但一般都会放到文档的<head>标签中。
 *  通过此种方式，可以方便控制当前整个页面中的元素样式设置
 *  代码结构清晰，但是并没有完全实现结构和样式完全分离，通常练习时比较常用

### 5.2 行内样式表 ###

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

*  style其实是标签的属性，在双引号中间设置样式，不推荐大量使用

### 5.3 外部样式表 ###

样式表单独写到CSS文件中，之后再把CSS文件引入到HTML文件中使用，实际开发中最常用，适合样式比较多的情况

引入外部样式表分为两步：

*  新建一个后缀名为.css的CSS文件，把所有CSS代码放到此文件中
 *  在html页面中，使用<link>标签引入这个文件
    
        <link rel="stylesheet" href="css文件路径">

### 5.4 CSS样式总结 ###

CSS文件引入到HTML文件中使用，实际开发中最常用，适合样式比较多的情况

引入外部样式表分为两步：

### 5.4 CSS样式总结 ###

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nachrhm9-1618323117597)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210413220857225.png)\]][img-nachrhm9-1618323117597_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210413220857225.png]

[_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6
[JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7
[img-KkZO9RBk-1618323117595_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210413214026899.png]: /images/20221022/dae40eacbc264a83a65907c79717b844.png
[img-nachrhm9-1618323117597_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210413220857225.png]: /images/20221022/0ed433efd1134648b202997f3a13870e.png