Scribd Logo
Unggah

Selamat datang di Scribd!

  • Praktikum Vii

    Diunggah oleh

    Kurniati Kamaruddin
    13 tayangan14 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    13 tayangan14 halaman

    Praktikum Vii

    Diunggah oleh

    Kurniati Kamaruddin

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 14

    PRAKTIKUM VI CSS Bag.

    II

    I. Pokok Bahasan :
    1. 2. 3. 4. 5. 6. Contextual selector Pseudo class dan pseudo element Specifity Importance Inheritance CSS Values

    II. Tujuan Praktikum


    1. 2. 3. 4. 5. 6. Mengetahui mengenai contextual selector di CSS Mengetahui mengenai Pseudo class dan pseudo element di CSS Mengetahui cara menghtung specify di CSS Mengetahui mengenai importance di CSS Mengetahui mengenai aturan pewarisan di CSS Mengetahui jenis-jenis value di CSS

    III.Kegiatan praktikum : Kegiatan I : Contextual selector adalah jenis selector yang digunakan untuk memilih elemen-elemen berdasarkan letaknya dalam struktur dokumen HTML. Dengan contextual selector kita dapat memilih elemen yang di dahului oleh elemen tertentu, atau elemen terletak di dalam elemen tertentu. Contextual selector terdiri dari tiga macam selector yaitu : 1. Descendant selector Yaitu selector untuk memilih elemen yang merupakan descendant dari sebuah elemen tertentu. CSS :
    Div em {color:blue;}

    HTML : <html> <head> <title>Descendant Selector</title> <style>


    body em {color:blue;}

    </style> </head>
    <body> <div> <em>Descendant 1</em> </div> <em>Descendant 2</em> </body>

    </html> Browser :

    Selector CSS rule diatas menyatakan bahwa yang terkena declaration adalah semua elemen <em> yang merupakan descendant dari <div>. Karena <em>Descendan 1</em> adalah descendant dari <div> maka ia terkena oleh selector sedangkan <em>Descendant 2</em> bukan descendant dari <div> Descendant selector bisa melibatkan lebih dari dua elemen. Contoh :
    body div em {color:blue;}

    Selector diatas menyatakan bahwa terkena declaration adalah semua elemen <em> yang merupakan descendant dari <div> sekaligus descendant dari <body> dengan urutan yang sama.

    Tugas : Buatlah HTML sebagai berikut : <style> span em {color:blue;} h2 strong {color:green;} </style>
    <body> <div> <span> <em>Descendant 1<h1>tes tes</h1></em> </span> <h2> <div> <strong>Descendant 2</strong> </div> <span> <h3> <em>Descendant 3</em> </h3> <em>Descendant 4</em> </span> <strong>Descendant 5</strong> </h2> </div> </body>

    a. Buatlah sebuah CSS rule descendant untuk membuat teks Descendant 3 dan Descendant 4 berwarna biru. b. Buatlah sebuah CSS rule descendant untuk membuat teks Descendant 2 dan Descendant 5 berwarna hijau. 2. Children selector Yaitu selector untuk memilih elemen yang merupakan children dari sebuah elemen tertentu. CSS :
    div > h1 {color:blue;}

    HTML :
    <body> <div> <h1> <em>Descendant 1</em> </h1> </div> <em>Descendant 2</em> </body>

    Browser :

    Selector CSS rule diatas menyatakan bahwa yang terkena declaration adalah semua elemen <h1> yang merupakan child dari <div> Children selector bisa melibatkan lebih dari dua elemen. Contoh :
    div > h1 > em {color:blue;}

    Selector diatas menyatakan bahwa terkena declaration adalah semua elemen <em> yang merupakan children dari <h1> sekaligus children dari <div> dengan urutan yang sama. Tugas : Buatlah HTML sebagai berikut :
    <body>

    <div> <h2> <div> <strong>Descendant 1</strong> <strong>Descendant 2</strong> </div> <strong>Descendant 3</strong> </h2>

    <strong>Descendant 4</strong> </div> </body>

    a. Buatlah sebuah CSS rule children untuk membuat teks Descendant 1 dan Descendant 2 berwarna biru. 3.330+.33333333333333333+++++++.36.

    +++ . ==================sampai disini===================== 3. Sibling selector Yaitu selector untuk memilih elemen yang merupakan sibling dari sebuah elemen tertentu. CSS :
    h2 + em {color:blue;}

    HTML :
    <body> <div> <h1> <h2>Descendant 1</h2> <em>Descendant 1</em> </h1> </div> <em>Descendant 2</em>

    </body>

    Browser :

    Selector CSS rule diatas menyatakan bahwa yang terkena declaration adalah semua elemen <em> yang memiliki didahului sibling <h2> Sibling selector bisa melibatkan lebih dari dua elemen. Contoh :
    div + h1 + em {color:blue;}

    Selector diatas menyatakan bahwa terkena declaration adalah semua elemen <em> yang memiliki didahului sibling <h1> sekaligus <div> dengan urutan yang sama. Tugas : Buatlah HTML sebagai berikut :
    <body> <div> <h1> <h2>Descendant <h2>Descendant <h3>Descendant <em>Descendant 1</h2> 2</h2> 3</h3> 4</em>

    </h1> </div> <em> <h3>Descendant 5</h3> <em>Descendant 6</em> </em>

    </body>

    a. Buatlah sebuah CSS rule sibling untuk membuat teks Descendant 4 dan Descendant 6 berwarna biru. c. Buatlah sebuah CSS rule sibling untuk membuat teks Descendant 4 berwarna biru. Kegiatan II : Pseudo class selector adalah selector yang digunakan untuk memberikan perilaku tertentu kepada elemen-elemen HTML. Pseudo class digunakan dengan memberikan colon (:) diikuti dengan nama pseudo class, setelah nama elemen.

    Terdapat beberapa pseudo class selector yang umum digunakan di CSS yaitu : :link Untuk memberikan efek CSS kepada link. Hanya berlaku untuk elemen <a> a:link {color:red;} :visited Untuk memberikan efek CSS kepada link yang telah dikunjungi. Hanya berlaku untuk elemen <a> a:visited {color:yellow;} :active Untuk memberikan efek CSS kepada elemen yang sedang aktif. a:active{background:blue;} *:active{background:blue;} :focus

    Untuk memberikan efek CSS kepada elemen yang sedang menerima focus. Berlaku untuk elemen yang memiliki focus input:focus{background:yellow;} :hover Untuk memberikan efek CSS kepada elemen yang sedang menerima hover mouse. h1:focus{background:yellow;}

    :first-child Untuk memberikan efek CSS kepada elemen yang merupakan anak pertama. h1:first-child{background:blue;} HTML : <body> <h1>Elemen 1</h1> <div> <h1>Elemen 2</h1> <h1>Elemen 3</h1> </div> </body> <h1>Elemen 1</h1> dan <h1>Elemen 2</h1> akan keduanya adalah elemen <h1> yang merupakan anak pertama terpilih karena

    :last-child Untuk memberikan efek CSS kepada elemen yang merupakan anak terakhir.

    div:last-child{background:blue;}

    Tugas : Cobalah masing-masing pseudo class diatas !

    Pseudo element selector adalah selector yang digunakan untuk menyisipkan elemen tertentu di dalam struktur HTML. . Pseudo class digunakan dengan memberikan dua colon (:) diikuti dengan nama pseudo element, setelah nama elemen.

    Terdapat beberapa pseudo element selector yang umum digunakan di CSS yaitu :

    ::before Untuk menyisipkan sebuah konten sebelum elemen tertentu. h1::before {content : "{Elemen h1}";} Dengan rule ini maka semua elemen h1 akan di dahului oleh konten "{Elemen h1}"

    HTML : <body> <h1>Elemen 1</h1> <div> <h1>Elemen 2</h1> <h1>Elemen 3</h1> </div> </body> Browser :

    ::after Untuk menyisipkan sebuah konten setelah elemen tertentu. h1::after {content : "{Elemen h1}";} Dengan rule ini maka semua elemen h1 akan di dahului oleh konten "{Elemen h1}"

    ::first-letter Untuk memilih huruf pertama dari elemen tertentu. p::first-letter {color:yellow;} Dengan rule ini maka huruf pertama dari semua elemen p akan terpilih ::first-line Untuk memilih baris pertama dari elemen tertentu. p::first-line {color:yellow;}

    Dengan rule ini maka barus pertama dari semua elemen p akan terpilih

    Tugas : Cobalah masing-masing pseudo element diatas !

    Kegiatan III : Specify adalah bobot dari sebuha selector CSS, spesify akan digunakan untuk menentukan peringkat dari aturan-aturan dalam sebuah dokumen CSS sehingga jika terdapat aturan yang bertabrakan/bertentangan maka yang diutamakan adalah aturan dengan specify tertinggi.

    Untuk menghitung specify dari sebuah aturan digunakan ketentuan sbb : Untuk setiap universal dan combinator (contextual) diberi specify 0,0,0,0 Untuk setiap element dan pseudo element diberi specify 0,0,0,1 Untuk setiap Class, attribut dan pseudo-class diberi specify 0,0,1,0 Untuk setiap ID diberi specify 0,1,0,0 Untuk setiap Inline-style diberi specify 1,0,0,0 Contoh :
    h1 {color: red;} /* specify = 0,0,0,1 */ p em {color: purple;} /* specify = 0,0,0,2 */ .grape {color: purple;} /* specify = 0,0,1,0 */ *.bright {color: yellow;} /* specify = 0,0,1,0 */ p.bright em.dark {color: maroon;} /* specify = 0,0,2,2 */ #id216 {color: blue;} /* specify = 0,1,0,0 */ div#sidebar *[href] {color: silver;} /* specify = 0,1,1,1 */

    Tugas : Hitunglah specify dari :


    h1 + a:link > p[title] {color : blue;} p#myid > a::first-letter {color:red;} a[href] + #id2 p.kelas1 *.kelas2 {color:yellow;}

    Kegiatan IV : Importance adalah keyword di CSS untuk memberikan bobot khusus kepada sebuah declaration. Declaration yang diberi importance akan dikelompokkan terpisah dengan decralaration yang lain, sehingga jika ada declaration yang bertabrakan/bertentangan, declaration dengan importance akan didahulukan.
    h1 {color: red !important;} .kelas {background: green !important;} #myid {background: yellow !important;}

    Tugas : Buatlah beberapa rule CSS dengan declaration yang memiliki importance, dan yang tidak memiliki importance, buatlah declaration tersebut bertentangan kemudian lihat hasilnya di HTML !

    Kegiatan V : Inheritance adalah salah satu aturan dari CSS, inheritance manyatakan bahwa rule terhadap sebuah elemen akan diturunkan ke anaknya. Misalnya :
    h1 {color: red;}

    HTML :
    <h1>Elemen 1 <h2>Elemen 2</h2> </h1>

    Secara aturan inheritance, <h2>Elemen 2</h2> akan berwarna merah karena diturunkan dari orang tuanya yaitu elemen <h1> Inhteritance adalah aturan yang paling lemah dengan "No specify" sehingga akan dikalahkan oleh universal sekalipun, sehingga CSS:

    h1 {color: red;} * {color: blue;}

    akan mengakibatkan <h2>Elemen 2</h2> akan berwarna biru. Tugas : Buatlah struktur HTML yang menunjukkan inheritance !

    Kegiatan VI : Value dari CSS dapat berupa : 1. Angka yang terdiri dari integer dan real. 2. Angka dapat di ikuti oleh persentase .kelas {width: 100%;} table {height: 100%;}

    3. Warna dapat berupa a. Named Grey Red Blue Green Navy Yellow Purple dst... h1 {color : navy;} b. rgb() h1 {color : rgb(100,100,100);} h1 {color : rgb(10%,80%,10%);} c. Hexa

    h1 {color : #00ff00;} h1 {color : #aaaaff;} 4. Length dapat berupa a. Absolut In (inchi) Cm Mm Point b. Relatif px em ex h1 h1 h1 h1 {font-size {font-size {font-size {font-size : : : : 2in;} 2cm;} 10px;} 0.9em;}

    Tugas : Cobalah masing-masing CSS value diatas !

    Anda mungkin juga menyukai