css教程之文本字体
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{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>