css字体样式与文本样式详解

最新推荐文章于 2025-06-07 15:16:53 发布

红虾程序员

最新推荐文章于 2025-06-07 15:16:53 发布

阅读量1.6k

点赞数 28

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 前端 html pycharm intellij-idea

本文链接：https://blog.youkuaiyun.com/m0_70296476/article/details/145479543

CSS 专栏收录该内容

5 篇文章

订阅专栏

3. 文本装饰（text-decoration）

4. 文本缩进（text-indent）

5. 文本转换（text-transform）

6. 文本阴影（text-shadow）

7. 行间距（line-height）

8. 字符间距（letter-spacing）

9. 单词间距（word-spacing）

10. 综合示例

一、CSS字体样式

CSS中的字体样式用于定义文本的外观，包括字体类型、大小、粗细、风格和颜色等。

1. 字体类型（`font-family`）

font-family属性用于定义字体类型，可以指定多个字体，浏览器会按顺序查找并使用第一个可用的字体。若所有指定的字体都不可用，则使用浏览器默认字体。

语法：

 font-family: "字体1", "字体2", "字体3", ...;

示例：

 body {
     font-family: "微软雅黑", "Arial Black", sans-serif;
 }

在本例中，如果用户的系统中安装了"微软雅黑"，则使用该字体；如果没有，则尝试使用Arial Black；如果都没有，则使用默认的sans-serif字体。

2. 字体大小（`font-size`）

font-size属性用于定义字体大小，常用的单位有px（像素）、em（相对于父元素的字体大小）、rem（相对于根元素的字体大小）等，可以使用关键字（如small、medium、large）或具体的数值（如10px、16px、20px）。

语法：

 font-size: 数值 | inherit | medium | large | larger | x-large | xx-large | small | smaller | x-small | xx-small;

示例：

 h1 {
     font-size: 2em; /* 使用em单位，相对于父元素的字体大小 */
 }
 p {
     font-size: 16px; /* 使用像素单位 */
 }

3. 字体粗细（`font-weight`）

font-weight属性用于定义字体的粗细，取值范围为100~900，也可以使用关键字（如normal、lighter、bold、bolder）。

语法：

 font-weight: 100-900 | bold | bolder | lighter | normal;

示例：

 strong {
     font-weight: bold; /* 使用关键字 */
 }
 span {
     font-weight: 700; /* 使用数字 */
 }

4. 字体风格（`font-style`）

font-style属性用于定义字体的风格，取值包括normal（正常）、italic（斜体）、oblique（斜体）。

语法：

 font-style: normal | italic | oblique;

示例：

 span {
     font-style: italic;
 }

5. 字体颜色（`color`）

color属性用于定义字体的颜色，可以使用关键字（如red）、16进制RGB值（如#03FCA1）、RGB值（如rgb(3, 252, 161)）、RGBA值（如rgba(3, 252, 161, 0.8)）、HSL值（如hsl(120, 100%, 50%)）或HSLA值（如hsla(120, 100%, 50%, 0.8)）等。

语法：

 color: 数值;

示例：

 a {
     color: #FF0000;
 }

6. 字体简写属性（`font`）

font属性是一个简写属性，可以同时设置多个字体相关的属性，其顺序为：font-style font-variant font-weight font-size font-family。注意，font-size和font-family是必需的，其他属性可以省略。

语法：

 font: font-style font-variant font-weight font-size font-family;

示例：

 p {
     font: italic small-caps bold 16px/1.5 "Helvetica Neue", Arial, sans-serif;
     /* 等同于分别设置这些属性 */
 }

7. 综合示例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>CSS字体样式</title>
     <style>
         body {
             font-family: "微软雅黑", "Arial Black", sans-serif;
             font-size: 16px;
             color: #333;
         }
         h1 {
             font-size: 25px;
             font-weight: bold;
             color: blue;
         }
         p {
             font-style: italic;
         }
         a {
             color: #FF0000;
             text-decoration: none;
         }
         a:hover {
             text-decoration: underline;
         }
     </style>
 </head>
 <body>
     <h1>CSS字体样式详解</h1>
     <p>这是一个使用了斜体样式的段落。</p>
     <p>This is a paragraph that uses an italicized style.</p>
     <a href="#">这是一个链接</a>
 </body>
 </html>

二、CSS文本样式

CSS的文本样式主要关注文本的布局、装饰和视觉效果。

1. 文本颜色（`color`）

设置文本的颜色，与字体样式中的语法相同。

 a {
     color: #333; /* 使用十六进制颜色 */
 }
 p {
     color: rgba(0, 0, 0, 0.5); /* 使用RGBA颜色，包含透明度 */
 }

2. 文本对齐（`text-align`）

设置文本的对齐方式，常用的有left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）等。

 div {
     text-align: center; /* 居中对齐 */
 }

3. 文本装饰（`text-decoration`）

设置文本的装饰效果，如下划线、上划线、贯穿线等，常用值有none（无装饰）、underline（下划线）、overline（上划线）、line-through（贯穿线）等。

 a {
     text-decoration: none; /* 取消下划线 */
 }
 del {
     text-decoration: line-through; /* 删除线 */
 }

4. 文本缩进（`text-indent`）

设置文本的首行缩进，可以使用长度单位或百分比。

 p {
     text-indent: 2em; /* 首行缩进2个字符宽度 */
 }

5. 文本转换（`text-transform`）

控制文本的大小写转换，常用的值有none（无转换）、capitalize（每个单词的首字母大写）、uppercase（全部大写）、lowercase（全部小写）等。

 p {
     text-transform: uppercase; /* 全部大写 */
 }
 span {
     text-transform: capitalize; /* 首字母大写 */
 }

6. 文本阴影（`text-shadow`）

为文本添加阴影效果，可以指定水平偏移、垂直偏移、模糊半径和颜色。

 h1 {
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 水平偏移、垂直偏移、模糊半径、颜色 */
 }

7. 行间距（`line-height`）

设置文本行之间的间距，会影响文本的可读性，可以使用数字、长度单位或百分比。

 p {
     line-height: 1.5; /* 使用数字，表示行高是字体大小的1.5倍 */
 }

8. 字符间距（`letter-spacing`）

设置字符之间的间距，可以使用正常的长度单位，如px、em等。

 .wide-letters {
     letter-spacing: 2px;
 }

9. 单词间距（`word-spacing`）

设置单词之间的间距，同样可以使用正常的长度单位。

 .wide-words {
     word-spacing: 1em;
 }

10. 综合示例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>CSS文本样式</title>
     <style>
         body {
             font-family: 楷体,"Arial Black", sans-serif;
             font-size: 16px;
             line-height: 1.5;
         }
         h1 {
             color: #333;
             text-align: center;
             text-transform: uppercase;
             text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
         }
         p {
             text-indent: 2em;
             margin-bottom: 1em;
         }
         .uppercase {
             text-transform: uppercase;
         }
         .italic {
             font-style: italic;
         }
         .deleted {
             text-decoration: line-through;
         }
         .wide-letters {
             letter-spacing: 2px;
         }
     </style>
 </head>
 <body>
 <h1>css文本样式详解</h1>
 <p class="uppercase">This is a paragraph with UPPERCASE text.</p>
 <p class="italic">This is a paragraph with <span class="deleted">deleted</span> and <span class="uppercase">uppercase</span> <span class="wide-letters">wide-letter-spaced</span> text.</p>
 </body>
 </html>