CSS文本样式
一、文字样式属性
字体:font-family
文字大小:font-size
文字颜色:color
文字粗细:font-weight
文字样式:font-style
font-family:
1、含空格和中文的字体名,用英文引号""括起
2、多个字体,用英文逗号,隔开
3、引号嵌套,外使用双引号,内使用单引号
font-size:绝对单位(不会因为浏览器的改变而改变)
in英寸
cm厘米
mm毫米
pt磅
pcPica
xx-small 9px
x-small11px
small13px
medium16px
large19px
x-large23px
xx-large28px
font-size:相对单位(受显示器分辨率影响)
px 像素
em/%
em和%都是针对父元素设置的字体大小
例子:
p{font-size: 50px;}
.em{font-size: 2em;} .em{font-size: 150%;}
<p>父元素<span class="em">相对值em</span></p>
相对值em的字体大小为2倍的p中的元素大小
相对值em的字体大小为150%的p中的元素大小
文字加粗
html中:<b></b> <strong></strong>
CSS中:font-weight
属性值:400等用于normal 700等同于bold
normal正常
bold加粗
bolder更粗
lighter更细
100~900
文字斜体
html中:<em></em> <i></i>
CSS中:font-style
属性值:
normal正常
italic斜体,对于没有斜体变量的特殊字体,将应用 oblique
oblique倾斜字体
字体变形
font-variant
属性值:
normal正常
small-caps小型大写字母
CSS文本样式
text-align:设置元素内文本的水平对齐方式(只对块级元素有效)
属性值:
left
right
center
justify
vertical-align:设置元素内容的垂直方式(只对行内元素有效)
可以用于单元格
属性值:
baseline与基线对齐
sub下标
super上标
top顶端对齐
text-top与文字顶端对齐
middle与中线对齐
bottom底部对齐
text-bottom与文字底部对齐
长度 例子:style="vertical-align:-15px;"
基于基线向下移动15像素
百分比 例子:style="vertical-align:-100%;"
基于基线向下移动100%
技巧:当单行文字要垂直居中时,可以使用 line-height把值设为行高height一样高!
line-height:设置元素中文本行高
属性值:
长度值
百分比
当使用px作为单位时:.text3{
font-size: 10px;
line-height: 25px;
}行高不会随着字体大小而改变
当使用em作为单位时:.text3{
font-size: 30px;
line-height: 1.3em;
}行高值为30*1.3=39px,会自适应字体大小的改变
当使用%作为单位时:.text3{
font-size: 30px;
line-height: 100%;
}行高值为30*100%=30px,会自适应字体大小的改变
当设置了一个父元素的行高,会继承给子元素,但是继承的是计算后的值,不是直接把em或
%继承过来!
例子:
div{font-size: 20px;line-height: 1.3em;}
p{font-size: 30px;}
说明:div中的行高为26px,而div中p的行高也为26px(不是39px)
其他文本样式:
word-spacing设置元素内单词之间间距(单词的判断以空格为准)
letter-spacing设置元素内字母之间间距(每个字母间的间距)
text-transform 设置元素内文本的大小写
capitalize|uppercase|lowercase|none
(首字母大写|字母大写|字母小写|没有任何效果)
text-decoration设置元素内文本的装饰
underline|overline|line-through|blink|none
(下划线|上划线|贯穿线|闪烁效果|没有任何效果)