Rumah > Artikel > hujung hadapan web > Bagaimana untuk menulis css dalam halaman html
Bagaimana untuk menulis css dalam halaman html
- 王林asal
- 2023-05-09 10:59:372511semak imbas
CSS (Cascading Style Sheets) ialah teknologi yang digunakan untuk mereka bentuk dan mencantikkan halaman HTML. Gaya CSS boleh dibuat dan dirujuk melalui teg c9ccee2e6ea535a969eb3f532ad9fe89 dalam dokumen HTML atau daripada fail CSS luaran.
Berikut ialah pengenalan terperinci tentang cara menulis gaya CSS dalam halaman HTML:
- Sebaris
Sebaris merujuk kepada membenamkan gaya CSS terus ke halaman HTML, menggunakan < The ; tag gaya> membalut kod CSS. Contohnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌式CSS样式表</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一段普通的文字</p>
</body>
</html>Dalam contoh di atas, kami mula-mula menggunakan teg e8e496c15ba93d81f6ea4fe5f55a2244 untuk menetapkan set aksara dokumen, dan kemudian menggunakan teg c9ccee2e6ea535a969eb3f532ad9fe89 ; tag untuk menulis gaya CSS . Dalam teg c9ccee2e6ea535a969eb3f532ad9fe89, kami menetapkan warna latar belakang dokumen, gaya fon dan warna teks tajuk.
Perhatikan bahawa teg c9ccee2e6ea535a969eb3f532ad9fe89 mesti diletakkan dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e Menggunakan gaya CSS secara langsung dalam teg 6c04bd5ca3fcae76e30b72ad730ca86d
- Gaya luaran
Helaian gaya luaran bermakna kami meletakkan gaya CSS dalam fail berasingan dan kemudian merujuknya ke halaman HTML melalui teg 261f5faa98205db566fb261e4276ef68 Helaian gaya luaran mempunyai kelebihan berbilang kegunaan dan penyelenggaraan yang mudah.
Dalam kes ini, kita perlu menggunakan fail dengan sambungan .css untuk menyimpan gaya CSS. Fail boleh diletakkan pada pelayan atau pada komputer tempatan anda. Contohnya:
/* css/style.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}Dalam halaman HTML, kita perlu menggunakan teg 261f5faa98205db566fb261e4276ef68 untuk mengaitkan fail CSS luaran dengan dokumen HTML. Contohnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部式CSS样式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一段普通的文字</p>
</body>
</html>Dalam kod di atas, kami menggunakan teg 2cdf5bf648cf2f33323966d7f58a7f3f untuk mengaitkan fail style.css dengan dokumen HTML. Ambil perhatian bahawa atribut href mesti menghala ke URL atau laluan relatif fail CSS. Jika fail CSS terletak dalam direktori yang sama dengan dokumen HTML, atribut href boleh menunjuk terus ke nama fail CSS.
- Sebaris
Gaya Sebaris merujuk kepada penggunaan gaya CSS terus pada elemen HTML. dan bukannya mentakrifkannya dalam lembaran gaya. Contohnya:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内式CSS样式表</title>
</head>
<body>
<h1 style="color: #333; text-align: center;">欢迎来到我的网站</h1>
<p style="font-family: Arial, sans-serif;">这是一段普通的文字</p>
</body>
</html>Sebaris, kami mentakrifkan gaya CSS dalam atribut gaya elemen HTML. Setiap atribut mesti dipisahkan dengan koma bertitik, dan nilai atribut mesti disertakan dalam petikan. Sila ambil perhatian bahawa menggunakan sebaris boleh menjadikan kod HTML anda bersepah dan sukar untuk diselenggara. Oleh itu, secara amnya tidak disyorkan untuk menggunakan sebaris dalam projek sebenar.
Ringkasan
Apabila menulis gaya CSS dalam halaman HTML, anda boleh menggunakan kaedah sebaris, luaran dan sebaris. Antaranya, gaya luaran ialah kaedah yang paling biasa digunakan, yang boleh menumpukan gaya dalam satu fail untuk penyelenggaraan yang mudah dan pelbagai kegunaan. Untuk format sebaris dan sebaris, adalah disyorkan untuk menggunakannya hanya apabila perlu, jika tidak, ia boleh membawa kepada kod HTML yang mengelirukan dan sukar diselenggara.
Atas ialah kandungan terperinci Bagaimana untuk menulis css dalam halaman html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!