Scribd Logo
Upload

Welcome to Scribd!

  • CSS

    Uploaded by

    mu29032004
    9 views7 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views7 pages

    CSS

    Uploaded by

    mu29032004

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    Ch7border.

    css

    body {
    color:#000000;
    background-color:#ffffff;
    font-family:arial, verdana, sans-serif;
    font-size:12px;}

    .solid {border-style:solid; border-color:#000000; border-width:1px;}


    .doHed {border-style:doHed; border-color:#999999; border-width:2px;}
    .dashed {border-style:dashed; border-color:#666666; border-width:3px;}
    .double {border-style:double;}
    .groove {border-style:groove;}
    .ridge {border-style:ridge;}
    .inset {border-style:inset;}
    .outset {border-style:outset;}

    <?xml version="1.0" ?>


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiaonal//EN"
    "hHp://www.w3.org/TR/xhtml1/DTD/xhtml1-transiaonal.dtd">
    <html xmlns="hHp://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <atle>Borders</atle>
    <link rel="stylesheet" type="text/css" href="ch7border.css" />
    </head>
    <body>
    <p class="solid">This is a paragraph with a <code>solid</code> border</p>
    <p class="doHed">This is a paragraph with a <code>doHed</code> border</p>
    <p class="dashed">This is a paragraph with a <code>dashed</code> border</p>
    <p class="double">This is a paragraph with a <code>double</code> border</p>
    <p class="groove">This is a paragraph with a <code>groove</code> border</p>
    <p class="ridge">This is a paragraph with a <code>ridge</code> border</p>
    <p class="inset">This is a paragraph with an <code>inset</code> border</p>
    <p class="outset">This is a paragraph with an <code>outset</code> border</p>
    </body>
    </html>
    1
    2
    exercise1.css

    body {
    background-color:#ffffff;
    font-family:arial, verdana, sans-serif;
    font-size:12px;}

    ul#contents {background-color:#d6d6d6;}

    ul {
    list-style:circle;
    font-weight:bold;
    padding-led:30px;
    width:250px;}

    ul ul {list-style:square;}

    a:link {
    color:#0033ff;;
    text-decoraaon:none;}

    a:visited {
    color:#0066ff;
    text-decoraaon:none;}

    a:acave {
    text-decoraaon:underline;}

    a:link:hover {
    color:#003399;
    background-color:#e9e9e9;
    text-decoraaon:underline;}

    exercise1.html
    3
    <html>

    <head>
    <atle>Advanced CSS</atle>
    <link rel="stylesheet" type="text/css" href="exercise1.css" />
    </head>

    <body>
    <h1>Chapter 10 - Advanced CSS</h1>

    <ul id="contents">
    <li>Properaes</li>
    <li>
    <ul>
    <li><a href="#background">Background Properaes</a></li>
    <li><a href="#outline">Outline Properaes</a></li>
    <li><a href="#link">Link Properaes</a></li>
    <li><a href="#list">List Properaes</a></li>
    <li><a href="#table">Table Properaes</a></li>
    </ul>
    </li>
    <li>Generaang Content</li>
    <li>
    <ul>
    <li><a href="#before">:before Pseudo-Element</a></li>
    <li><a href="#ader">:ader Pseudo-Element</a></li>
    </ul>
    </li>
    <li>Posiaoning</li>
    <li>
    <ul>
    <li><a href="#normal">Normal Flow</a></li>
    <li><a href="#absolute">Absolute Posiaoning</a></li>
    <li><a href="#floaang">Floaang Posiaoning</a></li>
    </ul>
    </li>
    </ul>

    <h2>Properaes</h2>
    <h3><a name="background">Background Properaes</a></h3>
    <p></p>
    <h3><a name="outline">Outline Properaes</a></h3>
    <h3><a name="link">Link Properaes</a></h3>
    <h3><a name="list">List Properaes</a></h3>
    <h3><a name="table">Table Properaes</a></h3>

    4
    <h2>Generaang Content</h2>
    <h3><a name="before">:before Psuedo-Element</a></h3>
    <h3><a name="ader">:ader Psuedo-Element</a></h3>

    <h2>Posiaoning</h2>
    <h3><a name="normal">Normal Flow</a></h3>
    <h3><a name="absolute">Absolute Posiaoning</a></h3>
    <h3><a name="floaang">Floaang Posiaoning</a></h3>
    </body>
    </html>

    5
    exercise2.css

    body {
    background-color:#ffffff;
    font-family:arial, verdana, sans-serif;
    font-size:12px;}

    div {
    background-color:#ffffff;
    padding:10px;
    border-style:groove; border-width:4px; border-color:#999999;
    width:300px;}

    div.page1 {
    posiaon:absolute;
    top:70px;
    z-index:2;
    background-color:#f2f2f2;}

    div.page2 {
    posiaon:absolute;
    top:170px; led:100px;
    z-index:3;}

    div.page3 {
    posiaon:absolute;
    top:270px; led:200px;
    z-index:1;
    background-color:#efefef;}

    6
    exercise2.html

    <?xml version="1.0" ?>


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiaonal//EN"
    "hHp://www.w3.org/TR/xhtml1/DTD/xhtml1-transiaonal.dtd">
    <html xmlns="hHp://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>
    <atle>Exercise 1</atle>
    <link rel="stylesheet" type="text/css" href="exercise2.css" />
    </head>

    <body>
    <h1>Chapter 10 - Advanced CSS</h1>

    <div class="page1">
    <h2>Properaes</h2>
    <ul>
    <li><a href="#background">Background Properaes</a></li>
    <li><a href="#outline">Outline Properaes</a></li>
    <li><a href="#link">Link Properaes</a></li>
    <li><a href="#list">List Properaes</a></li>
    <li><a href="#table">Table Properaes</a></li>
    </ul>
    </div>

    <div class="page2">
    <h2>Generaang Content</h2>
    <ul>
    <li><a href="#before">:before Pseudo-Element</a></li>
    <li><a href="#ader">:ader Pseudo-Element</a></li>
    </ul>
    </div>

    <div class="page3">
    <h2>Posiaoning</h2>
    <ul>
    <li><a href="#normal">Normal Flow</a></li>
    <li><a href="#absolute">Absolute Posiaoning</a></li>
    <li><a href="#floaang">Floaang Posiaoning</a></li>
    </ul>
    </div>

    </body>
    </html>

    You might also like