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:
Metode pertama dan kedua menulis gaya CSS ke dalam dokumen HTML saat ini. Metode ketiga dan keempat menempatkan gaya CSS di file eksternal dan kemudian mengimpornya ke dalam dokumen HTML saat ini.
Gaya sebaris adalah dengan meletakkan gaya CSS langsung di dalam tag di dalam baris kode, biasanya di atribut style dari tag. Karena gaya sebaris dimasukkan langsung ke dalam tag, ini adalah cara yang paling langsung, dan juga merupakan cara yang paling langsung paling tidak nyaman untuk memodifikasi gaya.
[Contoh 1] Terapkan gaya sebaris CSS ke paragraf, tag <h2>, tag <em>, tag <strong>, dan tag <div>.
<!doctypehtml>
<html>
<kepala>
<meta charset="UTF-8">
<title>Gaya sebaris</title>
</kepala>
<tubuh>
<p style="background-color: #999900">Elemen sebaris, kontrol paragraf-1</p>
<h2 style="background-color: #FF6633">Elemen sebaris, elemen judul h2</h2>
<p style="background-color: #999900">Elemen sebaris, kontrol paragraf-2</p>
<strong style="font-size:30px;">Elemen sebaris, kuat lebih efektif daripada elemen</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">Elemen sebaris, elemen tingkat blok div</div>
<em style="font-size:2em;">Elemen sebaris, penekanannya</em>
</tubuh>
</html>Efek demonstrasi halaman seperti yang ditunjukkan di bawah ini:
Dalam contoh di atas, gaya sebaris disematkan oleh atribut style elemen HTML, yaitu kode CSS dapat ditempatkan di dalam tanda kutip style="" dan beberapa nilai atribut CSS dipisahkan dengan titik koma ; Misalnya, tag <div> pada contoh:
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">Elemen sebaris, elemen tingkat blok div</div>
Tag <p> paragraf menyetel warna latar belakang menjadi coklat (warna latar: #999900), dan tag judul <h2> menyetel warna latar belakang menjadi merah (warna latar: #FF6633).
Tag <strong> menyetel font menjadi 30 piksel (ukuran font:30px;), tag <div> menyetel tinggi dan tinggi garis menjadi 30 piksel, serta menyetel warna dan warna latar belakang (warna latar: #66CC99; warna : #993300 ; height:30px; line-height:30px;), tag <em> menyetel ukuran font ke satuan relatif (ukuran font: 2em;).
Meskipun isi dari dua tag <p> paragraf berbeda, keduanya menggunakan pengaturan warna latar belakang yang sama, tetapi menambahkan atribut sebaris CSS dua kali untuk mengatur warna latar belakang warna latar: #999900.
Meskipun elemen inline mudah untuk ditulis, cacat berikut dapat ditemukan melalui contoh:
Setiap tag perlu diberi gaya dengan menambahkan atribut style. Berbeda dari masa lalu ketika pembuat laman web mencampurkan tag dan gaya HTML, sekarang gaya sebaris ditulis melalui CSS, dan di masa lalu, atribut tag HTML digunakan untuk mencapai efek gaya. Walaupun caranya berbeda, namun konsekuensinya sama: biaya pemeliharaan yang tinggi di kemudian hari, yaitu ketika memodifikasi halaman, Anda perlu membuka setiap halaman situs web satu per satu dan memodifikasinya satu per satu, dan Anda tidak dapat melihat peran CSS sama sekali. Menambahkan begitu banyak gaya inline akan membuat halaman menjadi besar. Jika portal ditulis dengan cara ini, maka akan membuang bandwidth dan lalu lintas server.Beberapa halaman web di Internet dapat melihat cara penulisan ini dengan melihat file sumbernya. Meskipun hanya sebagian halaman web yang dilakukan dengan cara ini, namun perlu dibedakan berdasarkan situasinya:
Jika pembuat halaman web menulis gaya sebaris seperti itu, gaya saat ini dapat dengan cepat diubah tanpa harus mempertimbangkan konflik gaya yang ditulis sebelumnya. Jika situasi ini terjadi di halaman web, itu karena gaya tersebut dihasilkan oleh editor di latar belakang pengeditan, atau latar belakang belum sepenuhnya berkembang, perlu dikembangkan opsi bagi editor untuk memilih gaya alih-alih langsung mengubah warna, ketebalan, warna latar belakang, kemiringan, dan efek lainnya melalui editor.Gaya inline menulis CSS di bagian atas file sumber halaman web, yaitu antara <head> dan <head>, dan mengapitnya dengan menggunakan tag <style> pada tag HTML digunakan di sini. Gunakan halaman untuk mengatasi kelemahan penulisan gaya sebaris beberapa kali.
[Contoh 2] Tetapkan metode penulisan gaya sebaris pada paragraf untuk mengurangi jumlah kode.
<!doctypehtml>
<html>
<kepala>
<meta charset="utf-8">
<title>Tertanam</title>
<gaya tipe="teks/css">
P{
perataan teks: kiri; /*teks rata kiri*/
ukuran font: 18 piksel; /*Ukuran font 18 piksel*/
tinggi garis: 25 piksel; /* Tinggi garis 25 piksel*/
indentasi teks: 2em; /*Indentasi baris pertama sebanyak 2 spasi ukuran teks*/
lebar: 500 piksel; /*Lebar paragraf 500 piksel*/
margin: 0 otomatis; /*Berpusat di bawah browser*/
margin-bawah: 20 piksel; /*margin bawah paragraf 20 piksel*/
}
</gaya>
</kepala>
<tubuh>
<p>Nama perusahaan "Baidu" berasal dari puisi Dinasti Song "Mencarinya di ribuan Baidu". (Ruang konferensi Perusahaan Baidu diberi nama Kasus Qingyu, yang merupakan kartu kata dalam puisi ini). Ide ikon "cakar beruang" berasal dari rangsangan "pemburu yang berpatroli di cakar beruang", yang sangat mirip dengan "teknologi pencarian analitis" Dr. Li, sehingga membentuk konsep pencarian Baidu dan akhirnya menjadi gambar ikon Baidu. Setelah itu, karena sebagian besar mesin pencari diwakili oleh gambar binatang, seperti rubah SOHU, seperti anjing GOOGLE, Baidu tentu saja menyebutnya beruang. Baidu Bear telah menjadi citra Perusahaan Baidu. </p>
<p>Dalam rencana Baidu untuk mengubah LOGO-nya, tiga desain LOGO baru yang diusulkan oleh Baidu semuanya ditolak oleh suara netizen. Semakin banyak netizen yang memilih logo cakar beruang asli. </p>
<p>Sebanyak tiga putaran pemungutan suara dilakukan untuk mengubah LOGO. Hingga akhir pemungutan suara putaran kedua, LOGO wajah tersenyum yang baru memiliki keunggulan absolut. Namun pada putaran terakhir pemungutan suara, logo asli cakar beruang secara dramatis memenangkan suara terbanyak dari netizen, sehingga menolak sepenuhnya tiga rencana LOGO baru. </p>
</tubuh>
</html>Efek demonstrasi halaman seperti yang ditunjukkan di bawah ini:
Pada contoh di atas, paragraf diatur sebagai berikut: teks rata kiri, ukuran font 14, tinggi garis 25 piksel, lebar 500 piksel, margin bawah 20 piksel, browser berada di tengah di bawah browser, dan baris pertama diindentasi dengan dua spasi berukuran teks. Indentasi baris pertama menggunakan satuan relatif. Maksud dari pengaturan ini adalah ketika ukuran font berubah (seperti font-size: 18px; ), tetap dapat diindentasi sebanyak dua spasi ukuran teks.
Gaya inline menimbulkan ketidaknyamanan dalam modifikasi gaya. Misalnya, pada contoh sebelumnya, kedua paragraf menggunakan gaya yang sama, namun harus ditulis dua kali.
Gaya tidak hanya dapat menentukan gaya CSS, tetapi juga skrip JavaScript, jadi Anda perlu memperhatikan saat menggunakan gaya. Jika nilai tipe style adalah text/css , gaya CSS ditulis secara internal; jika nilai tipe style adalah text/javascript , skrip JavaScript ditulis secara internal.
Atribut judul dari tag gaya
Ada atribut khusus judul dalam gaya. Anda dapat menggunakan judul untuk mengatur judul untuk gaya yang berbeda. Penampil dapat memilih gaya yang berbeda sesuai dengan judul untuk mencapai efek peralihan di browser. dan browser Firefox mendukungnya.
[Contoh 3] Tetapkan dua gaya ukuran font masing-masing untuk browser Firefox, dan modifikasi melalui menu "Tampilan" Firefox.
<!doctypehtml>
<html>
<kepala>
<meta charset="utf-8">
<style type="text/css" title="Ukuran font 14">
P{
perataan teks: kiri; /*teks rata kiri*/
ukuran font: 14 piksel; /*Ukuran font 14 piksel*/
tinggi garis: 25 piksel; /* Tinggi garis 25 piksel*/
text-indent: 2em; /*Indentasi baris pertama dengan dua spasi ukuran teks*/
lebar: 500 piksel; /*Lebar paragraf 500 piksel*/
margin: 0 otomatis; /*Berpusat di bawah browser*/
}
</gaya>
<style type="text/css" title="Ukuran font 18">
P{
perataan teks: kiri; /*teks rata kiri*/
ukuran font: 18 piksel; /*Ukuran font 18 piksel*/
tinggi garis: 25 piksel; /* Tinggi garis 25 piksel*/
text-indent: 2em; /*Indentasi baris pertama dengan dua spasi ukuran teks*/
lebar: 500 piksel; /*Lebar paragraf 500 piksel*/
margin: 0 otomatis; /*Berpusat di bawah browser*/
warna: #6699FF; /*Ubah warna font*/
}
</gaya>
</kepala>
<tubuh>
<p>Nama perusahaan "Baidu" berasal dari puisi Dinasti Song "Mencarinya di ribuan Baidu". (Ruang konferensi Perusahaan Baidu diberi nama Kasus Qingyu, yang merupakan kartu kata dalam puisi ini). Ide ikon "cakar beruang" berasal dari rangsangan "pemburu yang berpatroli di cakar beruang", yang sangat mirip dengan "teknologi pencarian analitis" Dr. Li, sehingga membentuk konsep pencarian Baidu dan akhirnya menjadi gambar ikon Baidu. </p>
</tubuh>
</html>Efek demonstrasi halaman ditunjukkan pada gambar di bawah.
Dalam contoh di atas, dua ukuran font ditentukan melalui <style type="text/css" title="名称"> , dan ada dua opsi di submenu "Gaya Halaman" di bawah menu "Tampilan" di Firefox : Font ukuran 14, ukuran font 18. Secara default, <style type="text/css" title="名称"> tulisan pertama ditampilkan. Gaya halaman dapat diubah melalui menu.
Metode link menghubungkan file style sheet eksternal ke dokumen HTML melalui tag <link> HTML. Ini adalah metode yang paling umum digunakan di situs web di Internet, dan juga merupakan metode yang paling praktis. Metode ini sepenuhnya memisahkan dokumen HTML dan file CSS, mencapai pemisahan lengkap antara lapisan struktur dan lapisan presentasi, dan meningkatkan skalabilitas struktur halaman web dan pemeliharaan gaya CSS.
[Contoh 4] Gunakan gaya tautan untuk menerapkan gaya pada kode HTML, yang mudah untuk ditulis dan diubah.
<!doctypehtml>
<html>
<kepala>
<meta charset="utf-8">
<judul></judul>
<link href="lianjie.css" type="teks/css" rel="stylesheet" />
<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
</kepala>
<tubuh>
<p>Saya dikendalikan oleh file lianjie-2.css. Bagaimana kalau Anda di bawah? ? </p>
<h3>Di lantai atas, file <span>lianjie.css</span> memberi saya gaun berwarna-warni. </h3>
</tubuh>
</html>Efek demonstrasi halaman seperti yang ditunjukkan di bawah ini:
Dalam contoh di atas, dua file CSS ditautkan melalui tautan, dan keduanya valid. Inilah sebabnya pembuat situs web memasukkan bagian yang sama ke dalam file CSS, dan menulis file gaya baru untuk gaya halaman saat ini.
kode file lianjie.css:
h3{
font-weight: normal; /*Membatalkan efek tebal default pada judul*/
warna latar belakang: #66CC99; /* Mengatur warna latar belakang*/
tinggi: 50 piksel; /*Mengatur tinggi label*/
line-height:50px; /* Mengatur tinggi garis label*/
}
menjangkau{
warna: #FFOOOO; /* warna font*/
berat font: tebal; /* font tebal*/
}kode file lianjie-2.css:
P{
warna: #FF3333; /*Pengaturan warna font*/
berat font: tebal; /* font tebal*/
border-bottom: 3px putus-putus #009933; /* Tetapkan garis batas bawah*/
tinggi garis: 30 piksel; /* Tetapkan tinggi garis*/
}Gaya tertaut benar-benar memisahkan kode CSS dan kode HTML, mencapai pemisahan struktur dan gaya, memungkinkan kode HTML untuk secara khusus membangun struktur halaman, sementara pekerjaan kecantikan diselesaikan oleh CSS.
Manfaat menautkan gaya CSS yang diimpor:
File CSS dapat ditempatkan dalam file HTML yang berbeda untuk menyatukan gaya semua halaman situs web; selanjutnya, memasukkan kode CSS ke dalam satu file CSS memudahkan pengelolaan dan mengurangi waktu kode dan pemeliharaan ketika file CSS diubah, semua halaman yang berlaku file CSS ini akan Semua file HTML akan diperbarui tanpa harus mengambil semua halaman dari server dan kemudian mengunggahnya setelah modifikasi.Mengimpor style Gunakan perintah @import untuk mengimpor style sheet eksternal. Ada 6 metode penulisan untuk gaya yang diimpor:
@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@impor url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");[Contoh 5] Impor style sheet lianjie.css dan daoru.css dan tulis warna latar belakang tag <body>. Perhatikan bahwa style sheet dan tag <body> yang diimpor tidak dapat dibalik.
<html>
<kepala>
<meta charset="utf-8">
<judul></judul>
<gaya tipe="teks/css">
@impor url(lianjie.css);
@impor url(daoru.css);
badan { warna latar: #e4e929 }
</gaya>
</kepala>
<tubuh>
<div>
<p>Saya dikendalikan oleh file lianjie-2.css. Bagaimana kalau Anda di bawah? ? </p>
<h3>Di jaket, file <span>lianjie.css</span> memberi saya gaun bermotif bunga. </h3>
</div>
</tubuh>
</html>Efek demonstrasi halaman ditunjukkan pada gambar di bawah.
Dalam contoh di atas, harus @import url("lianjie-2.css"); p{text-indent: 3em;} , tetapi tidak p{text-indent:3em;} @import url("lianjie-2.css"); jika tidak, efek impor tidak akan valid. Pada file CSS, @import juga perlu ditempatkan di depan dan gaya CSS ditambahkan di akhir, jika tidak maka tidak valid.
Kode file lianjie.css sama seperti contoh sebelumnya yaitu tipe link.
kode file daoru.css:
@import url("lianjie-2.css");
p { indentasi teks: 3em;Demikianlah artikel tentang empat metode implementasi gaya CSS tertanam HTML. Untuk gaya CSS tertanam HTML lainnya, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait berikut .Dukung downcodes.com!