Bagaimana untuk menambah gaya css ke html
- 百草asal
- 2023-11-01 10:27:321504semak imbas
Cara untuk menambah gaya CSS pada HTML termasuk gaya sebaris, helaian gaya dalaman dan helaian gaya luaran. Pengenalan terperinci: 1. Gaya sebaris ditulis terus di dalam elemen HTML dan ditakrifkan melalui atribut gaya Kaedah ini sesuai untuk definisi gaya bagi satu elemen Ia tidak disyorkan untuk digunakan secara meluas dalam projek besar kerana ia akan membuat kod HTML mengelirukan . fail, dsb.
Terdapat beberapa cara berbeza untuk menambah gaya CSS dalam HTML, termasuk gaya sebaris, helaian gaya dalaman dan helaian gaya luaran. Di bawah saya akan menerangkan setiap kaedah secara terperinci dan memberikan kod contoh yang sepadan.
Gaya sebaris:
Gaya sebaris ditulis terus di dalam elemen HTML dan ditakrifkan melalui atribut gaya. Kaedah ini sesuai untuk definisi gaya satu elemen dan tidak disyorkan untuk kegunaan meluas dalam projek besar kerana ia boleh membuat kod HTML berselerak dan sukar untuk dikekalkan.
Kod contoh:
<p style="color: red;">这是一段红色的文本。</p>
Helaian gaya dalaman:
Helaian gaya dalaman diletakkan dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e pada dokumen HTML dan ditakrifkan menggunakan teg c9ccee2e6ea535a969eb3f532ad9fe89 Kaedah ini sesuai untuk definisi gaya fail HTML tunggal Jika anda perlu menggunakan gaya yang sama dalam berbilang fail HTML, anda perlu menyalin kod, yang tidak sesuai untuk penggunaan semula dan penyelenggaraan kod.
Kod contoh:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一段红色的文本。</p>
</body>
</html>Helaian gaya luaran:
Helaian gaya luaran ialah fail CSS kendiri yang dirujuk dalam fail HTML melalui teg 261f5faa98205db566fb261e4276ef68 Ini ialah kaedah yang paling disyorkan kerana ia memastikan gaya dan kandungan diasingkan, meningkatkan kebolehselenggaraan kod. Pada masa yang sama, helaian gaya luaran boleh dirujuk dalam berbilang fail HTML untuk mencapai penggunaan semula kod.
Andaikan kita mempunyai fail CSS bernama styles.css dengan kandungan berikut:
p {
color: red;
}Kod untuk merujuk fail CSS ini dalam fail HTML adalah seperti berikut:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>这是一段红色的文本。</p> </body> </html>
Dalam kod di atas, atribut href menentukan laluan ke fail CSS. Jika fail CSS dan fail HTML berada dalam direktori yang sama, anda boleh menggunakan nama fail secara langsung. Jika mereka tidak berada dalam direktori yang sama, anda perlu menyediakan laluan relatif atau laluan mutlak.
Selain daripada tiga kaedah di atas, anda juga boleh menggunakan pernyataan @import untuk merujuk gaya CSS. Pernyataan @import boleh digunakan di mana-mana dalam dokumen HTML, tetapi ia biasanya diletakkan dalam teg 93f0f5c25f18dab9d176bd4f6de5d30e Apabila menggunakan pernyataan @import, anda perlu menentukan laluan fail CSS untuk diimport.
Contoh kod:
<!DOCTYPE html>
<html>
<head>
<style>
@import url('styles.css');
</style>
</head>
<body>
<p>这是一段红色的文本。</p>
</body>
</html>Atas ialah kandungan terperinci Bagaimana untuk menambah gaya css ke html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!