Παράδειγμα σχολίου CSS - Πώς να σχολιάσετε το CSS

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

Τόσο τα μεμονωμένα όσο και τα πολλαπλά σχόλια στο CSS ξεκινούν /*και τελειώνουν */και μπορείτε να προσθέσετε όσα σχόλια στο φύλλο στυλ θέλετε. Για παράδειγμα:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

Μπορείτε επίσης να κάνετε τα σχόλιά σας πιο ευανάγνωστα σχηματοποιώντας τα:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

Οργάνωση CSS με σχόλια

Σε μεγαλύτερα έργα, τα αρχεία CSS μπορούν να αναπτυχθούν γρήγορα και να είναι δύσκολο να διατηρηθούν. Μπορεί να είναι χρήσιμο να οργανώσετε το CSS σας σε ξεχωριστές ενότητες με έναν πίνακα περιεχομένων για να διευκολύνετε την εύρεση ορισμένων κανόνων στο μέλλον:

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

Λίγο περισσότερο για το CSS: CSS Syntax and Selectors

Όταν μιλάμε για τη σύνταξη του CSS, μιλάμε για το πώς σχεδιάζονται τα πράγματα. Υπάρχουν κανόνες σχετικά με το τι πηγαίνει πού, τόσο ώστε να μπορείτε να γράφετε CSS με συνέπεια και ένα πρόγραμμα (όπως ένα πρόγραμμα περιήγησης) να το ερμηνεύει και να το εφαρμόζει σωστά στη σελίδα.

Υπάρχουν δύο βασικοί τρόποι σύνταξης CSS.

Ενσωματωμένο CSS

Ειδικά στοιχεία για την ειδικότητα CSS: Κόλπα CSS

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

Για να εφαρμόσετε ενσωματωμένο CSS, προσθέστε το χαρακτηριστικό "style" σε ένα στοιχείο HTML που θέλετε να τροποποιήσετε. Μέσα σε εισαγωγικά, συμπεριλάβετε μια λίστα με ζεύγη κλειδιών / τιμών που οριοθετείται με ερωτηματικό (το καθένα με τη σειρά του διαχωρίζεται με άνω και κάτω τελεία) που υποδεικνύει στυλ για ρύθμιση.

Ακολουθεί ένα παράδειγμα ενσωματωμένου CSS. Οι λέξεις "Ένα" και "Δύο" θα έχουν χρώμα φόντου του κίτρινου και χρώμα κειμένου του κόκκινου. Η λέξη "Three" έχει ένα νέο στυλ που αντικαθιστά το πρώτο, και θα έχει χρώμα φόντου πράσινου και χρώμα κειμένου κυανό. Στο παράδειγμα, εφαρμόζουμε στυλ σε ετικέτες, αλλά μπορείτε να εφαρμόσετε ένα στυλ σε οποιοδήποτε στοιχείο HTML.

 One Two Three 

Εσωτερικό CSS

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

Το εσωτερικό CSS έχει τα στυλ του που καθορίζονται στην ετικέτα και είναι ενσωματωμένο στην ετικέτα.

Ακολουθεί ένα παράδειγμα που έχει παρόμοιο αποτέλεσμα με το παραπάνω "inline", εκτός από το ότι το CSS έχει εξαχθεί στην περιοχή του. Οι λέξεις "Ένα" και "Δύο" θα ταιριάζουν με τον divεπιλογέα και θα είναι κόκκινο κείμενο σε κίτρινο φόντο. Οι λέξεις "Three" και "Four" ταιριάζουν επίσης με τον divεπιλογέα, αλλά αντιστοιχούν επίσης με τον .nested_divεπιλογέα που ισχύει για οποιοδήποτε στοιχείο HTML που αναφέρεται σε αυτήν την κλάση. Αυτός ο πιο συγκεκριμένος επιλογέας παρακάμπτει τον πρώτο και καταλήγουν να εμφανίζονται ως κυανό κείμενο σε πράσινο φόντο.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

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

Ακολουθεί ένα παράδειγμα όπου καθορίζουμε ένα στυλ που πρέπει να εφαρμόζεται μόνο σε divστοιχεία που είναι άμεσα θυγατρικά άλλων divστοιχείων. Το αποτέλεσμα είναι ότι "Δύο" και "Τρία" θα εμφανίζονται ως κόκκινο κείμενο σε κίτρινο φόντο, αλλά "Ένα" και "Τέσσερα" θα παραμείνουν ανεπηρέαστα (και πιθανότατα μαύρο κείμενο σε λευκό φόντο).

 div > div { color: red; background: yellow; } One Two Three Four 

Εξωτερικό CSS

Όλο το στυλ έχει το δικό του έγγραφο που συνδέεται στην ετικέτα. Η επέκταση του συνδεδεμένου αρχείου είναι.css