paddingme / Learning-HTML-CSS

Don't bother me,I'm rendering........
77 stars 9 forks source link

CSS中的值和单位、字体以及文本属性 #10

Open paddingme opened 10 years ago

paddingme commented 10 years ago

这几天在学习CSS权威指南,学习了CSS中的值和单位、字体以及文本属性,这里做一个相关总结,主要总结我认为重要的知识点。

1. 值和单位

CSS里的值和单位,主要分为绝对长度单位:in(英寸)、cm(厘米)mm(毫米)、pt(点,标准印刷度量单位)、pc(派卡,印刷术语),以及相对长度单位:em,ex,px

我们主要使用empxex指所用字体中小写x的高度,我们无情得忽视它。“相对”相对“绝对”的好处我们已然了解,例如url链接,我们不用关注外部url地址如何变化,相对路径没问题,我们便可以各种超链接。这里的相对长度单位也是同样的道理。em相对于给定字体的font-size值。现代浏览器字体默认大小为16个像素。如果一个元素的font-size为14px,那么对于该元素,1em=14px。这个值可能会随元素的不同而不同,另在设置字体的大小的时,em的值会相对于父元素的字体大小改变。总得来说,就是em依赖于最近的字体大小(不要惯性的以为依赖于原先body设定的或者浏览器默认的值。)

px就是像素,对于显示器屏幕分辨率而言。当然%em。(注意理解:%这个值可以是任意的:可能是同一个元素另一个属性的值,也可以是从父元素继承的一个值,或者是祖先元素的一个值。)

至于要用px还是em,老版本的IE浏览器不支持像素的缩放,所以用px取代em,另使用em可以省去很多冗余的工作,例如设置了body里的字体大小,后面的元素内的字体大小全部设置为em大小,这样改动的话只需要改动body里的字体大小,而不用每个元素改动px大小,再次提醒em依赖于最近的字体大小。将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。px常使用在图片大小上。

这篇文章也有一定参考意义,可以一看。

2. 颜色

CSS中颜色取值主要由以下几种方法:

h1 {color:rgb(100%,50%,50%);}
h2 {color:rgb(255,132,123);}
h1 {
    color:#FF0000;
}

可以简写为

h1{
    color:#F00;
}

浏览器会取每一位,并将其复制成两位。

p {
 background-color:rgba(255,0,0,0.5);
}

CSS通常使用font-family定义使用什么字体,font-size定义字体大小,font-style定义斜体字, font-variant定义小型的大写字体,font-weight定义字体的粗细,font统一定义字体的所有属性。

font-family

font-family取值: [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit

family-name:指一系列字体名称 而generic-family是指一般性字体名称即以下五种通用字体系列。 CSS定义了五种通用字体系列(font-family):

说明:

(留坑:paddingme博客字体默认设置为small,而http://www.zaibc.com/的字体设置为 body { font: 13px Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; }) 很奇怪在我电脑上(windows7,chrome33.0.1750.146 )显示正常,而在同学的电脑上(mac,chrome版本未知)我博客的字体竟然比zaibc的字体小)理论上,small为13px,为什么不一样大呢?难道是浏览器渲染的问题?等我入手大MAC再做详细对比研究。当然HTML的big,small标签已经被w3c抛弃)

另关于默认字体可以查阅女施主的博文中详细解析了淘宝的字体,可以围观,做深入了解。还有这位男施主的博文这一篇博文,玉伯的文章找不到了很遗憾。张鑫旭的这篇博客也相当有趣,建议观看,提供一个新的视角关于字体设置。还强烈推荐这篇博客,博主对中文字体确有研究,所以他的网站阅乎阅读体验非常好。字体真是一门大学问!

4. 文本属性


参考文章: