1、px:像素(Pixel),相对于设备的长度单位,像素是相对于 显示器 屏幕分辨率而言的。
譬如,WONDOWS的用户所使用的分辨率一般是96像素/英寸。而 MAC 的用户所使用的分辨率一般是72像素/英寸。
2、em:相对长度单位。相对于当前对象内文本的字体尺寸。
如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数)
em相对于父元素,rem相对于根元素。
如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
3、pt:点(Point),绝对长度单位。
4、ex:相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
5、pc:派卡(Pica),绝对长度单位。相当于我国新四号铅字的尺寸。
6、in:英寸(Inch),绝对长度单位。
7、mm:毫米(Millimeter),绝对长度单位。
8、cm:厘米(Centimeter),绝对长度单位。
(一) 关键点
1. 以前IE无法调整那些使用px作为单位的字体大小,但现在几乎IE都支持;
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位
3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
(二) em如何来的?
1. 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符
合: 1em=16px。 那么12px=0.75em,10px=0.625em。
2. 为了简化font-size的换算,需要在css中的body选择器中声明 Font- size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
(三) em有如下特点:
1. em的值并不是固定的
2. em会继承父级元素的字体大小。
(四)__所以我们在写CSS的时候,需要注意两点: __
1. body选择器中声明Font-size=62.5%;
2.将你的原来的px数值除以10,然后换上em作为单位
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
例如:
再如: 以下表示首行缩进两个字符
当客户端的浏览器文本大小设置为“medium”, ems和百分比之间没有区别。然而,当设置改变,差别是相当大的。“Smallest”设置,ems比百分比小得多,而当设置为“Largest”,这时恰恰相反,ems比百分比显示地更大。有些可能会说,当真正去扩展时em单位在扩展,在实际的应用程序中,em文本尺度变化太大, 在一些客户端机器上最小的文本变得不是很清晰。
一般来说, 1 em = 12 pt = 16 px = 100% 。确定body的字体大小时候,当使用这些font-size, 增加基础本字体大小(使用CSS选择器)从100%到120%,让我们看看会发生什么。
一般来说,当我开始一个新的设计,我将在 body元素上使用百分比 (body { font-size: 62.5%}), 然后使用em单位大小 来比较。只要body使用百分比单位设置,您可以选择使用百分比或ems或其他任何CSS规则和选择器并且在你的基础字体大小上保持使用百分比的好处。在过去的几年中,这确实成为设计的标准。
像素现在被认为是可接受的字体大小单位(用户可以使用浏览器的“缩放”功能读小文本),虽然由于移动设备非常高的密度屏幕(一些Android和iPhone设备每英寸超过200到 300个像素,让你11 - 12-pixel字体很难看到!)他们也开始引起一些问题。因此,我将继续使用百分比作为web文档中的基础字体大小。
1.文本类属性
① 字体类型
语法:font-family:字体1,字体2,字体3...
设置多个字体时,浏览器会优先识别字体1,找不到则识别字体2,都无法识别时,显示浏览器默认字体。
② 字体大小
语法:font-size:数值+单位
字体大小单位有px、em、rem、pt;浏览器默认大小为16px;字体大小一般设置为偶数值;谷歌浏览器识别最小字体为12px。
③ 字体加粗
属性值:normal常规、bold加粗、bolder更粗、100-900数值
数值100-900字体加粗程度不同,其中100-500为常规字体,600-900为加粗字体。
④字体颜色
颜色值写法有三种:直接写颜色单词,如red;十六进制写法,如color:#000;rgb写法 ,color:rgb(0,0,0)
⑤字体倾斜
⑥复合写法
font:字体大小/行高 字体类型
⑦行高
语法: line-height:数值+单位
数值不能为负值
⑧水平对齐方式
语法:text-align:left左对齐
text-align:center 居中
text-align:right 右对齐
text-align:justify 两端对齐,只对英文起作用
⑨文本修饰
text-decoration:none去掉文本修饰,可去掉超链接(对a标签使用)的下划线
text-decoration:underline下划线
text-decoration:overline上划线
text-decoration:line-through删除线
文本缩进
text-indent:数值+单位
数值为正向后缩进,负值向前缩进
强制在一行显示
white-space:nowrap
长单词换行
word-warp:break-word
2.背景类属性
语法:background-color:颜色值
属性值同字体颜色属性值相同用法
语法:background-image:url(图片路径)
语法:background-position:left;
水平方向:left、center、right
垂直方向:top、center、bottom
属性值为数值时,水平方向向右为正,向左为负,垂直方向向下为正,向上为负。水平和垂直方向都居中时可写background-position:center
background-attachment:scroll
属性值:scroll 默认值;fixed 固定
当容器出现滚动条时,背景图固定不滚动,可设置为fixed。
语法:background-repeat:repeat
属性值:repeat平铺;no-repeat;repeat-x横向平铺;repeat-y纵向平铺。
background:背景图 背景平铺 背景位置
background:url(13211.jpg) no-repeat right bottom
3.列表属性
语法:list-style-type:disc
属性值:disc实心圆;circle空心圆;square实心方块;decimal数字;none去除列表符号。
4.伪类选择器
语法: 选择符:hover{属性:属性值}
超链接a标签的四个状态:
a) a:link 超链接的初始状态,链接没有被访问过时的状态
b) a:visited 链接访问过后的状态
c) a:hover 鼠标悬停在超链接上的状态(鼠标滑过)
d) a:active 超链接被激活时的状态(鼠标按下)