12.40
alie
Didalam mendesain sebuah template tak lepas dari kode CSS, CSS adalah (Cascading Stye Sheets) digunakan dalam kode HTML untuk membuat suatu kumpulan style yang digunakan untuk mempercantik tampilah web, berikut adalah kode-kode css.
MENGENAL CSS | ||
1 | CSS | Cascading Style Sheets |
Mencoba Css | ||
1 | <head> <title>....</title> <stu;e tu[e=”text/css”> <!-- H1{font size:14pt; Font style:italic;} --> </style> </head> | Pasangan <style> digunakan untuk mendefinisikan style sheet, pasangan style harus diletakkan dalam pasangan <head> umumnya setelah <title>, yang berada tanda <!—dan --> adalah definisi <style>, anda bisa mendefinisikan tagl HTML |
2 | <H1> CSS Pertamaku </H1> | Pengaksesan css dalam html dengan tag yang sudah dikenali oleh HTML <H1> |
3 | TH {font-weight : bold; background-color : blue; color : white;} | Mendefinisikan tag <TH> di dalam CSS |
4 | TR{background-color : silver; color : blue;} | Mendefinisikan tag <TR> di dalam CSS |
Penggunaan Atribut ID dalam Tag | ||
Cara memberi nama ID : · Dapat mengandung huruf, angka, atau karakter garis bawah · Karakter pertama harus berupa huruf atau karakter garis bawah | ||
1 | #tebal {font-weight:bold; color : blue;} | Digunakan untuk membuat style bernama tebal |
2 | #miring {font-style:italic; color:pink;} | Digunakan untuk style bernama miring |
3 | <h3 id=”miring”>Teks ini miring</h3> | Didalam body, definisi style di atas dapat digunakan pada tag-tag dengan mencamtumkan atribut ID. |
Penggunaan kelas | ||
Cara memberi nama kelas : · Dapat mengandung huruf, angka atau karakter garis bawah · Karakter pertama harus berupa huruf atau karakter garis bawah | ||
1 | .kapital {text-transform: uppercase;} | Mengkonversi kehuruf kapital |
2 | .kecil {text-transform: lowercase;} | Mengkonversi kehuruf kecil |
3 | .garis_bawah {text-decoration: underline;} | Menggaris bawahi |
4 | <H2 class=”kapital”>Tes... </H2> | Di dalam body, definisi style di atas dapat digunakan pada tag-tag dengan mencantumkan atribut kelas |
Pendefinisian Tag dengan kelas | ||
1 | H3.merah {color:red;} | Mendefinisikan tag H3 |
2 | H3.biru {color:blue;} | Mendefinisikan tag H3 |
3 | <H3 class=”biru”>Biru</H3> | Contoh penggunaan kelas dalam tag |
Komentar dalam Style Sheet | ||
1 | /*......*/ | Pasangan tanda komentar |
Pendefinsian Tag Berganda | ||
1 | <STYLE TYPE=”text/CSS”> <!-- Blockquote {color: blue; font-style: italic;} Div blockquote {font-weight: bold;} --> </STYLE> | Pada pendefinisian pertama teks diatur dengan warna biru dan tercetak miring, pada pendefinisian kedua menyatakan bahwa sekiranya tag <blockquote> berada dalam tag <dif> |
2 | <Div> <Blockquote> Div dan blockquote </Blockquote> </Div> | Cara penulisan di dalam body pada halaman HTML |
3 | <Blockquote> Blockquote saja </Blockquote> | Cara penulisan di dlaam body pada halaman HTML |
Pendefinisian Kelas atau ID terhadap Tag | ||
1 | <STYLE TIPE=”text/CSS”> <!-- BODY {background-color: white;} CITE {color: red;font-size: 20; font-weight: bold; backgorund-color: silver;} .biru {color: blue;} .biruu CITE {color: blue; text-transform: uppercase;} --> </STYLE> | Perhatikan bahwa tiga pendefinisian yangg pertama, pendefinisian Tag dan Kelas adapun pendefinisian ke empat digunakan untuk mendefinisikan keadaan sewaktu tag <cite> berada dalam kelas biru. |
2 | <div class=”biru”> <cite> Teks dalam CITE yang berada dalam DIV dengan CLASS = “biru”. Warnanya menjadi biru. </cite> </div> | Cara penulisan di dalam body pada halaman HTML |
3 | <STYLE TYPE=”text/CSS”> <!-- #ungu {color:purple;} #ungu H5 {color:blue;} | Pendefinisian ID ungu dan pendefinisian tag H5 di dalam ID ungu |
4 | <div id=”ungu”> <h5>Teks dalam H5-Biru</h5> </div> | Cara penulisan di dalam body pada halaman HTML |
Atribut Style | ||
1 | <body style=”font-size: 16pt; color: blue;”> .............. </body> | Atribut style digunakan langsung terhadap tag yang berada dalam body untuk melakukan pengaturan dengan properti-properti CSS |
2 | <table style=”font-size: 12pt; Background-color:silver; Color:green;”Border=”1”> </table> | Atribut style digunakan langsungg terhadap tag yang berada dalam tabel untuk melakukan pengaturan dengan properti-properti CSS |
Tag <SPAN> | ||
Tag<span> dapat digunakan untuk memperluas kemampuan suatu style penerapannya dapat digunakan bersama-sama atribut Style, Class, dan ID. | ||
<SPAN> dengan Atribut STYLE | ||
1 | <span style=”definisi”> .......................... </span> | Bentuk pemakaian <span> |
2 | <span style=”font-weight: bold;background-color: silver;”> Tulisan ini dalam keadaan tebal dan diberi latar belakang. </span> | Bentuk penulisan <span> di dalam body pada halaman HTML |
<SPAN> dengan Atribut CLASS | ||
1 | <span class=”namakelas”> .................... </span> | Bentuk pemakaian |
2 | <span class=”garis_bawah”> Dan ini digaris bawahi </span> | Bentuk pemakian didalam body pada halaman HTML, tentunya clas.garis_bawah sudah didefinisikan didalam style. |
<SPAN> dengan Atribut ID | ||
1 | <span id=”namaID”> .......................... </span> | Bentuk pemakaian |
2 | <span id=”besar”> Dan ini berukuran besar </span> | Bentuk pemakaian di dalam body pada halaman HTML, tentunya id #besar sudah didefinisikan didalam style |
Style Sheet Eksternal | ||
1 | <head> <link rel=”stylesheet”type=”text/css” Href=”styleku.css”> <title>......</title> </head> | Digunakan untuk merujuk ke berkas styleku.css. berkas inilah yang disebut sebagai styke sheet eksternal. Nama berkas ini disebutkan dalam atribut HREF. Kemudian, yang terpenting, anda perlu menyebutkan atribut REL dengan isi berupa “STYLESHEET” dan TYPE dengan isi “text/css”. |
Posted in: CSS
0 komentar:
Posting Komentar