List ng CSS

តារាងមិនលំអិត:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

តារាងលំអិត:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

តារាង HTML និងលក្ខណៈកម្ម CSS តារាង

នៅក្នុង HTML តារាងមានប្រភេទចំនួនពីរ:

  • តារាងមិនលំអិត (ul) - តារាងរបស់បញ្ជីប្រើប្រសិទ្ធិភាពរង្វាស់
  • តារាងលំអិត (ol) - តារាងរបស់បញ្ជីប្រើប្រសិទ្ធិភាពតួលេខ ឬតួលេក

លក្ខណៈកម្ម CSS តារាងបញ្ជីអនុញ្ញាតអោយអ្នក:

  • កំណត់រង្វាស់រង្វាស់តារាងរបស់បញ្ជីសំរាប់តារាងបញ្ជីលំអិត
  • កំណត់រង្វាស់រង្វាស់តារាងរបស់បញ្ជីសំរាប់តារាងបញ្ជីមិនលំអិត
  • កំណត់រូបភាពជារង្វាស់តារាងរបស់បញ្ជី
  • បន្ថែមពណ៌ពណ៌ផ្ទៃក្រោយសំរាប់តារាង និងតារាងរបស់បញ្ជី

រង្វាស់តារាងរបស់បញ្ជីផ្សេងៗ

list-style-type លក្ខណៈកម្មបង្ហាញប្រភេទរង្វាស់តារាងរបស់បញ្ជី:

ឧទាហរណ៍ខាងក្រោមបង្ហាញពួករង្វាស់តារាងរបស់បញ្ជីដែលអាចប្រើបាន:

Mga halimbawa

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

Subukan nang personal

ការកត់សម្គាល់:តំលៃខ្លះត្រូវបានប្រើសំរាប់តារាងបញ្ជីមិនលំអិត ហើយតំលៃខ្លះត្រូវបានប្រើសំរាប់តារាងបញ្ជីលំអិត。

រូបភាពជារង្វាស់តារាងរបស់បញ្ជី

list-style-image លក្ខណៈកម្មនេះបង្ហាញថារូបភាពជារង្វាស់តារាងរបស់បញ្ជី:

Mga halimbawa

ul {
  list-style-image: url('sqpurple.gif');
}

Subukan nang personal

ត្រួតត្រួតទំនោរតារាងរបស់បញ្ជី

list-style-position លក្ខណៈកម្មបង្ហាញទំនោររបស់តារាងរបស់បញ្ជី (រង្វាស់):

"list-style-position: outside;" បង្ហាញថារង្វាស់បញ្ជីនឹងនៅខាងក្រៅរបស់តារាងរបស់បញ្ជី។ ចាប់ផ្តើមម្តងនៃតារាងរបស់បញ្ជីនឹងត្រូវបានតំរុយចុះជាទិសពាយព្យ។ នេះគឺជារដ្ឋានដោយលំនាំ:

  • Coffee - isang inumin na ginawa sa pinahinalaang kape
  • Tea
  • Coca-cola

"list-style-position: inside;" Ang "list-style-position: inside;" ay nangangahulugan na ang symbol ng item ay magiging bahagi ng item ng listahan. Dahil ito ay bahagi ng item ng listahan, ito ay magiging bahagi ng teksto at mag-ikot sa simula ng teksto:

  • Coffee - isang inumin na ginawa sa pinahinalaang kape
  • Tea
  • Coca-cola

Mga halimbawa

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

Subukan nang personal

Alisin ang default na setting

list-style-type:none Ang attribute ay maaari ring gamitin upang alisin ang marka/symbol. Maaaring alamin na ang listahan ay may default na margin at padding. Upang alisin ito, magdagdag sa <ul> o <ol> na marka: margin:0 at padding:0 :

Mga halimbawa

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Subukan nang personal

Listahan - Maliit na attribute

list-style Ang attribute ay isang maliit na attribute. Ginagamit ito para sa pagtatakda ng lahat ng attribute ng listahan sa isang deklarasyon:

Mga halimbawa

ul {
  list-style: square inside url("sqpurple.gif");
}

Subukan nang personal

Sa paggamit ng maliit na attribute, ang pagkakasunod-sunod ng halaga ng attribute ay:

  • list-style-type(Kung itinukoy ang list-style-image, at ang imahe ay hindi maipakita ng dahil sa anumang dahilan, ipakita ang halaga ng attribute na ito)
  • list-style-position(Tukuyin kung ang marka ng listahan ay dapat ipakita sa loob o labas ng content stream)
  • list-style-image(Tukuyin ang imahe bilang marka ng listahan)

Kung wala sa mga halos na ito ang attribute, ay ilagay ang default na halaga ng missing na attribute (kung mayroon).

Iset ang kulay ng estilo ng listahan

Maaari rin naming gamitin ang pagtatakda ng kulay sa pagtatakda ng estilo ng listahan, para maging mas interyoso sila.

Anumang estilo na idinagdag sa <ol> o <ul> na marka ay makakaapekto sa buong listahan, habang ang mga attribute na idinagdag sa <li> na marka ay makakaapekto sa bawat listahan ng item:

Mga halimbawa

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

Resulta:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Subukan nang personal

Higit pang mga halimbawa

Custom list na may pula na kanang border
Ito ay nagtuturo kung paano gumawa ng listahan na may pula na kanang border.
Bilang naibotong pagkakalat na listahan
This example demonstrates how to create a bordered list without bullet points.
All different list item markers of the list
This example demonstrates all different list item markers in CSS.

All CSS List Properties

Attribute Description
list-style Abbreviated attribute. Set all properties of the list in one declaration.
list-style-image Specify an image as the list item marker.
list-style-position Define the position of the list item marker (bullet).
list-style-type Define the type of marker for list items.