Tutorial CSS 2 : Belajar Sintaks CSS membahas tentang sintaks yang digunakan dalam CSS untuk Mempercantik Website Anda.
- Selector - Sebuah selector adalah tag HTML di mana gaya akan diterapkan. Ini bisa menjadi salah tag seperti <h1> atau <table> dll
- Properti - Sebuah properti adalah jenis atribut tag HTML. Sederhananya, semua atribut HTML diubah menjadi sifat CSS. Mereka bisa menjadi warna, border dll
- Value - Value ditugaskan untuk properti. Misalnya, properti warna dapat memiliki nilai merah atau #F1F1F1 dll.
Anda dapat menempatkan Aturan CSS Style Sintaks sebagai berikut -
selector { property: value }
 |
| Gambar 1. diagram Sintaks CSS |
Contoh : Anda dapat menentukan batas tabel sebagai berikut :
table{ border :1px solid #C00; }
Berikut tabel selector dan border adalah properti dan nilai yang diberikan 1px solid #C00 adalah nilai properti itu.
Anda dapat menentukan pemilih dalam berbagai cara sederhana berdasarkan kenyamanan Anda. Mari saya menempatkan pemilih tersebut satu per satu.
Tipe Selector CSS
Ini adalah selector yang sama yang telah kita lihat di atas. Sekali lagi, satu lagi contoh untuk memberikan warna untuk semua heading tingkat 1 :
h1 { color: #36CFFF; }
Universal Selector CSS
Daripada memilih elemen dari tipe tertentu, selector yang universal cukup hanya cocok dengan nama dari setiap jenis elemen :
* { color: #000000; }
Aturan ini membuat konten dari setiap elemen dalam dokumen kami dalam warna hitam.
Descendant Selector CSS
Misalkan Anda ingin menerapkan aturan style untuk elemen tertentu hanya jika terletak di dalam elemen tertentu. Seperti yang diberikan dalam contoh berikut, aturan style akan berlaku untuk <em> elemen hanya ketika itu terletak di dalam <ul> tag.
ul em { color: #000000; }
Kelas Selector CSS
Anda dapat menentukan aturan style berdasarkan atribut kelas elemen. Semua elemen memiliki kelas yang akan diformat sesuai dengan aturan yang ditetapkan.
.black { color: #000000; }
Aturan ini membuat konten dalam warna hitam untuk setiap elemen dengan atribut kelas diatur ke hitam dalam dokumen ini. Anda dapat membuatnya sedikit lebih khusus. Sebagai contoh:
h1.black { color: #000000; }
Aturan ini membuat konten dalam warna hitam hanya <h1> elemen dengan atribut kelas diatur ke hitam.
Anda dapat menerapkan lebih dari satu pemilih kelas untuk diberikan elemen. Perhatikan contoh berikut:
<p class="center bold"> This para will be styled by the classes center and bold. </p>
ID Selector CSS
Anda dapat menentukan aturan style berdasarkan atribut id dari elemen. Semua elemen memiliki ID yang akan diformat sesuai dengan aturan yang ditetapkan.
#black { color: #000000; }
Aturan ini membuat konten dalam warna hitam untuk setiap elemen dengan atribut id diatur ke hitam dalam dokumen Anda. Anda dapat membuatnya sedikit lebih khusus. Misalnya -
h1#black { color: #000000; }
Aturan ini membuat konten dalam warna hitam hanya <h1> elemen dengan atribut id diatur ke hitam.
Kekuatan sebenarnya dari pemilih id adalah ketika mereka digunakan sebagai dasar untuk pemilih keturunan, misalnya:
#black h2 { color: #000000; }
Dalam contoh ini semua level 2 heading akan ditampilkan dalam warna hitam ketika pos tersebut akan berbohong dengan di tag memiliki atribut id diatur ke hitam.
Child Selector CSS
Anda telah melihat selector discendant. Ada satu lagi jenis selector, yang sangat mirip dengan keturunan tetapi memiliki fungsi yang berbeda. Perhatikan contoh berikut :
body > p { color: #000000; }
Aturan ini akan membuat semua paragraf hitam jika mereka child langsung dari <body> elemen. paragraf lainnya dimasukkan ke dalam unsur-unsur lain seperti <div> atau <td> tidak akan memiliki efek aturan ini.
Attribut Selector CSS
Anda juga dapat menerapkan style untuk elemen HTML dengan atribut tertentu. Style aturan di bawah ini akan cocok dengan semua elemen masukan memiliki jenis atribut dengan nilai teks :
input[type = "text"]{ color: #000000; }
Keuntungan metode ini adalah bahwa <input type = "submit" /> elemen tidak terpengaruh, dan warna yang diterapkan hanya untuk bidang teks yang diinginkan.
Ada mengikuti aturan diterapkan pada atribut selector.
- p[lang] - Memilih semua elemen paragraf dengan atribut lang.
- p[lang="fr"] - Memilih semua elemen paragraf yang atribut lang memiliki nilai persis "fr".
- p[lang~="fr"] - Memilih semua elemen paragraf yang atribut lang mengandung kata "fr".
- p[lang|="en"] - Memilih semua elemen paragraf yang atribut lang mengandung nilai-nilai yang persis "en", atau mulai dengan "en-".
Aturan Style Multiple
Anda mungkin perlu menetapkan beberapa aturan style untuk elemen tunggal. Anda dapat menentukan aturan-aturan ini untuk menggabungkan beberapa properti dan nilai-nilai yang sesuai ke dalam satu blok sebagaimana didefinisikan dalam contoh berikut :
h1 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }
.Di sini semua properti dan nilai pasangan dipisahkan oleh titik koma (;). Anda dapat menyimpannya dalam satu baris atau beberapa baris. Untuk dibaca lebih baik kita membuat mereka tetap dalam baris terpisah.
Untuk sementara, jangan repot-repot tentang sifat-sifat yang disebutkan di blok di atas. Sifat-sifat ini akan dijelaskan dalam bab-bab datang dan Anda dapat menemukan rinci lengkap tentang properti di Referensi CSS
Grouping Selector
Anda dapat menerapkan style ke banyak selector jika Anda suka. Hanya memisahkan selector dengan koma, seperti yang diberikan dalam contoh berikut :
h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }
menentukan aturan Style ini akan berlaku untuk h1, h2 dan elemen h3 juga. Urutan daftar adalah tidak relevan. Semua elemen dalam pemilih akan memiliki deklarasi yang sesuai diterapkan kepada mereka.
Anda dapat menggabungkan berbagai selector kelas bersama-sama seperti yang ditunjukkan di bawah ini -
#content, #footer, #supplement { position: absolute; left: 510px; width: 200px; }
Selamat Belajar !
MasAgungLearning.com
COMMENTS