恶补web之二:css知识(3)

css有3种定位机制:普通流,浮动和绝对定位.

除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定.

通过使用position属性,可以选择4种不同类型的定位:

static 元素框正常生成

relative 元素框偏移某个距离:正常元素可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动.若将相对定位中的top设为20px,则框将在原位置下面20像素地方,类似如果left设为30像素,则会在元素左边创建30像素的空间,即元素会向右移动.

absolute 元素框从文档完全删除,并相对于其包含块定位:绝对定位使元素位置和文档流无关,因此不占据空间.绝对定位位置相对于最近的已定位祖先元素,如果没有,则位置相对于最初的包含块.因为绝对定位框与文本流无关,所以可以覆盖页面上的其他元素,通过设置z-index属性来控制这些框的堆放次序.

fixed 元素框表现类似于将position设置为absolute,不过包含块是视窗本身

浮动的框可以向左或向右移动,直到其外边缘碰到另一个元素框为止,浮动框不在文档的普通流中,所以文档的普通流中的块框表现的就像浮动框不存在一样.

css中通过float属性实现元素的浮动

css2中引入一种新的简单选择器-统配选择器,显示为*,该选择器可以与任何元素匹配: * {color:red;}

在html中class值可能包含多个类名,比如:<p class="aaa bbb">,多个类名顺序无关紧要.假设aaa元素都是粗体,bbb元素都为斜体,而同时包含aaa和bbb的所有元素还有一个银色的背景,则可以写作:

.aaa {font-weight:bold;}

.bbb {font-style:italic;}

.aaa.bbb {background:silver;}

通过把2个类选择器链接在一起,仅可以选择同时包含这些类名的元素.

类选择器和id选择器可能区分大小写,这取决于文档的语言.html和xhtml将类和id值定义为区分大小写.

ccs2引入了属性选择器,属性选择器根据元素的属性及属性值来选择元素.

把含有title属性的所有元素变为红色: *[title] {color:red;}

对拥有href属性且仅仅位锚a元素应用样式:a[href] {color:red;}

对带有alt属性的img元素应用样式: img[alt] {border:5px solid red;} 注意属性值是可以虚构的.

选择特定属性值的元素: a[href=www.abc.com/index.asp] {color:red;}

多条件匹配:a[href="xxx"][title="zzz"] {color:red;}

根据部分属性值进行匹配:p[class~="imp"] {color:red;}

下表是对这些选择器的简单总结：

类型	描述
[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

下面代码只会选择lang属性值等于en或以en-开头的所有元素.

*[lang|="en"] {color:red;}

后代选择器可以作为某元素后代的元素.

只对h1元素中的em元素应用样式:h1 em {color:red;}

有关后代选择器一个易忽视的方面是2个元素间层次间隔可以是无限的.比如ul em,则会选择ul中的em元素,而不管em嵌套的层次多深.

如果不希望选择任意的后代,只选择某个元素的子元素,可以使用子元素选择器.例如,如果希望选择只作为h1元素子元素的strong元素:h1 > strong {color:red;}

下面代码会选择td元素子元素的所有p元素,该td元素从table继承,该table元素有一个包含company的类属性.

相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同的父元素.如要增加紧接在h1元素后面出现的p元素的上边距:h1 + p {margin-top:50px;}.注意h1和p不是包含关系,二是接壤关系.该选择器选择紧接在h1元素后出现的p元素,h1和p拥有共同的父元素.

css伪类用于向某些选择器添加特殊的效果.

伪类可以和css类配合使用:a.red : visited {color:#ff0000}

css2的first-child伪类可以来选择元素的第一个子元素:

p:first-child {font-weight:bold;}

上行代码将作为某个元素第一个子元素的所有p元素设置位粗体.必须声明<!DOCTYPE>,first-child才能在ie中生效.

css2的lang伪类使你有能力为不同语言定义特殊规则,以下代码为属性值为no的q元素定义引号的类型:

q:lang(no){quotes: "~" "~"}

first-line伪元素用于向文本首行设置特殊样式,只能用于块级元素.

first-letter伪元素用于向文本首字母设置特殊样式

before伪元素在元素内容前面插入新内容:h1:before {content:url(logo.gif);} 在每个<h1>前插入一幅图片

after伪元素在元素内容后插入新内容

使用/* */可以在css文件中插入注释