Προηγούμενο
Επόμενο

Εφαρμογή στυλ σε συγκεκριμένο περιεχόμενο (ul li)

Σε αυτή την ενότητα θα εφαρμόσουμε κανόνες CSS σε μη αριθμημένη λίστα κειμένου (unordered list) και στα στοιχεία της λίστας.

Ας υποθέσουμε ότι θέλουμε η λίστα μας να εμφανίζεται με τετράγωνο αντί για κύκλο.
Υπάρχουν 3 βήματα:

Βήμα 1

Μεταβείτε στο HTML, βρείτε την ετικέτα <ul> και δημιουργήστε μια κλάση.
Παράδειγμα:

<ul class="squarelist">
  <li> My name is .. </li>
  <li> My surname is .. </li>
</ul>


Βήμα 2
Μεταβείτε στο CSS και δημιουργήστε τον επιλογέα σας. Παράδειγμα:

.squarelist { }


Βήμα  3

Στο CSS έχουμε την ιδιότητα -style-type. Εφόσον θέλουμε να εμφανίζεται η λίστα μας με bullet -τετράγωνο, θα δώσουμε σε αυτήν την ιδιότητα την τιμή square.
Παράδειγμα:

.squarelist { list-style-type: square;}

Υποθέστε ότι θέλουμε όλα τα στοιχεία λίστας (li) της μη ταξινομημένης λίστας μας να είναι πράσινα. Θα μπορούσαμε να το κάνουμε αυτό με τον επιλογέα της τάξης. Ωστόσο, δεδομένου ότι θέλουμε να εφαρμόσουμε αυτόν τον κανόνα σε κάθε li μέσα σε μια λίστα ul, θα το κάνουμε απευθείας χρησιμοποιώντας τον επιλογέα στοιχείων.

Παράδειγμα:

li { color: green; }

Επίσης, εάν θέλουμε να διασφαλίσουμε ότι μόνο τα στοιχεία li της ul θα πάρουν αυτό το στυλ, μπορούμε να γράψουμε:

ul li { color: green; }

Γραμμή πλοήγησης
Προχωρώντας στην πρακτική χρήση των λίστας ul, θα παρουσιάσουμε κάποιους βασικούς κανόνες που εφαρμόζουμε για τη δημιουργία μιας γραμμής πλοήγησης.
Γενικά, οι εικέτα <ul> μιας γραμμής πλοήγησης δεν θα πρέπει να έχει κύκλους και τις προεπιλεγμένες ρυθμίσεις του προγράμματος περιήγησης.
Για να καταργήσουμε τους κύκλους του <ul>, θα πρέπει να δώσουμε την τιμή none στην ιδιότητα list-style-type.
Παράδειγμα:

ul { list-style-type: none;}

Για να καταργήσουμε τις προεπιλεγμένες ρυθμίσεις του προγράμματος περιήγησης, θα πρέπει να αφαιρέσουμε το προεπιλεγμένο περιθώριο-margin (τον χώρο εξωτερικά από το περίγραμμα - border) και το διάκενο - padding (τον χώρο εσωτερικά από το περίγραμμα).
Παράδειγμα:

ul { list-style-type: none;
  margin: 0;
  padding:0;
}
Παράδειγμα

Οι κανόνες CSS :

<!DOCTYPE html>
<html lang="en">
  <head>
     <style>
         .squarelist { list-style-type: square;}
         ol li { color: magenta; }
     </style>
   </head>
   <body>
     <ul class="squarelist">
         <li>My name is .. </li>
         <li>My surname is .. </li>
     </ul>
     <ul >
         <li>My name is .. </li>
         <li>My surname is .. </li>
     </ul>
     <ol >
         <li>My name is .. </li>
         <li>My surname is .. </li>
     </ol>
   </body>
</html>

θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:

style to a specific context

Περισσότερες πληροφορίες: https://www.w3schools.com/css/css_list.asp

Άσκηση

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice04.1.03.html στον φάκελο "Exercises".
  2. Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο..
  3. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα:

style to a specific context

Λύση:

Προηγούμενο
Επόμενο