首页 CSS

# CSS 文本样式

# 首行缩进

  • 属性名 : text-indent
  • 取值
    • 数字 + px
    • 数字 + em (推荐，1em = 当前标签的 font-size 的大小)

# 文本水平对齐方式

  • 属性名 : text-align

  • 取值 :

    属性值效果
    left左对齐
    center居中对齐
    right右对齐

  • 注意点 :

    如果需要让文本水平居中，text-align 属性给文本所在标签 (文本的父元素) 设置

# 水平居中方法总结 text-align: center

  • text-align: center 能让哪些元素水平居中？

    • 文本
    • span 标签，a 标签
    • input 标签，img 标签

  • 注意点 :

    如果需要让以上元素水平居中，text-align:center 需要给以上元素的父元素设置

# 文本修饰

  • 属性名 : text-decotation

  • 取值

    属性值效果
    underline下划线 (常用)
    line-through删除线 (不常用)
    overline上划线 (几乎不用)
    none无装饰线 (常用)

  • 注意点 :

    开发中会使用 text-decoration:none; 清楚 a 标签默认的下划线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05文本样式</title>
    <style>
        p {
            text-indent: 2em;
            text-align: left;
            text-decoration: underline;
        }

        div {
            text-decoration: line-through;
        }

        h2 {
            text-decoration: overline;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <h2>h2</h2>
    <a href="#">我是超链接</a>
</body>
</html>

# 行高

  • 作用：控制一行的上下行间距
  • 属性名 : line-height
  • 取值 :
    • 数字 + px
    • 倍数 (当前标签 font-size 的倍数)
  • 应用
    1. 让单行文本垂直居中可以设置 line-height: 文字父元素高度
    2. 网页精准布局时，会设置 line-height: 1 可以取消上下间距
  • 行高与 font 连写的注意点 :
    • 如果同时设置了行高和 font 连写，注意覆盖问题
    • font: style weight size/line-height family;

# 颜色常见取值 (了解)

  • 属性名 :

    • 如：文字颜色 : color
    • 如：背景颜色 : background-color

  • 属性值 :

    颜色表示方式表示含义属性值
    关键词