Tutorial Css Syntax Dan Selectors
CSS Syntax
Pemilih poin ke elemen HTML Anda ingin bergaya .
Blok deklarasi berisi satu atau lebih deklarasi dipisahkan oleh titik koma .
Setiap deklarasi termasuk CSS nama properti dan nilai , yang dipisahkan oleh titik dua .
Sebuah deklarasi CSS selalu berakhir dengan titik koma , dan blok deklarasi dikelilingi oleh kurung kurawal .
Pada referensi berikut semua < p > elemen akan sentra -blok , dengan warna teks merah :
Contoh
p {
color: red;
text-align: center;
}
CSS Selectors
CSS dipakai untuk " menemukan " ( atau pilih ) elemen HTML menurut mereka nama elemen , id , kelas , atribut , dan banyak lagi.
Unsur Pemilih
Pemilih elemen menentukan elemen menurut nama elemen .
Anda sanggup menentukan semua < p > elemen pada halaman menyerupai ini (dalam hal ini , semua elemen <p> akan sentra -blok , dengan warna teks merah ) :
Contoh
p {
text-align: center;
color: red;
}
Id Selector
Pemilih id memakai atribut id dari elemen HTML untuk menentukan elemen tertentu .
Id dari elemen harus unik dalam sebuah halaman, sehingga pemilih id dipakai untuk menentukan salah satu elemen yang unik !
Untuk menentukan elemen dengan id tertentu , menulis hash ( # ) karakter, diikuti oleh id dari elemen .
Gaya hukum di bawah ini akan diterapkan pada elemen HTML dengan id = " para1 " :
Contoh
#para1 {
text-align: center;
color: red;
}
yang kalian semua perlu perhatikan Sebuah nama id tidak sanggup memulai dengan angka !
Kelas Selector
Pemilih kelas menentukan elemen dengan atribut kelas khusus .
Untuk menentukan elemen dengan class tertentu , menulis titik (. ) Karakter, diikuti dengan nama kelas .
Pada referensi di bawah , semua elemen HTML dengan class = " center " akan merah dan sentra -blok :
Contoh
.center {
text-align: center;
color: red;
}
Anda juga sanggup menentukan bahwa elemen HTML hanya khusus harus dipengaruhi oleh kelas .
Pada referensi di bawah , hanya < p > elemen dengan class = " center " akan center -aligned :
Contoh
p.center {
text-align: center;
color: red;
}
elemen HTML juga sanggup merujuk ke lebih dari satu kelas .
Pada referensi di bawah ini, < p > elemen akan ditata sesuai dengan class = " center " dan class = " besar " :
Contoh
<p class="center large">This paragraph refers to two classes.</p>
yang kalian semua perlu perhatikan Sebuah nama class tidak sanggup memulai dengan angka !
pengelompokan Selectors
Jika Anda mempunyai elemen dengan definisi gaya yang sama , menyerupai ini :
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Ini akan lebih baik untuk kelompok pemilih , untuk meminimalkan arahan .
Untuk pemilih kelompok , memisahkan setiap pemilih dengan koma .
Pada referensi di bawah kita telah dikelompokkan pemilih dari arahan di atas :
Contoh
h1, h2, p {
text-align: center;
color: red;
}
CSS Komentar
Komentar dipakai untuk menjelaskan arahan , dan sanggup membantu saat Anda mengedit arahan sumber di kemudian hari .
Komentar diabaikan oleh browser .
Sebuah komentar CSS dimulai dengan / * dan diakhiri dengan * / . Komentar juga sanggup span beberapa baris :
contoh
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* Ini adalah
multi -line
komentar * /
ok sekian dulu pembahasan dari aku supaya bermanfaat ,selamat belajar
Sumber http://www.virtualofworld.com/
