Πρόγραμμα μαθημάτων

Προχωρημένος οδηγός CSS

• Βιβλίο Εξωτερικών Στοιχείων CSS
• Εισαγωγή στο CSS
• Βασική Γραμματική του CSS
• Προχωρημένη Γραμματική του CSS
• Αναλογικοί Επιλογείς CSS
• Επιλογείς id CSS
• Επιλογείς κλάσης CSS
• Δημιουργία CSS
• Προσόντα CSS
• Κείμενο CSS
• Γραμματοσειρά CSS
• Λίστες CSS

Πλαίσιο CSS

• Εισαγωγή στη Μοντέλο Κουτί CSS
• Εσωτερικά Χώροι CSS
• Κύρια Οριοθεσία CSS
• Εξωτερικοί Χώροι CSS
• Συγχώνευση Εξωτερικών Χώρων CSS

Προσαρμογή CSS

• Εισαγωγή στη Τοποθέτηση CSS
• Αποτελεσματική Τοποθέτηση CSS
• Απόλυτη Τοποθέτηση CSS
• Κίνηση CSS

Επιλογή CSS

• Επιλογείς στοιχείων CSS
• Ομαδοποίηση Επιλογέων CSS
• Επεξήγηση Επιλογέων Κλάσης CSS
• Επεξήγηση Επιλογέων id CSS
• Επεξήγηση Επιλογέων Προσδιορισμού CSS
• Επιλογείς Προγόνων CSS
• Επιλογείς Υποστοιχείων CSS
• Επιλογείς Αξιών Κάθετου Αδελφού CSS

Εξεταζόμενα μαθήματα

Προτεινόμενη μάθηση:

• Ταξιδιωτικό Κουτί CodeW3C.com

Το πλαίσιο του στοιχείου (border) είναι μια γραμμή ή γραμμές γύρω από το περιεχόμενο και το περιθώριο του στοιχείου.

Η ιδιότητα border του CSS επιτρέπει να καθορίζετε το στυλ, το πλάτος και το χρώμα του πλαισίου του στοιχείου.

Κύρια Οριοθεσία CSS

Στο HTML, χρησιμοποιούμε πίνακα για να δημιουργήσουμε πλαίσια γύρω από το κείμενο, αλλά χρησιμοποιώντας τις ιδιότητες πλαισίου του CSS, μπορούμε να δημιουργήσουμε πλαίσια εξαιρετικής ποιότητας και να εφαρμόσουμε τα στοιχεία σε οποιοδήποτε στοιχείο.

Το πλαίσιο του στοιχείου βρίσκεται μέσα στο περιθώριο του στοιχείου (margin). Το πλαίσιο του στοιχείου είναι μια γραμμή ή γραμμές γύρω από το περιεχόμενο και το περιθώριο του στοιχείου.

Κάθε πλαίσιο έχει τρεις πτυχές: πλάτος, στυλ και χρώμα. Στη συνέχεια, θα σας εξηγήσουμε λεπτομερώς αυτές τις τρεις πτυχές.

Πλαίσιο και παρασκήνιο

Το CSS κανονισμός αναφέρει ότι τα πλαίσια αποσπαστούν πάνω από το παρασκήνιο του στοιχείου. Αυτό είναι πολύ σημαντικό, επειδή μερικά πλαίσια είναι 'διασπασμένα' (π.χ., dotted line border ή dashed border), το παρασκήνιο του στοιχείου πρέπει να εμφανίζεται μεταξύ των ορατών τμημάτων του πλαισίου.

Το CSS2 αναφέρει ότι το παρασκήνιο επεκτείνεται μόνο μέχρι το εσωτερικό περιθώριο, όχι το πλαίσιο. Ο CSS2.1 το διορθώνει: το παρασκήνιο του στοιχείου είναι το παρασκήνιο περιεχομένου, περιθωρίου και περιοχής πλαισίου. Η maggior parte των περιηγητών ακολουθεί τη διατύπωση του CSS2.1, αλλά alcuni παλαιότεροι περιηγητές μπορεί να έχουν διαφορετική συμπεριφορά.

Στυλ πλαισίου

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

Το CSS Ιδιότητα border-styleΟρίζονται 10 διαφορετικά στυλ που δεν είναι inherit, συμπεριλαμβανομένου του none.

