1.字体相关属性:
color:控制文字颜色
font-family:设置文字的字体,如果需要设置多个字体,使用逗号隔开
font-size:设置文字的字体大小。该属性支持如下属性值:
xx-small:绝对字体尺寸,最小字体
x-small:绝对字体尺寸,较小字体
small:绝对字体尺寸,小字体
medium:绝对字体尺寸,正常大小的字体,默认值
large:绝对字体尺寸,大字体
x-large:绝对字体尺寸,较大字体
xx-large:绝对字体尺寸,最大字体
larger:相对字体尺寸,相对于父组件中的字体进行相对的增大
smaller:相对字体尺寸,相对于父组件中的字体进行相对的减小
length:直接设置字体大小,该值可以设置为一个百分比值表示为父组件中的字体大小的百分比,也可以设置为一个数值加长度大卫,比如10px
font-size-adjust:用于控制对不同字体的字体尺寸进行微调,可以设置为none表示不进行任何调整或者一个数值表示调整比例
font-stretch:用于改变文字的横向拉伸,默认值为normal表示不拉伸,还有两个属性值为:narrower表示横向压缩和wider表示横向拉伸
font-style:用于设置文字的倾斜与否。常用属性有:normal/italic/oblique,分别表示文字正常、斜体、倾斜字体
font-weight:用于设置字体是否加粗。lighter/normal/bold/bolder等属性值,也可以自定义具体的数值
text-decoration:用于控制文字的修饰线,none/blink/underline/line-through/overline等,分别对应于无修饰、闪烁、下划线、中划线、上划线等
font-variant:用于设置文字的大写字母的格式,属性值有两个:normal/small-caps,分别表示正常的字体和小型的大写字母字体
text-shadow:用于设置文字是否有阴影效果
text-transform:用于设置文字的大小写,属性值可以是:none/capitalize/uppercase/lowercase,分别对应:不转换,首字母大写,全部大写和全部小写
line-height:用于设置字体的行高,行高定义:字体最低端和字体内部顶端之间的距离,行高为负值时用于实现阴影效果
letter-spacing:用于设置字符之间的间隔,
word-spacing:用于设置单词之间的间隔
2.使用text-shadow属性可以为文字添加阴影效果,该属性的值有两种形式:color xoffset yoffset radius/xoffset yoffset radius color:color指定该阴影的颜色;xoffset指定阴影在横向上的偏移,为负值表示横向下偏移;yoffset指定阴影在纵向上的偏移,为负值表示纵向下偏移;radius指定阴影的模糊半径,该值越大,阴影越模糊
3.CSS3支持的颜色表示方法,有六种:
1.直接用颜色表示
2.用十六进制的颜色值表示
3.用rgb(red,green,blue)函数表示,红绿蓝三原色混合原理
4.用hsl(hue,saturation,lightness)函数表示,分别表示色调、饱和度和亮度
5.用rgba(red,green,blue,alpha)函数表示,新增一个透明度
6.用hsla(hue,saturation,lightness,alpha)函数表示,新增一个透明度
4.文本相关属性汇总:
text-indent:设置段落文本的缩进,可以用于设置文本的首行缩进
text-overflow:控制溢出文本的处理方法,该属性有如下两个属性值:
clip:如果指定了overflow:hidden,当该元素中文本溢出时,指定只是简单的裁切溢出的文本内容
elipsis:如果指定了overflow:hidden,当该元素中文本溢出时,指定裁切溢出的文本,并且显示溢出标记...
vertical-align:设置目标元素里内容的垂直对齐方式:
auto:自动对齐
baseline:默认值,元素内容与基线对齐
sub:元素内容与文本下标对齐
super:元素内容与文本上标对齐
top:默认值,元素内容与元素的顶端对齐
middle:默认值,元素内容对齐到元素的中间
bottom:默认值,元素内容与元素的底端对齐
length:指定文本内容相对于基线的偏移距离
text-align:设置目标组件中文本的水平对齐方式:
left:左对齐
right:右对齐
center:居中对齐
justify:两端对齐
direction:设置文本流入的方向,有两个属性值ltr和rtl,该属性类似于元素<bdo dir />
word-break:设置目标组件中文本内容的换行方式:
normal:默认规则进行换行
keep-all:只能在半角空格或者连字符出进行换行
break-all:设置允许在单词之间进行换行
white-space:设置目标组件中文本内容对空格的处理方式:
normal:默认处理方式
nowrap:强制在同一行内显示所有文本,知道文本结束或者遇到<br/>元素
word-wrap:设置目标组件中文本内容的换行方式:
normal:默认规则进行换行
break-word:设置允许在单词中间进行换行
5.有时候我们使用的字体而客户端并没有安装,因此字体设置将不会在客户端上起作用,CSS3提供了服务器字体定义,如果客户端没有安装这种字体,客户端将会自动下载这种字体:
/*定义服务器字体*/
@font-face{
/*指定服务器字体的名称*/
font-family: name;
/*通过url指定字体文件,format指定字体格式,目前服务器字体只支持两种对应格式:TrueType格式对应于.ttf文件;OpenType格式对应于.otf文件*、
src: url(url) format(fontformat);
sRules
}
/*在元素中应用该字体*/
div{
/*对应服务器字体的font-family属性值*/
font-family: name;
}
CSS3还提供了一个local用于解决问题:浏览器先检查local所指定的字体是否存在,如果不存在,才使用服务器字体作为替代方案:
@font-face{
font-family: name;
src: local("Goudy Stout"),url("Blazed.otf") format("OpenType");
}