Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan gaya elemen li dengan css
Bagaimana untuk menetapkan gaya elemen li dengan css
- PHPzasal
- 2023-04-21 11:26:082926semak imbas
CSS ialah salah satu bahasa gaya yang paling biasa digunakan dalam reka bentuk web Untuk menulis kod tapak web, adalah sangat penting untuk mahir dalam CSS.
Dalam reka bentuk web, kami sering menggunakan senarai untuk membentangkan maklumat, dan elemen ul dan li ialah tag yang digunakan untuk membuat senarai tidak tersusun dan senarai tersusun. Apabila membuat senarai, tetapan gaya juga sangat penting Mari kita pelajari cara menetapkan gaya elemen li.
Format CSS
Format gaya CSS terbahagi terutamanya kepada tiga jenis, iaitu gaya sebaris, gaya dalaman dan gaya luaran.
Gaya sebaris
Gaya sebaris ialah menambah gaya CSS dalam atribut gaya teg HTML. Contohnya:
<ul> <li style="color: red;">列表项1</li> <li style="color: blue;">列表项2</li> <li style="color: green;">列表项3</li> </ul>
Walaupun kod tersebut boleh menetapkan gaya elemen li secara langsung, ia jarang digunakan dalam pembangunan sebenar dan tidak kondusif untuk penyelenggaraan kod dan penggunaan semula gaya.
Gaya dalaman
Gaya dalaman ialah menambah teg <head> dalam teg <style> di kepala fail HTML, dan kemudian menambah kod gaya di sana. Contohnya:
<head>
<style>
li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
Kaedah ini boleh digunakan dalam halaman yang sama Apabila halaman lain memerlukan gaya yang sama, kod yang sama perlu ditulis semula.
Gaya luaran
Gaya luaran ditulis dalam fail CSS yang berasingan dan dirujuk ke dalam fail HTML. Contohnya:
<head> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul> </body>
Kaedah ini adalah yang paling biasa digunakan dan mempunyai ciri-ciri kod ringkas, penyelenggaraan mudah dan gaya bersatu.
Tetapkan gaya elemen li
Kita boleh menetapkan pelbagai susun atur dan tetapan gaya untuk elemen li, seperti fon, saiz fon, warna, ketinggian garisan, warna latar belakang, sempadan, dsb. . Mari kita pergi ke butiran di bawah Biar saya perkenalkan.
Saiz fon dan fon
Saiz fon dan fon ialah tetapan gaya biasa dan boleh ditetapkan melalui atribut font-family dan font-size.
li {
font-family: Arial, sans-serif;
font-size: 16px;
}
Warna
Warna boleh ditetapkan menggunakan atribut color, atau atribut background-color boleh digunakan untuk menetapkan warna latar belakang.
li {
color: red;
background-color: #ccc;
}
Ketinggian baris
Ketinggian baris boleh ditetapkan menggunakan atribut line-height.
li {
line-height: 1.5;
}
Sempadan
Jidar boleh ditetapkan menggunakan atribut border, yang merangkumi lebar, gaya dan warna jidar Anda juga boleh menggunakan border-width, border-style dan border-color atribut untuk ditetapkan.
li {
border: 1px solid black;
}
Gaya Senarai
Gaya senarai tersusun dan senarai tidak tersusun juga boleh ditetapkan secara berasingan. Contohnya, senarai tidak tersusun boleh menggunakan atribut list-style-type untuk menetapkan gaya penanda tertentu.
ul {
list-style-type: disc; /* 实心圆 */
}
Senarai tersusun boleh menggunakan atribut list-style-type untuk menetapkan gaya nombor yang berbeza.
ol {
list-style-type: lower-roman; /* 小写罗马数字 */
}
Ringkasan
Melalui pengenalan artikel ini, kami telah mempelajari cara menggunakan CSS untuk menetapkan gaya elemen li, termasuk fon, saiz fon, warna, ketinggian garisan, latar belakang warna, sempadan dan senarai Gaya, dsb., dan juga menerangkan tiga cara menetapkan gaya CSS: gaya sebaris, gaya dalaman dan gaya luaran.
Mencipta gaya unik boleh menjadikan tapak web anda lebih menarik dan diperibadikan, tetapi anda juga perlu memberi perhatian kepada ketekalan dan keserasian gaya tersebut. Dalam pembangunan sebenar, kita perlu menggunakan gaya CSS secara munasabah mengikut keperluan halaman dan keperluan pereka bentuk.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan gaya elemen li dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!