Ορισμός της ιδιότητας CSS

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

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

Τα μέρη ενός κανόνα CSS

Ένας κανόνας CSS αποτελείται από δύο διαφορετικά μέρη - τον επιλογέα και τη δήλωση. Ο επιλογέας καθορίζει τι είναι στυλ σε μια σελίδα και η δήλωση είναι πώς θα πρέπει να είναι στυλ. Για παράδειγμα:

Π {
χρώμα: # 000;
}}

Αυτός είναι ένας κανόνας CSS. Το τμήμα επιλογέα είναι το "p", το οποίο είναι ένας επιλογέας στοιχείων για "παραγράφους". Ως εκ τούτου, θα επιλέγατε ΟΛΕΣ τις παραγράφους σε έναν ιστότοπο και θα τους παρέχετε αυτό το στυλ (εκτός αν υπάρχουν παράγραφοι που στοχεύουν πιο συγκεκριμένα στυλ σε άλλο σημείο του εγγράφου CSS).

Το μέρος του κανόνα που λέει "χρώμα: # 000;" είναι αυτό που είναι γνωστό ως δήλωση. Η δήλωση αυτή αποτελείται από δύο κομμάτια - την ιδιότητα και την αξία.

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

Η τιμή είναι αυτή που θα αλλάξει η επιλεγμένη ιδιότητα CSS. Στο παράδειγμά μας, χρησιμοποιούμε την τιμή hex # 000, η ​​οποία είναι συντομογραφία CSS για "μαύρο".

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

Βασικά στοιχεία της ιδιότητας CSS

Όταν γράφετε ιδιότητες CSS, δεν μπορείτε απλά να τις δημιουργήσετε όπως κρίνετε κατάλληλο. Για τις περιπτώσεις, το "χρώμα" είναι μια πραγματική ιδιότητα CSS, έτσι μπορείτε να τη χρησιμοποιήσετε. Αυτή η ιδιότητα καθορίζει το χρώμα κειμένου ενός στοιχείου. Εάν προσπαθήσατε να χρησιμοποιήσετε "χρώμα-κειμένου" ή "γραμματοσειρά-χρώμα" ως ιδιότητες CSS, αυτά θα αποτύχουν επειδή δεν είναι πραγματικά μέρη της γλώσσας CSS.

Ένα άλλο παράδειγμα είναι η ιδιότητα "φόντο-εικόνα". Αυτή η ιδιότητα ορίζει μια εικόνα που μπορεί να χρησιμοποιηθεί για φόντο όπως αυτή:

.λογότυπο {
εικόνα-φόντου: url (/images/company-logo.png);
}}

Εάν προσπαθήσατε να χρησιμοποιήσετε την εικόνα "background-picture" ή "background-graphic" ως ιδιότητα, θα αποτύχουν επειδή, για άλλη μια φορά, αυτές δεν είναι πραγματικές ιδιότητες CSS.

Ορισμένες ιδιότητες CSS

Υπάρχουν ορισμένες ιδιότητες CSS που μπορείτε να χρησιμοποιήσετε για να σχεδιάσετε έναν ιστότοπο. Μερικά παραδείγματα είναι:

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

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

Καθώς πλησιάζετε στο σχεδιασμό ιστοσελίδων, θα συναντήσετε (και θα χρησιμοποιήσετε) όλες αυτές τις ιδιότητες και πολλά άλλα!

Οι ιδιοκτήτες χρειάζονται τιμές

Κάθε φορά που χρησιμοποιείτε μια ιδιότητα, πρέπει να της δώσετε μια τιμή - και ορισμένες ιδιότητες μπορούν να αποδεχθούν μόνο συγκεκριμένες τιμές.

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

Το δεύτερο παράδειγμα "εικόνας-φόντου" απαιτεί τη χρήση μιας διαδρομής εικόνας για την εξαγωγή μιας πραγματικής εικόνας από τα αρχεία του ιστοτόπου σας. Αυτή είναι η αξία / σύνταξη που απαιτείται.

Όλες οι ιδιότητες του CSS έχουν τιμές που περιμένουν. Για παράδειγμα:

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

Επεξεργασμένο από τον Jeremy Girard