Tutorial Css Syntax Dan Selectors


CSS Syntax

Sebuah CSS hukum - set terdiri dari pemilih dan blok deklarasi :

Baca Juga


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/

Artikel Terkait

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel