Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyambung css
Bagaimana untuk menyambung css
- 王林asal
- 2023-05-21 10:47:361522semak imbas
Dalam reka bentuk web, CSS (Cascading Style Sheets) digunakan secara meluas. CSS boleh menambah ciri seperti gaya, pemformatan dan reka letak pada halaman web, menjadikannya lebih cantik dan lebih mudah dibaca. Oleh itu, mengetahui cara menyambungkan fail CSS adalah langkah penting dalam mempelajari reka bentuk web. Seterusnya, artikel ini akan memperincikan cara menyambungkan CSS.
1. CSS Sebaris
CSS Sebaris ialah kaedah membenamkan kod CSS terus ke dalam fail HTML. Untuk menggunakan CSS sebaris, anda perlu menambah teg gaya pada teg kepala HTML dan menulis kod CSS di dalamnya. Berikut ialah contoh:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Dalam contoh ini, kami menggunakan teg c9ccee2e6ea535a969eb3f532ad9fe89 untuk membenamkan kod CSS ke dalam fail HTML. Kod CSS mentakrifkan gaya teg h1 dan p, menjadikan teks teg h1 berwarna biru dan teks teg p merah, dan meningkatkan saiz fon.
Walaupun CSS sebaris sangat mudah, ia jarang digunakan dalam amalan. Ini kerana CSS sebaris boleh menjadikan fail HTML bersepah dan sukar untuk diselenggara. Apabila tapak web anda semakin besar, menggunakan fail CSS luaran ialah pendekatan yang lebih baik.
2. Fail CSS luaran
Fail CSS luaran ialah cara untuk menyimpan kod CSS dalam fail berasingan dan kemudian merujuk fail dalam fail HTML.
Pertama, anda perlu mencipta fail CSS dan menyimpan semua kod CSS anda dalam fail tersebut. Apabila menamakan fail anda, gunakan .css sebagai sambungan fail. Apabila membuat fail CSS, anda harus memastikan bahawa kod yang anda tulis berstruktur dengan baik. Berikut ialah contoh:
/* styles.css */
h1 {
color: blue;
}
p {
color: red;
font-size: 20px;
}Seterusnya, pautkan fail CSS ke fail HTML dalam fail HTML. Tambahkan teg pautan di dalam teg kepala, atribut rel bagi teg hendaklah lembaran gaya dan atribut href harus menghala ke fail CSS anda. Berikut ialah contoh:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Dalam contoh ini, kami menggunakan teg pautan untuk mengaitkan fail HTML dengan fail CSS. Dalam teg kepala, kami menambah teg pautan dan menetapkan atribut rel kepada "stylesheet" dan atribut href ke laluan fail fail CSS kami. Ini akan menggunakan gaya CSS pada semua elemen yang berkaitan dalam fail HTML.
3. CSS Sebaris
CSS Sebaris ialah kaedah menggunakan kod CSS secara terus pada elemen HTML. Untuk menggunakan CSS sebaris, anda perlu menulis kod CSS ke dalam atribut gaya elemen HTML. Berikut ialah contoh:
<!DOCTYPE html> <html> <head> </head> <body> <h1 style="color:blue;">This is a heading</h1> <p style="color:red;font-size:20px;">This is a paragraph.</p> </body> </html>
Dalam contoh ini, kami menggunakan atribut gaya untuk menggunakan CSS sebaris terus pada elemen h1 dan p. Seperti CSS sebaris, CSS sebaris kurang biasa digunakan, tetapi ia boleh digunakan untuk menambah gaya dengan cepat.
4. Gunakan @import
@import ialah cara lain untuk menyambungkan fail CSS. Ia berfungsi dengan mengimport satu fail CSS ke dalam fail CSS yang lain. Berikut ialah contoh:
/* styles.css */
@import url("small-styles.css") screen and (max-width: 600px);
h1 {
color: blue;
}
p {
color: red;
}
/* small-styles.css */
p {
font-size: 20px;
}Dalam contoh ini, kami mencipta fail CSS utama dan fail CSS yang lebih kecil dan mengimportnya menggunakan @import.
Apabila pelayar memuatkan fail CSS, mereka memuatkan fail utama dahulu dan kemudian fail yang lebih kecil. Fail kecil hanya menggunakan gaya pada pelayar dengan skrin kurang daripada 600 piksel lebar.
Kelebihan menggunakan @import ialah ia boleh membantu mengatur kod anda dan mengurangkan saiz fail. Walau bagaimanapun, dalam amalan, penyemak imbas moden boleh mengendalikan fail CSS yang mengandungi banyak fail, jadi @import tidak diperlukan.
Kesimpulan
Menghubungkan CSS ialah langkah penting dalam mencipta tapak web yang cantik. Dalam CSS sebaris, membenamkan kod CSS terus ke dalam fail HTML boleh menjadikan gaya lebih mudah dan jelas. Menggunakan fail CSS luaran boleh menjadikan fail HTML lebih mudah untuk diselenggara dan memisahkan bahagian kod gaya daripada dokumen HTML. Walaupun kaedah CSS sebaris dan @import jarang digunakan, tetapi masih boleh berguna dalam beberapa situasi.
Bagaimanapun, mempelajari cara menyambungkan CSS ialah asas reka bentuk web. Semoga artikel ini telah membantu anda lebih memahami pelbagai cara untuk menyambungkan CSS.
Atas ialah kandungan terperinci Bagaimana untuk menyambung css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!