CSS 字体与文本样式笔记

一、字体族设置(font-family)

语法:

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

示例:

p {

font-family: "Microsoft Yahei", Arial, sans-serif;

}


二、字体颜色(color)

语法:

color: 颜色值;

支持格式:

  • 英文名:red

  • 十六进制:#f00

  • RGB:rgb(255, 0, 0)

示例:

div { color: #f00; }

h1 { color: rgb(0, 0, 255); }


三、字体大小(font-size)

语法:

font-size: 数值+单位;

单位常用:px、em、rem

示例:

p { font-size: 16px; }


四、字体粗细(font-weight)

常用值:

  • normal(等于 400)

  • bold(等于 700)

  • 数字 100 ~ 900(越大越粗)

示例:

h1 { font-weight: bold; }

h2 { font-weight: 300; }


五、字体样式(font-style)

可选值:normal、italic、oblique

示例:

p { font-style: italic; }


六、文本对齐(text-align)

可选值:left、center、right、justify

示例:

h1 { text-align: center; }


七、首行缩进(text-indent)

示例:

p { text-indent: 2em; }


八、文本装饰线(text-decoration)

可选值:none、underline、overline、line-through

示例:

a { text-decoration: none; }

h4 { text-decoration: underline; }

div { text-decoration: overline; }

h5 { text-decoration: line-through; }


九、行高(line-height)

示例:

p { line-height: 1.5; }


十、字母间距(letter-spacing)

示例:

p { letter-spacing: 2px; }


十一、单词间距(word-spacing)

示例:

p { word-spacing: 5px; }


十二、文字大小写(text-transform)

可选值:none、uppercase、lowercase、capitalize

示例:

p { text-transform: uppercase; }


十三、字体综合简写(font)

语法顺序:

font-style font-weight font-size/line-height font-family

示例:

p {

font: italic bold 16px/1.5 Arial, sans-serif;

}

相关推荐
忘梓.几秒前
墨色规则与血色节点:C++红黑树设计与实现探秘
java·开发语言·c++
hhh3u3u3u1 分钟前
Visual C++ 6.0中文版安装包下载教程及win11安装教程
java·c语言·开发语言·c++·python·c#·vc-1
IT_陈寒3 分钟前
Python的列表推导式里藏了个坑,差点让我加班到凌晨
前端·人工智能·后端
星河耀银海4 分钟前
C++ 模板进阶:特化、萃取与可变参数模板
java·开发语言·c++
cccccc语言我来了8 分钟前
【C++---unordered_set/map底层封装】个不拘一格的集合。它不似有序集合那般循规蹈矩,而是以一种洒脱不羁的方式,将元素们随意地散落其中。每一个元素都是独一无二的。
开发语言·c++·哈希算法
Zfox_8 分钟前
C++ IO流全解析:标准库中的数据处理与文件读写艺术
开发语言·c++
加号38 分钟前
【C#】实现沃德普线光控制器通信控制(附完整源码)
开发语言·c#
吴声子夜歌11 分钟前
ES6——正则的扩展详解
前端·mysql·es6
天若有情67333 分钟前
【C++原创开源】formort.h:一行头文件,实现比JS模板字符串更爽的链式拼接+响应式变量
开发语言·javascript·c++·git·github·开源项目·模版字符串
天***885237 分钟前
Edge 浏览器离线绿色增强版+官方安装包,支持win7等系统
前端·edge