Print bookPrint book

Υποενότητα 4.1 Επιλογείς

Site: ΕΛ/ΛΑΚ Moodle
Course: Σχεδιασμός WEB και Παραγωγή Ψηφιακού Περιεχομένου
Book: Υποενότητα 4.1 Επιλογείς
Printed by: Guest user
Date: Friday, 26 April 2024, 11:56 PM

Description

  • επιλογέας id 
  • επιλογέας κλάση (Class) και πολλαπλές κλάσεις 
  • επιλογή συγκεκριμένου περιεχομένου (ul li)
  • ομαδοποίηση επιλογέων 

Table of contents

Επιλογέας id

Νωρίτερα δείξαμε ότι οι επιλογείς (selectors ) στοιχείων μπορούν να χρησιμοποιηθούν για τον ορισμό του στοιχείου στο οποίο θέλουμε να εφαρμόσουμε τα στυλ μας.
Ωστόσο, υπάρχουν πρόσθετοι επιλογείς. Το id είναι ένας από αυτούς..

Οid selector δημιουργείται από το hashtag # ακολουθούμενο από το όνομα του επιλογέα. Το όνομα μπορεί να είναι οτιδήποτε, αλλά δεν μπορεί να ξεκινήσει με ένα ψηφίο ή μια παύλα (dash).

Ο επιλογέας id επιλέγει στοιχεία με συγκεκριμένο χαρακτηριστικό όνομα ( id attribute -name).
Έτσι, στο CSS μας το id θα είναι:

#myname { border: 2px solid black; }

Και στο HTML θα έχουμε:

<p id=”myname”>

Αυτή η παράγραφος θα έχει ένα μαύρο περίγραμμα. 

Πότε χρησιμοποιούμε τους επιλογείς id;

Ο βασικός κανόνας είναι ότι το id είναι μοναδικό. Αυτό σημαίνει ότι ένα id will θα υπάρχει μόνο μία φορά στη σελίδα HTML και ότι κάθε στοιχείο μπορεί να περιέχει μόνο ένα id.
Δεδομένου ότι τα IDs είναι μοναδικά, τα χρησιμοποιούμε μόνο αν θέλουμε να εφαρμόσουμε ένα συγκεκριμένο στυλ σε ένα στοιχείο για να το διακρίνουμε από τα περιβάλλοντα στοιχεία.

Για παράδειγμα, έστω ότι έχουμε 100 παραγράφους στις οποίες έχουμε εφαρμόσει το ακόλουθο στυλ:

p { text-align:center; font-size: 1em; }

Ας υποθέσουμε ότι θέλουμε μία από αυτές τις παραγράφους να εμφανίζεται με πλάγιους χαρακτήρες. Αυτό μπορεί να επιτευχθεί με την εφαρμογή ενός id στη συγκεκριμένη παράγραφο. Έτσι στο CSS θα έχουμε:

#italicparagraph { font-style: italic; }

Και στο αντίστοιχο HTML:

<body>
<p> </p>
………
<p id=” italicparagraph”> My italic paragraph </p>
..
<p> </p>
</body>

Ωστόσο, αν θέλουμε να εμφανίζονται με πλάγια γράμματα περισσότερες από μία παράγραφοι, τότε το id δεν πρέπει να χρησιμοποιείται.

Αν χρησιμοποιήσετε id θα έχετε πράγματι το επιθυμητό αποτέλεσμα. Ωστόσο, ο κωδικός σας δεν θα είναι λειτουργικός για τη JavaScript, όπως θα δούμε αργότερα στο μάθημα.


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

Παράδειγμα

