Open paddingme opened 10 years ago
这几天在学习CSS权威指南,学习了CSS中的值和单位、字体以及文本属性,这里做一个相关总结,主要总结我认为重要的知识点。
CSS里的值和单位,主要分为绝对长度单位:in(英寸)、cm(厘米)mm(毫米)、pt(点,标准印刷度量单位)、pc(派卡,印刷术语),以及相对长度单位:em,ex,px。
in
cm
mm
pt
pc
em
ex
px
我们主要使用em和px,ex指所用字体中小写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常使用在图片大小上。
这篇文章也有一定参考意义,可以一看。
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-size
font-style
font-variant
font-weight
font
font-family取值: [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit
[[ <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抛弃)
body { font: 13px Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; }
另关于默认字体可以查阅女施主的博文中详细解析了淘宝的字体,可以围观,做深入了解。还有这位男施主的博文和这一篇博文,玉伯的文章找不到了很遗憾。张鑫旭的这篇博客也相当有趣,建议观看,提供一个新的视角关于字体设置。还强烈推荐这篇博客,博主对中文字体确有研究,所以他的网站阅乎阅读体验非常好。字体真是一门大学问!
参考文章:
这几天在学习CSS权威指南,学习了CSS中的值和单位、字体以及文本属性,这里做一个相关总结,主要总结我认为重要的知识点。
1. 值和单位
CSS里的值和单位,主要分为绝对长度单位:
in
(英寸)、cm
(厘米)mm
(毫米)、pt
(点,标准印刷度量单位)、pc
(派卡,印刷术语),以及相对长度单位:em
,ex
,px
。我们主要使用
em
和px
,ex
指所用字体中小写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中颜色取值主要由以下几种方法:
可以简写为
浏览器会取每一位,并将其复制成两位。
3. 字体
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. 文本属性
参考文章: