CSS 文本样式 and 排版

LearningCSS文本样式设置, including字体, 颜色, big small , 行 high , for 齐方式, 装饰效果 and 文本阴影etc.

首页 > CSS tutorial > tutoriallist > CSS 文本样式 and 排版

1. 文本颜色 and 背景色

CSSproviding了 many 种方式来设置文本颜色 and 背景色, including颜色名称, 十六进制值, RGB/RGBA值 and HSL/HSLA值.

1.1 文本颜色 (color)

using color property设置文本颜色.

1.1.1 颜色名称

CSS预定义了147种颜色名称, such as red, blue, green etc.. 

p {
    color: red;
}

1.1.2 十六进制值

十六进制颜色值以 # 开头, after 跟6个十六进制number (0-9, A-F) . 

p {
    color: #ff0000; /* 红色 */
    color: #00ff00; /* 绿色 */
    color: #0000ff; /* 蓝色 */
    color: #333333; /* 深灰色 */
    color: #ffffff; /* 白色 */
    color: #000000; /* 黑色 */
}

可以using缩写形式 (3个十六进制number) 表示颜色, 浏览器会自动将其scale for 6个number. 

p {
    color: #f00; /* etc.同于 #ff0000 */
    color: #0f0; /* etc.同于 #00ff00 */
    color: #00f; /* etc.同于 #0000ff */
    color: #333; /* etc.同于 #333333 */
}

1.1.3 RGB/RGBA值

RGB值using rgb(red, green, blue) function表示, 其in red, green, blue is 0-255之间 整数. 

p {
    color: rgb(255, 0, 0); /* 红色 */
    color: rgb(0, 255, 0); /* 绿色 */
    color: rgb(0, 0, 255); /* 蓝色 */
    color: rgb(51, 51, 51); /* 深灰色 */
}

RGBA值 in RGB Basics on 增加了alpha通道, 表示透明度, 范围 for 0-1. 

p {
    color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
    color: rgba(0, 0, 255, 0.8); /* 80%不透明 蓝色 */
}

1.1.4 HSL/HSLA值

HSL值using hsl(hue, saturation, lightness) function表示:

  • hue: 色相, 0-360度 (0=红色, 120=绿色, 240=蓝色)
  • saturation: 饱 and 度, 0%-100% (0%=灰色, 100%=完全饱 and )
  • lightness: 亮度, 0%-100% (0%=黑色, 50%=正常, 100%=白色) 
p {
    color: hsl(0, 100%, 50%); /* 红色 */
    color: hsl(120, 100%, 50%); /* 绿色 */
    color: hsl(240, 100%, 50%); /* 蓝色 */
    color: hsl(0, 0%, 20%); /* 深灰色 */
}

HSLA值 in HSL Basics on 增加了alpha通道, 表示透明度. 

p {
    color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
}

1.2 背景色 (background-color)

using background-color property设置元素 背景色. 

div {
    background-color: yellow;
    background-color: #ffff00;
    background-color: rgb(255, 255, 0);
    background-color: rgba(255, 255, 0, 0.8);
    background-color: hsl(60, 100%, 50%);
}

提示

for 了确保文本 readable 性, 应该选择合适 文本颜色 and 背景色组合. 例such as, 深色文本应该搭配浅色背景, 浅色文本应该搭配深色背景.

2. 字体样式

CSSproviding了 many 种property来控制字体样式, including字体族, big small , 粗细, 样式etc..

2.1 字体族 (font-family)

using font-family property设置元素 字体. 可以指定 many 个字体, 浏览器会按照顺序尝试using, 直 to 找 to 可用 字体. 

body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

h1 {
    font-family: "Times New Roman", Times, serif;
}

字体族分 for 以 under 几class:

  • serif: 衬线字体, such as Times New Roman
  • sans-serif: 无衬线字体, such as Arial, Helvetica
  • monospace: etc.宽字体, such as Courier New, Consolas
  • cursive: 手写体, such as Comic Sans MS
  • fantasy: 装饰性字体, such as Impact

best practices

1. for 了保证跨平台compatibility, 应该 in 字体list 末尾添加一个common字体族 (such as sans-serif, serif, monospace) .

2. in文字体应该放 in 英文字体 before 面, 因 for in文字体通常package含英文字母, 但英文字体不一定package含in文字符.

2.2 字体 big small (font-size)

using font-size property设置字体 big small .

2.2.1 绝 for 单位

  • px: 像素 (最常用)
  • pt: 点 (1pt = 1/72英寸)
  • in: 英寸
  • cm: 厘米
  • mm: 毫米