Οι κανόνες CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        #rainbowColors {background: grey}
        #red {background: red}
        #orange {background: orange}
        #yellow {background: yellow}
        #green {background: green}
        #blue {background: blue}
        #indigo {background: indigo}
        #violet {background: violet}
    </style>
  </head>
  <body>
    <ul id="rainbowColors">
        <li id="red">Red</li>
        <li id="orange">Orange</li>
        <li id="yellow">Yellow</li>
        <li id="green">Green</li>
        <li id="blue">Blue</li>
        <li id="indigo">Indigo</li>
        <li id="violet">Violet</li>
    </ul>
  </body>
</html>


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

id selector

Παράδειγμα

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

id selector

Λύση:

Επιλογέας κλάσης

Η κλάση (class)είναι ένας άλλος τύπος επιλογέα. Σε αντίθεση με το id, η τάξη δεν είναι μοναδική. Αυτό σημαίνει ότι η ίδια κλάση μπορεί να χρησιμοποιηθεί πολλές φορές σε μια σελίδα HTML.

Ο επιλογέας κλάσης δημιουργείται από μια περίοδο period . που ακολουθείται απόό το όνομα του επιλογέα. Ο επιλογέας κλάσης επιλέγει στοιχεία με το όνομα (class attribute - name).

Έτσι στο CSS μας η κλάση θα είναι:

.mypadding {padding-top: 5px;}

 Και στο HTML θα έχουμε: 

<p class=”mypadding”> This paragraph will have 5px padding from top </p>

Επιπλέον, ένα στοιχείο μπορεί να έχει πολλαπλές κλάσεις.

Παράδειγμα:

<p class=”mypadding myborder mycenter myfontsize”> This paragraph has reference to four classes </p>

Πότε χρησιμοποιούμε επιλογείς κλάσεων;
Οι επιλογείς κλάσης χρησιμοποιούνται όταν θέλουμε να εφαρμόσουμε το ίδιο στυλ σε πολλά στοιχεία στη σελίδα μας, αλλά όχι σε όλα τα στοιχεία του ίδιου τύπου.

Φανταστείτε ότι έχετε μια σελίδα με 100 <p> and 5 <ul> ετικέτες (tags).

Ας υποθέσουμε ότι θέλετε να εφαρμόσετε το ίδιο στυλ σε 50 από αυτές τις ετικέτες <p> και σε μία <ul>. Στην περίπτωση αυτή, η κλάση είναι ο κατάλληλος επιλογέας.

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

 Παράδειγμα

Οι κανόνες CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        .fontBlue {color:blue}
        .fontRed {color:red}
        .baclLime {background:lime}
        .backGrey {background:lightgrey}
    </style>
  </head>
  <body>
    <p class="fontBlue baclLime">My first paragraph</p>
    <p class="fontBlue backGrey">My second paragraph</p>
    <p class="fontRed baclLime">My third paragraph</p>
    <p class="fontRed backGrey">My fourth paragraph</p>
  </body>
</html>

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

 multiple classes

Άσκηση

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

multiple classes

Λύση:

Εφαρμογή στυλ σε συγκεκριμένο περιεχόμενο (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

Λύση:

Ομαδοποίηση επιλογέων

Ας υποθέσουμε ότι θέλουμε να εφαρμόσουμε το ίδιο στυλ σε διαφορετικά στοιχεία. Για παράδειγμα, θέλουμε όλα τα στοιχεία h3, h4 και p να ευθυγραμμιστούν στο κέντρο (centered aligned). Με αυτά που έχουμε μάθει, θα το κάνουμε ως εξής:

h3 { text-align: center;}
h4 { text-align: center;}
p { text-align: center;}

Ωστόσο, υπάρχει ένας εναλλακτικός τρόπος για να γίνει αυτό με την ομαδοποίηση των επιλογέων μας. Σε αυτήν την περίπτωση, κάθε επιλογέας χωρίζεται από το επόμενο με ένα κόμμα (,).

Κάνοντας αυτό ελαχιστοποιούμε τον κώδικα που πρέπει να γράψουμε.

Έτσι, τα παραπάνω μπορούν να γραφτούν ως:

h1, h3, p { text-align: center;}

 

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