---------------------- android培训、java培训、期待与您交流! ----------------------
1、Background Properties
Property | Description | Value |
Sets all the background properties in one declaration |
| |
Sets whether a background image is fixed or scrolls with the rest of the page | fixed/scroll | |
Sets the background color of an element |
| |
Sets the background image for an element | body {background-image:url('paper.gif');} | |
Sets the starting position of a background image |
| |
Sets how a background image will be repeated | no-repeat/repeat/repeat-x/ repeat-y |
background-position的值采用两种方式描述,数字和关键字。数字(百分比和长度描述,可以混合使用):20% 65%(表示左起上起百分比)、关键字(top、center、bottom、left,可以复合等),如:left bottom。
2、Text Properties
Property | Description |
Sets the color of text | |
Increases or decreases the space between characters in a text | |
Sets the line height | |
Specifies the horizontal alignment of text | |
Specifies the decoration added to text | |
Specifies the indentation of the first line in a text-block | |
Controls the capitalization of text | |
Sets the vertical alignment of an element | |
Specifies how white-space inside an element is handled | |
Increases or decreases the space between words in a text |
Text-decoration's values:overline、linet-hrought、underline、none;
text-decoration's value:capitalize(首字母大写)、uppercase、lowercase;
white-space's value:normal(Text will wrap when necessary. This is default)、pre and nowrap(Text will never wrap to the next line.)。
There are many other properties such as font-size、font-family。
3、Font Properties
Property | Description |
Sets all the font properties in one declaration | |
Specifies the font family(字体) for text | |
Specifies the font size of text | |
Specifies the font style for text(如斜体) | |
Specifies whether or not a text should be displayed in a small-caps font | |
Specifies the weight of a font |
4、Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Special for links are that they can be styled differently depending on what state they are in.
The four links states are:
· 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
Example1
Example2
a:link {color:#FF0000;} /* unvisited link */ |
Example3
5、List Properties
a:link {text-decoration:none;} |
a:link {background-color:#B2FF99;} |
Property | Description |
Sets all the properties for a list in one declaration | |
Specifies an image as the list-item marker | |
Specifies if the list-item markers should appear inside or outside the content flow(列表换行时,标签显示在文本外还是内) | |
Specifies the type of list-item marker |
Values for Unordered Lists
Value | Description |
none | No marker |
disc | Default. The marker is a filled circle |
circle | The marker is a circle |
square | The marker is a square |
Values for Ordered Lists
Value | Description |
lower-alpha | The marker is lower-alpha (a, b, c, d, e, etc.) |
lower-roman | The marker is lower-roman (i, ii, iii, iv, v, etc.) |
upper-alpha | The marker is upper-alpha (A, B, C, D, E, etc.) |
upper-roman | The marker is upper-roman (I, II, III, IV, V, etc.) |
decimal | The marker is a number |
An Image as The List Item Marker
Example1
<style type="text/css">
ul {list-style-image:url('sqpurple.gif');}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
Example2
<style type="text/css">
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
---------------------- android培训、java培训、期待与您交流! ----------------------