Π.χ., μπορείτε να ορίσετε το πλαισίο μιας εικόνας ως outset, ώστε να φαίνεται σαν ένα 'αυτόνομο κουμπί':

a:link img {border-style: outset;}

Ορισμός πολλαπλών στυλ

Μπορείτε να ορίσετε πολλαπλά στυλ για μια πλευρά, π.χ.:

p.aside {border-style: solid dotted dashed double;}

Το παρακάτω κανόνας ορίζει τέσσερα στυλ πλαισίου για τα στοιχεία με το όνομα κλάσης aside: solid top border, dotted right border, dashed bottom border και double left border.

Δείξαμε ξανά εδώ ότι η σειρά των τιμών είναι top-right-bottom-left, και επίσης βλέπουμε αυτή τη σειρά όταν συζητούμε για τη ρύθμιση διαφορετικών εσωτερικών χορδών με πολλές τιμές.

Ορισμός μονοπλευρικού στυλ

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

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Επομένως, αυτά τα δύο方法是 ισότιμα:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Σημείωση:Αν θέλετε να χρησιμοποιήσετε τον δεύτερο τρόπο, πρέπει να τοποθετήσετε το μονοπλευρικό χαρακτηριστικό μετά το συντομευμένο χαρακτηριστικό. Επειδή αν το μονοπλευρικό χαρακτηριστικό τοποθετηθεί πριν από το border-style, η τιμή του συντομευμένου χαρακτηριστικού θα καλύψει την τιμή του μονοπλευρικού χαρακτηριστικού none.

Πλάτος πλαισίου

Μπορείτε να χρησιμοποιήσετε Αξία πλάτους πλαισίουΟρισμός πλάτους πλαισίου.

Υπάρχουν δύο τρόποι για να ορίσετε το πλάτος του πλαισίου: μπορείτε να καθορίσετε τιμές μήκους, όπως 2px ή 0.1em, ή να χρησιμοποιήσετε ένα από τα τρία λέξεις κλειδιά, που είναι το thin, medium (προεπιλεγμένο) και το thick.

Σημείωση:Το CSS δεν ορίζει την συγκεκριμένη διάσταση των τριών λέξεων κλειδιών, οπότε ένας χρήστης代理 μπορεί να ρυθμίσει το thin, medium (προεπιλεγμένο) και thick σε 5px, 3px και 2px, ενώ ένας άλλος χρήστης代理 μπορεί να ρυθμίσει τα 3px, 2px και 1px.

Επομένως, μπορούμε να ρυθμίσουμε το πλάτος του πλαισίου ως εξής:

p {border-style: solid; border-width: 5px;}

ή:

p {border-style: solid; border-width: thick;}

Ορισμός πλάτους μονοπλευρικού

Μπορείτε να ρυθμίσετε τα πλαίσια των πλευρών του στοιχείου με τη σειρά top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

