CSS

来源：互联网发布：apache php显示源代码编辑：程序博客网时间：2024/06/15 14:37

http://blog.csdn.net/yourtommy/article/details/7562945

Basic

CSS表示Cascading Style Sheets，用于定制HTML的外观。

CSS的语法为：选择器 {属性1:属性值1;属性2:属性值2;}，例如：p {color:red;text-align:center;}。

除了把HTML元素作为选择器, CSS还允许定义"id"和"class"选择器。id选择器应用于单个元素，例如#myid {color:red;}，它会自动应用到id为myid的元素；而class选择器应用于一组元素，例如.myclass {color:red;}。应用class选择器时指定元素的class属性，比如：<p class="myclass">。id和class选择器都可以限定于一种元素，比如p#myid {color:red}和p.class {color:red}只能应用在<p>元素上。

插入CSS有三种方式：

外部CSS：

内部CSS：

<head>
  <style type="text/css">
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
  </style>
</head>

内联CSS：

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

当多种CSS应用到同一元素上时，优先级为内联CSS > 内部CSS > 外部CSS > 浏览器默认。

CSS3分为多个模块，一些重要的模块有：

Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

CSS基础样式

Border

PropertyDescriptionborderSets all the border properties in one declarationborder-bottomSets all the bottom border properties in one declarationborder-bottom-colorSets the color of the bottom borderborder-bottom-styleSets the style of the bottom borderborder-bottom-widthSets the width of the bottom borderborder-colorSets the color of the four bordersborder-leftSets all the left border properties in one declarationborder-left-colorSets the color of the left borderborder-left-styleSets the style of the left borderborder-left-widthSets the width of the left borderborder-rightSets all the right border properties in one declarationborder-right-colorSets the color of the right borderborder-right-styleSets the style of the right borderborder-right-widthSets the width of the right borderborder-styleSets the style of the four bordersborder-topSets all the top border properties in one declarationborder-top-colorSets the color of the top borderborder-top-styleSets the style of the top borderborder-top-widthSets the width of the top borderborder-widthSets the width of the four borders

PropertyDescriptionValuesCSSoutlineSets all the outline properties in one declarationoutline-color
outline-style
outline-width
inherit2outline-colorSets the color of an outlinecolor_name
hex_number
rgb_number
invert
inherit2outline-styleSets the style of an outlinenone
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit2outline-widthSets the width of an outlinethin
medium
thick
length
inherit2

PropertyDescriptionmarginA shorthand property for setting the margin properties in one declarationmargin-bottomSets the bottom margin of an elementmargin-leftSets the left margin of an elementmargin-rightSets the right margin of an elementmargin-topSets the top margin of an element

PropertyDescriptionpaddingA shorthand property for setting all the padding properties in one declarationpadding-bottomSets the bottom padding of an elementpadding-leftSets the left padding of an elementpadding-rightSets the right padding of an elementpadding-topSets the top padding of an element

Background

PropertyDescriptionbackgroundSets all the background properties in one declarationbackground-attachmentSets whether a background image is fixed or scrolls with the rest of the pagebackground-colorSets the background color of an elementbackground-imageSets the background image for an elementbackground-positionSets the starting position of a background imagebackground-repeatSets how a background image will be repeated

文字效果

PropertyDescriptioncolorSets the color of textdirectionSpecifies the text direction/writing directionletter-spacingIncreases or decreases the space between characters in a textline-heightSets the line heighttext-alignSpecifies the horizontal alignment of texttext-decorationSpecifies the decoration added to texttext-indentSpecifies the indentation of the first line in a text-blocktext-shadowSpecifies the shadow effect added to texttext-transformControls the capitalization of textunicode-bidi vertical-alignSets the vertical alignment of an elementwhite-spaceSpecifies how white-space inside an element is handledword-spacingIncreases or decreases the space between words in a text

字体

PropertyDescriptionfontSets all the font properties in one declarationfont-familySpecifies the font family for textfont-sizeSpecifies the font size of textfont-styleSpecifies the font style for textfont-variantSpecifies whether or not a text should be displayed in a small-caps fontfont-weightSpecifies the weight of a font

Link

Link有四处状态：

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

例：

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

List

HTML有两种List：无序的ul和有序的ol。

list-styleSets all the properties for a list in one declarationlist-style-imageSpecifies an image as the list-item markerlist-style-positionSpecifies if the list-item markers should appear inside or outside the content flowlist-style-typeSpecifies the type of list-item marker

list-style-type有circle、square、upper-roman、lower-alpha等。

Table

可以对各种表格元素应用种类样式，比如：

table, th, td
{
border: 1px solid black;
}

table
{
width:100%;
}
th
{
height:50px;
}

高级样式

Grouping Selectors

h1,h2,p
{
color:green;
}

Nesting Selectors

<head>
<style type="text/css">
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>
</head>

<body>
<p>This is a blue, center-aligned paragraph.</p>
<div class="marked">
<p>This p element should not be blue.</p>
</div>

