Tutorial CSS 3 Penyertaan / Include Di CSS membahas tentang aturan Penyertaan dalam CSS.
Tutorial CSS 3 Penyertaan / Include Di CSS membahas tentang aturan Penyertaan dalam CSS. Ada empat cara untuk mengasosiasikan style dengan dokumen HTML Anda. Kebanyakan metode yang umum digunakan adalah inline CSS dan CSS External.
Embedded CSS - Elemen<style>
Anda dapat menempatkan aturan CSS Anda ke dalam dokumen HTML menggunakan elemen <style>. Tag ini ditempatkan di dalam <head> ... </ head> tag. Aturan yang ditetapkan menggunakan sintaks ini akan diterapkan untuk semua elemen yang tersedia dalam dokumen. Berikut adalah sintaks generik -
Berikut ini adalah contoh embed CSS berdasarkan sintaks di atas -
<!DOCTYPE html> <html> <head> <style type = "text/css" media = "all"> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Attribut Style CSS
Atribut yang terkait dengan <style> elemen :
| Attribut | Isi | Deskripsi |
|---|---|---|
| type | text/css | Menentukan bahasa style sheet sebagai tipe konten (tipe MIME). Ini diperlukan atribut. |
| media |
screen
tty
tv
projection
handheld
print
braille
aural
all
| Menentukan perangkat dokumen akan ditampilkan pada. Nilai default adalah semua. Ini adalah atribut opsional. |
Inline CSS - Attribut Style
Anda dapat menggunakan atribut style elemen HTML untuk menentukan aturan style. Aturan-aturan ini akan diterapkan untuk unsur yang hanya. Berikut adalah sintaks generik -
<element style = "...style rules....">
Attribut Inline CSS
| Attribut | Isi | Deskripsi |
|---|---|---|
| style | style rules | Nilai atribut style adalah kombinasi dari deklarasi style dipisahkan oleh titik koma (;). |
Contoh Inline CSS
Berikut ini adalah contoh inline CSS berdasarkan sintaks di atas -
<html> <head> </head> <body> <h1 style = "color:#36C;"> This is inline CSS </h1> </body> </html>
Ini akan menghasilkan hasil sebagai berikut -
External CSS - Elemen <link>
Elemen <link> dapat digunakan untuk menyertakan file stylesheet eksternal dalam dokumen HTML Anda.
Style sheet eksternal adalah file teks terpisah dengan ekstensi .css. Anda mendefinisikan semua aturan Style dalam file teks ini dan kemudian Anda dapat menyertakan file ini di dokumen HTML menggunakan <link> elemen.
Berikut adalah sintaks generik termasuk file CSS eksternal -
<head> <link type = "text/css" href = "..." media = "..." /> </head>
Attribut External CSS
Atribut yang terkait dengan elemen <style> -
| Attribut | Isi | Deskripsi |
|---|---|---|
| type | text/css | Menentukan bahasa style sheet sebagai tipe konten (tipe MIME). Atribut ini diperlukan. |
| href | URL | Menentukan file style sheet memiliki aturan Style. Atribut ini adalah diperlukan. |
| media |
screen
tty
tv
projection
handheld
print
braille
aural
all
| Menentukan perangkat dokumen akan ditampilkan pada. Nilai default adalah semua. Ini adalah atribut opsional. |
Contoh Eksternal CSS
Buat file stylesheet sederhana dengan nama mystyle.css memiliki aturan berikut:
h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; }
Sekarang Anda dapat memasukkan ini mystyle.css file dalam dokumen HTML sebagai berikut:
<head> <link type = "text/css" href = "mystyle.css" media = " all" /> </head>
Aturan Import CSS
@import digunakan untuk mengimpor stylesheet eksternal dengan cara yang mirip dengan <link> elemen. Berikut adalah sintaks generik aturan @impor.
<head> <@import "URL"; </head>
Berikut URL adalah URL dari aturan style style sheet file yang memiliki. Anda dapat menggunakan sintaks lain juga -
<head> <@import url("URL"); </head>
Contoh Import CSS
Berikut adalah contoh yang menunjukkan Anda bagaimana untuk mengimpor file style sheet ke dalam dokumen HTML -
<head> @import "mystyle.css"; </head>
Aturan CSS Override
Kita telah membahas empat cara untuk include aturan style sheet dalam dokumen HTML. Berikut adalah aturan untuk mengganti Peraturan Style Sheet.
- Setiap style sheet inline mengambil prioritas tertinggi. Jadi, itu akan mengesampingkan aturan apapun yang didefinisikan dalam <style> ... </ style> tag atau aturan yang ditetapkan dalam file style sheet eksternal.
- Setiap aturan yang didefinisikan dalam <style> ... </ style> tag akan menimpa aturan yang ditetapkan dalam file style sheet eksternal.
- Setiap aturan yang ditetapkan dalam file style sheet eksternal menjadi prioritas terendah, dan aturan yang ditetapkan dalam file ini akan diterapkan hanya ketika di atas dua aturan yang tidak berlaku.
Penanganan Browser Lama
Masih banyak browser lama yang tidak mendukung CSS. Jadi, kita harus berhati-hati saat menulis CSS embendded dalam dokumen HTML. Potongan berikut menunjukkan bagaimana Anda dapat menggunakan tag komentar untuk menyembunyikan CSS dari browser lama -
<style type="text/css"> <!-- body, td { color: blue; } --> </style>
Penulisan Komentar CSS
Anda mungkin perlu untuk menempatkan komentar tambahan di blok style sheet. Jadi, sangat mudah untuk komentar bagian dalam style sheet. Anda dapat sederhana menempatkan komentar Anda dalam /*.....this adalah komentar di style sheet ..... */.
Anda dapat menggunakan / * .... * / untuk mengomentari blok multi-baris dalam cara yang sama Anda lakukan di C dan C ++ bahasa pemrograman.
Contoh Komentar CSS
<!DOCTYPE html> <html> <head> <style> p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */ </style> </head> <body> <p>Hello World!</p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut -
COMMENTS