CSS definition Selector

2. ID and Class
4. Cascade
6. Grouping
8. Inheritance
10. Context Selector
12. sub-class selectors
14. Other selectors
15. Structure and annotations

    20.1 ID and Class

    Selectors are styles used to control the design of a page. That is, the ID selector what class selector.

    All along, many developers often confuse IDs with classes, or do not use either selector correctly, or simply think of it as a substitute for another. This cognition is wrong.

    (1). App ID

    Each ID can be used only once in a page as a unique identifier for an element. In general, the ID is used only for the unique elements of the page, such as headers, main navigation bars, layout blocks, and so on.

    Example: <p id= "Hightlight" >this paragraph has red text.</p>

    The corresponding CSS code:

    #hightlight {

    Color: #FFFFFF;

    }

    (2). Combine ID with selector

    /* Suitable for all H2 titles */

    h2{

    Color: #333;

    font-size:16px;

    }

    /* Only suitable for title's H2 title */

    H2#title {

    Color: #eee;

    }

    Corresponding XHTML code:

    <H2 id= "title" >title of My article

    (3). Application of ID

    For each ID, only one element per page can use the style, so the ID should be the only element that exists and is used only once per page.

    (4). Avoid the use of the ID of the occasion

    The ID should not be used when more than one place needs to use the same CSS rule.

    (5). Application class

    Classes can be used indefinitely, so it is a very flexible way to apply CSS.

    <p class= "Hightlight" >his paragraph has red text.</p>

    Related CSS code:

    . hightlight {

    COLOR:FFFFFF;

    }

    (6). Combine multiple classes and IDs

    Example:

    <ul id= "Drinks" >

    <li class= "Mix" >Beer</li>

    <li class= "Mix" >Spirtis</li>

    <li class= "Hot" >Cola</li>

    <li class= "Hot" >Lemonade</li>

    </ul>

    The corresponding CSS code:

    ul#drinks {

    color:ff6600;

    }

    . mix {

    Color: #999999;

    }

    . Hot {

    Color: #333333;

    }

    (7). Overwrite the basic style with the class:

    p{

    Color: #ff6600;

    }

    . bleached {

    Color: #ccc;

    }

    The corresponding XHTML code:

    <p>this paragraph has red text.</p>

    <p class= "Bleached" >this paragraph has red text.</p>

    (8). Directly link the class to the element

    p.bleached {

    color:red;

    }

    The corresponding XHTML code:

    <p class= "Bleached" >this paragraph has red text.</p>

    (9). Avoid, suitable for

    For class, if you reuse it multiple times or use a subclass selector, select class, if it is a tag that defines uniqueness, such as layout, then use the ID.

    20.2 Stacking

    (1). external LINK Implementation Cascade

    <link rel= "stylesheet" type= "Text/css" href= "Css/one.css" >

    <link rel= "stylesheet" type= "Text/css" href= "Css/two.css" >

    <link rel= "stylesheet" type= "Text/css" href= "Css/three.css" >

    (2). Import Style Implementation Cascade

    @import url ("One.css")

    @import url ("Two.css")

    @import url ("Three.css")

    Note: One rule must be kept in mind, the later the more important the rule.

    20.3 Grouping

    h1{

    Font-family: Official script, song body, italics;

    line-height:140%;

    Color: #333;

    }

    h2{

    Font-family: Official script, song body, italics;

    line-height:140%;

    Color: #333;

    }

    h3{

    Font-family: Official script, song body, italics;

    line-height:140%;

    Color: #333;

    }

    /* After grouping */

    h1,h2,h3{

    Font-family: Official script, song body, italics;

    line-height:140%;

    Color: #333;

    }

    /* Group Exception */

    h1{

    Font-style:italic;

    }

    20.4 Inheritance

    H1 {

    Color: #333;

    }

    Inherit from body

    Body {

    margin:10px;

    Font-family: Official script;

    Background: #000;

    Color: #fff;

    }

    20.5 Context Selector

    h1{

    Color: #ccc;

    }

    I

    Color: #000;

    }

    /* Use context selector */

    H1 I {

    Color: #000;

    }

    20.6 sub-class selector

    . box {

    color:red;

    }

    . box1 {

    Font-weight:bold;

    }

    . box2 {

    Font-style:italic;

    }

    <div class= "box" >Box</div>

    <div class= "box Box1" >Box1</div>

    <div class= "Box Box2" >Box2</div>

    20.7 Other selectors

    (1). Type Selector

    P{color:black;}

    A{text-decoration:underline;}

    H1{font-weight:bold;}

    (2). Descendant Selector

    H2 i{

    color:red;

    }

    Li a{

    Text-decoration:none;

    }

    #main h1{

    color:red;

    }

    (3). Pseudo-Class

    A:link{color:blue;}

    A:visited{color:green;}

    a:hover,a:active{color:red;}

    Input:focus{background-color:yellow;}

    (4). Universal Selector

    *{

    padding:0;

    margin:0;

    }

    (5). Advanced Selector

    Advanced selectors, which are not yet fully supported, should avoid using these advanced selectors on any element that is important for site functionality.

    1. Sub-selector and neighboring sibling selector

    Child selector (only its son has effect, grandson has no effect)

    #nav > Li {background:url (bg.gif) no-repeat left top;}

    <ul id= "NAV" >

    <li>Home</li>

    <li>server

    <ul>

    <li>Development</li>

    <li>Consultancy</li>

    </ul>

    </li>

    <li>contact us</li>

    </ul>

    Neighboring sibling selector:

    H1+p{font-weight:bold;}

    <p>first paragraph</p>

    <p>second paragraph</p>

    2. Property Selector

    <strong title= "cascading Style Sheets" >CSS</strong>

    Strong[title] {border-bottom:1px dotted #999;}

    Strong[title]:hover {cursor:help;background: #ccc}

    20.8 code comments and Structures

    /*body styles*/

    Body {

    font-size:67.5%;

    }

    1. Add structural annotations

    /*---------------------------------------------------

    version:1.1

    Author:andy Budd

    Email:[email protected]

    Website:http:www.andybudd.com

    -----------------------------------------------------*/

    2. Self-prompting

    /*

    Use the star selector hack to give IE a different font size

    http://www.info.co.ph

    */

    Layout structure: Use meaningful markup.

    Tables are a layout tool rather than a way to display data, and people use block references (blockquote) to add whitespace instead of representing references. The web soon lost its meaning and became a hodgepodge of fonts and table labels. Now we can use DIV+CSS to control the layout.

CSS definition Selector