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

Προχωρημένα μαθήματα 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
• Λεπτομέρειες Επιλογέων ID CSS
• Λεπτομέρειες Επιλογέων Ιδιότητας CSS
• Επιλογείς Προγόνων CSS
• Επιλογείς Υποστοιχείων CSS
• Επιλογείς Κοντινών Ανιόντων CSS

Εξεταστικές ενότητες

Προτεινόμενη διαδραστική μάθηση:

• Παντοκόμπος CodeW3C.com

Το κιβώτιο κύλισης μπορεί να κινείται προς τα αριστερά ή προς τα δεξιά μέχρι να πιέσει το εξωτερικό μέρος του περιβάλλοντος κουτί ή του περιβάλλοντος κουτί ενός άλλου κύλισης.

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

Κύλιση CSS

Παρακαλώ δείτε την εικόνα, όταν το κουτί 1 κύλισης προς τα δεξιά, αποσπάται από τον κύριο ροή του κειμένου και κινείται προς τα δεξιά μέχρι να πιέσει το δεξί άκρο του περιβάλλοντος κουτί:

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

Αν μετακινήσουμε τα τρία κουτί προς τα αριστερά, το κουτί 1 θα κύλισης προς τα αριστερά μέχρι να πιέσει το περιβάλλον κουτί, τα άλλα δύο κουτί θα κύλισης προς τα αριστερά μέχρι να πιέσουν το προηγούμενο κύλιση.

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

Ιδιότητα κύλισης CSS

Στο CSS, επιτυγχάνουμε την κύλιση των στοιχείων μέσω της ιδιότητας float.

Για περισσότερες πληροφορίες σχετικά με την ιδιότητα float, επισκεφθείτε το έγχειριο:Ιδιότητα κύλισης CSS。

Η περιβάλλουσα στήλη και η καθαρισμός

Η περιβάλλουσα στήλη δίπλα στο κιβώτιο κύλισης συρρικνώνεται, δίνοντας χώρο στο κιβώτιο κύλισης και περιβάλλοντας το.

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

Για να αποτρέψουμε την περιβάλλουσα στήλη να περιβάλλει το κιβώτιο κύλισης, πρέπει να εφαρμόσουμε στο κιβώτιο ιδιότητα clearΗ τιμή της ιδιότητας clear μπορεί να είναι left, right, both ή none, και σημαίνει ποια πλευρά του κουτιού δεν πρέπει να πλησιάζει το πλαίσιο ισορροπίας.

Για να επιτύχουμε αυτό το αποτέλεσμα, στο στοιχείο που καθαρίζεται, πρέπει να προσθέσουμε:Καθαρός περιθώριοΠροσθέστε αρκετό χώρο για να κάνετε την κορυφή του στοιχείου να πέφτει κάθετα κάτω από το πλαίσιο ισορροπίας:

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

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

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Σε αυτή την περίπτωση, έχει προκύψει ένα πρόβλημα. Επειδή το ισορροπώμενο στοιχείο αποσπάται από την ροή του έγγραφου, το div που περιβάλλει την εικόνα και το κείμενο δεν καταλαμβάνει χώρο.

Πώς να περιβάλλει ο στοιχής ορατά το ισορροπώμενο στοιχείο; Πρέπει να εφαρμόσουμε clear σε κάποιο σημείο αυτού του στοιχείου:

Ωστόσο, έχει προκύψει ένα νέο πρόβλημα, καθώς δεν υπάρχει στοιχείο που μπορεί να εφαρμόσει τον καθαρισμό, οπότε πρέπει να προσθέσουμε έναν κενό στοιχείο και να τον καθαρίσουμε.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

Αυτό μπορεί να επιτύχει το επιθυμητό αποτέλεσμα, αλλά απαιτεί πρόσθετο κώδικα. συχνά υπάρχουν στοιχεία που μπορούν να εφαρμόσουν clear, αλλά μερικές φορές πρέπει να προσθέσουμε περιττές ετικέτες για τη διάταξη.

Ωστόσο, έχουμε και μια άλλη μέθοδο, δηλαδή την ισορροπία του div κουτίου:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Αυτό θα δώσει το επιθυμητό αποτέλεσμα. Ωστόσο, ο επόμενος στοιχείο θα επηρεαστεί από αυτόν τον ισορροπώμενο στοιχείο. Για να λύσουμε αυτό το πρόβλημα, μερικοί προτιμούν να κάνουν ισορροπώσεις όλων των στοιχείων της διάταξης και στη συνέχεια να καθαρίζουν τις ισορροπίες με κατάλληλα σημαντικά στοιχεία (συνήθως το πίσω φόντο του ιστοχώρου). Αυτό βοηθά στη μείωση ή την εξάλειψη των περιττών ετικετών.

Επιπλέον, όλες οι σελίδες του CodeW3C.com χρησιμοποιούν αυτήν την τεχνολογία. Αν ανοίξετε το αρχείο CSS που χρησιμοποιούμε, θα δείτε ότι καθαρίσαμε το div του πίσω φόντου, ενώ τα τρία div πάνω από αυτό ισορροπούν προς τα αριστερά.

Ιδιότητα clear CSS

Πριν από λίγο, εξερευνήσαμε λεπτομερώς τον τρόπο λειτουργίας της CSS καθαρισμού και της εφαρμογής της ιδιότητας clear. Αν θέλετε να μάθετε περισσότερα για την ιδιότητα clear, επισκεφθείτε το έγχειρο:Ιδιότητα clear CSS。

Toolbox

Εγχειρίδιο CSS

Παράδειγμα CSS

Δοκιμή CSS

Οδηγός CSS

Σύνδεσμοι Υποστηρικτών