Συνοπτικός οδηγός CSS
Μια αναζητήσιμη, εκτυπώσιμη αναφορά CSS — selectors, box model, flexbox, grid, τυπογραφία, transitions και σύγχρονα χαρακτηριστικά. Δωρεάν.
Επιλογείς (selectors)
13.class
Επιλογή όλων των στοιχείων με την class
#id
Επιλογή στοιχείου με το id
a, b
Ομάδα: επιλογή a και b
a b
Απόγονος: b μέσα στο a
a > b
Άμεσο παιδί b του a
a + b
Γειτονικός αδελφός αμέσως μετά το a
a ~ b
Γενικός αδελφός b μετά το a
[type="text"]
Selector attribute
:hover :focus
Pseudo-classes για κατάσταση
:nth-child(2n)
Κάθε ζυγό παιδί
::before ::after
Pseudo-elements (παραγόμενο περιεχόμενο)
:not(.x)
Άρνηση: οτιδήποτε εκτός από .x
:is(h1, h2, h3)
Ταιριάζει με οποιονδήποτε selector της λίστας
Box model
7box-sizing: border-box;
Συμπερίληψη padding & border στο πλάτος
margin: 0 auto;
Οριζόντια κεντράρισμα block
padding: 1rem 2rem;
Κάθετα 1rem, οριζόντια 2rem
border: 1px solid #ccc;
Πλάτος, στυλ, χρώμα
border-radius: 8px;
Στρογγυλεμένες γωνίες
outline: 2px dashed red;
Outline (δεν επηρεάζει το layout)
overflow: hidden;
Αποκοπή περιεχομένου που ξεχειλίζει
Flexbox
8display: flex;
Δημιουργία flex container
flex-direction: row | column;
Κατεύθυνση κύριου άξονα
justify-content: space-between;
Στοίχιση κατά τον κύριο άξονα
align-items: center;
Στοίχιση κατά τον εγκάρσιο άξονα
flex-wrap: wrap;
Άδεια αναδίπλωσης στοιχείων
gap: 1rem;
Διάστημα μεταξύ στοιχείων
flex: 1;
Επέκταση για κάλυψη χώρου (1 1 0)
align-self: flex-end;
Παράκαμψη εγκάρσιου άξονα για ένα στοιχείο
Grid
8display: grid;
Δημιουργία grid container
grid-template-columns: 1fr 1fr 1fr;
Τρεις ίσες στήλες
repeat(3, 1fr)
Συντομογραφία για επαναλαμβανόμενα tracks
minmax(200px, 1fr)
Track μεταξύ min και max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsive αυτόματες στήλες
gap: 1rem;
Κενό γραμμής και στήλης
grid-column: 1 / 3;
Έκταση από γραμμή 1 έως 3
place-items: center;
Κεντράρισμα στοιχείων σε δύο άξονες
Τυπογραφία
8font-family: system-ui, sans-serif;
Στοίβα γραμματοσειρών
font-size: 1.125rem;
Σχετικό μέγεθος γραμματοσειράς
font-weight: 600;
Έντονο βάρος
line-height: 1.6;
Διάστιχο
letter-spacing: .02em;
Διαγραμμάτωση (tracking)
text-align: center;
Οριζόντια στοίχιση κειμένου
text-transform: uppercase;
Αλλαγή πεζών-κεφαλαίων
text-overflow: ellipsis;
Αποκοπή με … (χρειάζεται overflow+nowrap)
Χρώματα & φόντο
7color: #1f2937;
Χρώμα κειμένου
background: rgb(0 0 0 / 50%);
Σύγχρονο rgb με alpha
background: linear-gradient(90deg,#f06,#48f);
Γραμμικό gradient
opacity: .5;
Διαφάνεια στοιχείου
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Σκιά
background-size: cover;
Κλιμάκωση εικόνας σε cover
color-mix(in srgb, red 40%, blue);
Ανάμειξη δύο χρωμάτων
Τοποθέτηση
6position: relative;
Μετατόπιση από κανονική θέση
position: absolute;
Σχετικά με πλησιέστερο positioned πρόγονο
position: fixed;
Σχετικά με το viewport
position: sticky; top: 0;
Κολλάει κατά το scroll
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Σειρά στοίβαξης
Μεταβάσεις & animation
5transition: all .2s ease;
Animation αλλαγών ιδιοτήτων
transform: translateY(-4px) scale(1.05);
Μετακίνηση, κλιμάκωση, περιστροφή
@keyframes spin { to { transform: rotate(360deg); } }
Ορισμός animation
animation: spin 1s linear infinite;
Εκτέλεση keyframe animation
will-change: transform;
Υπόδειξη στον browser για βελτιστοποίηση
Responsive & σύγχρονα
7@media (max-width: 768px) { ... }
Breakpoint media query
clamp(1rem, 2vw, 2rem)
Ρευστή τιμή με min/max
aspect-ratio: 16 / 9;
Διατήρηση aspect ratio
var(--brand)
Χρήση custom property
:root { --brand: #4f46e5; }
Ορισμός custom property
container-type: inline-size;
Ενεργοποίηση container queries
@container (min-width: 400px) {…}
Container query (ερώτημα δοχείου)
Καμία καταχώριση δεν ταιριάζει με «:q».
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.