CSS3（三）－－高级样式

Grouping Selectors

h1,h2,p
{
color:green;
}

Nesting Selectors

This is a blue, center-aligned paragraph.

This p element should not be blue.

Dimension

Property	Description	Values	CSS
height	Sets the height of an element	auto length % inherit	1
max-height	Sets the maximum height of an element	none length % inherit	2
max-width	Sets the maximum width of an element	none length % inherit	2
min-height	Sets the minimum height of an element	length % inherit	2
min-width	Sets the minimum width of an element	length % inherit	2
width	Sets the width of an element	auto length % inherit	1

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上

I am a strong man.

I am a strong man.

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

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

Selector	Example	Example description
:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
:focus	input:focus	Selects the input element which has focus
:first-letter	p:first-letter	Selects the first letter of every element
:first-line	p:first-line	Selects the first line of every element
:first-child	p:first-child	Selects every elements that is the first child of its parent
:before	p:before	Insert content before every element
:after	p:after	Insert 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 Type	Description
all	Used for all media type devices
aural	Used for speech and sound synthesizers
braille	Used for braille tactile feedback devices
embossed	Used for paged braille printers
handheld	Used for small or handheld devices
print	Used for printers
projection	Used for projected presentations, like slides
screen	Used for computer screens
tty	Used for media using a fixed-pitch character grid, like teletypes and terminals
tv	Used for television-type devices

Attribute Selector

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

Hello world

Hello!

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

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

阅读(1206) | 评论(0) | 转发(0) |

0

上一篇：CSS3（二）－－基础样式

下一篇：CSS3（四）终－－CSS3新特性