Rumah  >  Artikel  >  hujung hadapan web  >  Beberapa cara biasa untuk memperkenalkan css ke dalam halaman HTML

Beberapa cara biasa untuk memperkenalkan css ke dalam halaman HTML

PHPz
PHPzasal
2023-04-06 12:47:282646semak imbas

CSS ialah bahasa pengaturcaraan yang digunakan untuk menggayakan halaman web, yang boleh menjadikan halaman web kelihatan lebih cantik dan profesional. Sebelum menggunakan CSS untuk menghias halaman web, ia perlu diperkenalkan ke dalam halaman web. Artikel ini akan memperkenalkan beberapa kaedah biasa untuk memperkenalkan CSS.

1. Helaian gaya sebaris

Helaian gaya sebaris merujuk kepada menulis kod CSS secara langsung dalam atribut gaya elemen HTML. Kaedah ini sesuai untuk situasi di mana elemen individu memerlukan penggayaan tersuai. Contohnya:

<p style="color: red; font-size: 18px;">这是一个段落</p>

2. Helaian gaya dalaman

Helaian gaya dalaman merujuk kepada penggunaan tag <style> untuk memperkenalkan kod CSS dalam kepala dokumen untuk mengawal gaya keseluruhan dokumen HTML. Contohnya:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        p{
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

3. Helaian gaya luaran

Helaian gaya luaran merujuk kepada menyimpan kod CSS secara berasingan dalam fail CSS, dan kemudian merujuknya melalui teg <link> dalam Dokumen HTML fail. Kaedah ini sesuai untuk gaya yang perlu mengawal berbilang halaman, dan boleh menjadikan dokumen HTML lebih ringkas. Contohnya:

Tulis kod CSS dalam fail style.css:

p{
    color: red;
    font-size: 18px;
}

Rujuk fail CSS dalam dokumen HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

4. Import helaian gaya

Sama seperti helaian gaya luaran, helaian gaya yang diimport juga memperkenalkan fail CSS dengan menggunakan teg <style> di kepala dokumen. Perbezaannya ialah helaian gaya yang diimport menggunakan sintaks @import untuk memperkenalkan fail CSS luaran. Contohnya:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
    <style>
        @import url("style.css");
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

Di atas ialah beberapa kaedah biasa untuk memperkenalkan CSS. Di bawah senario penggunaan yang berbeza, memilih kaedah pengenalan yang berbeza boleh menjadikan pembangunan web lebih cekap dan ringkas.

Atas ialah kandungan terperinci Beberapa cara biasa untuk memperkenalkan css ke dalam halaman HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn