整体介绍
文本与字体属性 1)常用文本样式属性 2)字体属性详解 3)段落和行相关属性 4)继承性
常用文本样式属性
color属性
color属性可设置文本内容的前景色 color属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法 英语单词表示法,比如color:red仅仅用于学习时临时设置一下颜色,工作时基本不用这样的形式,因为追求精确
十六进制表示法
十六进制表示法是所有设计软件中都通用的颜色表示法,设计师给我们的设计图上面标注的颜色,通常为十六进制表color:#ff0000; 比如十六进制ff就是十进制的255,每种颜色分量都是0~255的数字 如果颜色值是#aabbcc的形式,可以简写为#abc
黑色是#000,白色是#fff,常见的灰色有#ccc、#333、#2f2f2f等
rgb()表示法
颜色也可以用rgb()表示法color:rgb(255,0,0);
rgba()表示法
颜色也可以用rgba()表示法,最后一个参数表示透明度,介于0到1之间,0表示纯透明,1表示纯实心 color:rgba(255,0,0,.65);
.65⇒0.65
rgba()表示法从IE9开始兼容
font-size属性
font-size:30px;
font-size属性用来设置字号,单位通常为px。今后课程上老师还会介绍em、rem单位。 网页文字正文字号通常是16px,浏览器最小支持10px字号
font-weight属性
font-weight属性设置字体的粗细程度,通常就用normal和bold两个值
font-style属性
font-style属性设置字体的倾斜
text-decoration属性
text-decoration属性用于设置文本的修饰线外观的(下划线、删除线)
字体属性详解
font-family属性
font-family属性用于设置字体
`font-family:“微软雅黑”;
字体可以是列表形式,一般英语字体放到前面,后面的字体
是前面的字体的”“后备”字体
中文字体也可以称呼它们的英语名字
字体通常必须是用户计算机中已经安装好的字体,所以一般来说设置为微软雅黑和宋体较多,设置成其他字体较少
如何设置为用户电脑中没有的字体呢?那就必须自己定义新字体,这就需要我们有字体文件,用户加载网页的时候,会同时下载这些字体文件
定义字体
字体文件根据操作系统和浏览器不同,有eot、woff2、woff、ttf、svg文件格式,需要同时有这5种文件
当我们拥有字体文件之后,就可以用@font-face定义字体
阿里巴巴普惠体
阿里巴巴提供了一套免费商用授权的普惠字体,网址 https://www.iconfont.cn/webfont
使用阿里巴巴普惠字体也省去了下载字体的麻烦 但只能使用文本框里的文字
段落和行相关属性
text-indent属性
text-indent,属性定义首行文本内容之前的缩进量,缩进两个字符应该写作
line-height属性
line-height属性用于定义行高
line-height属性的单位可以是以px为单位的数值 line-height:30px;
line-height属性也可以是没有单位的数值,表示字号的倍数,这是最推荐的写法 line-height:1.5; 20px*1.5 = 30px 原因:若font-size>line-height,将会重叠,所以设置为倍数自动调整
line-height属性也可以是百分数,表示字号的倍数 line-height:150%; 150% = 1.5
单行文本垂直居中
font合写属性
font属性可以用来作为font-style,font-weight,font-size,line-heighti和font-family属性的合写
继承性
文本相关的属性普遍具有继承性,只需要给祖先标签设置,即可在后代所有标签中生效
因为文字相关属性有继承性,所以通常会设置body标签的
字号、颜色、行高等,这样就能当做整个网页的默认样式了
就近原则
在继承的情况下,选择器权重计算失效,而是“就近原则”