您的位置：首页 > 职场人生

黑马程序员_css study notes(Sorted from w3cschool)1

2012-04-29 11:39 417 查看

---------------------- android培训、java培训、期待与您交流！ ----------------------

1、Background Properties

Property	Description	Value
background	Sets all the background properties in one declaration
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	fixed/scroll
background-color	Sets the background color of an element
background-image	Sets the background image for an element	body {background-image:url('paper.gif');}
background-position	Sets the starting position of a background image
background-repeat	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
color	Sets the color of text
letter-spacing	Increases or decreases the space between characters in a text
line-height	Sets the line height
text-align	Specifies the horizontal alignment of text
text-decoration	Specifies the decoration added to text
text-indent	Specifies the indentation of the first line in a text-block
text-transform	Controls the capitalization of text
vertical-align	Sets the vertical alignment of an element
white-space	Specifies how white-space inside an element is handled
word-spacing	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
font	Sets all the font properties in one declaration
font-family	Specifies the font family(字体) for text
font-size	Specifies the font size of text
font-style	Specifies the font style for text(如斜体)
font-variant	Specifies whether or not a text should be displayed in a small-caps font
font-weight	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 */

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

a:hover {color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* selected link */

Example3

5、List Properties

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {text-decoration:underline;}

a:active {text-decoration:underline;}

a:link {background-color:#B2FF99;}

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}

a:active {background-color:#FF704D;}

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies if the list-item markers should appear inside or outside the content flow(列表换行时，标签显示在文本外还是内)
list-style-type	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培训、期待与您交流！ ----------------------

详细请查看：http://edu.csdn.net/heima

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航