Gaya senarai CSS
Senarai CSS
Fungsi sifat senarai CSS seperti berikut:
Tetapkan item senarai yang berbeza untuk ditandakan sebagai senarai tersusun
Tetapkan item senarai berbeza ditandakan sebagai senarai tidak tersusun
Tetapkan item senarai ditandakan sebagai imej
Senarai
Dalam HTML, terdapat Dua jenis senarai:
Senarai tidak tersusun - item senarai ditandakan dengan grafik khas (seperti titik hitam kecil, kotak kecil, dsb.)
Senarai tersusun - item senarai ditanda dengan nombor atau The huruf
boleh digayakan lagi menggunakan CSS dan boleh ditandakan dengan imej sebagai item senarai.
1． Simbol senarai
Simbol senarai merujuk kepada simbol yang dipaparkan di hadapan setiap item senarai.
Format asas adalah seperti berikut:
jenis gaya senarai: parameter
Julat nilai parameter:
·cakera: bulatan
·bulatan: bulatan berongga
·segi empat sama: segi empat sama
·perpuluhan: nombor perpuluhan
·roman bawah: angka Roman huruf kecil
·atas - roman: huruf besar angka Rom
· huruf kecil: huruf Yunani huruf kecil
· huruf besar: huruf Yunani huruf besar
· tiada: tiada paparan simbol
cakera dalam parameter ialah pilihan lalai.
rreeee
2． Simbol grafik
Simbol grafik bermaksud peluru dalam senarai asal boleh digantikan dengan grafik.
Format asas adalah seperti berikut:
imej gaya senarai: URL
URL ialah alamat fail grafik yang digunakan untuk menggantikan titik tumpu dan anda boleh menggunakan alamat relatif atau alamat mutlak.
3． Kedudukan Senarai
Kedudukan Senarai menerangkan tempat senarai dipaparkan.
Format asas adalah seperti berikut:
kedudukan gaya senarai: parameter
Julat nilai parameter:
·dalam: dipaparkan di dalam model BOX
·luar: dipaparkan di luar model BOX
Konsep baharu muncul di sini: model BOX. BOX merujuk kepada bekas yang mengandungi objek yang peraturan gaya digunakan. Pengenalan terperinci akan diberikan kemudian.
Imej sebagai penanda item senarai
Untuk menentukan imej sebagai penanda item senarai, gunakan atribut imej gaya senarai:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
<ul class="b">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ol>
<ol class="d">
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ol>
</body>
</html>Contoh di atas berfungsi sama sekali Paparan dalam penyemak imbas tidak sama, IE dan Opera memaparkan teg imej lebih tinggi sedikit daripada Firefox, Chrome dan Safari.
Jika anda ingin meletakkan logo imej yang sama dalam semua penyemak imbas, anda harus menggunakan penyelesaian keserasian penyemak imbas Prosesnya adalah seperti berikut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul
{
list-style-image:url('../style/images/sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
</body>
</html>Contoh penjelasan:
ul:
Tetapkan jenis gaya senarai kepada tiada pemadaman teg item senarai
Tetapkan padding dan margin kepada 0px (keserasian penyemak imbas)
Semua li in ul:
Tetapkan URL imej, dan tetapkannya untuk dipaparkan sekali sahaja (tiada ulangan)
Letakkan imej di tempat yang anda perlukan (0px kiri dan 5px atas dan bawah)
Letakkan teks dalam senarai dengan padding- atribut kiri
Atribut singkatan senarai
Semua atribut senarai boleh ditentukan dalam satu atribut. Ini dipanggil atribut singkatan.
Jika nilai sifat singkatan digunakan, susunannya ialah:
jenis gaya senarai
kedudukan gaya senarai (lihat jadual sifat CSS di bawah untuk arahan)
imej gaya senarai
Tidak kira jika salah satu nilai di atas hilang dan selebihnya masih dalam susunan yang ditentukan.
Semua sifat senarai CSS
Sifat 🎜>
atribut trengkas gaya senarai. Tetapkan semua atribut yang digunakan untuk senarai dalam pernyataan
List-Style-IMAGE untuk menetapkan imej sebagai logo item senarai.
kedudukan gaya senarai Tetapkan kedudukan tanda item senarai dalam senarai.
bahagian seterusnya