p {
    font-size: 16px;
    font-size: 12pt;
    font-size: 1in;
    font-size: 2.54cm;
    font-size: 25.4mm;
}

2.2.2 相 for 单位

  • em: 相 for 于父元素 字体 big small
  • rem: 相 for 于根元素 (html) 字体 big small
  • %: 相 for 于父元素 字体 big small
  • vw: 相 for 于视口宽度 1%
  • vh: 相 for 于视口 high 度 1%
html {
    font-size: 16px; /* 根元素字体 big  small  */
}

p {
    font-size: 1em; /* 16px */
    font-size: 1rem; /* 16px */
    font-size: 100%; /* 16px */
    font-size: 2em; /* 32px */
    font-size: 2rem; /* 32px */
    font-size: 200%; /* 32px */
    font-size: 5vw; /* 视口宽度 5% */
}

best practices

1. 推荐using rem or em serving as字体 big small 单位, 这样可以implementationresponse式design, 便于user调整浏览器字体 big small .

2. using px serving as根元素 (html) 字体 big small , 然 after using rem serving asother元素 字体 big small , is a常用 response式字体designmethod.

2.3 字体粗细 (font-weight)

using font-weight property设置字体粗细. 

p {
    font-weight: normal; /* 正常粗细, etc.同于 400 */
    font-weight: bold; /* 粗体, etc.同于 700 */
    font-weight: lighter; /* 比父元素更细 */
    font-weight: bolder; /* 比父元素更粗 */
    font-weight: 100; /* 最细 */
    font-weight: 200;
    font-weight: 300;
    font-weight: 400; /* 正常 */
    font-weight: 500;
    font-weight: 600;
    font-weight: 700; /* 粗体 */
    font-weight: 800;
    font-weight: 900; /* 最粗 */
}

2.4 字体样式 (font-style)

using font-style property设置字体样式, such as斜体. 

p {
    font-style: normal; /* 正常样式 */
    font-style: italic; /* 斜体 */
    font-style: oblique; /* 倾斜,  and  italic class似, 但通常 is through变换implementation  */
}

2.5 字体变体 (font-variant)

using font-variant property设置字体变体, such as under 划线, small 型 big 写字母etc.. 

p {
    font-variant: normal; /* 正常变体 */
    font-variant: small-caps; /*  small 型 big 写字母 */
}

2.6 字体综合property (font)

using font property可以同时设置 many 个字体相关property, 语法such as under : 

font: font-style font-variant font-weight font-size/line-height font-family;

其in, font-size and font-family is 必需 , otherproperty is 可选 . 

p {
    font: italic small-caps bold 16px/1.5 "Microsoft YaHei", Arial, sans-serif;
}

3. 文本 for 齐 and indent

3.1 文本 for 齐 (text-align)

using text-align property设置文本 水平 for 齐方式. 

p {
    text-align: left; /*  left  for 齐 (默认)  */
    text-align: right; /*  right  for 齐 */
    text-align: center; /* 居in for 齐 */
    text-align: justify; /* 两端 for 齐 */
}

3.2 文本indent (text-indent)

using text-indent property设置首行文本 indent. 

p {
    text-indent: 2em; /* 首行indent2个字符 */
    text-indent: 30px; /* 首行indent30像素 */
    text-indent: -20px; /* 首行 left indent20像素 */
}

4. 行 high and 字间距

4.1 行 high (line-height)

using line-height property设置行 and 行之间 距离. 

p {
    line-height: normal; /* 正常行 high  (默认)  */
    line-height: 1.5; /* 行 high  for 字体 big  small  1.5倍 (推荐)  */
    line-height: 24px; /* 固定行 high 24像素 */
    line-height: 200%; /* 行 high  for 字体 big  small  2倍 */
}

best practices

推荐using无单位 数值serving as行 high , such as line-height: 1.5;. 这样, 行 high 会自动根据字体 big small 调整, 便于maintenance.

4.2 字间距 (letter-spacing)

using letter-spacing property设置字符之间 间距. 

p {
    letter-spacing: normal; /* 正常字间距 (默认)  */
    letter-spacing: 2px; /* 字间距 for 2像素 */
    letter-spacing: -1px; /* 字间距 for -1像素 (字符重叠)  */
}

4.3 词间距 (word-spacing)

using word-spacing property设置单词之间 间距 (主要用于英文文本) . 

p {
    word-spacing: normal; /* 正常词间距 (默认)  */
    word-spacing: 5px; /* 词间距 for 5像素 */
    word-spacing: -2px; /* 词间距 for -2像素 */
}

5. 文本装饰 and 转换

5.1 文本装饰 (text-decoration)