Dimension

PropertyDescriptionValuesCSSheightSets the height of an elementauto
length
%
inherit1max-heightSets the maximum height of an elementnone
length
%
inherit2max-widthSets the maximum width of an elementnone
length
%
inherit2min-heightSets the minimum height of an elementlength
%
inherit2min-widthSets the minimum width of an elementlength
%
inherit2widthSets the width of an elementauto
length
%
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;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

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

<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>

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

<head>
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>

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 <p> element:first-linep:first-lineSelects the first line of every <p> element:first-childp:first-childSelects every <p> elements that is the first child of its parent:beforep:beforeInsert content before every <p> element:afterp:afterInsert content after every <p> element)p:lang(it)Selects every <p> 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 TypeDescriptionallUsed for all media type devicesauralUsed for speech and sound synthesizersbrailleUsed for braille tactile feedback devicesembossedUsed for paged braille printershandheldUsed for small or handheld devicesprintUsed for printersprojectionUsed for projected presentations, like slidesscreenUsed for computer screensttyUsed for media using a fixed-pitch character grid, like teletypes and terminalstvUsed for television-type devices

Attribute Selector

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

<h1 title="Hello world">Hello world</h1>

<p>Hello!</p>

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

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

CSS3新特性

Border

PropertyDescriptionCSSborder-imageA shorthand property for setting all the border-image-* properties3border-radiusA shorthand property for setting all the four border-*-radius properties3box-shadowAttaches one or more drop-shadows to the box3

Background

PropertyDescriptionCSSbackground-clipSpecifies the painting area of the background images3background-originSpecifies the positioning area of the background images3background-sizeSpecifies the size of the background images3

文字效果

PropertyDescriptionCSShanging-punctuationSpecifies whether a punctuation character may be placed outside the line box3punctuation-trimSpecifies whether a punctuation character should be trimmed3text-align-lastDescribes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"3text-emphasisApplies emphasis marks, and the foreground color of the emphasis marks, to the element's text3text-justifySpecifies the justification method used when text-align is "justify"3text-outlineSpecifies a text outline3text-overflowSpecifies what should happen when text overflows the containing element3text-shadowAdds shadow to text3text-wrapSpecifies line breaking rules for text3word-breakSpecifies line breaking rules for non-CJK scripts3word-wrapAllows long, unbreakable words to be broken and wrap to the next line3

字体

CSS3之前网页只能使用安装在本地的字体，在CSS3通过@font-face可以使用任何字体。

@font-face的属性有：

DescriptorValuesDescriptionfont-familynameRequired. Defines a name for the fontsrcURLRequired. Defines the URL of the font filefont-stretchnormal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expandedOptional. Defines how the font should be stretched. Default is "normal"font-stylenormal
italic
obliqueOptional. Defines how the font should be styled. Default is "normal"font-weightnormal
bold
100
200
300
400
500
600
700
800
900Optional. Defines the boldness of the font. Default is "normal"unicode-rangeunicode-rangeOptional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"

2D Transforms

CSS3引入了新的Transforms属性，可以对图形进行变换。

PropertyDescriptionCSStransformApplies a 2D or 3D transformation to an element3transform-originAllows you to change the position on transformed elements3

该属性需要浏览器的前缀：

IE 9: -ms-
Safari/Chrome: -webkit-
Opera: -o-
Firefox: -moz-

例：

div
{
  transform: scale(2,4);
  -ms-transform: scale(2,4); /* IE 9 */
  -webkit-transform: scale(2,4); /* Safari and Chrome */
  -o-transform: scale(2,4); /* Opera */
  -moz-transform: scale(2,4); /* Firefox */
}

支持的函数有：

FunctionDescriptionmatrix(n,n,n,n,n,n)Defines a 2D transformation, using a matrix of six valuestranslate(x,y)Defines a 2D translation, moving the element along the X- and the Y-axistranslateX(n)Defines a 2D translation, moving the element along the X-axistranslateY(n)Defines a 2D translation, moving the element along the Y-axisscale(x,y)Defines a 2D scale transformation, changing the elements width and heightscaleX(n)Defines a 2D scale transformation, changing the element's widthscaleY(n)Defines a 2D scale transformation, changing the element's heightrotate(angle)Defines a 2D rotation, the angle is specified in the parameterskew(x-angle,y-angle)Defines a 2D skew transformation along the X- and the Y-axisskewX(angle)Defines a 2D skew transformation along the X-axisskewY(angle)Defines a 2D skew transformation along the Y-axis

3D Transforms

PropertyDescriptionCSStransformApplies a 2D or 3D transformation to an element3transform-originAllows you to change the position on transformed elements3transform-styleSpecifies how nested elements are rendered in 3D space3perspectiveSpecifies the perspective on how 3D elements are viewed3perspective-originSpecifies the bottom position of 3D elements3backface-visibilityDefines whether or not an element should be visible when not facing the screen3

FunctionDescriptionmatrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)Defines a 3D transformation, using a 4x4 matrix of 16 valuestranslate3d(x,y,z)Defines a 3D translationtranslateX(x)Defines a 3D translation, using only the value for the X-axistranslateY(y)Defines a 3D translation, using only the value for the Y-axistranslateZ(z)Defines a 3D translation, using only the value for the Z-axisscale3d(x,y,z)Defines a 3D scale transformationscaleX(x)Defines a 3D scale transformation by giving a value for the X-axisscaleY(y)Defines a 3D scale transformation by giving a value for the Y-axisscaleZ(z)Defines a 3D scale transformation by giving a value for the Z-axisrotate3d(x,y,z,angle)Defines a 3D rotationrotateX(angle)Defines a 3D rotation along the X-axisrotateY(angle)Defines a 3D rotation along the Y-axisrotateZ(angle)Defines a 3D rotation along the Z-axisperspective(n)Defines a perspective view for a 3D transformed element

Transitions

CSS3可以不使用Flash动画或JavaScripts就可以动态改变样式。

例如：

div
{
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;

  /* Firefox 4 */
  -moz-transition-property:width;
  -moz-transition-duration:1s;
  -moz-transition-timing-function:linear;
  -moz-transition-delay:2s;

  /* Safari and Chrome */
  -webkit-transition-property:width;
  -webkit-transition-duration:1s;
  -webkit-transition-timing-function:linear;
  -webkit-transition-delay:2s;

  /* Opera */
  -o-transition-property:width;
  -o-transition-duration:1s;
  -o-transition-timing-function:linear;
  -o-transition-delay:2s;
}

div:hover
{
width:200px;
}

PropertyDescriptionCSStransitionA shorthand property for setting the four transition properties into a single property3transition-propertySpecifies the name of the CSS property to which the transition is applied3transition-durationDefines the length of time that a transition takes. Default 03transition-timing-functionDescribes how the speed during a transition will be calculated. Default "ease"3transition-delayDefines when the transition will start. Default 03

Animations

CSS3可以定义动画，例如：

div
{
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:myfirst 5s;
  -moz-animation:myfirst 5s; /* Firefox */
  -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
  0%   {background:red; left:0px; top:0px;}
  25%  {background:yellow; left:200px; top:0px;}
  50%  {background:blue; left:200px; top:200px;}
  75%  {background:green; left:0px; top:200px;}
  100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
  0%   {background:red; left:0px; top:0px;}
  25%  {background:yellow; left:200px; top:0px;}
  50%  {background:blue; left:200px; top:200px;}
  75%  {background:green; left:0px; top:200px;}
  100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0%   {background:red; left:0px; top:0px;}
  25%  {background:yellow; left:200px; top:0px;}
  50%  {background:blue; left:200px; top:200px;}
  75%  {background:green; left:0px; top:200px;}
  100% {background:red; left:0px; top:0px;}
}

PropertyDescriptionCSS@keyframesSpecifies the animation3animationA shorthand property for all the the animation properties, except the animation-play-state property3animation-nameSpecifies the name of the @keyframes animation3animation-durationSpecifies how many seconds or milliseconds an animation takes to complete one cycle. Default 03animation-timing-functionDescribes how the animation will progress over one cycle of its duration. Default "ease"3animation-delaySpecifies when the animation will start. Default 03animation-iteration-countSpecifies the number of times an animation is played. Default 13animation-directionSpecifies whether or not the animation should play in reverse on alternate cycles. Default "normal"3animation-play-stateSpecifies whether the animation is running or paused. Default "running"3

Multiple Columns

CSS３可以把一个元素分成多列显示，例如：

.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}

PropertyDescriptionCSScolumn-countSpecifies the number of columns an element should be divided into3column-fillSpecifies how to fill columns3column-gapSpecifies the gap between the columns3column-ruleA shorthand property for setting all the column-rule-* properties3column-rule-colorSpecifies the color of the rule between columns3column-rule-styleSpecifies the style of the rule between columns3column-rule-widthSpecifies the width of the rule between columns3column-spanSpecifies how many columns an element should span across3column-widthSpecifies the width of the columns3columnsA shorthand property for setting column-width and column-count3

User Interface

CSS3支持新的UI属性，比如:

resize
box-sizing
outline-offset

PropertyDescriptionCSSappearanceAllows you to make an element look like a standard user interface element3box-sizingAllows you to define certain elements to fit an area in a certain way3iconProvides the author the ability to style an element with an iconic equivalent3nav-downSpecifies where to navigate when using the arrow-down navigation key3nav-indexSpecifies the tabbing order for an element3nav-leftSpecifies where to navigate when using the arrow-left navigation key3nav-rightSpecifies where to navigate when using the arrow-right navigation key3nav-upSpecifies where to navigate when using the arrow-up navigation key3outline-offsetOffsets an outline, and draws it beyond the border edge3resizeSpecifies whether or not an element is resizable by the user3

CSS