<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } body{ font-size: 16px; } .text{ width: 400px; height: 100px; background-color: deeppink; font-size: 2em; text-align: center; } .text2{ /*text-decoration: none;*/ } </style> </head> <body> <p class="text">我是菜鸟联盟qwq</p> <a href="#" class="text2">我是百度</a> <!-- 文字相关属性 font-size: 设置文字大小 px 谷歌浏览器默认16px % 相对于父级字体尺寸的百分比 em 1个em等于父级字体尺寸 rem 根目录字体尺寸,相对于html标签(做手机用) font-family 设置文字家族(前提是浏览器要有设置的字体包,否则写了也没用) Microsoft yahei 微软雅黑 Serif 宋体 line-height: 设置行高 px % 相对于font-size的百分比 number 相对于font-size的倍数(和百分比一个道理) 鸡肋属性 font-weight: 设置文字粗细 normal 正常粗细(400) bold 加粗(700) 100-900 文字的粗细分为9级 100最细 900最粗 css可以做,但是浏览器无法显示 一般用normal、bold font-style: 设置文字倾斜(比加粗还鸡肋) normal 正常文字 italic 倾斜文字 font-variant: 变换小型大写字母(不用) normal 正常英语 small-caps 小型大写字母 复合属性写法font font: font-weight font-style font-size/line-height font-family text-transform: 设置文本字母的大小写 uppercase 转换大写字母,和上边font-variant对应 lowercase 小写字母 capitalize 首字母单词大写 text-align: 设置文本的对齐方式 left 文本靠左对齐 center 文本居中对齐 right 文本靠右对齐 justify 文本两端对齐 text-indent: 设置文本首行缩进 px em 1em = 单个文字的大小 % 相对于父级的宽度 text-decoration: 设置文本修饰(可以去除a标签默认给的下划线) underline 下划线 line-through 中划线 overline 上划线 white-space: 设置文本的换行方式 normal 文本换行 nowrap 文本不换行 word-break: break-all; 打断单词(数字) 1个单词太长超出文本框类似于文本不换行 用这个打断单词 word-spacing:0px; 设置字空格、单词之间的距离 letter-spacing:0px; 设置字(字母)之间的距离 单行文本省略 一套组合代码 overflow:hidden;隐藏 white-space:nowrap;不换行 text-overflow:ellipsis;省略 单行文本超出出现省略号的写法 字符实体(要加;) < 小于号 > 大于号 空格符号 text-indent: 50px; 新的没讲过 --> </body> </html>