Το παραπάνω παράδειγμα μπορεί επίσης να γραφτεί ως (αυτός ο τρόπος γραφής ονομάζεταιΑντιγραφή τιμών）：

p {border-style: solid; border-width: 15px 5px;}

Μπορείτε επίσης να ρυθμίσετε την πλάτος κάθε πλευράς του πλαισίου με τις παρακάτω ιδιότητες:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Επομένως, οι παρακάτω κανόνες είναι ισότιμοι με τον παραπάνω παράδειγμα:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Χωρίς πλαίσιο

Στο προηγούμενο παράδειγμα, είδατε ότι για να εμφανιστεί κάποιο πλαίσιο, πρέπει να ορίσετε το στυλ πλαισίου, όπως solid ή outset.

Τότε τι θα συμβεί αν ορίσετε το border-style σε none;

p {border-style: none; border-width: 50px;}

Αν και το πλάτος οριογραμμής είναι 50px, το στυλ οριογραμμής είναι ρυθμισμένο σε none. Σε αυτή την περίπτωση, όχι μόνο το στυλ οριογραμμής εξαφανίζεται, αλλά και το πλάτος του γίνεται 0. Το οριογραμμή εξαφανίζεται, γιατί;

Αυτό συμβαίνει επειδή αν το στυλ οριογραμμής είναι none, δηλαδή το οριογραμμή δεν υπάρχει καθόλου, το οριογραμμή δεν μπορεί να έχει πλάτος, οπότε το πλάτος οριογραμμής ρυθμίζεται αυτόματα σε 0, ανεξάρτητα από το τι ορίσατε.

Αυτό είναι πολύ σημαντικό να το θυμάστε. Έτσι, το να ξεχάσετε να ανακοινώσετε το στυλ οριογραμμής είναι ένα συχνό λάθος. Σύμφωνα με τους παρακάτω κανόνες, όλα τα στοιχεία h1 δεν θα έχουν κανένα οριογραμμή, ας πούμε, 20 pixel πλάτος:

h1 {border-width: 20px;}

Επειδή η προεπιλεγμένη τιμή του border-style είναι none, αν δεν έχει ανακοινωθεί στυλ, είναι το ίδιο με το border-style: none.Επομένως, αν θέλετε να εμφανιστεί το περιθώριο, πρέπει να ανακοινώσετε ένα στυλ οριογραμμής.

Χρώμα οριογραμμής

Η ρύθμιση χρώματος περιθωρίου είναι πολύ απλή. Το CSS χρησιμοποιεί μια απλή Η ιδιότητα border-color，το οποίο μπορεί να αποδεχτεί μέχρι 4 τιμές χρώματος.

Μπορείτε να χρησιμοποιήσετε οποιοδήποτε τύπο τιμής χρώματος, π.χ. μπορεί να είναι ονομαστικό χρώμα, δεκαεξαδικό και RGB:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Αν η τιμή χρώματος είναι λιγότερο από 4, η λειτουργία επανάληψης τιμών θα λειτουργήσει. Για παράδειγμα, η παρακάτω δήλωση κανόνων ανακοινώνει ότι οι άνω και κάτω οριογραμμές του παραγράφου είναι μπλε, και τα δεξιά και αριστερά οριογραμμή είναι κόκκινη:

p {
  border-style: solid;
  border-color: blue red;
  }

Σημείωση:Η προεπιλεγμένη τιμή χρώματος περιθωρίου είναι η φωτεινή απόχρωση του στοιχείου. Αν δεν έχει ανακοινωθεί χρώμα περιθωρίου, θα είναι το ίδιο με το χρώμα κειμένου του στοιχείου. Από την άλλη πλευρά, αν το στοιχείο δεν έχει κανένα κείμενο, υποθέτουμε ότι είναι μια τραπεζογραφία, η οποία περιέχει μόνο εικόνες, τότε το χρώμα περιθωρίου αυτής της τραπεζογραφίας είναι το χρώμα κειμένου του γονικού στοιχείου (επειδή το color μπορεί να κληρονομηθεί). Το γονικό στοιχείο είναι πιθανότατα το body, div ή άλλη τραπεζογραφία.

Ορισμός μονόπλευρου χρώματος

Υπάρχουν επίσης ιδιότητες χρώματος για μονόπλευρο περιθώριο. Το πρίσμα τους είναι το ίδιο με το μονόπλευρο στυλ και το πλάτος:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Για να καθορίσετε για το στοιχείο h1 μια αδιαφανή στενή μαύρη οριογραμμή, και το δεξί οριογραμμή να είναι αδιαφανής κόκκινη, μπορείτε να καθορίσετε ως εξής:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Αδιαφανές περιθώριο

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

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

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

Χρησιμοποιήσαμε τις εξής διατάξεις για τους παραπάνω σύνδεσμους:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Δοκιμάστε το προσωπικά

Με κάποιο τρόπο, η χρήση του transparent, η κανονική γραμμή είναι σαν επιπλέον εσωτερικό περιθώριο; Επιπλέον, υπάρχει ένα πλεονέκτημα που επιτρέπει να γίνει ορατή όταν το χρειάζεστε. Αυτό το διαφανές κανονικό πλαίσιο είναι ίσο με το εσωτερικό περιθώριο, επειδή η υποβάθμιση του στοιχείου επεκτείνεται στην περιοχή της κανονικής γραμμής (αν υπάρχει ορατή υποβάθμιση).

Σημαντική σημείωση:Πριν από το IE7, το IE/WIN δεν παρείχε υποστήριξη για το transparent. Στις προηγούμενες εκδόσεις, το IE ρυθμίζετο ανάλογα με το χρώμα του στοιχείου για το χρώμα της κανονικής γραμμής.

Ιδιότητες περιθωρίου CSS

Εργαλείο

Παραδείγματα CSS

Παραδείγματα CSS

Δοκιμή CSS

Εκμάθηση CSS

Συνεργάτες Σύνδεσμοι