Τι είναι το CSS; Cascading Style Sheets, Responsive CSS, Sassy CSS, Compress, Minify, Unminify, Uncompress Tool

Τι είναι τα Cascading Style Sheets (CSS);

Douglas Karr Πέμπτη, Φεβρουάριος 9, 2023

1 104 4 λεπτά

Διαβάστε παρακάτω για μια πλήρη εξήγηση του τρόπου λειτουργίας των επικαλυπτόμενων φύλλων στυλ. Εμφανίζουμε τις εφαρμογές μας στο επάνω μέρος της σελίδας, ώστε να είναι εύκολο να τις βρείτε και να τις χρησιμοποιήσετε. Εάν διαβάζετε αυτό το άρθρο μέσω email ή ροής, κάντε κλικ στο συμπίεση του CSS σας.

Αν δεν αναπτύσσετε πραγματικά τοποθεσίες, ενδέχεται να μην κατανοείτε πλήρως τα επικαλυπτόμενα φύλλα στυλ (CSS). Η CSS είναι μια γλώσσα φύλλου στυλ που χρησιμοποιείται για να περιγράψει την εμφάνιση και τη μορφοποίηση ενός εγγράφου γραμμένο σε HTML or XML. Το CSS μπορεί να χρησιμοποιηθεί για τον καθορισμό των στυλ για διάφορα στοιχεία όπως γραμματοσειρά, χρώμα, διάστιχο και διάταξη. Το CSS σάς επιτρέπει να διαχωρίζετε την παρουσίαση του εγγράφου HTML από το περιεχόμενό του, διευκολύνοντας τη διατήρηση και την ενημέρωση του οπτικού στυλ του ιστότοπού σας.

Δομή γλώσσας CSS

Η καλύτερη εκλέκτορας είναι το στοιχείο HTML που θέλετε να δημιουργήσετε στυλ και το περιουσία και αξία ορίστε τα στυλ που θέλετε να εφαρμόσετε σε αυτό το στοιχείο:

selector {
  property: value;
}

Για παράδειγμα, το ακόλουθο CSS θα κάνει όλα <h1> Τα στοιχεία σε μια σελίδα έχουν κόκκινο χρώμα και μέγεθος γραμματοσειράς 32 εικονοστοιχείων:

CSS

h1 {
  color: red;
  font-size: 32px;
}

Παραγωγή

Επικεφαλίδα

Μπορείτε επίσης να καθορίσετε CSS για ένα μοναδικό αναγνωριστικό σε ένα στοιχείο:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

Παραγωγή

Εισαγωγή

Ή εφαρμόστε μια κλάση σε πολλά στοιχεία:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

Παραγωγή

θέλω να επισημάνετε μια λέξη στην ετικέτα span.

Μπορείτε να συμπεριλάβετε το CSS στο έγγραφό σας HTML με τρεις τρόπους:

Ενσωματωμένο CSS, χρησιμοποιώντας το style χαρακτηριστικό σε ένα στοιχείο HTML

Εσωτερικό CSS, χρησιμοποιώντας α <style> στοιχείο στο <head> του εγγράφου HTML σας
Εξωτερικό CSS, χρησιμοποιώντας ένα ξεχωριστό αρχείο .css συνδεδεμένο με το έγγραφό σας HTML χρησιμοποιώντας το <link> στοιχείο στο <head> του εγγράφου HTML σας

Αποκριτικό CSS

Το CSS είναι απίστευτα ευέλικτο και μπορεί να χρησιμοποιηθεί για την προσαρμογή της εμφάνισης στοιχείων με βάση την ανάλυση οθόνης, ώστε να μπορείτε να έχετε το ίδιο HTML αλλά να το δημιουργήσετε ανταποκρίνονται στην ανάλυση της συσκευής:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

Συμπίεση CSS

Μπορείτε να δείτε στο παραπάνω παράδειγμα ότι υπάρχει ένα σχόλιο, ένα ερώτημα πολυμέσων και πολλά στυλ που χρησιμοποιούν κενά και τροφοδοσίες γραμμής για να οργανώσουν την προβολή του CSS. Είναι μια εξαιρετική πρακτική να ελαχιστοποιείτε ή να συμπιέσετε το CSS στον ιστότοπό σας για να μειώσετε τα μεγέθη των αρχείων και, στη συνέχεια, τον χρόνο που χρειάζεται για να ζητήσετε και να αποδώσετε το στυλ σας. Δεν είναι λίγο… μπορείτε να δείτε εξοικονόμηση άνω του 50% σε μερικά από τα παραπάνω παραδείγματα.

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

Τι είναι το SCSS;

Sassy CSS (SCSS) είναι ένας προεπεξεργαστής CSS που προσθέτει πρόσθετη λειτουργικότητα και σύνταξη στη γλώσσα CSS. Επεκτείνει τις δυνατότητες του CSS επιτρέποντας τη χρήση μεταβλητών, μίξεων, συναρτήσεων και άλλων δυνατοτήτων που δεν είναι διαθέσιμες στο τυπικό CSS.

Πλεονεκτήματα SCSS

Βελτιωμένη δυνατότητα συντήρησης: Με τη χρήση μεταβλητών, μπορείτε να αποθηκεύσετε τιμές σε ένα μέρος και να τις επαναχρησιμοποιήσετε σε όλο το φύλλο στυλ σας, διευκολύνοντας τη διατήρηση και την ενημέρωση των στυλ σας.
Καλύτερη οργάνωση: Με τα mixins, μπορείτε να ομαδοποιήσετε και να επαναχρησιμοποιήσετε σύνολα στυλ, κάνοντας το φύλλο στυλ σας πιο οργανωμένο και πιο ευανάγνωστο.
Αυξημένη λειτουργικότητα: Το SCSS περιλαμβάνει πολλές δυνατότητες που δεν είναι διαθέσιμες στο τυπικό CSS, όπως συναρτήσεις, δομές ελέγχου (π.χ. if/else) και αριθμητικές πράξεις. Αυτό επιτρέπει πιο δυναμικό και εκφραστικό στυλ.
Καλύτερη απόδοση: Τα αρχεία SCSS μεταγλωττίζονται σε CSS, κάτι που μπορεί να βελτιώσει την απόδοση μειώνοντας την ποσότητα του κώδικα που πρέπει να αναλυθεί από το πρόγραμμα περιήγησης.

Μειονεκτήματα SCSS

Καμπύλη εκμάθησης: Το SCSS έχει διαφορετική σύνταξη από το τυπικό CSS και θα πρέπει να μάθετε αυτήν τη νέα σύνταξη για να μπορέσετε να τη χρησιμοποιήσετε αποτελεσματικά.
Πρόσθετη πολυπλοκότητα: Αν και το SCSS μπορεί να κάνει το φύλλο στυλ σας πιο οργανωμένο και πιο εύκολο στη συντήρηση, μπορεί επίσης να εισάγει πρόσθετη πολυπλοκότητα στη βάση κωδίκων σας, ειδικά εάν δεν είστε εξοικειωμένοι με τις νέες δυνατότητες και τη σύνταξη.
Εργαλεία: Για να χρησιμοποιήσετε το SCSS, θα χρειαστείτε έναν μεταγλωττιστή για να μεταφράσετε τον κώδικα SCSS σας σε CSS. Αυτό απαιτεί πρόσθετη ρύθμιση και εργαλεία, τα οποία μπορεί να αποτελέσουν εμπόδιο στην είσοδο για ορισμένους προγραμματιστές.

Σε αυτό το παρακάτω παράδειγμα, ο κώδικας SCSS χρησιμοποιεί μεταβλητές για την αποθήκευση τιμών ($primary-color και $font-size) που μπορεί να χρησιμοποιηθεί ξανά σε όλο το φύλλο στυλ. Ο κώδικας CSS που δημιουργείται από αυτόν τον κώδικα SCSS είναι ισοδύναμος, αλλά δεν περιλαμβάνει τις μεταβλητές. Αντίθετα, οι τιμές των μεταβλητών χρησιμοποιούνται απευθείας στο CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Ένα άλλο χαρακτηριστικό του SCSS που αποδεικνύεται σε αυτό το παράδειγμα είναι τα ένθετα στυλ. Στον κώδικα SCSS, το h1 τα στυλ είναι ένθετα μέσα στο body στυλ, κάτι που δεν είναι δυνατό στο τυπικό CSS. Όταν μεταγλωττίζεται ο κώδικας SCSS, τα ένθετα στυλ επεκτείνονται σε ξεχωριστά στυλ στον κώδικα CSS.

Συνολικά, το SCSS παρέχει πολλά πλεονεκτήματα σε σχέση με το τυπικό CSS, αλλά είναι σημαντικό να λάβετε υπόψη τους συμβιβασμούς και να επιλέξετε το σωστό εργαλείο για το έργο σας με βάση τις ανάγκες και τους περιορισμούς σας.