样式的继承:字体的样式可以被继承,不做设置,继承样式才会生效(优先级比选择器低)
font-family :字体的样式 中文字体名称需要用 引号包裹
可以设置多个字体备选 使用逗号隔开
font-size: 字体的大小 chrome 默认大小16px
font-size: 20px;
1em = 默认字体的1倍(继承来的字体大小)
font-size: 2em;
100% = 1em
font-size: 200%;
font-color: 字体的颜色 #十六进制 || rgb() || english 推荐使用16进制
font-weight: 设置字体粗细
默认:normal
加粗:bold bolder
变细 light lighter
100-900 整数
font-style:字体倾斜
font-style: normal;
font-style: italic; 使用字体的自带倾斜效果
font-style: oblique; 强制字体倾斜
font属性简写:
font: style→weight→size/line-height→family 值之间用空格隔开,注意书写顺序
文本样式:
text-align:在块元素上(有宽度的容器上),是内部的文本,内联元素,内联块元素对齐 */
水平对齐: text-align
在块元素上(有宽度的容器上),是内部的文本,内联元素,内联块元素对齐
left:左对齐 right:右对齐 center:居中 justify:两端对齐
text-align: center;
行高:line-height
没有高度,px 行高 可以决定 元素的高度
当行高是一个数字时,元素的高度是 字体乘以行高
line-height: 2= line-height:2em
text-indent: 首行缩进 内联元素不可设置首行缩进
缩进 2个字体
text-indent: 2em;
容器宽度的%
text-indent: 50%;
可以设置为负值
text-decoration:文本修饰线
underline:下划线
overline:上划线
line-through:贯穿线
blink:定义闪烁的文本
none: 没有
letter-spacing:字符之间的间隙:
单位:px em 负值 letter-spacing: 10px;
word-spacing:单词间隙
word-spacing: 20px;
vertical-align:垂直对齐 针对于行内行内块元素
baseline | sub | super | top|text_top | middle | bottom | text_bottom (长度||百分比)
vertical-align不针对块级元素,子集(多行文本)要垂直居中,先设置父级display:table 子级display:table-cell在后在设置vertical-align:middle
单行文本直接设置line-height与父元素相同高度即可
图片与文字一同的需全部设置高度与line-height
网友评论