using text-decoration property设置文本 装饰效果, such as under 划线, on 划线, delete线etc.. 

p {
    text-decoration: none; /* 无装饰 (默认)  */
    text-decoration: underline; /*  under 划线 */
    text-decoration: overline; /*  on 划线 */
    text-decoration: line-through; /* delete线 */
    text-decoration: underline overline; /*  under 划线 and  on 划线 */
}

a {
    text-decoration: none; /* 移除链接 默认 under 划线 */
    color: blue;
}

a:hover {
    text-decoration: underline; /* 鼠标悬停时显示 under 划线 */
}

CSS3in, text-decoration 被拆分 for many 个property, 可以更精细地控制装饰效果: 

p {
    text-decoration-line: underline; /* 装饰class型 */
    text-decoration-color: red; /* 装饰颜色 */
    text-decoration-style: dashed; /* 装饰样式: solid (实线) , dashed (虚线) , dotted (点线) , double (双线) , wavy (波浪线)  */
    text-decoration-thickness: 2px; /* 装饰厚度 */
    
    /* 综合写法 */
    text-decoration: underline red dashed 2px;
}

5.2 文本转换 (text-transform)

using text-transform property转换文本 big small 写. 

p {
    text-transform: none; /* 不转换 (默认)  */
    text-transform: uppercase; /* 全部 big 写 */
    text-transform: lowercase; /* 全部 small 写 */
    text-transform: capitalize; /* 首字母 big 写 */
    text-transform: full-width; /* 全角字符 */
}

6. 文本阴影 (text-shadow)

using text-shadow property for 文本添加阴影效果, 语法such as under : 

text-shadow: h-shadow v-shadow blur-radius color;
  • h-shadow: 水平阴影位置 (必需)
  • v-shadow: 垂直阴影位置 (必需)
  • blur-radius: 模糊半径 (可选, 默认0)
  • color: 阴影颜色 (可选, 默认黑色) 
h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* basic阴影 */
}

h2 {
    text-shadow: 2px 2px 0px red; /* 无模糊效果 */
}

h3 {
    text-shadow: 0 0 10px yellow, 0 0 20px orange, 0 0 30px red; /* how heavy阴影 */
}

p {
    text-shadow: -2px -2px 4px blue, 2px 2px 4px red; /* 双侧阴影 */
}

7. 文本溢出processing

7.1 溢出隐藏 (white-space, overflow, text-overflow)

当文本 in 容超出containers宽度时, 可以using以 under property控制文本 溢出behavior:

7.1.1 white-space

控制元素 in 空白processing方式. 

p {
    white-space: normal; /* 正常换行 (默认)  */
    white-space: nowrap; /* 不换行 */
    white-space: pre; /* 保留空白字符 and 换行符 */
    white-space: pre-wrap; /* 保留空白字符, 允许换行 */
    white-space: pre-line; /* merge空白字符, 保留换行符 */
}

7.1.2 overflow

控制元素 in 容溢出时 processing方式. 

div {
    overflow: visible; /* 溢出 in 容可见 (默认)  */
    overflow: hidden; /* 溢出 in 容隐藏 */
    overflow: scroll; /* 显示滚动条 */
    overflow: auto; /* 自动显示滚动条 */
}

7.1.3 text-overflow

控制文本溢出时 显示方式 (需要配合 white-space: nowrap and overflow: hidden using) . 

div {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip; /* 裁剪文本 (默认)  */
    text-overflow: ellipsis; /* 显示省略号 */
}

8. 垂直 for 齐 (vertical-align)

using vertical-align property设置元素 垂直 for 齐方式, 主要用于行 in 元素 and 表格单元格.

8.1 基线 for 齐

img {
    vertical-align: baseline; /* 默认,  and 父元素基线 for 齐 */
    vertical-align: top; /*  and 父元素顶部 for 齐 */
    vertical-align: middle; /*  and 父元素in部 for 齐 */
    vertical-align: bottom; /*  and 父元素底部 for 齐 */
}

8.2 文本 for 齐

sup {
    vertical-align: super; /*  on 标 */
}

sub {
    vertical-align: sub; /*  under 标 */
}

8.3 百分比 and long 度值

span {
    vertical-align: 2px; /* 相 for 于基线向 on 偏移2像素 */
    vertical-align: -2px; /* 相 for 于基线向 under 偏移2像素 */
    vertical-align: 20%; /* 相 for 于行 high 向 on 偏移20% */
}

9. 文本换行 (word-break, word-wrap/hyphens)

9.1 word-break

控制单词 换行规则. 

