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时才应用样式。