1. 常用属性
属性 | 作用 | 属性值 |
font-faimily | 字体 | ·一般先写英文,再写中文 |
font-size | 文字大小 | ·16px ·1.25em,表示1.25*父元素字体大小(很少用) |
font-weight | 文字粗细 | ·700,400 ·bold,normal, |
color | 文字颜色 | ·white;英文 ·#000;十六进制 ·rgb(255,255,255); 加透明度: ·rbga(255,255,255,.5) |
line-height | 文字的行高 | ·一般和盒子的高度一致,能够垂直居中 ·a标签有时设置:line-height=1,文字多大,行高就多大 |
font-style | 文字的样式 | normal表示正常 italic表示倾斜 |
text-align(常用) | 文字对齐方式 | center (常结合line-height=容器大小) left right |
text-indent | 文字的缩进 | 2em,缩进两个字体大小的距离 |
text-decoration | 文字的样式 | none 常给a标签设置 line-through 删除线 underline 下划线 overline 上划线 |
2. 以下三个属性常结合使用
属性 | 作用 | 属性值 |
overflow | 内容溢出时显示 | hidden 文本溢出隐藏 scroll 容器始终会有滚动条, auto 文本太多了,才会有滚动条 |
white-space | 控制元素一行显示/ 如何处理元素中的空白? | ·pre 保持原样,连续的空白符会被保留,遇到<br>标签才会换行 ·nowrap 所有内容都并到一行。和normal一样,连续的空白符会被合并,文本内的换行符无效 ·normal 连续的空白符会被合并,换行符会被当作空格处理 |
text-decoration | 文本溢出是否有省略号? | clip 仅仅修建文本 ellipsis 用……省略多出来的文本 |
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
常常作为三件套来使用
3. 其它不常用属性
属性 | 作用 | 属性值 |
font-varient | 能够设置小号的大写字母(虽然设置成大写字母,但是字体仍旧很小) | ·small-caps ·normal |
word-wrap | 长单词内部能否换行 | ·normal ·break-word(能够换行) |
letter-spacing | 字间距(适合中英文) | 10px |
word-spacing | 字母与字母之间的间距(只能是英文) | 10px |
text-transform | 字体大小写的设置 | none 默认 capitalize 首字母大写 uppercase 全部字母大写 lowercase 全部字母小写 |
text-shadow | 字体的阴影 | 四个参数分别是: 水平阴影距离 垂直阴影距离 模糊的半径 阴影的颜色 |
a {
text-shadow: 10px 10px 10px red;
}
4. 字体连写
p {
font: italic bold 18px/1 '楷体';
/* font: font-style font-weight font-size/line-height font-family */
}
结尾:
学习id: 201903090124-6
现在是大三学生,学习到了前后端交互的git阶段,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处。