Συνοπτικός οδηγός CSS
Μια αναζητήσιμη, εκτυπώσιμη αναφορά CSS — selectors, box model, flexbox, grid, τυπογραφία, transitions και σύγχρονα χαρακτηριστικά. Δωρεάν.
Selectors
13.class
Select all elements with the class
#id
Select the element with the id
a, b
Group: select a and b
a b
Descendant: b inside a
a > b
Direct child b of a
a + b
Adjacent sibling immediately after a
a ~ b
General sibling b after a
[type="text"]
Attribute selector
:hover :focus
Pseudo-classes for state
:nth-child(2n)
Every even child
::before ::after
Pseudo-elements (generated content)
:not(.x)
Negation: anything but .x
:is(h1, h2, h3)
Matches any selector in the list
Box model
7box-sizing: border-box;
Include padding & border in width
margin: 0 auto;
Center a block horizontally
padding: 1rem 2rem;
Vertical 1rem, horizontal 2rem
border: 1px solid #ccc;
Width, style, color
border-radius: 8px;
Rounded corners
outline: 2px dashed red;
Outline (does not affect layout)
overflow: hidden;
Clip content that overflows
Flexbox
8display: flex;
Create a flex container
flex-direction: row | column;
Main axis direction
justify-content: space-between;
Align along the main axis
align-items: center;
Align along the cross axis
flex-wrap: wrap;
Allow items to wrap
gap: 1rem;
Space between items
flex: 1;
Grow to fill space (1 1 0)
align-self: flex-end;
Override cross-axis for one item
Grid
8display: grid;
Create a grid container
grid-template-columns: 1fr 1fr 1fr;
Three equal columns
repeat(3, 1fr)
Shorthand for repeated tracks
minmax(200px, 1fr)
Track between a min and max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsive auto columns
gap: 1rem;
Row and column gap
grid-column: 1 / 3;
Span from line 1 to 3
place-items: center;
Center items on both axes
Typography
8font-family: system-ui, sans-serif;
Font stack
font-size: 1.125rem;
Relative font size
font-weight: 600;
Bold weight
line-height: 1.6;
Line spacing
letter-spacing: .02em;
Tracking
text-align: center;
Horizontal text alignment
text-transform: uppercase;
Change letter case
text-overflow: ellipsis;
Truncate with … (needs overflow+nowrap)
Colors & background
7color: #1f2937;
Text color
background: rgb(0 0 0 / 50%);
Modern rgb with alpha
background: linear-gradient(90deg,#f06,#48f);
Linear gradient
opacity: .5;
Element transparency
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Drop shadow
background-size: cover;
Scale image to cover
color-mix(in srgb, red 40%, blue);
Mix two colors
Positioning
6position: relative;
Offset from normal position
position: absolute;
Relative to nearest positioned ancestor
position: fixed;
Relative to the viewport
position: sticky; top: 0;
Sticks when scrolling past
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Stacking order
Transitions & animation
5transition: all .2s ease;
Animate property changes
transform: translateY(-4px) scale(1.05);
Move, scale, rotate
@keyframes spin { to { transform: rotate(360deg); } }
Define an animation
animation: spin 1s linear infinite;
Run a keyframe animation
will-change: transform;
Hint the browser to optimize
Responsive & modern
7@media (max-width: 768px) { ... }
Media query breakpoint
clamp(1rem, 2vw, 2rem)
Fluid value with min/max
aspect-ratio: 16 / 9;
Maintain an aspect ratio
var(--brand)
Use a custom property
:root { --brand: #4f46e5; }
Define a custom property
container-type: inline-size;
Enable container queries
@container (min-width: 400px) {…}
Container query
Καμία καταχώριση δεν ταιριάζει με «:q».
Σχετικά με το Συνοπτικός οδηγός CSS
Αυτό το φύλλο εξαπάτησης για CSS συγκεντρώνει τις ιδιότητες που χρησιμοποιείτε καθημερινά σε μία σελίδα με δυνατότητα αναζήτησης: επιλογείς, το μοντέλο κουτιού, flexbox, grid, τυπογραφία, χρώματα και φόντα, τοποθέτηση, μεταβάσεις και κίνηση, και μια ενότητα για responsive και σύγχρονο CSS.
Είναι οργανωμένο έτσι ώστε η απάντηση στο «πώς λεγόταν εκείνη η ιδιότητα;» να απέχει μία μόνο αναζήτηση — οι ενότητες flexbox και grid ειδικότερα απαριθμούν τις ιδιότητες στοίχισης και διάταξης με τιμές που μπορείτε να αντιγράψετε απευθείας σε ένα stylesheet, και η σύγχρονη ενότητα κρατά τα νεότερα χαρακτηριστικά διαθέσιμα.
Το φύλλο είναι δωρεάν, φορτώνει από την πλευρά του client, φιλτράρει ζωντανά καθώς πληκτρολογείτε, και σας επιτρέπει να αντιγράψετε οποιαδήποτε δήλωση με ένα κλικ. Ένας κολλημένος πίνακας περιεχομένων μεταβαίνει μεταξύ ενοτήτων και το κουμπί εκτύπωσης παράγει μια καθαρή αναφορά σε χαρτί.
Πώς να χρησιμοποιήσετε το Συνοπτικός οδηγός CSS
- Ρίξτε μια ματιά στη λίστα ενοτήτων — Επιλογείς, Μοντέλο κουτιού, Flexbox, Grid, Τυπογραφία και άλλα.
- Πληκτρολογήστε μια ιδιότητα ή έννοια όπως grid, hover ή transition στο πλαίσιο αναζήτησης για να φιλτράρετε κάθε γραμμή.
- Μεταβείτε σε μια ενότητα όπως η Τοποθέτηση μέσω του κολλημένου πίνακα περιεχομένων.
- Κάντε κλικ σε ένα απόσπασμα ή στο εικονίδιο αντιγραφής του για να αντιγράψετε τη δήλωση CSS.
- Εκτυπώστε το φύλλο για μια αναφορά CSS δίπλα στο γραφείο σας.
Συχνές ερωτήσεις
Εννέα ενότητες: επιλογείς, το μοντέλο κουτιού, flexbox, grid, τυπογραφία, χρώματα και φόντα, τοποθέτηση, μεταβάσεις και κίνηση, και responsive συν σύγχρονα χαρακτηριστικά CSS.
Ναι — και τα δύο έχουν τις δικές τους ενότητες με τις ιδιότητες container και item, τιμές στοίχισης και συντομευμένες μορφές, που είναι οι αναζητήσεις που κάνουν πιο συχνά οι προγραμματιστές.
Ναι. Πέρα από τον μακροχρόνιο πυρήνα, μια αφιερωμένη ενότητα responsive και σύγχρονου CSS καλύπτει νεότερα χαρακτηριστικά που συναντάτε σε τρέχοντα stylesheets, μαζί με μοτίβα media-query.
Ναι. Κάντε κλικ στον κώδικα ή στο εικονίδιο αντιγραφής κατά το πέρασμα του ποντικιού και η δήλωση βρίσκεται στο πρόχειρό σας, με επιβεβαίωση μέσω ενός σύντομου μηνύματος «Αντιγράφηκε!».
Ναι, εντελώς δωρεάν — μια σελίδα από την πλευρά του client με ζωντανή αναζήτηση, χωρίς σύνδεση και απεριόριστη χρήση.
Δημοφιλείς αναζητήσεις
css cheat sheet
css selectors list
css flexbox properties
css grid properties
css box model reference
css position values
css transition and animation syntax
css properties reference
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.