Ketika browser membaca sebuah style sheet, akan format dokumen sesuai dengan itu.
Tiga Cara untuk menSisipkan CSS
Ada tiga cara untuk memasukkan sebuah style sheet:
* Eksternal style sheet
* Internal style sheet
* Inline gaya
External Style Sheet
Sebuah style sheet eksternal sangat ideal ketika gaya yang diterapkan untuk banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet dengan menggunakan tag <link>. Tag <link> berjalan di dalam bagian kepala:
<head>
rel="stylesheet" <link type="text/css" href="mystyle.css" />
</ Head>
Sebuah style sheet eksternal dapat ditulis dalam editor teks apapun. File ini tidak boleh berisi tag html. style sheet Anda harus disimpan dengan ekstensi css.. Contoh dari file style sheet ditunjukkan berikut ini:
hr (color: sienna;)
p (margin-left: 20px;)
body (background-image: url ("images/back40.gif");)
Catatan Jangan meninggalkan ruang antara nilai aset unit! "Margin-left: 20 px" (bukan "margin-left: 20px") akan bekerja di IE, tetapi tidak di Firefox atau Opera.
Internal Style Sheet
Sebuah style sheet internal harus digunakan ketika sebuah dokumen tunggal memiliki gaya yang unik. Anda menentukan gaya internal di bagian kepala halaman HTML, dengan menggunakan tag <style>, seperti ini:
<head>
<style type="text/css">
hr (color: sienna;)
p (margin-left: 20px;)
body (background-image: url ("images/back40.gif");)
</ Style>
</ Head>
Inline Styles
Gaya inline kehilangan banyak keuntungan dari style sheet dengan konten pencampuran dengan presentasi. Gunakan metode ini hemat!
Untuk menggunakan gaya inline Anda menggunakan atribut style pada tag yang relevan. Atribut gaya dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri paragraf:
<p style="color:sienna;margin-left:20px"> Ini adalah sebuah paragraf </.> p
Multiple Style Sheets
Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda, akan nilai-nilai yang diwarisi dari style sheet lebih spesifik.
Sebagai contoh, sebuah style sheet eksternal memiliki sifat-sifat untuk pemilih h3:
h3
(
warna: merah;
text-align: left;
font-size: 8pt;
)
Dan internal style sheet ini properti untuk pemilih h3:
h3
(
text-align: right;
font-size: 20pt;
)
Jika halaman dengan style sheet internal juga link ke style sheet eksternal properti untuk h3 akan:
warna: merah;
text-align: right;
font-size: 20pt;
Warna diwariskan dari style sheet eksternal dan teks-alignment dan font-size digantikan oleh internal style sheet.
Beberapa Styles Apakah Cascade menjadi Satu
Gaya dapat ditentukan:
* Dalam sebuah elemen HTML
* Di bagian kepala halaman HTML
* Dalam file CSS eksternal
Tip: Bahkan beberapa style sheet eksternal dapat dirujuk di dalam dokumen HTML tunggal.
Cascading rangka
Apa gaya akan digunakan ketika ada lebih dari satu gaya tertentu untuk elemen HTML?
Secara umum kita dapat mengatakan bahwa semua gaya akan "cascade" ke dalam lembaran "baru virtual" gaya oleh peraturan berikut, mana nomor empat memiliki prioritas tertinggi:
1. Browser default
2. Eksternal style sheet
3. Internal style sheet (di bagian kepala)
4. Inline style (dalam elemen HTML)
Jadi, gaya inline (di dalam elemen HTML) memiliki prioritas tertinggi, yang berarti bahwa itu akan menggantikan gaya didefinisikan dalam tag <head>, atau dalam style sheet eksternal, atau pada browser (nilai default).
Catatan Catatan: Jika link ke style sheet eksternal ditempatkan setelah internal style sheet dalam HTML <head>, style sheet eksternal akan menimpa style sheet internal!
Post a Comment
Tanks atas kunjungannya ke blog ini