Bagaimana untuk menetapkan gaya elemen li dengan css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan gaya elemen li dengan css

PHPz

Lepaskan： 2023-04-21 13:44:17

asal

2953 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

Warna

Warna boleh ditetapkan menggunakan atribut color, atau atribut background-color boleh digunakan untuk menetapkan warna latar belakang.

li {
  color: red;
  background-color: #ccc;
}

Salin selepas log masuk

Ketinggian baris

Ketinggian baris boleh ditetapkan menggunakan atribut line-height.

li {
  line-height: 1.5;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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; /* 实心圆 */
}

Salin selepas log masuk

Senarai tersusun boleh menggunakan atribut list-style-type untuk menetapkan gaya nombor yang berbeza.

ol {
  list-style-type: lower-roman; /* 小写罗马数字 */
}

Salin selepas log masuk

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!