首页 > 代码库 > XHTML+CSS基础知识(四):用CSS控制页面

XHTML+CSS基础知识(四):用CSS控制页面

1.CSS写入页面的方法有哪些?

行内式:直接在标签当中利用style属性来写样式表。

内嵌式:将所有的样式表提取出来放到网页头部的style标签当中。

链接式:将样式表单独写成一个.css文件,利用link标签在网页头部引用,W3C标准推荐。

导入式:利用@import来引入样式表,由于效率等等问题已经被淘汰

2.CSS样式表的优先级?

理论上:行内样式>内嵌样式>链接样式>导入样式

实际上:就近原则,内嵌、链接、导入在同一个文件的头部,谁距离相应的代码近,谁的优先级别就更高一些。相当于在后面加载的样式表会覆盖掉在前面写的,所以距离更近的会起作用。

3.CSS当中常用的选择器有哪些?

标签选择器(div、p……)

ID选择器(#)

类选择器(.)

通用选择器(*)

伪类选择器(:link、:visited、:hover、:active)

其中IE6不支持除了a标签以外,并不支持其他标签的伪类,如果不考虑兼容的话可以使用。

4.选择器的优先级别是什么?

ID>类>标签>通用

5.样式的层叠和特殊性

即使是在不太复杂的样式表当中,要寻找同一元素也可能由两个或者更多规则。CSS通过一个称作层叠的过程处理这种冲突。

层叠给每个规则分配一个重要度,层叠采用以下重要度次序。

标有!important的用户样式>标有!important的作者样式>作者样式>用户样式>浏览器/用户代理应用的样式

然后,根据选择器的特殊性决定规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后来定义的规则优先。

为了计算规则的特殊性,给每种选择器都分配一个数字值,并分为a,b,c,d四个等级,将对应等级上的数值分别放置在千位,百位,十位,个位,数值越大越特殊,也就表示其优先级越高。

如果样式是行内样式,那么a=1;b等于ID选择器的总数;c等于类、伪类和属性选择器的数量;d等于类型选择器和为元素选择器的数量。

例如:#content .datePosted{},它的特殊性为0,1,1,0,换算为110

   #wraper #content{},它的特殊性为0,2,0,0,换算为200

那么上面的例子当中,后者的特殊性就高于前者,因而其样式表当中的规定就会起作用。

6.CSS中常见的命名方法

骆驼命名法:第一个字母小写,后面的词的第一个字母大写,比如:headerBlock

帕斯卡命名法:第一个字母大写,后面的词的第一个字母大写,比如:HeaderBlock

匈牙利命名法:在名称的前面加上一个或多个小写字母作为前缀,比如:header_Block

CSS中的命名规则

CSS中需要尽可能的进行语义化命名

头:head/header

内容:content/container

尾:foot/footer

导航:nav/navigation

侧栏:sidebar

7.CSS中样式的缩写

十六进制颜色格式"#RRGGBB",在CSS代码中可以缩写为"#RGB"

正确缩写#aabbcc=#abc,另外#abcabc!=#abc

内外边距的格式一样,现在以内边距为例,一般情况下,若要定义某盒子模型的四个内边距数值,代码如下:padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px;

这种写法如果大量使用,会使得代码变得冗余,现在才去下面写法以缩写代码,四个方向的内边距数值,以“上右下左”为顺序书写:padding:10px 20px 30px 40px;

如果四个方向的内边距数值相同,就可以缩写为一个数值:padding:10px 10px 10px 10px;=padding:10px;

如果四个方向的内边距,方向相对的内边距数值一样,那么就可以只写上面和右面的数值:padding:10px 20px 10px 20px;=padding:10px 20px;

如果左侧的内边距数值和右侧的内边距数值相同,那么只写上、右、下三个数值即可:padding:10px 20px 30px 20px;=padding 10px 20px 30px;

内外边距如果缺省某一项,会自动补充为其对应的那一边的距离,即如果写了上边距而缺失了下边距,则下边距与上边距数值相同,如果写了右边距而缺失了左边距,则左边距与右边距数值相同,通常要根据这个规则来缩写代码。

边框的缩写格式为:border:宽度 颜色 类型;冒号后面的三个属性位置可以变换,对于最终效果没有影响,但是建议大家还是按照这种书写顺序,以提高代码的可读性。

如果需要定义盒子不同宽度的边框,可以采用border-width,属性值同样也是四个并且以“上右下左”的顺序排列。

背景的缩写格式为:background:背景图片 背景颜色 平铺类型 水平定位 垂直定位;

举例:background:url(......) #ccc no-repeat 10px 5px;

定义盒子的背景图片为该地址中的图片,背景颜色为#ccc 不平铺且举例盒子左侧的距离为10px、距离上侧为5px。

另外后面的定位也可以用left,center,right,top,middle,bottom来代替。

文本的缩写格式为:font:样式 粗细 字体大小/行距 字体;

举例:font:italic bold 12px/1.5 Verdana,Geneva,sans-serif;

定义盒子内的字体为斜体、加粗、文字大小为12px、1.5倍行高,字体从左到右依次备选。

font后面的所有属性位置是不可调换的,这与边框和北京并不相同。

XHTML+CSS基础知识(四):用CSS控制页面