Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk menyambung css dan html

Bagaimana untuk menyambung css dan html

WBOY
Lepaskan: 2023-05-29 18:30:38
asal
5479 orang telah melayarinya
<p>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.

<p>1. Gunakan CSS dalaman

<p>Dalam teg kepala halaman HTML, gaya CSS boleh dibenamkan melalui teg <style>. Anda boleh menentukan semua gaya CSS yang anda perlukan dalam teg <style>, 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>
Salin selepas log masuk
<p> 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 <style>.

<p>2. Gunakan fail CSS luaran

<p>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 <link> 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>
Salin selepas log masuk
<p>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;
}
Salin selepas log masuk
<p>3. Gunakan CSS sebaris

<p>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>
Salin selepas log masuk
<p> Dalam kod di atas, kami menggunakan atribut gaya dalam teg <h1> dan teg <p> untuk masing-masing mentakrifkan warna dan penjajaran tajuk serta warna latar belakang perenggan.

<p>Ringkasan

<p>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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan