Head First HTML与CSS
第八章 增加字体和颜色样式
CSS——掌控页面的表现
调整字体大小
指定字体大小的方法有很多,通常是指定font-size。
1.按像素指定字体大小。
用像素指定字体大小时,就是在告诉浏览器字母高度是多少个像素。在CSS中,指定像素数时,要先指定一个数,后面加“px”。如下:
body{
font-size:14px;
}
设置一个字体的高度为14像素,这代表字母的最低部分与最高部分之间有14像素。
注意:px必须紧跟在像素数后面,中间不能有空格。
2.用%指定相对大小
用像素指定字体大小时,会明确指出字体有多大。而用一个百分数指定大小时,会相对另一个字体大小指出这个字体有多大。由于font-size是从父元素继承的一个属性,指定一个百分数字体大小时,就是相对于父元素的字体大小。
body{
font-size:14px;
}
h1{
font-size:150%;
}
body为h1的父元素,这里指定的一级标题字体大小为14px的150%也就是21px。
3.使用em指定字体相对大小
类似于百分数,em也是一个相对度量单位。1.3em就相当于130%。
body{
font-size:14px;
}
h1{
font-size:150%;
}
h2{
font-size:1.2em;
}
这里h2的父元素为body,因此二级标题的字体大小为1.2乘以14像素,约为17px(实际上是16.8px,不过大多数浏览器都会默认四舍五入为17px)。
4.使用关键字指定字体大小
可以把一个字体大小指定为xx-small,x-small,small,medium,large,x-large,xx-large。
浏览器会把这些关键字转换为像素值,它会使用浏览器中定义的默认值来完成转换。
通常规则是,small通常定义为大约12像素,每个大小大约比前一个大20%。
body{
font-size:small;
}
5.推荐使用的指定字体大小的方法
第一步,选择一个关键字(推荐small或medium),指定它为body规则中的字体大小,这相当于页面的默认字体大小。
第二步,使用em或百分数,相对于body字体大小指定其他元素的字体大小。
好处:便于改变整个页面的字体大小,需要时,只需改变body的字体大小就可以了,页面上所有字体都会同步调整大小。
注意:不建议使用像素指定字体大小,一是可用性较差,老版本IE浏览器不支持,二是调整大小不方便,页面维护更困难。
6.补充几点
如果没有指定字体大小,浏览器会应用默认字体大小。大多数情况下body的默认字体大小为16像素,h1是默认体文本字体大小的200%,h2是150%,h3是120%,h4是100%,h5是90%,h6是60%。
也可以设置body字体大小为相对大小(如1.1em,120%),这时将会是默认字体大小的相对值。
改变字体粗细
font-weight允许控制文本的粗细。
粗体文本:
font-weight:bold;
正常文本(即默认粗细):
font-weight:normal;
还有两个相对font-weight属性:bolder和lighter。
使用这两个属性时,会使得文本样式相对于所继承的值稍粗或稍细一点。
h2{
font-weight:bold;
}
为字体增加风格——斜体
在CSS中可以使用font-style属性为文本增加斜体风格:
font-style:italic;
并不是所有字体都支持斜体风格(italic),这时我们得到的实际上称为倾斜(oblique)文本。倾斜文本也是倾斜的,不过这种字体并非是使用一组专门设计的倾斜字符,而是由浏览器将正常文字倾斜。
也可以使用font-style属性得到倾斜文本,如下:
font-style:oblique;
取决于我们选择的字体和浏览器,有时这两种风格看起来是一样的,有时则不同。
今天考完了微生物,夺命三连还剩两门,爽喔!
放假倒计时6天。