Latest web development tutorials

Buat CSS

Ketika membaca style sheet, browser akan didasarkan pada dokumen HTML diformat nya.

Cara menyisipkan stylesheet

Masukkan style sheet dalam tiga cara:

  • style sheet eksternal
  • internal style sheet
  • gaya inline

style sheet eksternal

Ketika gaya diterapkan untuk banyak halaman yang dibutuhkan, style sheet eksternal akan menjadi pilihan yang ideal. Dalam kasus style sheet eksternal, Anda dapat mengubah file untuk mengubah tampilan dari seluruh situs. Setiap halaman menggunakan tag <link> untuk link ke sebuah style sheet. <Link> tag di (dokumen) Head:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

browser akan membaca dari file gaya mystyle.css deklarasi sesuai dengan itu untuk memformat dokumen.

style sheet eksternal dapat diedit di editor teks. File tidak dapat berisi tag html. style sheet harus disimpan dengan css ekstensi. Berikut adalah contoh dari file style sheet:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("../images/back40.gif");}

ucapan Jangan meninggalkan ruang antara nilai properti dan unit. Jika Anda menggunakan "margin-left: 20 px" bukan "margin-left: 20px", itu hanya berlaku di IE 6, tapi tidak bekerja di Mozilla / Firefox atau Netscape di.

internal style sheet

Ketika satu dokumen membutuhkan gaya khusus, style sheet internal harus digunakan. Anda dapat menggunakan tag <style> di kepala dokumen untuk menentukan style sheet internal seperti ini:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

gaya inline

Karena kinerja dan konten dicampur bersama, gaya inline akan kehilangan banyak keuntungan dari style sheet. Harap hati-hati metode ini, misalnya, ketika gaya perlu diterapkan hanya sekali pada satu elemen.

Untuk menggunakan gaya inline, Anda perlu menggunakan gaya (style) atribut di tag yang relevan. atribut style dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna paragraf dan margin kiri:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

beberapa gaya

Jika beberapa atribut didefinisikan pemilih yang sama di style sheet yang berbeda, maka nilai properti dari style sheet lebih spesifik diwariskan.

Misalnya, style sheet eksternal memiliki tiga sifat untuk pemilih h3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Internal style sheet memiliki dua sifat untuk pemilih h3:

h3
{
text-align:right;
font-size:20pt;
}

Jika gaya memiliki internal style sheet dan style sheet eksternal menghubungkan halaman ini pada saat yang sama, maka get h3 adalah:

color:red;
text-align:right;
font-size:20pt;

Yang merupakan properti warna akan diwariskan dari style sheet eksternal dan susunan teks (text-alignment) dan ukuran font (font-size) akan digantikan oleh aturan style sheet internal.

Beberapa gaya yang dilaminasi satu

style sheet memungkinkan informasi gaya yang ditentukan dalam berbagai cara. Gaya dapat ditentukan dalam elemen HTML, elemen pertama dari halaman HTML, atau dalam file CSS eksternal. Bahkan beberapa style sheet eksternal dapat dirujuk dalam dokumen HTML.

agar susun

Ketika elemen HTML yang sama didefinisikan oleh lebih dari satu gaya, gaya yang akan menggunakannya?

Secara umum, semua gaya akan ditumpuk dalam gaya maya sheet baru sesuai dengan aturan berikut, di mana nomor 4 memiliki prioritas tertinggi.

  1. browser default
  2. style sheet eksternal
  3. internal style sheet (dalam <head> tag di dalam)
  4. gaya inline (elemen HTML dalam)

Jadi, gaya inline (dalam elemen HTML) memiliki prioritas tertinggi, yang berarti bahwa itu akan didahulukan dari gaya deklarasi berikut: pernyataan gaya label, gaya pernyataan style sheet eksternal, atau pernyataan gaya peramban (nilai default).

ucapanTip: Jika Anda menggunakan file gaya eksternal dalam <head> juga didefinisikan gaya, style sheet akan menggantikan internal style file eksternal.