Παράδειγμα CSS
- Προηγούμενη Σελίδα Στοιχείο CSS Γραμμικού Σχεδιασμού
- Επόμενη Σελίδα Παρατήρηση CSS
Επιλογείς CSS
Χρήση CSS
Χρώματα CSS
Φόντο CSS
- Ρύθμιση χρώματος φόντου της σελίδας
- Ρύθμιση χρώματος φόντου διαφορετικών στοιχείων
- Ρύθμιση εικόνας φόντου για τη σελίδα
- Πώς να επαναλάβετε την εικόνα φόντου μόνο σε κατεύθυνση οριζόντια
- Πώς να τοποθετήσετε την εικόνα φόντου
- Σταθερό φόντο εικόνας (η εικόνα δεν θα κινηθεί με το υπόλοιπο της σελίδας)
- Όλες οι ιδιότητες φόντου σε μια δήλωση
- Παράδειγμα προχωρημένου φόντου
Περιθώρια CSS
- Ρύθμιση πλάτους τεσσάρων κανονικών
- Ρύθμιση πλάτους επάνω κανονικού
- Ρύθμιση πλάτους κάτω κανονικού
- Ρύθμιση πλάτους αριστερού κανονικού
- Ρύθμιση πλάτους δεξιού κανονικού
- Ρύθμιση μοτίβου τεσσάρων κανονικών
- Ρύθμιση μοτίβου επάνω κανονικού
- Ρύθμιση μοτίβου κάτω κανονικού
- Ρύθμιση μοτίβου αριστερού κανονικού
- Ρύθμιση μοτίβου δεξιού κανονικού
- Ρύθμιση χρώματος τεσσάρων κανονικών
- Ρύθμιση χρώματος επάνω κανονικού
- Ρύθμιση χρώματος κάτω κανονικού
- Ρύθμιση χρώματος αριστερού κανονικού
- Ρύθμιση χρώματος δεξιού κανονικού
- Όλες οι κανονικές γραμμές σε μια δήλωση
- 为元素添加圆角
- Διαφορετικές κανονικές γραμμές για κάθε πλευρά
- Όλες οι επάνω κανονικές γραμμές σε μια δήλωση
- Όλες οι κάτω κανονικές γραμμές σε μια δήλωση
- Όλες οι αριστερές κανονικές γραμμές σε μια δήλωση
- Όλες οι δεξιές κανονικές γραμμές σε μια δήλωση
Εξωτερικά Περιθώρια CSS
- Ορισμός διαφορετικών εξωτερικών περιθωρίων για κάθε πλευρά του στοιχείου
- Χρήση συντομευμένης περιγραφής εξωτερικού περιθωρίου με τέσσερις τιμές
- Χρήση συντομευμένης περιγραφής εξωτερικού περιθωρίου με τρεις τιμές
- Χρήση συντομευμένης περιγραφής εξωτερικού περιθωρίου με δύο τιμές
- Χρήση συντομευμένης περιγραφής εξωτερικού περιθωρίου με μια τιμή
- Ρύθμιση εξωτερικού περιθωρίου σε auto για το κεντρικό στοιχείο του κουτιού
- Κληρονομικότητα αριστερού εξωτερικού περιθωρίου από το γονικό στοιχείο
- Συγχώνευση εξωτερικού περιθωρίου
Εσωτερικά Περιθώρια CSS
- Ορισμός διαφορετικών εσωτερικών περιθωρίων για κάθε πλευρά του στοιχείου
- Χρήση συντομευμένης περιγραφής εσωτερικού περιθωρίου με τέσσερις τιμές
- Χρήση συντομευμένης περιγραφής εσωτερικού περιθωρίου με τρεις τιμές
- Χρήση συντομευμένης περιγραφής εσωτερικού περιθωρίου με δύο τιμές
- Χρήση συντομευμένης περιγραφής εσωτερικού περιθωρίου με μια τιμή
- Εσωτερικό περιθώριο και πλάτος στοιχείου (χωρίς ρύθμιση box-sizing)
- Εσωτερικό περιθώριο και πλάτος στοιχείου (ρύθμιση box-sizing)
- Ρροσθήκη αριστερού εσωτερικού περιθωρίου στο στοιχείο
- Ρροσθήκη δεξιού εσωτερικού περιθωρίου στο στοιχείο
- Ρροσθήκη επάνω εσωτερικού περιθωρίου στο στοιχείο
- Ρροσθήκη κάτω εσωτερικού περιθωρίου στο στοιχείο
CSS ύψος/πλάτος
CSS μοντέλο κουτί
Περιγράμματα CSS
Κείμενο CSS
- Ρύθμιση του χρώματος του κειμένου διαφορετικών στοιχείων
- Σύγχρονη τοποθέτηση κειμένου
- Αφαίρεση της γραμμής κάτω από τον σύνδεσμο
- Στυλιζάρισμα του κειμένου
- Έλεγχος της γραμματοσειράς των γράμμάτων στο κείμενο
- Ενσωμάτωση κειμένου
- Καθορισμός της απόστασης των χαρακτήρων
- Καθορισμός της ρίγματος γραμμής
- Καθορισμός της κατεύθυνσης του κειμένου στο στοιχείο
- Αύξηση της απόστασης μεταξύ των γραμμάτων
- Καθορισμός του σκιώματος του κειμένου στο στοιχείο
- Απενεργοποίηση της μετακίνησης γραμμής του κειμένου στο στοιχείο
- Καθορισμός της κάθετου τοποθέτησης της εικόνας στο κείμενο
Γράμμα CSS
- Ρύθμιση της γραμματοσειράς του κειμένου
- Ρύθμιση του μεγέθους της γραμματοσειράς
- Ρύθμιση του μεγέθους της γραμματοσειράς με px
- Ρύθμιση του μεγέθους της γραμματοσειράς με em
- Ρύθμιση του μεγέθους της γραμματοσειράς με ποσοστό και em
- Ρύθμιση του στυλ της γραμματοσειράς
- Ρύθμιση της παραλλαγής της γραμματοσειράς
- Ρύθμιση της πυκνότητας της γραμματοσειράς
- Όλες οι ιδιότητες της γραμματοσειράς σε μια διατύπωση
Εικονίδια CSS
Σύνδεσμοι CSS
- Προσθήκη διαφορετικών χρωμάτων στα επισκεπτόμενα/μη επισκεπτόμενα συνδέσμους
- Χρήση του text-decoration στο σύνδεσμο
- Ορισμός του χρώματος του παρασκηνίου του συνδέσμου
- Προσθήκη άλλων στυλ στα σύνδεσμοι
- Διαφορετικοί τύποι δείκτες
- Προχωρημένο - Δημιουργία πλαίσια συνδέσμων
- Προχωρημένο - Δημιουργία πλαίσια συνδέσμων με πλαίσια
Λίστες CSS
- Όλες οι διαφορετικές ετικέτες στοιχείων της λίστας
- Ρύθμιση της εικόνας ως ετικέτας του στοιχείου της λίστας
- Τοποθέτηση της ετικέτας του στοιχείου της λίστας
- Διαγραφή των προεπιλεγμένων ρυθμίσεων της λίστας
- Όλες οι ιδιότητες της λίστας σε μια διατύπωση
- Ρύθμιση του στυλ της λίστας με χρώματα
- Λίστα με πλήρους πλάτους πλαίσια
Πίνακες CSS
- Ορισμός του μαύρου ορίου των στοιχείων table, th και td
- Χρήση του border-collapse
- Περιβάλλοντα πινάκων με μοναδικό όριο
- Ορισμός του πλάτους και της ύψους του πίνακα
- Ρύθμιση της οριζόντιας κατεύθυνσης της τοποθέτησης του περιεχομένου
- Ρύθμιση της κάθετου κατεύθυνσης της τοποθέτησης του περιεχομένου
- Ορισμός της εσωτερικής απόστασης των th και td στοιχείων
- Οριζόντιοι διαχωριστές
- Πίνακες με στρογγυλές κορυφές
- Στήβλοι πίνακα
- Ορισμός του χρώματος των πινάκων του πίνακα
- Ρύθμιση της θέσης του τίτλου του πίνακα
- Προσαρμοστικοί πίνακες
- Δημιουργία καλοδιαμορφωμένων πινάκων
Εμφάνιση CSS
- Πώς να κρύψουμε στοιχεία (visibility:hidden)
- Πώς να μην εμφανίζουμε στοιχεία (display:none)
- Πώς να εμφανίσουμε στοιχεία που είναι στοιχεία μπλοκ ως εσωτερικά στοιχεία
- Πώς να εμφανίσουμε στοιχεία που είναι εσωτερικά στοιχεία ως στοιχεία μπλοκ
- Πώς να χρησιμοποιήσουμε το CSS με το JavaScript για να εμφανίσουμε ή να κρύψουμε περιεχόμενο
CSS Τοποθέτηση
- Τοποθέτηση στοιχείων σε σχέση με το παράθυρο του προγράμματος περιήγησης
- Τοποθέτηση στοιχείων σε σχέση με την κανονική τοποθέτηση του στοιχείου
- Τοποθέτηση στοιχείων με απόλυτη τοποθέτηση
- Κατασκόπηση τοποθέτησης
- Προσθήκη στοιχείων με αντικαθόριστη τοποθέτηση
- Ρύθμιση της μορφοποίησης του στοιχείου
- Δημιουργία του επάνω ορίου της εικόνας με την τιμή του pixel
- Δημιουργία του κάτω ορίου της εικόνας με την τιμή του pixel
- Ρύθμιση του αριστερού περιθωρίου της εικόνας με τιμή pixel
- Ρύθμιση της δεξιάς περιθωρίου της εικόνας με τιμή pixel
- Τοποθέτηση εικόνας κειμένου (άνω αριστερά)
- Τοποθέτηση εικόνας κειμένου (άνω δεξιά)
- Τοποθέτηση εικόνας κειμένου (κάτω αριστερά)
- Τοποθέτηση εικόνας κειμένου (κάτω δεξιά)
- Τοποθέτηση εικόνας κειμένου (κέντρο)
CSS Υπερβολή
- Χρήση overflow: visible - Η υπερβολή δεν κόπηκε. Εμφανίζεται έξω από το πλαίσιο του στοιχείου.
- Χρήση overflow: hidden - Η υπερβολή κόπηκε, το υπόλοιπο περιεχόμενο κρυφό.
- Χρήση overflow: scroll - Η υπερβολή κόπηκε, αλλά προστέθηκε σκαμνίδα για να δείτε το υπόλοιπο περιεχόμενο.
- Χρήση overflow: auto - Αν κόπηκε η υπερβολή, πρέπει να προσθέσετε σκαμνίδα για να δείτε το υπόλοιπο περιεχόμενο.
- Χρήση overflow-x και overflow-y
CSS Κύματα
- Σύντομη χρήση της ιδιότητας float
- Εικόνα με περιθώρια και χρωματισμό που κύμαται δεξιά στο παράγραφο
- Εικόνα με τίτλο που κύμαται δεξιά
- Αριστερή κύμα της πρώτης λέξης του παραγράφου
- Κλείσιμο κύμαινας (χρήση της ιδιότητας clear)
- Κλείσιμο κύμαινας (χρήση clearfix hack)
- Δημιουργία κουτίων κύμαινας
- Δημιουργία παράλληλων εικόνων
- Δημιουργία ίσων κουτίων (μέσω flexbox)
- Δημιουργία οριζόντιας μενού
- Δημιουργία παραδείγματος web layout
CSS Inline-block
Στυλ ευθυγράμμισης CSS
- Ευθυγράμμιση με τη χρήση περιθωρίων
- Ευθυγράμμιση κειμένου στο κέντρο
- Ευθυγράμμιση εικόνας στο κέντρο
- Ευθυγράμμιση αριστεράς/δεξιάς με τη χρήση position
- Ευθυγράμμιση αριστεράς/δεξιάς με τη χρήση position - Κρίss-browser solution
- Ευθυγράμμιση αριστεράς/δεξιάς με τη χρήση float
- Ευθυγράμμιση αριστεράς/δεξιάς με τη χρήση float - Κříss-browser solution
- Ευθυγράμμιση κάθετης με τη χρήση padding
- Ευθυγράμμιση οριζόντιας και κάθετης
- Ευθυγράμμιση κάθετης με τη χρήση line-height
- Ευθυγράμμιση οριζόντιας και κάθετης με τη χρήση position
Συνδυαστής CSS
Ψευδοκλάσεις CSS
- Προσθήκη διαφορετικών χρωμάτων στο σύνδεσμο
- Προσθήκη άλλων στυλ στο σύνδεσμο
- Χρήση :focus
- :first-child - Συνδυαστής επιλογής που ταιριάζει στον πρώτο στοιχείο p
- :first-child - Συνδυαστής επιλογής που ταιριάζει σε όλους τους πρώτους i στοιχεία εντός των στοιχείων p
- :first-child - Συνδυαστής επιλογής που ταιριάζει σε όλους τους πρώτους υποστοχείς p στοιχεία με όλους τους στοιχεία i
- Use :lang
Ψευδοεлементοί CSS
CSS Content Generation
Αδιαφάνεια CSS
Ναυτιλία CSS
CSS Dropdown List
Συλλογή Εικόνων CSS
Image Sprite CSS
Επιλογείς Αξιοτήτων CSS
- Select all <a> elements with target attribute
- Select all <a> elements with target="_blank" attribute
- Select all elements with title attributes containing a space-separated list of words, one of which is "flower"
- Select all elements with class attribute values starting with "top" (must be the whole word)
- Select all elements with class attribute values starting with "top" (must not be the whole word)
- Select all elements with class attribute values ending with "test"
- Select all elements with class attribute values containing "te"
Φόρμες CSS
Εικόνα Περιγράμματος CSS
Φόντο CSS
Ανάβαση Χρώματος CSS
CSS 阴影效果
Εφέ Κειμένου CSS
CSS 2D Μετατροπές
- translate() - 从当前位置删除元素
- rotate() - 顺时针旋转元素
- rotate() - 逆时针旋转元素
- scale() - Αύξηση του στοιχείου
- scale() - Μείωση του στοιχείου
- skewX() - Κλίση του στοιχείου κατά τον άξονα X
- skewY() - Κλίση του στοιχείου κατά τον άξονα Y
- skew() - Κλίση του στοιχείου κατά τον άξονα X και Y
- matrix() - Επιστροφή, κλίση, μετακίνηση και κλίση του στοιχείου
CSS 3D Μετατροπές
CSS Μεταβλητές
CSS Αнимάσεις
- Σύνδεση Κίνησης σε Ένα Στοιχείο
- Κίνηση - Αλλαγή του χρώματος ενός στοιχείου
- Κίνηση - Αλλαγή του χρώματος και της θέσης ενός στοιχείου
- Κίνηση με Υποχώρηση
- Τρεις Κινήσεις πριν τον Τερματισμό της Κίνησης
- Καταλυτική Κίνηση
- Κίνηση από την Αντίθετη Οριζόντια Κατεύθυνση
- Αναμετάδοση Κίνησης
- Κривή Ιδιότητας Κίνησης
- Σύντομη Ιδιότητα Κίνησης
CSS Εργαλεία Εντοπισμού
Εικόνα με Στυλ CSS
- Εικόνα με Γωνίες
- Κυκλική Εικόνα
- Υποθέματα Εικόνας
- Εικόνα Υποθέματος ως Σύνδεσμος
- Εικόνα Σχετικής Σχεδιαστικής Διαδικασίας
- Κείμενο Εικόνας (Διάνυσμα Αριστερά-Πάνω)
- Κείμενο Εικόνας (Διάνυσμα Δεξιά-Πάνω)
- Κείμενο Εικόνας (Διάνυσμα Αριστερά-Κάτω)
- Κείμενο Εικόνας (Διάνυσμα Δεξιά-Πάνω)
- Κείμενο Εικόνας (Κεντρικό)
- Εικόνα Polaroid
- Φίλτρο Γκρι Εικόνας
- Προηγμένη - Εικόνα Μοτίβου με CSS και JavaScript
CSS Object-fit
CSS Κουμπιά
- Βασικό Κουμπί CSS
- Χρώμα Κουμπιών
- Μέγεθος Κουμπιών
- Κουμπί με Γωνίες
- Περιφερειακό Πλαίσιο Κουμπιών με Χρώμα
- Κουμπί με Αναμονή
- Κουμπί με Σκιά
- Κουμπί σε Απενεργοποίηση
- Πλάτος Κουμπιών
- Ομαδοποίηση Κουμπιών
- Ομαδοποίηση Κουμπιών με Πλαίσια
- Κουμπί με εφέ κινηματικής (αναμονή)
- Κουμπί με εφέ κινηματικής (πάτηση)
- Κουμπί με εφέ κινηματικής (κύμα)
CSS Διασ分 Σελίδων
CSS Πολυσυνοριακά
- Δημιουργία πολυσυνολικών γραμμών
- Ορίζει το διαστήματα μεταξύ των κύμάτων
- Ορίζει το στυλ των γραμμών μεταξύ των κύμάτων
- Ορίζει το πλάτος των γραμμών μεταξύ των κύμάτων
- Ορίζει το χρώμα των γραμμών μεταξύ των κύμάτων
- Ορίζει το πλάτος, το στυλ και το χρώμα των γραμμών μεταξύ των κύμάτων
- Ορίζει πόσα κύματα το στοιχείο πρέπει να καλύπτει
- Ορίζει την προτεινόμενη καλύτερη πλάτος για τις γραμμές
CSS Υπερφάνοι Διάλογοι
CSS Μέταβλητες
CSS Box Sizing
CSS Flexbox
- Flexbox με τρία αντικείμενα flex
- Flexbox με τρία αντικείμενα flex, σε κατεύθυνση rtl
- flex-direction - row-reverse
- flex-direction - column
- flex-direction - column-reverse
- justify-content - flex-end
- justify-content - center
- justify-content - space-between
- justify-content - space-around
- align-items - stretch
- align-items - flex-start
- align-items - flex-end
- align-items - center
- align-items - baseline
- flex-wrap - nowrap
- flex-wrap - wrap
- flex-wrap - wrap-reverse
- align-content - center
- Σειρά κατάταξης των αντικειμένων flex
- Margin-right:auto;
- Margin:auto; = Ιδανική κεντρόθεση
- Ρύθμιση align-self στο αντικείμενο flex
- Ορίζει την μήκος του αντικειμένου flex, σε σχέση με τα άλλα μέρη του αντικειμένου flex
- Δημιουργία αντανακλαστικής συλλογής εικόνων με το flexbox
- Δημιουργία αντανακλαστικών ιστοσελίδων με το flexbox
CSS Εκθέτες Μέσα
Εκθέτες Μέσα CSS - Περισσότερα Παράδειγματα
- Ρύθμιση Χρωμάτων Περιβάλλοντος Ανά Διάσταση Οθόνης
- Μενού Ναυτιλίας Σχετικής Σχεδιαστικής Διαδικασίας
- Στήλη Εκθετών Με Πlovation
- Απλή Στήλη Εκθετών Με Ελαστική Σύνδεση
- Κρυφή Ενότητα Μεταξύ Εκθετών
- Μέγεθος Γραμμής Σχετικής Σχεδιαστικής Διαδικασίας
- Βιβλιοθήκη Εικόνων Σχετικής Σχεδιαστικής Διαδικασίας
- Σχετική Ιστοσελίδα
- Αλλαγή Σχεδιασμού Σελίδας Ανά Διεύθυνση Περιηγητή
- Μικρότερη Μέγιστη Διάσταση
Σχετική Σχεδιαστική Διαδικασία Ιστοσελίδας CSS
- Σχετική Προβολή Γραμμικού Σχεδιασμού
- Προσθήκη Τόχνων για Διαστάσεις Επιφάνειας Εργασίας, Λάπτοπ και Κινητού
- Τυπικοί Τόχνοι
- Εικόνα Σχετικής Σχεδιαστικής Διαδικασίας
- Βίντεο Σχετικής Σχεδιαστικής Διαδικασίας
- Πλαίσιο Σχετικής Σχεδιαστικής Διαδικασίας: W3.CSS
- Πλαίσιο Σχετικής Σχεδιαστικής Διαδικασίας: Bootstrap
Διευκρινισμός Παραδείγματος: Σχετική Σχεδιαστική Διαδικασία Ιστοσελίδας
Γραμμικός Σχεδιασμός CSS
- Προηγούμενη Σελίδα Στοιχείο CSS Γραμμικού Σχεδιασμού
- Επόμενη Σελίδα Παρατήρηση CSS
