HTML hanya dapat menyajikan beberapa informasi dan memiliki kemampuan kinerja yang sangat terbatas. HTML perlu digunakan bersama dengan CSS untuk membuat halaman lebih indah. Di halaman web, semua kode gaya dapat dipindahkan dari dokumen HTML dan ke dalam lembar gaya terpisah.
Gaya CSS dapat dimasukkan ke dalam dokumen HTML sebagai file terpisah (file tipe .css) atau ditulis langsung dalam dokumen HTML. Gaya tersebut secara kasar dapat dibagi menjadi empat metode berikut:
1. Lembar gaya tertanam
Tertanam: Konsentrasikan gaya CSS pada pasangan tag <style></style> dari pasangan tag <head></head> pada laman web;
Tambahkan gaya css ke tag <style> di tag <head> HTML. Gaya CSS yang ditentukan menggunakan lembar gaya tertanam hanya dapat digunakan dalam halaman web saat ini.
<!DOCTYPEhtml><html><head><title>Gaya sebaris</title><style>body{background-color:linen;}h1{color:maroon;margin-left:40px;}</style>< / head><body><h1>Gaya</h1></body></html>Karena style sheet yang disematkan perlu menentukan gaya CSS di dalam dokumen HTML, maka ukuran dokumen akan bertambah, dan ketika dokumen lain juga perlu menggunakan gaya yang sama di style sheet yang disematkan, maka dokumen tersebut tidak dapat dimasukkan ke dalam dokumen lain dan harus Mendefinisikannya ulang dalam dokumen lain akan menyebabkan redundansi kode dan tidak kondusif untuk pemeliharaan selanjutnya.
2. Gaya sebaris
Inline: Disebut juga inline, gaya CSS diatur dalam atribut style dari tag. Pendekatan ini tidak mencerminkan kelebihan CSS;
Gaya sebaris adalah mendefinisikan informasi gaya secara langsung dalam atribut gaya pada tag HTML. Karena gaya sebaris ditentukan di dalam tag, maka gaya tersebut hanya valid untuk tag tempatnya berada.
<!DOCTYPEhtml><html><head><title>Sebaris</title></head><body><h1style=color:maroon;margin-left:40px>Sejajar</h1></body ></html >Meskipun gaya inline dapat dengan mudah memberikan gaya CSS pada tag HTML, kekurangannya juga sangat jelas, dan tidak disarankan untuk menggunakannya terlalu banyak.
(1) Mendefinisikan gaya sebaris memerlukan pendefinisian atribut style di setiap tag HTML, yang sangat merepotkan;
(2) Berhati-hatilah saat menggunakan tanda kutip ganda atau tanda kutip tunggal dalam gaya sebaris, karena atribut tag HTML biasanya menggunakan tanda kutip ganda untuk membungkus nilai atribut, seperti <input type=text>;
(3) Gaya yang ditentukan dalam gaya sebaris tidak dapat digunakan kembali di tempat lain;
(4) Gaya inline sangat merepotkan dalam pemeliharaan selanjutnya, karena sebuah situs web biasanya terdiri dari banyak halaman, dan ketika mengubah gaya halaman, halaman-halaman tersebut perlu dimodifikasi satu per satu;
(5) Menambahkan terlalu banyak gaya sebaris akan menyebabkan ukuran dokumen HTML bertambah.
3. Style sheet eksternal
Tipe tautan: Seperti tipe impor keempat, ini disebut tipe eksternal atau tipe tautan eksternal. Gunakan tautan untuk mereferensikan file CSS eksternal;
Lembar gaya eksternal adalah cara paling umum dan direkomendasikan untuk mereferensikan CSS. Anda hanya perlu menentukan gaya CSS dalam file berformat .css, lalu menggunakan tag <link> HTML untuk menerapkan file gaya berformat .css ke HTML dokumen tersebut.
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=./style.css></head><body><h1>Stylesheet eksternal</h1></body>< / html>
Karena gaya CSS didefinisikan dalam file berformat .css yang terpisah, gaya tersebut dapat direferensikan di antara beberapa halaman. Jika Anda ingin mengubah gaya halaman web, Anda hanya perlu memodifikasi file gaya CSS ini, yang sangat memudahkan.
4. Impor lembar gaya
Diimpor: Gunakan @import untuk mereferensikan file CSS eksternal;
Anda juga dapat menggunakan @import untuk mereferensikan style sheet eksternal, yang mirip dengan menggunakan tag <link>. Buat style.css umum terlebih dahulu, dan impor semua gaya ke style.css terlebih dahulu.
HTML:
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=style.css></head><body><h1>Style sheet eksternal</h1></body></html >
gaya.css:
@import1.css;@import2.css;@import3.css;@import4.css;
1.css: (css dari 1 sampai 4 sama, semuanya menambahkan gaya)
.top1{tipe-gaya-daftar:tidak ada;margin:0;padding:0;}