Scribd Logo
Unggah

Selamat datang di Scribd!

  • Cascading Style Sheets: Web Design

    Diunggah oleh

    trucious
    13 tayangan18 halaman
    Cascading Style Sheets

    Judul Asli

    Cascading Style Sheets

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPT, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Cascading Style Sheets

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    13 tayangan18 halaman

    Cascading Style Sheets: Web Design

    Diunggah oleh

    trucious
    Cascading Style Sheets

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 18

    Cascading Style Sheets

    Web Design
    Cascading Style Sheets (CSS)
     A robust set of tools to format a web page
     Benefits:
     Greater typography and page layout control
     Easier site maintenance
     Style information kept separate from structure
     Drawbacks:
     No universal support by all browser versions in
    all platforms
    CSS Syntax
     selector {property: value}
     Selector: normally the HTML element/tag you wish to
    define,
     Property: the attribute you wish to change.
     Value: Each property can take a value.
     The property and value are separated by a colon and
    surrounded by curly braces:
    p {
    text-align: center;
    color: black;
    font-family: arial
    }
    Multiple Styles Cascade into One
     What style will be used when there is more than
    one style specified for an HTML element?

     Cascading Order (4 has the highest priority)


    1. Browser default
    2. External Style Sheet
    3. Internal Style Sheet (inside the <head> tag)
    4. Inline Style (inside HTML element)
    The class attribute (for tag names)
     Define different styles for the same HTML
    element

    p.right {text-align: right}


    p.center {text-align: center}

    <p class="right">
    This paragraph will be right-aligned.
    </p>
    <p class="center">
    This paragraph will be center-aligned.
    </p>
    The class attribute (generic)
    .intro {
    color:#0000ff;
    background-color:transparent
    }

    <p class=“intro”>
    This text has a blue color
    </p>
    The id attribute (generic)
    #menu {
    color:#0000ff;
    background-color:transparent
    }

    <div id=“menu”>
    This text has a blue color
    </div>
    Adjacent Selectors
    <h2>Title</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>

    h2+p {
    color: #444;
    }

     Only the first paragraph will be affected


    Child selectors
    <div class=‘sidebar’>
    <p>This paragraph will be displayed in 444 color</p>
    <div class= ‘other’>
    <p>This is a normal paragraph</p>
    </div>
    </div>

    .sidebar>p {
    color: #444;
    }

     Only the paragraph directly inside the


    “sidebar” div will be affected.
    Pseudo-selectors for Links
     a:link { color: #111; }
     a:visited { color: #222; }
     a:hover { color: #333; }
     a:active { color: #444; }

     Order is significant.
     Hover can be used with other elements as
    well.
    External Style Sheets
     Files with a .css extension
     A page links to an external style sheet
    using the <link> tag inside the head
    section.

    <head>
    <link rel="stylesheet" type="text/css"
    href="mystyle.css" />
    </head>
    Internal Style Sheets
     Used when a single document has a
    unique style.
    <head>
    <style type="text/css">
    <!–-
    hr {color: sienna}
    p {margin-left: 20px}
    body {background-image:
    url("images/back40.gif")}
    -->
    </style>
    </head>
    Inline Styles
     Mixes content with presentation
     Use sparingly
    <p style="color: sienna; margin-left:
    20px">
    This is a paragraph
    </p>
    The <span> type selector
     Generic page element that can be
    formatted.
     Example:
    <p>We can apply a style in a part of
    a paragraph <span class=“part”>like
    this</span></p>
    Initial design
    Apply styles (styles.css)
    p {
    font-family: Georgia, "Times New Roman", Times, serif;
    }

    body {
    background-color: #FFCC66;
    }
    Custom style
    .pageName {
    font-weight: bold;
    color: #FF0000;
    text-decoration: underline;
    }

    <span class="pageName">Page 2</span>


    Activity
     Modify your CV page so that all display
    information (type face, color, size, etc.) is
    controlled by an external “cascading styles
    sheet” file.

    Anda mungkin juga menyukai