CSS入门

CSS入门

以下内容来自于CSS the missing manual

参看链接：

译者：http://yulimin.javaeye.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; }