CSS Cara ...
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Ketika browser membaca style sheet, maka akan memformat dokumen menurut informasi dalam style sheet.
Tiga Cara Sisipkan CSS
Ada tiga cara untuk memasukkan style sheet:
Style sheet eksternal
Internal style sheet
gaya inline
Style Sheet eksternal
Style sheet eksternal sangat ideal bila gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file.
Setiap halaman harus menyertakan link ke style sheet dengan tag <link>. <Link> tag masuk ke dalam bagian kepala:
<head>
<link rel = "stylesheet" type = "text / css" href = "styleku.css">
</ head>
Style sheet eksternal dapat ditulis dalam editor teks apapun. File tidak boleh berisi tag html. File style sheet harus disimpan dengan ekstensi css. Contoh dari file style sheet yang disebut "styleku.css", adalah sebagai berikut:
body {
background-color: lightblue;
}
h1 {
Warna: navy;
margin-left: 20px;
}
Catatan Jangan menambahkan spasi antara nilai properti dan satuan (seperti margin-left: 20 px;). Cara yang benar adalah: margin-left: 20px;
Style Sheet internal
Style sheet internal harus digunakan bila dokumen tunggal memiliki gaya yang unik. Anda mendefinisikan gaya internal di bagian kepala halaman HTML, di dalam tag <style>, seperti ini:
contoh
<head>
<style>
body {
background-color: linen;
}
h1 {
Warna: merah marun;
margin-left: 40px;
}
</ style>
</ head>
Cobalah sendiri »
inline Styles
Sebuah gaya inline kehilangan banyak keuntungan dari style sheet (dengan mencampurkan konten dengan presentasi). Gunakan metode ini hemat!
Untuk menggunakan gaya inline, tambahkan atribut style tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri elemen h1:
contoh
<h1 style = "color: blue; margin-left: 30px;"> Ini adalah heading </ h1>.
Cobalah sendiri »
Beberapa Style Sheets
Jika beberapa sifat yang telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda, nilai-nilai akan diwariskan dari style sheet lebih spesifik.
Sebagai contoh, asumsikan bahwa style sheet eksternal memiliki properti berikut untuk pemilih h1:
h1 {
Warna: navy;
margin-left: 20px;
}
Kemudian, menganggap bahwa style sheet internal yang juga memiliki properti untuk pemilih h1 berikut:
h1 {
Warna: orange;
}
Jika halaman dengan internal style sheet juga link ke style sheet eksternal properti untuk elemen h1 akan:
Warna: orange;
margin-left: 20px;
Cobalah sendiri »
Margin kiri diwariskan dari style sheet eksternal dan warna diganti dengan style sheet internal.
Beberapa Styles akan kaskade menjadi Satu
Gaya dapat ditentukan:
dalam sebuah elemen HTML
dalam bagian kepala halaman HTML
dalam sebuah file CSS eksternal
Tip: Bahkan beberapa style sheet eksternal dapat dirujuk di dalam dokumen HTML.
agar Cascading
Gaya apa yang akan digunakan ketika ada lebih dari satu gaya yang ditentukan untuk elemen HTML?
Secara umum kita dapat mengatakan bahwa semua gaya akan "cascade" menjadi baru "virtual" gaya lembar dengan aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
browser default
Style sheet eksternal
Internal style sheet (di bagian kepala)
Gaya inline (dalam elemen HTML)
Cobalah sendiri »
Jadi, gaya inline (dalam elemen HTML) memiliki prioritas tertinggi, yang berarti bahwa itu akan menimpa gaya didefinisikan dalam <head> tag, atau dalam style sheet eksternal, atau dalam browser (nilai default).
Catatan Catatan: Jika link ke style sheet eksternal ditempatkan setelah internal style sheet di HTML <head>, style sheet eksternal akan menimpa internal style sheet!
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Ketika browser membaca style sheet, maka akan memformat dokumen menurut informasi dalam style sheet.
Tiga Cara Sisipkan CSS
Ada tiga cara untuk memasukkan style sheet:
Style sheet eksternal
Internal style sheet
gaya inline
Style Sheet eksternal
Style sheet eksternal sangat ideal bila gaya diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file.
Setiap halaman harus menyertakan link ke style sheet dengan tag <link>. <Link> tag masuk ke dalam bagian kepala:
<head>
<link rel = "stylesheet" type = "text / css" href = "styleku.css">
</ head>
Style sheet eksternal dapat ditulis dalam editor teks apapun. File tidak boleh berisi tag html. File style sheet harus disimpan dengan ekstensi css. Contoh dari file style sheet yang disebut "styleku.css", adalah sebagai berikut:
body {
background-color: lightblue;
}
h1 {
Warna: navy;
margin-left: 20px;
}
Catatan Jangan menambahkan spasi antara nilai properti dan satuan (seperti margin-left: 20 px;). Cara yang benar adalah: margin-left: 20px;
Style Sheet internal
Style sheet internal harus digunakan bila dokumen tunggal memiliki gaya yang unik. Anda mendefinisikan gaya internal di bagian kepala halaman HTML, di dalam tag <style>, seperti ini:
contoh
<head>
<style>
body {
background-color: linen;
}
h1 {
Warna: merah marun;
margin-left: 40px;
}
</ style>
</ head>
Cobalah sendiri »
inline Styles
Sebuah gaya inline kehilangan banyak keuntungan dari style sheet (dengan mencampurkan konten dengan presentasi). Gunakan metode ini hemat!
Untuk menggunakan gaya inline, tambahkan atribut style tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri elemen h1:
contoh
<h1 style = "color: blue; margin-left: 30px;"> Ini adalah heading </ h1>.
Cobalah sendiri »
Beberapa Style Sheets
Jika beberapa sifat yang telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda, nilai-nilai akan diwariskan dari style sheet lebih spesifik.
Sebagai contoh, asumsikan bahwa style sheet eksternal memiliki properti berikut untuk pemilih h1:
h1 {
Warna: navy;
margin-left: 20px;
}
Kemudian, menganggap bahwa style sheet internal yang juga memiliki properti untuk pemilih h1 berikut:
h1 {
Warna: orange;
}
Jika halaman dengan internal style sheet juga link ke style sheet eksternal properti untuk elemen h1 akan:
Warna: orange;
margin-left: 20px;
Cobalah sendiri »
Margin kiri diwariskan dari style sheet eksternal dan warna diganti dengan style sheet internal.
Beberapa Styles akan kaskade menjadi Satu
Gaya dapat ditentukan:
dalam sebuah elemen HTML
dalam bagian kepala halaman HTML
dalam sebuah file CSS eksternal
Tip: Bahkan beberapa style sheet eksternal dapat dirujuk di dalam dokumen HTML.
agar Cascading
Gaya apa yang akan digunakan ketika ada lebih dari satu gaya yang ditentukan untuk elemen HTML?
Secara umum kita dapat mengatakan bahwa semua gaya akan "cascade" menjadi baru "virtual" gaya lembar dengan aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
browser default
Style sheet eksternal
Internal style sheet (di bagian kepala)
Gaya inline (dalam elemen HTML)
Cobalah sendiri »
Jadi, gaya inline (dalam elemen HTML) memiliki prioritas tertinggi, yang berarti bahwa itu akan menimpa gaya didefinisikan dalam <head> tag, atau dalam style sheet eksternal, atau dalam browser (nilai default).
Catatan Catatan: Jika link ke style sheet eksternal ditempatkan setelah internal style sheet di HTML <head>, style sheet eksternal akan menimpa internal style sheet!
Tidak ada komentar:
Posting Komentar