Rumah > Artikel > hujung hadapan web > Bagaimana untuk Menambah CSS dalam HTML?
Bagaimana untuk Menambah CSS dalam HTML?
- 王林asal
- 2024-09-04 16:52:24880semak imbas
Cascading Style Sheets, biasanya dikenali sebagai CSS, menyediakan cara untuk pembangun web untuk menggayakan halaman web mengikut pilihan mereka. Halaman HTML ringkas tanpa sebarang format penggayaan yang ditakrifkan dalam CSS akan kelihatan sangat hodoh dan membosankan kepada pengguna akhir. Oleh itu CSS ialah komponen penting dalam laman web moden untuk memberikan mereka rupa yang cantik, menarik dan menarik. Secara tradisinya, CSS hanya bertanggungjawab untuk mengawal rupa dan rasa tapak web. Namun begitu, peningkatan berterusan dan CSS baharu membolehkan pembangun web dan pereka bentuk mengawal responsif tapak web agar halaman web mempunyai UI yang terkenal untuk komputer riba, tablet dan skrin mudah alih.
Memandangkan CSS diperlukan untuk setiap tapak web, ia mestilah fleksibel dan mudah untuk ditakrifkan mengikut keperluan pereka bentuk. Selain itu, kerana ia boleh menjadi sangat berbutir, takrifan CSS mesti boleh digunakan semula untuk format penggayaan yang sama untuk digunakan pada beberapa komponen bersama-sama. Nasib baik, keupayaan CSS memenuhi keperluan ini.
Kaedah untuk Menambah CSS dalam HTML
Anda boleh menambah CSS pada halaman web menggunakan salah satu atau semua pilihan berikut. Sekarang, mari kita terokai tiga kaedah ini secara terperinci.
1. CSS sebaris
Dengan CSS sebaris, pereka bentuk HTML boleh menentukan maklumat penggayaan dalam teg elemen HTML menggunakan atribut "gaya". Ia mempunyai beberapa kebaikan dan keburukan, yang akan membincangkan dengan beberapa contoh tidak lama lagi. CSS sebaris ialah kaedah paling asas untuk menggunakan CSS. Kaedah ini membolehkan kita menggayakan hanya satu elemen HTML pada satu masa. Ia tidak memberikan sebarang kebolehgunaan semula penggayaan. Maklumat gaya ditakrifkan dalam teg pembuka elemen HTML dan dibekalkan sebagai nilai kepada atribut "gaya".
Dalam contoh di bawah, kami menukar warna fon elemen h1, h6 dan p menggunakan CSS Sebaris.
Kod:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;">I am a Blue H1 heading</h1> <h1 style="color:blue;">I am a Blue H6 heading</h1> <p style="color:blue;">I am a Blue Paragraph</p> </body> </html>
Output:
Dalam contoh di atas, kami hanya mahu menukar warna fon teg H1, H6 dan P kepada biru. Walaupun ingin menggunakan maklumat penggayaan yang sama, kami tidak dapat menggunakannya semula dan terpaksa mentakrifkannya tiga kali secara individu untuk setiap elemen. Oleh kerana kekurangan kebolehgunaan semula dan penggunaan masa yang meningkat, pereka web tidak lebih suka menggunakan CSS Sebaris apabila menggayakan tapak web dengan berbilang halaman. Selain itu, membuat tapak web responsif mudah alih hampir mustahil dengan definisi penggayaan Sebaris.
2. CSS Dalaman
Dalam CSS Dalaman, pereka HTML boleh menentukan maklumat penggayaan dalam
Sekarang mari cuba contoh yang sama tetapi dilaksanakan dengan CSS dalaman.
Kod:
<!DOCTYPE html>
<html>
<head>
.bluecolor {
color : blue ;
}
</head>
<body>
<h1 class = " bluecolor "> I am a Blue H1 heading </h1>
<h1 class = " bluecolor "> I am a Blue H6 heading </h1>
<p class = " bluecolor "> I am a Blue Paragraph </p>
</body>
</html>
Output:
Seperti yang dilihat dalam contoh di atas, kita mesti mengisytiharkan maklumat penggayaan sekali dan kemudian menggunakannya beberapa kali. Walaupun CSS dalaman menawarkan tahap kebolehgunaan semula penggayaan yang ketara, CSS yang ditakrifkan dalam satu fail HTML tidak boleh digunakan dalam fail lain. Selain itu, mengisytiharkan CSS dan HTML dalam fail yang sama boleh meningkatkan saiz fail dengan ketara dan boleh menyebabkan kelewatan semasa memuatkan fail.
3. CSS luaran
Seperti namanya, CSS Luaran boleh digunakan pada halaman web dengan mentakrifkan semua maklumat CSS dalam fail CSS luaran yang disimpan oleh sambungan .css dan boleh diimport dengan teg dalam fail HTML di mana penggayaan perlu digunakan. Mekanisme CSS luaran telah dibina untuk mengatasi kelemahan CSS dalaman dan sebaris. CSS luaran memerlukan fail .css untuk membawa semua maklumat penggayaan. Anda kemudiannya boleh memautkan fail ini ke fail HTML yang mana elemen HTML merujuk kepada id atau kelas yang ditakrifkan dalam fail CSS yang dipautkan.
Anda mencapai pemautan dengan bantuan teg pautan HTML. Mari kita fahami ini dengan contoh. Kami akan mencipta fail CSS dengan nama mystyles dan sambungan .css; Fail ini akan menghubungi data berikut:
Kod:
.bluecolor{
color:blue;
}
Now we will add the below content in the HTML file:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyles.css"> </head> <body> <h1 class = " bluecolor "> I am a Blue H1 heading </h1> <h1 class = " bluecolor "> I am a Blue H6 heading </h1> <p class = " bluecolor "> I am a Blue Paragraph </p> </body> </html>
The above code will produce the following output in the browser:
Output:
Conclusion
With the above examples, we can conclude that External CSS would be the most efficient way of implementing CSS in the website due to the highest degree of code reusability that it provides limited time consumption. Web designers use External CSS for building all professionally developed and popular themes available because it greatly enhances manageability and efficiency in web designing.
Atas ialah kandungan terperinci Bagaimana untuk Menambah CSS dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!