幕客前端基础入门-css文本样式
2021-02-17 19:18
YPE html>
标签：cas tab rowspan lang cells 展示 十六进制 默认 数值
网页中内容元素主要有文字、图片、视频所构成。
作为主要内容之一的文字，我们如何设置网页中文字的展示效果，让网页更加美观，让读者对网页的信息更加关注和易于阅读，这就是需要使用css字体和文本样式属性进行文字的样式设置。
网页中有独立的的文字，也有成段的文字段落。
针对文字内容，如何使用css样式去设置文字的颜色、大小、字体、加粗等效果。
针对段落文字，使用css样式设置行距、对其方式、文本修饰等效果。
1. 字体样式
1.1 font-family字体属性
定义元素内文字以什么字体显示。
字体集是一类字体的统称，不同的字体集，说明了不同装饰的效果。常用的字体集是sans-serif。
font-family: "字体1", "字体集" ... ;
p{font-family:"微软雅黑", "宋体", "黑体";}
哈哈
1.2 字体大小
font-size用于定义元素内文字大小，有绝对单位和相对单位。
绝对单位在任何分辨率的显示下，显示出来的都是绝对的大小，不会随浏览器分辨率或副元素的大小的改变而改变。
| 属性值 | 说明 | |
|---|---|---|
| 绝对单位 | in | 英寸，1英寸=2.54cm，1in=6pc=72pt |
| pc | 派卡 | |
| pt | 点 | |
| cm | 厘米 | |
| mm | 毫米 | |
| 相对单位 | xx-small | 9px |
| x-small | 11px | |
| small | 13px，相对父元素的文字大小变小 | |
| medium | CSS2缩放系数1.2，以16px为例 | |
| large | 19px，相对父元素的文字大小变大 | |
| x-large | 23px | |
| xx-large | 28px | |
| px | 受显示器分辨率影响 | |
| em, % | 相对父元素的倍数大小 | |
CSS运用
文字大小是1in。
文字大小是1pc。
文字大小是1pt。
文字大小是1cm。
文字大小是1mm。
文字大小是xx_small。
文字大小是x_small。
文字大小是medium。
文字大小是x_large。
文字大小是xx_large。
CSS运用
这是20px的文字这是2倍的文字这是1.5倍的文字
1.3 字体颜色
使用color定义元素内文字颜色。
color:颜色名|十六进制|RGB
CSS运用
这是紫色的文字
这是绿色的文字
这是使用百分比的蓝色的文字
这是使用数值的蓝色的文字
1.4 文字粗细
font-weight 文字粗细
属性值：normal，bold，bolder，lighter，100-900
400等同于normal，700等同于bold。
部分浏览器bold和bolder，而600-900基本看不出差别，因此常用的是bold，其他的了解即可
CSS运用
窗前明月光
窗前明月光
窗前明月光
窗前明月光
窗前明月光
窗前明月光
窗前明月光
窗前明月光
窗前明月光
窗前明月光
窗前明月光
窗前明月光
窗前明月光
1.5 斜体设置
font-style:属性值;
| 属性值 | 说明 |
| normal | 正常 |
| italic | 斜体 |
| oblique | 倾斜，和italic差别不大 |
CSS运用
Cascading Style Sheets
1.6 字体变形
font-variant字体变形：设置元素中文本为小型大写字母
| 属性值 | 说明 |
| normal | 正常 |
| small-caps | 设置为小型大写字母 |
CSS运用
Cascading Style Sheets
Cascading Style Sheets
1.7 font属性简写
font: font-style font-variant font-weight font-size/line-height font-family
CSS运用
Cascading Style Sheets
2.文本样式
幕客前端基础入门-css文本样式
标签：cas tab rowspan lang cells 展示 十六进制 默认 数值
原文地址：https://www.cnblogs.com/csj2018/p/12952180.html