Cheat Sheet στυλ CSS

Η CSS (Cascading Style Sheets) χρησιμοποιείται για τον έλεγχο της διάταξης και της εμφάνισης των ιστοσελίδων. Αυτό το cheat sheet καλύπτει τις πιο συνηθισμένες ιδιότητες και επιλογείς.

Επιλογείς (Selectors)

Τύπος	Παράδειγμα	Περιγραφή
All	`* { }`	Επιλογή όλων των στοιχείων
Type	`h1 { }`	Επιλογή συγκεκριμένης ετικέτας HTML
Class	`.header { }`	Επιλογή στοιχείων με class=“header”
ID	`#main { }`	Επιλογή στοιχείου με id=“main”
Descendant	`div p { }`	Επιλογή όλων των p μέσα σε div
Pseudo	`a:hover { }`	Κατάσταση κατά την αιώρηση του ποντικιού

Box Model

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Εσωτερικό περιθώριο */
  border: 1px solid #ccc; /* Περίγραμμα */
  margin: 20px;     /* Εξωτερικό περιθώριο */
  box-sizing: border-box; /* Περιλαμβάνει περίγραμμα και padding */
}

Τυπογραφία

Property	Περιγραφή	Παράδειγμα
`font-family`	Οικογένεια γραμματοσειρών	`font-family: Arial, sans-serif;`
`font-size`	Μέγεθος γραμματοσειράς	`font-size: 16px;`
`font-weight`	Πάχος γραμματοσειράς	`font-weight: bold;`
`text-align`	Στοίχιση κειμένου	`text-align: center;`
`line-height`	Ύψος γραμμής	`line-height: 1.5;`
`color`	Χρώμα γραμματοσειράς	`color: #333;`

Χρώματα & Φόντα

Property	Περιγραφή	Παράδειγμα
`background-color`	Χρώμα φόντου	`background-color: #f0f0f0;`
`background-image`	Εικόνα φόντου	`background-image: url('bg.jpg');`
`background-size`	Μέγεθος φόντου	`background-size: cover;`
`opacity`	Διαφάνεια	`opacity: 0.8;`

Τοποθέτηση (Positioning)

position: static; : Προεπιλεγμένη ροή διάταξης
position: relative; : Μετατόπιση σε σχέση με τη θέση του
position: absolute; : Τοποθέτηση σε σχέση με τον πλησιέστερο μη-static πρόγονο
position: fixed; : Τοποθέτηση σε σχέση με το παράθυρο του προγράμματος περιήγησης
position: sticky; : Σταθεροποίηση κατά την κύλιση σε συγκεκριμένη θέση
z-index: 10; : Έλεγχος σειράς στοίβαξης

Εμφάνιση & Διάταξη

display: block; : Στοιχείο block
display: inline; : Στοιχείο inline
display: inline-block; : Στοιχείο inline-block
display: flex; : Ενεργοποίηση διάταξης flex
display: grid; : Ενεργοποίηση διάταξης grid
display: none; : Απόκρυψη στοιχείου χωρίς δέσμευση χώρου

Συντομογραφίες Ιδιοτήτων

margin: 10px 5px 15px 20px; (Πάνω Δεξιά Κάτω Αριστερά)
padding: 10px 5px; (Πάνω-Κάτω Αριστερά-Δεξιά)
border: 1px dashed red; (Πλάτος Στυλ Χρώμα)