HTML和CSS学习笔记第8章——字体和颜色样式

返回主目录

CSS常见的字体属性

font-family定义网页中的字体
font-size控制字体大小
font-weight设置字体粗细
text-decoration给文本添加更多样式，如overlines添加上划线、underlines添加下划线、line-throughs添加中划线。

定义多种字体确保浏览器能显示你想要的字体

浏览器会根据你定义的字体顺序依次查找直到找到一种可以显示的字体。

body{
	font-family: Verdana, Geneva, Arial, sans-serif;
}

你能在大多数PC上看到Verdana，大多数Mac上看到Geneva，Arial则在两种机型上都很常见， 如果前面的都没有，则用默认的sans-serif。

当指定由几个单词组成的字体名时，要加双引号，比如：

font-family:"Courier New",Courier;

字体的大小

可以用像素，百分数，比例因数来确定字体的大小：

body{
	font-size:14px;
}
h1{
	font-size:150%;
}
h2{
	font-size:1.2em;
}

使用百分数和比例因数时，参考的是父元素。例如上述例子中，h1最后就会是21px，而h2则是17px。
还有一种定义字体大小的方法：关键字。他将字体大小定义为：xx-small, x-small, small, mediun, large, x-large, xx-large。浏览器将这些关键字转换成默认的像素值。但每个浏览器定义关键字的方式并不一定相同，如果用户需要也能自己定义。

规范字体大小的技巧：

步骤：

1. 选择一种关键字（small或medium）定义body字体大小，也就是网页的默认字体大小。
2. 用em或百分数把别的元素的字体大小指定为相对于body字体大小的字体尺寸。

好处：不管是设计者还是用户，通过改变body字体大小就可以方便地改变全局。

注意：用像素指定字体大小时，IE不支持比例缩放。因此用上述技巧可以使IE按比例缩放字体。

备注：在body中也可以使用em或%，这样的话会使body参考的是默认字体大小。一般浏览器默认字体大小是16px。

改变字体粗细

font-weight属性用来控制字体的粗细，bold文本看起来要比normal文本更粗，如果有一个元素继承了粗体或默认为粗体，可以设置为normal改回来。
除此之外还有两种属性值：bolder和lighter。
也可以设置为100~900之间的数，但会有浏览器或字体不支持。

添加字体样式

可以用font-style=italic语句添加斜体。
然而有的字体并不支持italic，可以用font-style=oblique代替。oblique文本也是倾斜的，但是字体不是专门设计的，浏览器只是把普通字幕倾斜显示。

为什么不用<em>？
<em>是用来指定结构的，它意味着强调某一段文字。同时，<em>的样式也有可能改变，不一定总是斜体。

/*以下代码会使<em>内容不显示斜体*/
em{
    font-style: normal;
}

文本颜色

1. 用颜色名作为属性值，可以不区分大小写，但css只预先定义了17种颜色。
2. 用红绿蓝定义颜色。

body{
	background-color:rgb(80%, 40%, 0%);
}

body{
	background-color:rgb(204, 102, 0);
}
/*数字范围在0~255*/

3. 使用十六进制代码定义颜色。
   #cc6600.
   前两位是红色，中间是绿色，最后是蓝色。如果每两位数字都一样，则可以缩写，例如#ccbb00可缩写为#cb0，但#ccbb10就不能缩写。

随着屏幕素质的提高，网页安全色已是历史。

text-decoration

可以同时设置多个值：

em{
	text-decoration:underline overline;
}

但如果不是合并在一起的一条规则而是两条规则，那text-decoration只能选择一个。
如果文本继承了不想要的属性，可以用none值去掉：

em{
	text-decoration:none;
}