CSS入门

CSS入门

以下内容来自于CSS the missing manual

参看链接：

译者：http://yulimin.iteye.com/blog/71162

原版：http://www.china-pub.com/computers/common/info.asp?id=35381

什么是CSS

CSS = Cascading Style Sheets

CSS中文称为层叠式样式表

CSS可以做什么

CSS可以将画面的内容和格式分离，使HTML代码更清晰，更容易维护

示例解释

p { color: red; font-size: 1.5em; }

Internal CSS

<style type="text/css">
h1 {
color: #FF7643;
font-face: Arial;
}
p {
color: red;
font-size: 1.5em;
}
</style>

External CSS

HTML:
<link rel="stylesheet" type="text/css" href="css/global.css">

XHTML:
<link rel="stylesheet" type="text/css" href="css/global.css" />

CSS：

<style type="text/css">
@import url(css/global.css);
</style>

Selector

Tag Selectors：Page-Wide Styling（页面范围内的格式）

h2 {
color: #FFC;
margin-bottom: 0;
padding: 5px 0px 3px 25px;
background-color:#999;
}

Class Selectors：Pinpoint Control（精确控制）

.special {
color:#FF0000;
font-family:"Monotype Corsiva";
}
<p class="special">

ID Selectors: Specific Page Element(特定的Page对象)

#banner {
background: #CC0000;
height: 300px;
width: 720px;
}
<p id="copyright">

Descendent Selector：

h1 strong { color: red; }
Here any <strong> tag inside an h1 is red, but other instances of the <strong> tag on the page, aren't affected.

p.intro a { color: yellow; }
Apply this style to every link (a) that's a descendent of a paragraph (p) that has the intro class applied to it. Note that there's no space between p and .intro, which tells CSS that the intro class applies specifically to the <p> tag.
p .intro a { color: yellow; }
an <a> tag inside of any tag styled with the .intro class, that's itself a descendent of a <p> tag.

.intro a {color: yellow; }
This selector indicates any <a> tag inside of any other tag<div>, <h1>, <table>, and so onwith the .intro class applied to it.

Group Selectors:

h1, h2, h3, h4, h5, h6 { color: #F1CD33; }

Universal Selector:

* { font-weight: bold; }

Pseudo-Class and Pseudo Element

a:link selects any link that your guest hasn't visited yet, while the mouse isn't hovering over or clicking it. This style is your regular, unused Web link.

a:visited is a link that your visitor has clicked before, according to the Web browser's history. You can style this type of link differently than a regular link to tell your visitor, "Hey, you've been there already!"

a:hover lets you change the look of a link as your visitor passes the mouse over it. The rollover effects you can create aren't just for funthey can provide useful visual feedback for buttons on a navigation bar.

a:active lets you determine how a link looks as your visitor clicks. In other words, it covers the brief nanosecond when someone's pressing the mouse button, before releasing it.

:before It lets you add content preceding a given element
p.tip:before {content: "HOT TIP!" }

:after pseudo-element adds generated contentbut after the element
p.tip:after {content: "HOT TIP!" }

:first-child pseudo-element lets you select and format just the first of however many children an element may have.
li:first-child { font-weight: bold; }

:focus applies when the visitor does something to indicate her attention to a Web page elementusually by clicking or tabbing into it.

input:focus { background-color: #FFFFCC; }

Advanced Selector:

Child Selector

与Descendent Selector不同的地方是，Child Selector可以定位到特定的元素

body > p

Adjacent Siblings

h2 + p

select every paragraph following each <h2> tag

Attribute Selectors
a[href="http://www.cosmofarmer.com"]{ color:red; font-weight:bold; }