老雷html/css开发视频教程之文本字体
一、字体
1、font-size 字体大小
div{font-size:16px;}
2、font-weight 字体粗细
normal 正常的字体。相当于数字值400
bold 粗体。相当于数字值700。
bolder 定义比继承值更重的值
lighter 定义比继承值更轻的值
<integer>: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
div{
font-weight:600;
}
3.font-family 字体名称
div{font-family: helvetica, verdana, sans-serif;}
4.font-style:normal | italic | oblique 字体样式
div{
font-style:italic;
}
5.字体颜色 color
div{color:#f60;}
二、文本Text
1.white-space 指定元素是否保留文本间的空格、换行;指定文本超过边界时是否换行。
normal 默认处理方式
pre 原封不动的保留你输入时的状态
nowrap:强制所有文本在同一行内显示
2.word-break 定义元素内容文本的字间与字符间的换行行为
normal:
默认的换行规则。依据各自语言的规则,允许在字间发生换行。
keep-all:
对于 CJK(中文,韩文,日文)文本不允许在字符内发生换行。Non-CJK 文本表现同normal
break-all:
对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本,比如使连续的英文字符断行。
3.text-align 定义元素内容的水平对齐方式。
left: 内容左对齐。
center: 内容居中对齐。
right: 内容右对齐。
4.word-spacing 指定单词之间的额外间隙
p{word-spacing:20px;}
5.letter-spacing 指定字符之间的额外间隙
p{letter-spacing:10px;}
6.text-indent 定义块内文本内容的缩进
p{4.text-indent:20px;}
7.vertical-align
定义行内元素在行框内的垂直对齐方式 span/a/em/label
baseline: 把当前盒的基线与父级盒的基线对齐。如果该盒没有基线,就将底部外边距的边界和父级的基线对齐
sub: 把当前盒的基线降低到合适的位置作为父级盒的下标(该值不影响该元素文本的字体大小)
super: 把当前盒的基线提升到合适的位置作为父级盒的上标(该值不影响该元素文本的字体大小)
text-top: 把当前盒的top和父级的内容区的top对齐
text-bottom: 把当前盒的bottom和父级的内容区的bottom对齐
middle: 把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top: 把当前盒的top与行盒的top对齐
bottom: 把当前盒的bottom与行盒的bottom对齐
8.line-height 定义元素中行框的最小高度
9. text-decoration 文本装饰
text-decoration:none | underline | overline | line-through | blink
10.text-overflow
clip 当内联内容溢出块容器时,将溢出部分裁切掉。
ellipsis 当内联内容溢出块容器时,将溢出部分替换为(...)。
p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本字体</title> <style> .text{ height: 100px; font-family: helvetica, verdana, sans-serif; font-size:24px; font-weight:bolder; font-style:italic; color: #0F8E82; text-align:center; word-spacing:20px; letter-spacing:10px; text-indent:20px; line-height:100px; } span{ vertical-align:top; text-decoration:underline; } .text-over{ width: 100px; height: 30px; overflow: hidden; white-space:nowrap; word-break:break-all; text-overflow: ellipsis; } </style> </head> <body> <div class="text"> <div>字体abc abc</div> <div>aa<span>bb</span></div> </div> <div class="text-over"> textoverflowtextoverflowtextoverflow </div> </body> </html>