Λίστες στυλ CSS

Πίνακας περιεχομένων

Εμφάνιση πίνακα περιεχομένων

Μη ταξινομημένες λίστες:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

Λίστες παραγγελίας:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

Λίστες HTML και Ιδιότητες λίστας CSS

Στην HTML, υπάρχουν δύο κύριοι τύποι λιστών:

μη ταξινομημένες λίστες (<ul>) - τα στοιχεία της λίστας επισημαίνονται με κουκκίδες
ταξινομημένες λίστες (<ol>) - τα στοιχεία της λίστας επισημαίνονται με αριθμούς ή γράμματα

Οι ιδιότητες της λίστας CSS σάς επιτρέπουν:

Ορίστε διαφορετικούς δείκτες στοιχείων λίστας για ταξινομημένες λίστες
Ορίστε διαφορετικούς δείκτες στοιχείων λίστας για μη ταξινομημένες λίστες
Ορίστε μια εικόνα ως δείκτη στοιχείων λίστας
Προσθέστε χρώματα φόντου σε λίστες και στοιχεία λίστας

Διαφορετικοί δείκτες στοιχείων λίστας

Η ιδιότητα list-style-type καθορίζει τον τύπο του στοιχείου λίστας σημάδι.

Το ακόλουθο παράδειγμα δείχνει μερικούς από τους διαθέσιμους δείκτες στοιχείων λίστας:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<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>

<h2>The list-style-type Property</h2>

<p>Example of unordered lists:</p>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Σημείωση: Μερικές από τις τιμές είναι για μη ταξινομημένες λίστες και κάποιες για ταξινομημένες λίστες.

Μια εικόνα ως δείκτης στοιχείων λίστας

Η ιδιότητα list-style-image καθορίζει μια εικόνα ως λίστα δείκτης αντικειμένου:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<h2>The list-style-image Property</h2>

<p>The list-style-image property specifies an image as the list item marker:</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Τοποθετήστε τους δείκτες στοιχείων λίστας

Η ιδιότητα list-style-position καθορίζει τη θέση των δεικτών στοιχείων λίστας (κουκκίδες).

"list-style-position: out;" σημαίνει ότι οι κουκκίδες θα είναι έξω το στοιχείο της λίστας. Η αρχή κάθε γραμμής ενός στοιχείου λίστας θα ευθυγραμμιστεί κατακόρυφα. Αυτό είναι προεπιλεγμένο:

Coffee - A brewed drink prepared from roasted coffee beans...
Tea
Coca-cola

"list-style-position: inside;" σημαίνει ότι οι κουκκίδες θα είναι μέσα το στοιχείο της λίστας. Καθώς είναι μέρος του στοιχείου της λίστας, θα είναι μέρος του κειμένου και σπρώξτε το κείμενο στην αρχή:

Coffee - A brewed drink prepared from roasted coffee beans...
Tea
Coca-cola

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}
</style>
</head>
<body>

<h1>The list-style-position Property</h1>

<h2>list-style-position: outside (default):</h2>
<ul class="a">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="b">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

</body>
</html>

Καταργήστε τις προεπιλεγμένες ρυθμίσεις

Η ιδιότητα list-style-type:none μπορεί επίσης να είναι χρησιμοποιείται για την αφαίρεση των μαρκαδόρων/κουκκίδων. Σημειώστε ότι η λίστα έχει επίσης προεπιλεγμένο περιθώριο και γέμιση. Για να το καταργήσετε, προσθέστε το margin:0 και το padding:0 στο <ul> ή στο <ol>:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>Default list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Remove bullets, margin and padding from list:</p>
<ul class="demo">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Κατάλογος - Συντομογραφία ιδιοκτησίας

Η ιδιότητα list-style είναι μια ιδιότητα συντομογραφίας. Χρησιμοποιείται για τη ρύθμιση όλων των λίστα ιδιοτήτων σε μία δήλωση:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>

<h2>The list-style Property</h2>

