Bagaimana untuk Menambah CSS dalam HTML?
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!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Apakah tujuan atribut REL dalam tag pautan dalam HTML?
Aug 03, 2025 pm 04:50 PM
rel = "stylesheet" linkscssfilesforstylingthepage; 2.rel = "preload" hintStopreloadcriticalResourcesforperformance; 3.rel = "ikon" setSthewebsite'sfavicon; 4.rel = "alternate" menyediakan
Bagaimana untuk menyerlahkan teks dengan tag ?
Aug 04, 2025 pm 04:29 PM
Gunakan tag untuk menyerlahkan teks secara semantik, sering digunakan untuk mengenal pasti hasil carian atau kandungan penting; 2. Gaya tersuai seperti warna latar belakang, warna teks dan sempadan boleh disesuaikan melalui CSS; 3. Ia harus digunakan dalam konteks dengan kepentingan praktikal, bukan hanya hiasan visual untuk meningkatkan akses dan kesan SEO.
Cara menggunakan HTML untuk membuat pautan yang dibuka dalam tab baru
Aug 05, 2025 am 04:29 AM
Untuk membuka pautan dengan selamat dalam tab baru, anda perlu menggunakan sasaran = "_ kosong" dan sentiasa bekerjasama dengan rel = "noopener". Anda boleh memilih REL = "NOREFERRER" untuk meningkatkan perlindungan privasi. Langkah -langkah khusus adalah: 1. Gunakan HREF untuk menetapkan URL sasaran; 2. Tambah sasaran = "_ kosong" untuk membuka pautan dalam tab baru; 3. Tambah Rel = "Noopener" untuk mengelakkan halaman baru daripada memanipulasi halaman asal dan meningkatkan prestasi; 4. Anda boleh memilih Rel = "Noreferrer" untuk mengelakkan penghantaran
Apakah perbezaan antara dan dalam HTML5?
Aug 04, 2025 am 11:02 AM
Sila jelaskan kedua -dua elemen atau atribut HTML5 yang anda ingin bandingkan, seperti berbanding, berbanding, atau ID dengan kelas, supaya saya dapat memberikan penjelasan yang jelas dan praktikal tentang perbezaannya.
Bagaimana anda membenamkan audio dan video dalam html5?
Aug 03, 2025 pm 04:47 PM
Html5providesnativesupportforembeddderaudioandvideousingtheandelements.1.foraudio, usethetagwithelementStospecifyMultipleFormatsLikemp3andogg, memastikanbroaderbrowsererkompvitibiliti, andincludethecontrolsatrabrolyverblay
Cara Menggunakan Tag HTML ABBR untuk Singkatan
Aug 05, 2025 pm 12:54 PM
Menggunakan tag HTML boleh meningkatkan kebolehcapaian dan kejelasan kandungan; 1. Tanda singkatan atau akronim dengan singkatan; 2. Tambah atribut tajuk kepada singkatan yang luar biasa untuk memberikan penjelasan lengkap; 3. Gunakan apabila dokumen pertama muncul, mengelakkan anotasi pendua; 4. Anda boleh menyesuaikan gaya melalui CSS, dan penyemak imbas lalai biasanya memaparkan garis bawah bertitik; 5. Ia membantu pengguna pembaca skrin memahami istilah dan meningkatkan pengalaman pengguna.
Cara menggunakan HTML untuk pemformatan teks asas
Aug 05, 2025 pm 03:05 PM
Useforboldandsemanticimportance, dan foritalicandemphasisinsteadoforforbetteraccessibilityandseo.2.structureContentwithheadingtagsto, anduseforsmallertextlikedisclaimers.3.SeparateRagraphSwithandinsertlineSwithSwithSwithSwithSwithSwithSwithSwithSwithSwithSwithSwithSwithSwithSwithin.
Apakah format audio yang disokong di HTML5?
Aug 05, 2025 pm 08:29 PM
Sokongan format audio HTML5 berbeza dari penyemak imbas ke penyemak imbas. Format yang paling biasa digunakan termasuk: 1.mp3 (.mp3, audio/mpeg, disokong oleh semua pelayar arus perdana, dengan keserasian terbaik); 2.wav (.wav, audio/wav, menyokong fail yang lebih baik tetapi besar, sesuai untuk audio pendek); 3.ogg (.ogg/.oga, audio/ogg, chrome, firefox, sokongan opera, safari dan IE tidak disokong, sumber terbuka percuma); 4.AAC (.aac/.m4a, audio/aac, safari, krom, sokongan tepi, sokongan firefox adalah terhad, sering digunakan dalam peranti Apple). Untuk memastikan keserasian,
