【CSS 文字样式完整笔记】

342 阅读1分钟

一、字体族设置(font-family) 语法: font-family: 字体1, 字体2, ...; 示例: p { font-family: "Microsoft Yahei", Arial, sans-serif; }

二、字体颜色设置(color) 语法: color: 颜色值; 示例: div { color: #f00; } /* 红色 / h1 { color: rgb(0, 0, 255); } / 蓝色 */

三、字体大小(font-size) 语法: font-size: 数值+单位; 单位常用:

  • px(像素)
  • em(相对父元素字体)
  • rem(相对根元素字体)

示例: p { font-size: 16px; }

四、字体粗细(font-weight) 语法: font-weight: normal | bold | 100~900; 示例: h1 { font-weight: bold; } h2 { font-weight: 300; }

五、字体样式(font-style) 语法: font-style: normal | italic | oblique; 示例: p { font-style: italic; }

六、文本对齐(text-align) 语法: text-align: left | center | right | justify; 示例: h1 { text-align: center; }

七、首行缩进(text-indent) 语法: text-indent: 长度; 示例: p { text-indent: 2em; } /* 推荐使用 em 作为缩进单位 */

八、文本装饰线(text-decoration) 语法: text-decoration: none | underline | overline | line-through; 示例: a { text-decoration: none; } h4 { text-decoration: underline; } h5 { text-decoration: line-through; }

九、行高设置(line-height) 语法: line-height: 数值 | 百分比 | normal; 示例: p { line-height: 1.5; }

十、字母间距(letter-spacing) 语法: letter-spacing: 长度; 示例: p { letter-spacing: 2px; }

十一、单词间距(word-spacing) 语法: word-spacing: 长度; 示例: p { word-spacing: 5px; }

十二、文字大小写(text-transform) 语法: text-transform: none | uppercase | lowercase | capitalize; 示例: p { text-transform: uppercase; } /* 全部大写 */

十三、字体综合写法(font 简写) 语法顺序: font: font-style font-weight font-size/line-height font-family; 示例: p { font: italic bold 16px/1.5 Arial, sans-serif; }