Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menyambung css dan html

Bagaimana untuk menyambung css dan html

WBOY
WBOYasal
2023-05-29 18:30:385425semak imbas

HTML dan CSS adalah dua kemahiran asas untuk pembangunan web HTML digunakan untuk membina struktur halaman web, manakala CSS digunakan untuk mencantikkan penampilan halaman web. Sama ada anda pembangun web berpengalaman atau pemula, anda perlu tahu cara menggabungkan kedua-dua kemahiran ini untuk mencipta halaman web yang benar-benar hebat.

1. Gunakan CSS dalaman

Dalam teg kepala halaman HTML, gaya CSS boleh dibenamkan melalui teg c9ccee2e6ea535a969eb3f532ad9fe89. Anda boleh menentukan semua gaya CSS yang anda perlukan dalam teg c9ccee2e6ea535a969eb3f532ad9fe89, supaya halaman HTML akan menggunakan gaya CSS pada dokumen apabila ia dimuatkan. Ambil contoh di bawah:

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <style>
        body {
            background-color: blue;
        }
        h1 {
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个网页</p>
</body>
</html>

Dalam kod di atas, kami menetapkan warna latar belakang halaman kepada biru dan warna tajuk kepada putih dan selaraskan tengah dengan membenamkan gaya CSS dalam teg c9ccee2e6ea535a969eb3f532ad9fe89.

2. Gunakan fail CSS luaran

Jika anda ingin menggunakan gaya CSS yang sama dalam berbilang halaman HTML, maka penggunaan CSS dalaman akan menjadi sangat berlebihan . Kami mencipta fail baharu dengan akhiran .css, seperti style.css dan memautkan fail gaya CSS ke halaman melalui teg 2cdf5bf648cf2f33323966d7f58a7f3f dalam teg kepala halaman HTML. Contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是我的第一个网页</p>
</body>
</html>

Dalam gaya fail style.css, kita boleh mentakrifkan semua gaya CSS yang perlu kita gunakan.

body {
    background-color: blue;
}
h1 {
    color: white;
    text-align: center;
}

3. Gunakan CSS sebaris

Selain fail CSS dalaman dan CSS luaran, kami juga boleh menggunakan CSS sebaris. CSS sebaris merujuk kepada menggunakan atribut gaya dalam teg HTML untuk menentukan gaya CSS. Contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <h1 style="color: white; text-align: center;">欢迎来到我的网页</h1>
    <p style="background-color: blue;">这是我的第一个网页</p>
</body>
</html>

Dalam kod di atas, kami menggunakan atribut gaya dalam teg 4a249f0d628e2318394fd9b75b4636b1 dan teg e388a4556c0f65e1904146cc1a846bee untuk masing-masing mentakrifkan warna dan penjajaran tajuk serta warna latar belakang perenggan.

Ringkasan

Sama ada CSS dalaman, fail CSS luaran atau CSS sebaris, tujuan utamanya adalah untuk mencantikkan penampilan halaman web. Dalam pembangunan sebenar, kita boleh memilih cara yang berbeza untuk memautkan CSS dan HTML mengikut situasi sebenar. Apabila terdapat lebih banyak gaya CSS untuk ditakrifkan, kami boleh menggunakan fail CSS luaran apabila terdapat lebih sedikit gaya untuk ditakrifkan, kami boleh menggunakan CSS dalaman atau CSS sebaris.

Atas ialah kandungan terperinci Bagaimana untuk menyambung css dan 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
Artikel sebelumnya:proses htmlArtikel seterusnya:proses html