<p>The list-style property is a shorthand property, which is used to set all the list properties in one declaration.</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Όταν χρησιμοποιείτε την ιδιότητα στενογραφίας, η σειρά των τιμών των ιδιοτήτων είναι:

list-style-type: (εάν έχει καθοριστεί μια εικόνα-στυλ λίστας, η τιμή αυτής της ιδιότητας θα εμφανιστεί εάν η εικόνα για κάποιο λόγο δεν μπορεί να εμφανιστεί)
list-style-position: (καθορίζει εάν οι δείκτες στοιχείων λίστας θα πρέπει να εμφανίζονται εντός ή εκτός της ροής περιεχομένου)
list-style-image: (καθορίζει μια εικόνα ως δείκτη του στοιχείου της λίστας)

Εάν λείπει μία από τις παραπάνω τιμές ιδιοτήτων, η προεπιλεγμένη τιμή για το Το ακίνητο που λείπει θα προστεθεί, εάν υπάρχει.

Λίστα στυλ με χρώματα

Μπορούμε επίσης να διαμορφώσουμε λίστες με χρώματα, για να φαίνονται λίγο περισσότερο ενδιαφέρων.

Οτιδήποτε προστίθεται στην ετικέτα <ol> ή <ul>, επηρεάζει ολόκληρη τη λίστα, ενώ Οι ιδιότητες που προστίθενται στην ετικέτα <li> θα επηρεάσουν τα μεμονωμένα στοιχεία της λίστας:

Παράδειγμα

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

Αποτέλεσμα:

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

END_DIV

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Περισσότερα Παραδείγματα

Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε μια λίστα με κόκκινο αριστερό περίγραμμα.

Προσαρμοσμένη λίστα με κόκκινο αριστερό περίγραμμα

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  border-left: 5px solid red;
  background-color: #f1f1f1;
  list-style-type: none;
  padding: 10px 20px;
}
</style>
</head>
<body>

<h2>List with a red left border</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Αυτό το παράδειγμα δείχνει πώς να δημιουργήσετε μια λίστα με περίγραμμα χωρίς κουκκίδες.

Λίστα με περιγράμματα πλήρους πλάτους

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  padding: 0;
  border: 1px solid #ddd;
}

ul li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}

ul li:last-child {
  border-bottom: none
}
</style>
</head>
<body>

<h2>A bordered list</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Αυτό το παράδειγμα δείχνει όλους τους διαφορετικούς δείκτες στοιχείων λίστας στο CSS.

Όλοι οι διαφορετικοί δείκτες στοιχείων λίστας για λίστες

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
</style>
</head>
<body>

<h2>All List Style Types</h2>

<ul class="a">
  <li>Circle type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Disc type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="c">
  <li>Square type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ol class="d">
  <li>Armenian type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="e">
  <li>Cjk-ideographic type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="f">
  <li>Decimal type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="g">
  <li>Decimal-leading-zero type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="h">
  <li>Georgian type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="i">
  <li>Hebrew type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="j">
  <li>Hiragana type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="k">
  <li>Hiragana-iroha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="l">
  <li>Katakana type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="m">
  <li>Katakana-iroha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="n">
  <li>Lower-alpha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="o">
  <li>Lower-greek type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="p">
  <li>Lower-latin type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="q">
  <li>Lower-roman type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="r">
  <li>Upper-alpha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="s">
  <li>Upper-latin type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="t">
  <li>Upper-roman type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="u">
  <li>None type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="v">
  <li>inherit type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Όλες οι ιδιότητες λίστας CSS

list-style: Ορίζει όλες τις ιδιότητες για μια λίστα σε μία δήλωση
list-style-image: Καθορίζει μια εικόνα ως δείκτη στοιχείου λίστας
list-style-position: Καθορίζει τη θέση των δεικτών στοιχείων λίστας (κουκκίδες)
list-style-type: Καθορίζει τον τύπο δείκτη στοιχείων λίστας