Rumah > Artikel > hujung hadapan web > Panggil css yang berbeza
Panggil css yang berbeza
- WBOYasal
- 2023-05-21 12:01:07407semak imbas
HTML, sebagai bahagian penting dalam pembangunan web, bukan sahaja pembawa kandungan halaman, tetapi juga penentu struktur dan gaya. Sebagai bahasa untuk mengendalikan penampilan dan gaya halaman, CSS boleh menjadikan kandungan halaman web lebih berwarna-warni dan cantik.
Dalam pembangunan sebenar, kita selalunya perlu menggunakan gaya yang berbeza untuk halaman yang berbeza atau bahagian yang berbeza Pada masa ini, kita perlu memanggil fail CSS yang berbeza. Artikel ini akan memperkenalkan cara memanggil fail CSS yang berbeza dan cara menggunakannya dalam halaman untuk mempelbagaikan gaya.
1. Cara memanggil fail CSS yang berbeza
- Panggil melalui teg pautan
Anda boleh memanggil fail CSS luaran dalam pengepala HTML melalui pautan tag. Teg pautan mesti mengandungi tiga atribut: href, rel dan jenis.
Format khusus adalah seperti berikut:
50d3ac49e0522645b04c918b330f3ab9
Antara mereka, penggunaan href Untuk menentukan laluan fail CSS yang dipanggil, rel digunakan untuk menentukan hubungan antara dokumen dan dokumen yang dipautkan, biasanya ditetapkan kepada lembaran gaya. jenis menentukan jenis MIME dokumen yang dipautkan, biasanya ditetapkan kepada teks/css.
Sebagai contoh, kita boleh menggunakan kod berikut untuk memanggil dua fail CSS berbeza dalam pengepala HTML:
<!DOCTYPE html> <html> <head> <link href="style1.css" rel="stylesheet" type="text/css" /> <link href="style2.css" rel="stylesheet" type="text/css" /> <title>调用不同CSS文件示例</title> </head> <body> <!-- 页面内容 --> </body> </html>
Pada masa ini, kita boleh menggunakan fail style1.css dan style2.css fail Tentukan gaya yang berbeza dalam dan panggil mereka dalam halaman yang berbeza untuk mencapai kepelbagaian gaya.
- Panggil melalui @import
Selain menggunakan teg pautan, kami juga boleh menggunakan kaedah @import untuk memanggil fail CSS. Dalam fail CSS, anda boleh menggunakan pernyataan @import untuk memanggil fail CSS lain dan gaya dalam fail yang dipanggil akan digabungkan dengan gaya dalam fail utama.
Sintaks khusus adalah seperti berikut:
@import url("file path");
Contohnya, dalam style helaian gaya utama.css, kita boleh menggunakan kod berikut Muatkan helaian subgaya style2.css:
@import url("style2.css");Dengan cara ini, apabila style.css dipanggil dalam halaman HTML, gaya style2.css akan digabungkan secara automatik, dengan itu mencapai gaya kepelbagaian.
2. Gunakan gaya CSS yang berbeza
Selepas memanggil berbilang fail CSS, kami boleh menggunakan gaya yang berbeza dalam beberapa cara tertentu. Dua kaedah yang biasa digunakan diperkenalkan di bawah.
- Menggunakan pemilih id
Dalam halaman HTML, kami boleh menetapkan atribut id untuk elemen bagi membolehkan kami menetapkan gaya CSS khas untuknya.
Sebagai contoh, dalam fail style1.css, kita boleh mentakrifkan gaya CSS berikut:
#box {
width: 200px;
height: 200px;
background-color: red;
}Dalam fail style2.css, kita boleh mentakrifkan gaya CSS berikut:
#box {
width: 100px;
height: 100px;
background-color: blue;
} Kemudian, dalam halaman HTML, kita boleh menggunakan kod berikut untuk memanggil dua gaya ini:
<!DOCTYPE html> <html> <head> <link href="style1.css" rel="stylesheet" type="text/css" /> <link href="style2.css" rel="stylesheet" type="text/css" /> <title>调用不同CSS文件示例</title> </head> <body> <div id="box">样式设置示例</div> </body> </html>
Pada masa ini, apabila kita membuka halaman, kita akan mendapati bahawa warna latar belakang elemen kotak adalah merah, bukan warna biru. Ini kerana dalam HTML, pemilih id mempunyai keutamaan yang lebih tinggi daripada pemilih label, jadi elemen kotak menggunakan gaya yang ditakrifkan dalam style1.css.
- Gunakan pemilih kelas
Sama seperti pemilih id, kita juga boleh menggunakan pemilih kelas untuk menggayakan elemen. Apabila menggunakan pemilih kelas, anda perlu menambah "." di hadapan pemilih apabila menentukan gaya dalam fail CSS.
Sebagai contoh, dalam fail style1.css, kita boleh mentakrifkan gaya CSS berikut:
.red-box {
width: 200px;
height: 200px;
background-color: red;
}Dalam fail style2.css, kita boleh mentakrifkan gaya CSS berikut:
.blue-box {
width: 100px;
height: 100px;
background-color: blue;
} Kemudian, dalam halaman HTML, kita boleh menggunakan kod berikut untuk memanggil dua gaya ini:
<!DOCTYPE html> <html> <head> <link href="style1.css" rel="stylesheet" type="text/css" /> <link href="style2.css" rel="stylesheet" type="text/css" /> <title>调用不同CSS文件示例</title> </head> <body> <div class="red-box">样式设置示例</div> <div class="blue-box">样式设置示例</div> </body> </html>
Pada masa ini, apabila kita membuka halaman, kita akan mendapati bahawa warna latar belakang kotak pertama elemen berwarna merah Warna latar belakang elemen kotak kedua ialah biru. Ini kerana dalam HTML, pemilih kelas mempunyai keutamaan yang lebih rendah daripada pemilih id, tetapi lebih tinggi daripada pemilih label, jadi elemen kotak pertama menggunakan gaya yang ditakrifkan dalam style1.css, manakala elemen kotak kedua menggunakan Gaya yang ditakrifkan dalam style2 .css.
3. Ringkasan
Dalam pembangunan web, tetapan gaya boleh menjadikan halaman lebih cantik dan lebih mudah dikenali. Dengan memanggil fail CSS yang berbeza, kami boleh menggunakan gaya yang berbeza dalam halaman yang berbeza untuk mencapai kesan yang pelbagai. Selepas memanggil berbilang fail CSS, kami boleh menggunakan pemilih id atau pemilih kelas untuk menggunakan gaya yang berbeza untuk memenuhi keperluan gaya elemen yang berbeza. Oleh itu, panggilan dan penggunaan fail CSS yang munasabah adalah salah satu titik pengetahuan penting dalam pembangunan web.
Atas ialah kandungan terperinci Panggil css yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!