Scribd Logo
Carica

Benvenuto in Scribd!

  • CE 247 Web Technologies Lect 8 1 2020

    Caricato da

    Chintan Bhatt
    19 visualizzazioni16 pagine

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    19 visualizzazioni16 pagine

    CE 247 Web Technologies Lect 8 1 2020

    Caricato da

    Chintan Bhatt

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 16

    CE 247 Web Technologies

    CSS
    : By Dr. Chintan Bhatt
    •Item 1
    • Subitem A
    • Subitem B
    •Item 2
    • Subitem A
    • Subitem B <ul>
    <li>
    <div>Item 1</div>
    li {
    <ul>
    list-style-type: disc;
    <li>Subitem A</li>
    }
    <li>Subitem B</li>
    </ul>
    li li {
    </li>
    list-style-type: circle;
    <li>
    }
    <div>Item 2</div>
    <ul>
    <li>Subitem A</li>
    <li>Subitem B</li>
    </ul>
    </li>
    </ul>
    Tree???

    li em { color: olive; }

    h1 em, h2 em, h3 em { color: red; }

    ol a em { font-variant: small-caps; }
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div p {
    background-color: yellow;
    }
    </style>
    </head>
    <body>

    <div>
    <p>HMTL</p>
    <p>CSS</p>
    <section><p>WWW</p></section>
    </div>

    <p>JS</p>
    <p>PHP</p>
    CSS
    div:empty:after { div {
    content: ‘oh no…'; border: 1px solid #9e8fdd;
    } background-color: #f0edff;
    padding: 2rem;
    /* width: 500px;
    Additional Styling Stuff margin: 0 auto;
    */ }

    body { .card {
    text-align: center; display: grid;
    font-family: monospace; grid-auto-flow: column;
    font-size: 1.2rem; align-items: center;
    } grid-gap: 2rem;
    text-align: left;
    p{ }
    margin: 0;
    } img {
    width: 8rem;
    }
    HTML
    <h2>Empty Element</h2>

    <div></div>

    <h2>Not Empty Element</h2>

    <div>
    <a href="#" class="card">
    <img src="http://www.placepuppy.net/1p/400/250" alt="">
    <p>Article 1</p>
    </a>
    </div>
    Here is a quick summary of the selector types:
    Element type selector
    p {property: value;}
    Grouped selectors
    p, h1, h2 {property: value;}
    Descendant (contextual) selector
    ol li {property: value;}
    ID selector
    #sidebar {property: value;}
    div#sidebar {property:value;}
    Class selector
    p.warning {property: value;}
    .warning {property: value;}
    Universal selector
    * {property: value;}
    a:link { color: maroon; }
    a:visited { color: gray; }
    a:focus { color: maroon; background-color: #ffd9d9; }
    a:hover { color: maroon; background-color: #ffd9d9; }
    a:active { color: red; background-color: #ffd9d9; }
    :first-line
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    :first-letter
    • color
    • font
    • text-decoration
    • text-transform
    • vertical-align
    • padding
    • background
    • margin
    • line-height
    • border
    • letter-spacing
    • word-spacing

    Potrebbero piacerti anche