Scribd Logo
Importer

Bienvenue sur Scribd !

  • Pemrograman Berbasis Web 3 - CSS

    Transféré par

    MelaAnndiniNatadiredja
    51 vues18 pages
    Pemograman berbasis web dengan menggunaka CSS

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Pemograman berbasis web dengan menggunaka CSS

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    51 vues18 pages

    Pemrograman Berbasis Web 3 - CSS

    Transféré par

    MelaAnndiniNatadiredja
    Pemograman berbasis web dengan menggunaka CSS

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 18

    Pemrograman Berbasis Web

    Pertemuan 3 CSS
    Program Diploma IPB - Aditya Wicaksono, S.Komp 1
    Overview
    Apa itu CSS
    PengaksesanCSS
    Yang dapat dikenai CSS
    KesamaanCSS
    KedalamanCSS
    Program Diploma IPB - Aditya Wicaksono, S.Komp 2
    Apa itu CSS
    Cascading Style Sheet
    Ekstensi file *.css
    Versi terakhir adalah CSS 3
    Program Diploma IPB - Aditya Wicaksono, S.Komp 3
    Pengaksesan CSS
    Inline
    Internal
    Eksternal
    Program Diploma IPB - Aditya Wicaksono, S.Komp 4
    Inline
    <div style=color: red;>Merah</div>
    Program Diploma IPB - Aditya Wicaksono, S.Komp 5
    Internal
    <html>
    <head>
    <style type=text/css>
    h1 { color: red; }
    </style>
    </head>
    <body>
    <h1>Merah</h1>
    </body>
    </html>
    Program Diploma IPB - Aditya Wicaksono, S.Komp 6
    Eksternal
    Index.html
    <html>
    <head>
    <link href=Style.css rel=stylesheet
    type=text/css />
    </head>
    <body>
    <h1>Merah</h1>
    </body>
    </html>
    Style.css
    h1
    {
    color: red;
    }
    Program Diploma IPB - Aditya Wicaksono, S.Komp 7
    Warna apa yang muncul ?
    Index.html
    <html>
    <head>
    <link href=Style.css rel=stylesheet type=text/css />
    <style type=text/css>
    h1 { color: blue; }
    </style>
    </head>
    <body>
    <h1 style=color: green>Warna</h1>
    </body>
    </html>
    Style.css
    h1
    {
    color: red;
    }
    Program Diploma IPB - Aditya Wicaksono, S.Komp 8
    Prioritas Pengaksesan CSS
    Inline
    1
    Eksternal
    2
    Internal
    3
    Program Diploma IPB - Aditya Wicaksono, S.Komp 9
    Yang dapat dikenai CSS
    ELEMENT CLASS ID
    Program Diploma IPB - Aditya Wicaksono, S.Komp 10
    Element
    <html>
    <head>
    <style type=text/css>
    h1 { color: red; }
    </style>
    </head>
    <body>
    <h1>Merah</h1>
    </body>
    </html>
    Program Diploma IPB - Aditya Wicaksono, S.Komp 11
    Class
    <html>
    <head>
    <style type=text/css>
    .merah { color: red; }
    </style>
    </head>
    <body>
    <div class=merah>Merah</div>
    </body>
    </html>
    Program Diploma IPB - Aditya Wicaksono, S.Komp 12
    Id
    <html>
    <head>
    <style type=text/css>
    #merah { color: red; }
    </style>
    </head>
    <body>
    <div id=merah>Merah</div>
    </body>
    </html>
    Program Diploma IPB - Aditya Wicaksono, S.Komp 13
    Warna apa yang muncul ?
    Index.html
    <html>
    <head>
    <link href=Style.css rel=stylesheet type=text/css
    />
    </head>
    <body>
    <div id=warna class=warna>Warna</div>
    </body>
    </html>
    Style.css
    div { color: red; }
    .warna { color: green; }
    #warna { color: blue; }
    Program Diploma IPB - Aditya Wicaksono, S.Komp 14
    Prioritas yang dikenai CSS
    1
    ID
    2
    CLASS
    3
    ELEMENT
    Program Diploma IPB - Aditya Wicaksono, S.Komp 15
    Kesamaan Style
    Index.html
    <html>
    <head>
    <link href=Style.css rel=stylesheet type=text/css />
    </head>
    <body>
    <div>Merah</div>
    <div id=abang>Merah</div>
    <div class=merah>Merah</div>
    </body>
    </html>
    Style.css
    div, .merah, #abang
    {
    color: red;
    }
    Program Diploma IPB - Aditya Wicaksono, S.Komp 16
    Kedalaman Style
    Index.html
    <html>
    <head>
    <link href=Style.css rel=stylesheet type=text/css />
    </head>
    <body>
    <div id=green>
    <div class=red>Warna</div>
    </div>
    </body>
    </html>
    Style.css
    #green { color: green; }
    .red { color: red; }
    #green .red { color: yellow; }
    Program Diploma IPB - Aditya Wicaksono, S.Komp 17
    Terima Kasih
    Program Diploma IPB - Aditya Wicaksono, S.Komp 18

    Vous aimerez peut-être aussi