p {
    word-break: normal; /* 正常换行 (默认)  */
    word-break: break-all; /* 允许 in 单词 in 换行 */
    word-break: keep-all; /* 不允许 in 单词 in 换行 (主要用于in文, 日文, 韩文)  */
    word-break: break-word; /* 允许 in  long 单词 or URL in 换行 */
}

9.2 word-wrap/hyphens

word-wrap is CSS3 之 before property名, CSS3 in更名 for overflow-wrap, 用于控制 long 单词 换行规则. 

p {
    word-wrap: normal; /* 正常换行 (默认)  */
    word-wrap: break-word; /* 允许 in  long 单词 in 换行 */
    
    /* CSS3 in 写法 */
    overflow-wrap: break-word;
}

/* 自动断字 (需要配合 lang propertyusing)  */
p {
    hyphens: none; /* 不自动断字 (默认)  */
    hyphens: manual; /* 仅 in 添加了软连字符 (­)  位置断字 */
    hyphens: auto; /* 自动断字 */
}

10. 实战case: 排版design

under 面 is a simple 排版designcase, 展示such as何usingCSS文本样式creation美观 排版效果. 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 排版designcase</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            color: #333;
            background-color: #f5f5f5;
            line-height: 1.6;
            padding: 20px;
        }
        
        .article {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .article h1 {
            font-size: 2.5rem;
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 700;
            line-height: 1.2;
        }
        
        .article .meta {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 30px;
            font-size: 0.9rem;
        }
        
        .article .meta span {
            margin: 0 10px;
        }
        
        .article p {
            margin-bottom: 20px;
            text-indent: 2em;
            text-align: justify;
        }
        
        .article h2 {
            font-size: 1.8rem;
            color: #3498db;
            margin: 30px 0 20px 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #ecf0f1;
        }
        
        .article h3 {
            font-size: 1.4rem;
            color: #27ae60;
            margin: 25px 0 15px 0;
        }
        
        .article blockquote {
            border-left: 4px solid #3498db;
            padding: 15px 20px;
            margin: 20px 0;
            background-color: #f8f9fa;
            font-style: italic;
            color: #555;
        }
        
        .article ul, .article ol {
            margin: 20px 0 20px 30px;
        }
        
        .article li {
            margin-bottom: 10px;
        }
        
        .article .highlight {
            background-color: #fff3cd;
            padding: 20px;
            border-radius: 4px;
            margin: 20px 0;
        }
        
        .article .highlight h4 {
            color: #856404;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="article">
        <h1>CSS 排版designbest practices</h1>
        <div class="meta">
            <span>作者: 极客tutorial网</span>
            <span>release时间: 2025-01-05</span>
            <span>阅读: 1000+</span>
        </div>
        
        <p>良 good  排版design is 网页design  important 组成部分, 它不仅能improving in 容  readable 性, 还能提升user体验 and 页面美观度. 本文将介绍一些CSS排版design best practices, helping你creation更加专业 and 易用 网页. </p>
        
        <h2>1. 字体选择</h2>
        <p>选择合适 字体 is 排版design Step 1.  good  字体应该具 has 良 good   readable 性, 适合不同屏幕尺寸 and 分辨率.  for 于in文网页, 推荐usingsystem预装 in文字体, such as微软雅黑, 宋体, 黑体etc.,  or 者usingGoogle Fontsetc. in 线字体service. </p>
        
        <blockquote>
            字体 is 页面 灵魂, 它直接影响user 阅读体验 and  for  in 容 understanding. 
        </blockquote>
        
        <h3>1.1 字体族 选择</h3>
        <p> for 了保证跨平台compatibility, 应该 in font-familypropertyin指定 many 个字体, 按prioritysort. 通常 做法 is : 先指定in文字体, 再指定英文字体, 最 after 添加一个common字体族. </p>
        
        <div class="highlight">
            <h4>推荐字体组合</h4>
            <pre>body {
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, sans-serif;
}</pre>
        </div>
        
        <h2>2. 字体 big  small  and 行 high </h2>
        <p>合适 字体 big  small  and 行 high  is 保证 in 容 readable 性 关键.  for 于正文 in 容, 推荐 字体 big  small  is 16px-18px, 行 high  is 1.5-1.8倍. 标题 字体 big  small 应该比正文 big , 形成清晰 视觉层级. </p>
        
        <h2>3. 颜色 for 比</h2>
        <p>文本颜色 and 背景色  for 比度 is 影响 readable 性  important 因素. 根据WCAG标准, 正常文本  for 比度至 few 应该达 to 4.5:1,  big 文本 (18px以 on  or 14px粗体)   for 比度至 few 应该达 to 3:1. </p>
        
        <h2>4. 段落 and 间距</h2>
        <p>合理 段落间距 and 行间距可以improving in 容  readable 性 and 舒适度. 段落之间 间距应该比行间距 big , 通常 is 行 high  2-3倍. 标题 and 正文之间也应该 has 足够 间距, 形成清晰 视觉分隔. </p>
        
        <h2>5.  for 齐方式</h2>
        <p> for 于in文文本,  left  for 齐 is 最常用  for 齐方式, 它符合in文 阅读习惯. 居in for 齐通常用于标题, 引用etc.特殊元素,  right  for 齐主要用于日期, signatureetc. few 数circumstances. 两端 for 齐可以使文本edge缘整齐, 但需要注意避免出现过 big  字间距. </p>
        
        <h2>6. response式排版</h2>
        <p>随着move设备 普及, response式排版变得越来越 important . response式排版 is 指根据不同屏幕尺寸 and 分辨率自动调整字体 big  small , 行 high , 间距etc.排版property, 以保证 in 各种设备 on 都 has 良 good  阅读体验. </p>
        
        <p>implementationresponse式排版 常用methodincluding: usingrem or emserving as字体 big  small 单位, 结合媒体query调整根元素 字体 big  small ; usingvw单位implementation基于视口宽度 字体 big  small ; usingCSS clamp()functionimplementation字体 big  small  自动调整. </p>
        
        <h2>7. summarized</h2>
        <p>CSS排版design is a  complex  主题, 需要考虑 many 种因素, including字体选择, 字体 big  small , 行 high , 颜色, 间距,  for 齐方式etc.. 良 good  排版design可以improving in 容  readable 性, 提升user体验, 增强页面 专业性 and 美观度. </p>
        <p>through遵循本文介绍 best practices, 你可以creation出更加专业, 易用 and 美观 网页排版design. 当然, 排版design is 一门艺术, 需要continuously地实践 and 探索, 才能达 to 更 high  水平. </p>
    </div>
</body>
</html>

11. 练习

练习 1: 文本颜色 and 背景色

  1. creation一个HTMLfile, package含以 under 元素:
    • 一个标题 (h1)
    • 三个段落 (p)
    • 一个divcontainers, package含两个段落
  2. creation一个CSSfile, 添加以 under 样式:
    • 将h1 文本颜色设置 for 蓝色, using十六进制值
    • 将第一个段落 文本颜色设置 for 红色, usingRGB值
    • 将第二个段落 文本颜色设置 for 绿色, usingRGBA值, 透明度 for 0.5
    • 将第三个段落 文本颜色设置 for 紫色, usingHSL值
    • 将divcontainers 背景色设置 for 黄色, using颜色名称
    • 将divcontainers in 段落文本颜色设置 for 黑色
  3. in HTMLfilein引入CSSfile, 查看效果

练习 2: 字体样式

  1. creation一个HTMLfile, package含以 under 元素:
    • 一个标题 (h1)
    • 一个副标题 (h2)
    • 三个段落 (p)
    • 一个引用 (blockquote)
  2. creation一个CSSfile, 添加以 under 样式:
    • 将body 字体族设置 for "Microsoft YaHei", Arial, sans-serif
    • 将h1 字体 big small 设置 for 3rem, 字体粗细设置 for bold
    • 将h2 字体 big small 设置 for 2rem, 字体颜色设置 for #3498db
    • 将第一个段落 字体 big small 设置 for 1.2rem, 行 high 设置 for 1.6
    • 将第二个段落 字体样式设置 for italic, 文本颜色设置 for #666
    • 将第三个段落 文本转换设置 for uppercase
    • 将引用 字体样式设置 for italic, 添加1px left edge框, 颜色 for #3498db, 背景色 for #f8f9fa
  3. in HTMLfilein引入CSSfile, 查看效果

练习 3: 文本 for 齐 and 溢出processing

  1. creation一个HTMLfile, package含以 under 元素:
    • 一个divcontainers, 宽度 for 300px, high 度 for 100px, edge框 for 1px solid #ccc
    • in divcontainers in 添加一段 long 文本 (至 few 50个字符)
  2. creation一个CSSfile, 添加以 under 样式:
    • 将divcontainers 文本 for 齐方式设置 for justify
    • 将divcontainers 行 high 设置 for 1.5
    • 添加文本溢出processing, 使溢出 文本显示 for 省略号
  3. in HTMLfilein引入CSSfile, 查看效果
  4. modifydivcontainers high 度 for 200px, 再次查看效果
on 一节: CSS Basics语法 and 选择器 under 一节: CSS 盒model and 布局Basics