css3 高级,CSS3（三）－－高级样式

This is a blue, center-aligned paragraph.

This p element should not be blue.

Dimension

PropertyDescriptionValuesCSS

heightSets the height of an elementautolength

%inherit1

max-heightSets the maximum height of an elementnone

length

%inherit2

max-widthSets the maximum width of an elementnone

length

%inherit2

min-heightSets the minimum height of an elementlength

%inherit2

min-widthSets the minimum width of an elementlength

%inherit2

widthSets the width of an elementautolength

%inherit1

Display and Visibility

visibility:hidden;

display:none;

display:inline;

display:block;

Positioning

Static Positioning：默认位置

Fixed Positioning：相对于浏览器窗口的位置，当滚动条滚动时，它的位置保持不变p.pos_fixed{position:fixed;top:30px;right:5px;}

Relative Positioning：相对于它平常的位置h2.pos_right{position:relative;left:20px;}

h2.pos_top

{

position:relative;

top:-50px;

}

Absolute Positioning：文档中的绝对位置

h2{position:absolute;left:100px;top:150px;}

Overlapping Elements：当元素重叠时，可以使用z-index来设置它的z轴顺序，可以是正值也可以是负值

img{position:absolute;left:0px;top:0px;z-index:-1;}

Float元素可以在水平方向浮动到左侧或右侧，其它元素会包围浮动的元素。img{float:right;}

其它元素可以清除左侧或右侧的浮动属性，从而不再包围浮动元素。

.text_line

{

clear:both;

}

Horizontal Align

可以使用多种方法改变元素的对齐方式：Margin、Position和Float。

Margin的例子：

.center{margin-left:auto;margin-right:auto;width:70%;background-color:#b0e0e6;}

pseudo-classes

语法：

selector:pseudo-class {property:value;}

或

selector.class:pseudo-class {property:value;}

例如：

a:visited {color:#00FF00;}  /* visited link */

a.red:visited {color:#FF0000;}

CSS Syntax

element:first-child把样式应用在子元素里找到的第一个element上

p:first-child{color:blue;}I am a strong man.I am a strong man.

p > i:first-child把样式应用在每个p元素里的第一个i元素

p:first-child i{color:blue;}I am a strong man. I am a strong man.I am a strong man. I am a strong man.

p:first-child i把样式应用在第一个p元素的所有i元素上。

pseudo-elements

语法

selector:pseudo-element {property:value;}

或

selector.class:pseudo-element {property:value;}

:first-letter应用在文本的第一个字符上。

:first-line应用在文本的第一行上。

:before和:after分别在元素之前或之后加上一些内容

h1:before{content:url(smiley.gif);}

所有的Pseudo Classes/Elements

SelectorExampleExample description

:linka:linkSelects all unvisited links

:visiteda:visitedSelects all visited links

:activea:activeSelects the active link

:hovera:hoverSelects links on mouse over

:focusinput:focusSelects the input element which has focus

:first-letterp:first-letterSelects the first letter of every

element

:first-linep:first-lineSelects the first line of every

element

:first-childp:first-childSelects every

elements that is the first child of its parent

:beforep:beforeInsert content before every

element

:afterp:afterInsert content after every

element

)p:lang(it)Selects every

element with a lang attribute value starting with "it"

图片

动态地改变图片的透明度：

img

{

opacity:0.4;

filter:alpha(opacity=40); /* For IE8 and earlier */

}

img:hover

{

opacity:1.0;

filter:alpha(opacity=100); /* For IE8 and earlier */

}

显示图片的一部分：

img.next

{

width:43px;

height:44px;

background:url(img_navsprites.gif) -91px 0;

}

@media对于不同的媒体，使用不同的样式：

Media TypeDescription

allUsed for all media type devices

auralUsed for speech and sound synthesizers

brailleUsed for braille tactile feedback devices

embossedUsed for paged braille printers

handheldUsed for small or handheld devices

printUsed for printers

projectionUsed for projected presentations, like slides

screenUsed for computer screens

ttyUsed for media using a fixed-pitch character grid, like teletypes and terminals

tvUsed for television-type devices

Attribute Selector

根据元素的属性值应用样式。例：

Hello world

Hello!

[key=value]只在key的值等于value时才应用样式。

[key~=value]只在key的值不等于value时才应用样式。