一、 文本的相关属性
文字大小,文字类型,文字粗细,文字的倾斜,行高,文字下划线,文字中划线,颜色,缩进,水平对齐,垂直居中,字符间距
字符属性font
font:font-style font-weight font-size/line-height font-family;
font-style:字体形态 nomal 正常/italic 斜体
font-weight: 字体粗细 100-900 400 正常 >400粗
<400细 / 英文单词 400 相当于 normal 默认值
bold 粗 相当于600 bolder light lighter(了解)
font-size:字体大小 px (掌握) / % / em(父元素字体大小) /rem (了解)
line-height 行高
font-family:字型 字体家族
建议:用css控制元素样式 不要用标签去实现
文本相关属性一般都是可以继承的 font-,line-,text-,color,list-都可以父传子,但是当你给子元素单独设置这些属性的时候,你设置的那个值一定会覆盖继承下来的属性
设置元素属性的优先级:
继承性属性<*<TagName<class<id
行高line-height
line-height=盒子高度时 使单行文本垂直居中
单位: px / 数值1.5 or 2 / %
1.5的含义是字体大小的1.5
% 的含义是字体大小的%倍
font-family字体家族
font-family:"楷体","微软雅黑","Times New Roman",Arial;
- 同时声明多个字体 每个字体以,隔开
- 中文字符或者几个英文单词组成的字体 要加“” or ‘’引起来,如果字体仅仅只有一个英文单词那就可以不用引起来
- 依次向下找 如果有则解析 如果没有就继续向下找
- 尽量不要出现中文汉字 以免乱码 你要写这个字型对应的英文名字或者unicode编码符号
文本修饰属性
text-decoration:overline上划线/underline下划线/ line-through中划线/none无线
缩进属性
text-indent:px/ em / rem;
+ 向右缩进
- 向左缩进
-
字符间距
letter-spacing:px;
文本水平居中
text-align:left/right/center;
不光可以居中文字还可以居中图片,因为图片具有文本的特性