Bagaimana menambahkan CSS

Ketika peramban membaca laporan gaya, dia akan mengatur dokumen HTML berdasarkan informasi dalam laporan gaya.

Tiga cara menggunakan CSS

Terdapat tiga cara untuk memasukkan laporan gaya:

  • CSS Luaran
  • gaya CSS internal
  • gaya CSS dalam

CSS Luaran

Dengan menggunakan laporan gaya luaran, anda hanya perlu mengubah satu berkas untuk mengubah penampilan seluruh situs web!

Setiap halaman HTML mesti memuat referensi ke berkas laporan gaya luaran di dalam elemen <link> bagian head.

contoh

Style luaran diatur di elemen <link> dalam bagian <head> halaman HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Ini adalah judul</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>

亲自试一试

laman gaya luaran dapat ditulis di dalam editor teks mana pun, dan harus disimpan dengan ekstensi .css.

laman gaya luaran .css tidak boleh mengandung apa pun tag HTML.

"mystyle.css" adalah seperti ini:

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  warna: navy;
  margin-left: 20px;
}

perhatian:Jangan tambahkan spasi di antara nilai atribut dan unit (contohnya margin-left: 20 px;）。Kepala yang benar adalah:margin-left: 20px;

gaya CSS internal

jika halaman HTML memiliki gaya yang unik, maka dapat digunakan laman gaya internal.

gaya internal didefinisikan di dalam elemen <style> di bagian head.

contoh

gaya internal didefinisikan di dalam elemen <style> di bagian <head> halaman HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}
h1 {
  warna: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>
<h1>Ini adalah judul</h1>
<p>Ini adalah paragraf.</p>
</body>
</html>

亲自试一试

gaya CSS dalam

gaya dalam (juga disebut gaya inline) dapat digunakan untuk menerapkan gaya unik untuk elemen tunggal.

Untuk menggunakan gaya dalam, tambahkan atribut style ke elemen yang relevan. Atribut style dapat mengandung setiap properti CSS.

contoh

gaya dalam didefinisikan di dalam atribut "style" elemen yang relevan:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">Ini adalah judul</h1>
<p style="color:red;">Ini adalah paragraf.</p>
</body>
</html>

亲自试一试

petunjuk:gaya dalam (juga disebut gaya dalam) kehilangan banyak kelebihan laman gaya (dengan menggabungkan konten dengan presentasi). Gunakan metode ini dengan hati-hati.

berbagai laman gaya

jika ada beberapa properti yang didefinisikan untuk pemilih yang sama (elemen) di berbagai laman gaya, maka nilai yang digunakan adalah dari laman gaya yang dibaca terakhir.

asumsikan adalaman gaya luarangaya yang diatur untuk elemen <h1> adalah:

h1 {
  warna: navy;
}

lalu, asumsikan adalaman gaya internaljuga diatur gaya berikut untuk elemen <h1>:

h1 {
  color: orange;    
}

contoh

jika gaya internal dihubungkan ke laman gaya luaransetelahnyadidefinisikan, elemen <h1> akan menjadi warna kuning:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

亲自试一试

contoh

walau bagaimanapun, jika dihubungkan ke laman gaya luaransebelumnya定义了内部样式，则 <h1> 元素将是深蓝色：

<head>
<style>
h1 {
  color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

亲自试一试

顺序层叠

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

所有样式页面中的将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

  1. 样式行内（在元素 HTML 中）
  2. 表样式外部和内部（在部分 head）
  3. 样式默认浏览器

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

亲自试一试