Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • CSS Selectors

    Cargado por

    Jonathan Lontabo
    25 vistas31 páginas
    Fundamentals of Web Design using CSS

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Fundamentals of Web Design using CSS

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    25 vistas31 páginas

    CSS Selectors

    Cargado por

    Jonathan Lontabo
    Fundamentals of Web Design using CSS

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 31

    CSS Selectors

    By Jonathan N. Lontabo

    Review on CSS Rule Set


    A rule or "rule set" is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block.

    Selector
    "selects" the elements on an HTML page that are affected by the rule set. consists of everything up to (but not including) the first left curly bracket.

    h1{ color: blue; margin-top: 1em; p{ padding: 5px; } td{ background-color: #ddd; }

    Declaration Block
    a container that consists of anything between (and including) the curly brackets. Whitespace inside a declaration block is ignored.
    h1

    { color: blue; }
    Or

    h1

    color: blue; }

    Declaration
    tells a browser how to draw any element on a page that is selected. consists of a property and a value, separated by a colon ":".

    h1{ color: blue; }

    Property
    the aspect of that element that you are choosing to style. There can only be one property within each declaration.

    h1{

    color: blue; }

    Value
    the exact style you wish to set for the property.

    h1{ color:

    blue; }

    Grouping Declarations

    You can use more than one declaration within a declaration block. Each declaration must be separated with a semicolon ";".
    p { padding: 5px; margin: 1px; }

    p { padding: 5px; margin: 1px; }

    Grouping Selectors

    Selectors are used to "select" the elements on an HTML page that are affected by rules. When several selectors share the same declarations, they may be grouped together to save writing the same rule more than once. Each selector must be separated by a comma.

    h1, h2, h3, h4 { padding: 1em; }


    .highlight p, .highlight ul{ margin-left: .5em; }

    #main p, #main ul{ padding-top: 1em; }

    Common Mistakes
    Forgetting to write each selector in full
    WRONG #maincontent p, ul{ border-top: 1px solid #ddd; } CORRECT #maincontent p, #maincontent ul{ border-top: 1px solid #ddd; }

    Common Mistakes
    Ending the grouping with a comma
    WRONG .highlight p, .highlight ul, { margin-left: .5em; } CORRECT .highlight p, .highlight ul { margin-left: .5em; }

    Shorthand properties

    Some properties are able to be written in shorthand, so that the values of several properties can be specified with a single property

    h2{
    font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 80%; line-height: 120%; font-family: arial, helvetica, sans-serif;

    } h2 { font: italic small-caps bold 80%/120% arial, helvetica, sans-serif; }

    Shorthand for padding and margin


    Values are applied in the following order: top, right, bottom and left clockwise, starting at the top.

    p { padding: 1em 1em 1em 1em; }

    p { padding: 1em; }

    p { padding: 1em 2em 1em 2em; }

    p { padding: 1em 2em; }

    p { padding: 1em 2em 3em 2em; }

    p { padding: 1em 2em 3em; }

    CSS Comments

    used to explain the code. Like HTML comments, CSS comments will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/".

    /* Comment here */ p { margin: 1em; /* Comment here */ padding: 2em; /* color: white; */ background-color: blue; } /* multi-line comment here */

    The Document Tree

    <body> <div id="content"> <h1>Heading here</h1> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor <em>sit</em>amet.</p> <hr> </div> <div id="nav"> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </div> </body>

    ANCESTOR

    DESCENDANT

    PARENT

    CHILD

    SIBLING

    MULTIPLE DESCRIPTION

    También podría gustarte