相对长度单位:
px:像素点,像素就是显示器显示的一个点。
em:1em 等于当前的字体大小,例如:当前元素的字体大小为16px,那么1em = 16px。
字体font系列
1.font-size
font-size属性的值可以使用相对长度单位,也可以使用绝对长度单位【推荐使用像素单位px】
2.font-family
font-family属性用于设置字体.可以同时指定多个字体,中间以逗号隔开,如果浏览器
不支持第一个字体,则会尝试下一个,直到找到合适的字体。
如果字体名称包含空格或中文,则应使用引号括起
注意:
在 CSS 中设置字体名称,可以直接写中文。但在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。
而在CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。
如:font-family: "\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。
字体的unicode编码可以通过escape() 来获得。
3.font-weight
font-weight属性用于定义字体的粗细,其可用属性值:lighter、normal(400)、
bold(700)、bolder、100~900(100的整数倍),有继承性。
字体的加粗跟字体有关,比如:一种字体只有两种粗细程度的变化,那么normal 到bold 和到bolder都是一样的效果。
4.font-style
font-style属性用于定义字体风格可用属性值如下:
normal:默认值,浏览器会显示标准的字体样式。
italic:浏览器会使用斜体的字体样式显示,如果字体没有斜体,那么正常显示字体。
oblique:浏览器会让文字倾斜显示
5.font综合设置
font:综合设置字体样式
选择器{font: font-style font-weight font-size/line-height font-family;}
必须保留font-size和font-family属性,否则font属性将不起作用。
如 font: 12px/1.5 sans-serif;
letter-spacing:字间距
letter-spacing属性用于定义<字>/<字母>间距。其属性值可为不同单位的数值,允许使用负值,默认为normal。
word-spacing:单词间距
word-spacing属性用于定义<英文单词>之间的间距,对中文字符无效。和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal。
line-height:行间距
line-height属性用于设置行间距【行高】。
line-height常用的属性值单位有三种,分别为像素px【用得多】,相对值em和百分比%。
行高可以跟单位,也可以不跟单位。但是意义不一样。
font: 12px/1.5em '宋体';
font:12px/150% '宋体';
font:12px/1.5 '宋体';
font: 12px/20px '宋体';
继承特性
加上单位 先计算 后继承 是以父亲为基准
不加单位 先继承 后计算 是孩子根据自己的文字大小为基准
line-height:可以让单行文本垂直居中。
CSDN_1586240642437.jpg
text-decoration
text-decoration可用属性值如下:
none:正常文本默认值
underline:下划线
overline:上划线
line-through:删除线
text-decoration后可同时赋多个值
text-align:文字水平对齐
left right center
text-indent:首行缩进
text-indent属性用于设置段落首行文本的缩进,只能设置于块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值, 建议使用em作为设置单位。
white-space:空白符处理
HTML源代码中无论有多少空格,在浏览器中只会显示一个空白符。
CSS中,white-space属性可设置空白符的处理方式:
normal:常规(默认值),文本中的空格、空行无效,文字到达边界后自动换行。
pre:预格式化,按文档的书写格式保留空格、空行原样显示。
nowrap:强制文本不能换行【<br>除外】,除非遇到换行标记<br />;
内容超出元素的边界会溢出,若超出浏览器页面会自动增加滚动条。
word-break:自动换行
normal 使用浏览器默认的换行规则,不打断单词显示
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行
word-wrap
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。