Tiga cara CSS digunakan di halaman: gaya sebaris, lembar gaya tersemat, dan lembar gaya tertaut

Tiga cara CSS digunakan di halaman: gaya sebaris, lembar gaya tertanam, dan lembar gaya tertaut

2024-07-12

Bagaimana gaya CSS digunakan di halaman mencakup tiga metode: gaya sebaris, lembar gaya tertanam, dan lembar gaya tertaut.

1. Gaya sebaris

Gaya inline adalah gaya yang relatif langsung, didefinisikan langsung dalam tag HTML dan diimplementasikan melalui atribut style. Metode ini lebih mudah dipelajari, namun tidak terlalu fleksibel.

【Contoh】Terapkan gaya sebaris untuk mengontrol halaman.


<!-- 在页面元素中定义CSS样式 -->
<p style="font-size: 36px; color:red">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 24px; font-weight: bold;">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 18px; font-style: italic">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 14px; text-decoration: line-through;">您好，欢迎访问 pan_junbiao的博客</p>

Hasil dari:

2. Lembar gaya tertanam

Penggunaan lembar gaya tertanam <style>...</style> Tag menyertakan style CSS pada halaman. Bentuk inline style sheet tidak langsung seperti inline style, namun halaman akan lebih teratur.

【Contoh】Gunakan lembar gaya tersemat untuk menata halaman Anda.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
    
    <!-- 内嵌式样式表 -->
    <style type="text/css">
        h1, h2, h3{
            font-family: Tahoma, Geneva, sans-serif; /*定义字体*/
            color: blue; /*文字颜色*/
        }
    </style>
</head>
<body>
    <h1>大风起兮云飞扬</h1>
    <h2>威加海内兮归故乡</h2>
    <h3>安得猛士兮守四方</h3>
</body>
</html>

Hasil dari:

3. Lembar gaya tertaut

Menautkan ke style sheet CSS eksternal adalah cara paling umum untuk mereferensikan style sheet.Pertama-tama tentukan gaya CSS dalam file terpisah, lalu teruskan di halaman HTML<link> Tag sebagai referensinya, ini adalah cara paling efisien untuk menggunakan gaya CSS.

<link>Struktur sintaksis tag adalah sebagai berikut:

<link rel='stylesheet' href='path' type='text/css'>

rel: Hubungan antara dokumen eksternal dan dokumen pemanggil.

href: jalur absolut atau relatif ke dokumen CSS.

ketik: Jenis file eksternal MIME

【Contoh】Referensi gaya CSS di halaman.

(1) Buat direktori css, lalu buat file gaya css.css di direktori tersebut.


/*定义CSS样式 */
h1,h2,h3{								
    color:#6CFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
p{
    color:#F0CC;	/*定义颜色*/
    font-weight:200;
    font-size:24px;	 /*设置字体大小*/
}

(2) Lewati halaman tersebut<link> Tag memperkenalkan file gaya CSS ke dalam halaman.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
 
    <!--页面引入CSS样式表-->
    <link rel="stylesheet" type="text/css" href="/css/css.css">		
</head>
<body>
    <h2>春夜喜雨</h2>
    <p>好雨知时节，当春乃发生。</p>
</body>
</html>

Hasil dari:

4. Prioritas panggilan style sheet

Urutan prioritas panggilan style sheet mengikuti prinsip-prinsip berikut:

(1) Gaya yang didefinisikan dalam gaya sebaris memiliki prioritas tertinggi.

(2) Gaya lain mengikuti prinsip kedekatan dalam urutan kemunculannya atau direferensikan dalam file HTML, semakin dekat dengan teks, semakin tinggi prioritasnya.

(3) Urutan prioritas penyeleksi adalah pemilih keturunan, pemilih kelas, pemilih ID, dan urutan penurunan prioritas.

(4) Gaya yang tidak ditentukan dalam file apa pun akan mengikuti gaya default browser.

Berbagi teknologi

Tiga cara CSS digunakan di halaman: gaya sebaris, lembar gaya tertanam, dan lembar gaya tertaut

1. Gaya sebaris

2. Lembar gaya tertanam

3. Lembar gaya tertaut

4. Prioritas panggilan style sheet

Profil pribadi

informasi kontak saya