CSS

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

Μονάδες Μέτρησης

Πίνακες

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

Βασική Μορφοποίηση με CSS

table {
  width: 100%;
  border-collapse: collapse; /* Ενώνει τα περιγράμματα */
}

th, td {
  border: 1px solid #ddd; /* Προσθέτει περίγραμμα */
  padding: 10px; /* Καλύτερη εμφάνιση κελιών */
  text-align: left;
}

th {
  background-color: #f4f4f4; /* Φόντο κεφαλίδας */
  font-weight: bold;
}

Στρογγυλεμένες Γωνίες & Σκιά

table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

Κείμενο 

@media

Στην CSS, η @media είναι μια εντολή που σου επιτρέπει να εφαρμόζεις συγκεκριμένους κανόνες στυλ μόνο όταν πληρούνται ορισμένες συνθήκες, όπως το μέγεθος της οθόνης, η διάσταση του περιβάλλοντος ή η κατάσταση της συσκευής. Αυτό το σύστημα χρησιμοποιείται κυρίως για να δημιουργήσεις responsive designs, δηλαδή σχεδιασμούς που προσαρμόζονται στις διάφορες οθόνες και συσκευές.

@media media-type and (condition) {
/* CSS rules here */
}

Θέση ενός στοιχείου

z-index

Η ιδιότητα z-index καθορίζει τη σειρά εμφάνισης των στοιχείων. Όσο μεγαλύτερη είναι η τιμή του z-index, τόσο πιο μπροστά θα εμφανίζεται το στοιχείο σε σχέση με τα άλλα.

keyframes

Βασική Σύνταξη

@keyframes animationName {
from {
/* Στυλ στην αρχή της animation */
}
to {
/* Στυλ στο τέλος της animation */
}
}

Αν θέλετε να προσδιορίσετε ενδιάμεσα στάδια, μπορείτε να χρησιμοποιήσετε ποσοστά

@keyframes animationName {
0% {
/* Στυλ στην αρχή της animation */
}
50% {
/* Στυλ στο μέσο της animation */
}
100% {
/* Στυλ στο τέλος της animation */
}
}

animation-duration: 2s; /* 2 δευτερόλεπτα */

animation-timing-function: ease; /* Άλλη επιλογές: linear, ease-in, ease-out, ease-in-out */

animation-iteration-count: infinite; /* 'infinite' για επαναλαμβανόμενη αναπαραγωγή */

animation-direction: alternate; /* Άλλες επιλογές: normal, reverse, alternate-reverse */

animation-delay: 1s; /* Καθυστέρηση 1 δευτερολέπτου */

animation-fill-mode: forwards; /* Άλλες επιλογές: none, backwards, both */