Το οπτικό στυλ και η διάταξη ενός ιστότοπου υπαγορεύονται από CSS ή Cascading Style Sheets. Πρόκειται για έγγραφα που διαμορφώνουν τη σήμανση HTML μιας ιστοσελίδας, παρέχοντας στα προγράμματα περιήγησης web οδηγίες για τον τρόπο εμφάνισης των σελίδων που προκύπτουν από αυτήν τη σήμανση. Το CSS χειρίζεται τη διάταξη μιας σελίδας, καθώς και το χρώμα, τις εικόνες φόντου, την τυπογραφία και πολλά άλλα. Αν κοιτάξετε ένα αρχείο CSS, θα δείτε ότι, όπως οποιαδήποτε γλώσσα σήμανσης ή κωδικοποίησης, αυτά τα αρχεία έχουν μια συγκεκριμένη σύνταξη σε αυτά. Κάθε φύλλο στυλ αποτελείται από έναν αριθμό κανόνων CSS. Αυτοί οι κανόνες, όταν λαμβάνονται πλήρως, είναι αυτό που διαμορφώνει τον ιστότοπο.
Τα μέρη ενός κανόνα CSS
Ένας κανόνας CSS αποτελείται από δύο ξεχωριστά μέρη – τον επιλογέα και τη δήλωση. Ο επιλογέας καθορίζει τι μορφοποιείται σε μια σελίδα και η δήλωση είναι πώς θα πρέπει να έχει στυλ. Για παράδειγμα: p {
χρώμα: # 000;
}
type = «code»> Αυτός είναι ένας κανόνας CSS. Το τμήμα επιλογής είναι το Π, που είναι ένας επιλογέας στοιχείων για «παραγράφους». Επομένως, θα επέλεγε ΟΛΕΣ τις παραγράφους σε έναν ιστότοπο και θα τους παρέχει αυτό το στυλ (εκτός εάν υπάρχουν παράγραφοι που στοχεύονται από πιο συγκεκριμένα στυλ αλλού στο έγγραφο CSS σας). Το μέρος του κανόνα που λέει, «χρώμα: # 000;«είναι αυτό που είναι γνωστό ως δήλωση. Αυτή η δήλωση αποτελείται από δύο κομμάτια – το ιδιοκτησία και το αξία. ο ιδιοκτησία είναι το χρώμα κομμάτι αυτής της δήλωσης. Υποδεικνύει ποια πτυχή του επιλογέα θα αλλάξει οπτικά. ο αξία είναι η αλλαγή της επιλεγμένης ιδιότητας CSS. Στο παράδειγμά μας, χρησιμοποιούμε την δεκαεξαδική τιμή του # 000, που είναι συντομογραφία CSS για «μαύρο». Έτσι, χρησιμοποιώντας αυτόν τον κανόνα CSS, η σελίδα μας θα εμφανίζει τις παραγράφους με μαύρο χρώμα γραμματοσειράς.
Βασικά στοιχεία ιδιοκτησίας CSS
Όταν γράφετε ιδιότητες CSS, δεν μπορείτε απλά να τις αναμορφώσετε όπως κρίνετε κατάλληλο. Για παράδειγμα, το «color» είναι μια πραγματική ιδιότητα CSS, οπότε μπορείτε να τη χρησιμοποιήσετε. Αυτή η ιδιότητα καθορίζει το χρώμα κειμένου ενός στοιχείου. Εάν προσπαθήσατε να χρησιμοποιήσετε το «κείμενο-χρώμα» ή «γραμματοσειρά-χρώμα» ως ιδιότητες CSS, αυτές θα αποτύχουν επειδή δεν είναι πραγματικά μέρη της γλώσσας CSS. Ένα άλλο παράδειγμα είναι η ιδιότητα «background-image». Αυτή η ιδιότητα ορίζει μια εικόνα που μπορεί να χρησιμοποιηθεί για φόντο, ως εξής: .logo {
background-image: url («/ images / company-logo.png»);
}
type = «code»> Εάν προσπαθήσατε να χρησιμοποιήσετε το «background-picture» ή «background-graphic» ως ιδιότητα, θα αποτύγχανε επειδή, για άλλη μια φορά, αυτές δεν είναι πραγματικές ιδιότητες CSS.
Μερικές ιδιότητες CSS
Υπάρχουν πολλές ιδιότητες CSS που μπορείτε να χρησιμοποιήσετε για να διαμορφώσετε έναν ιστότοπο. Μερικά παραδείγματα είναι:
- Περίγραμμα (συμπεριλαμβανομένων στυλ περιγράμματος, χρώματος περιγράμματος και πλάτους περιγράμματος)
- Επένδυση (συμπεριλαμβανομένων της επένδυσης-επάνω, της επένδυσης-δεξιά, της επένδυσης-κάτω και της επένδυσης-αριστερά)
- Περιθώρια (συμπεριλαμβανομένων περιθωρίων-άνω, περιθωρίου-δεξιά, περιθωρίου-κάτω και περιθωρίου-αριστερά)
- Οικογένεια γραμματοσειρών
- Μέγεθος γραμματοσειράς
- Χρώμα του φόντου
- Πλάτος
- Υψος
Αυτές οι ιδιότητες CSS είναι εξαιρετικές για χρήση ως παραδείγματα, επειδή είναι όλες πολύ απλές και, ακόμη και αν δεν γνωρίζετε το CSS, πιθανότατα μπορείτε να μαντέψετε τι κάνουν με βάση τα ονόματά τους. Υπάρχουν και άλλες ιδιότητες CSS που θα συναντήσετε επίσης, οι οποίες μπορεί να μην είναι τόσο προφανείς πώς λειτουργούν με βάση τα ονόματά τους:
- Φλοτέρ
- Σαφή
- Ξεχείλισμα
- Μετασχηματισμός κειμένου
- Ευρετήριο Ζ
Καθώς μπαίνετε βαθύτερα στον σχεδιασμό ιστοσελίδων, θα συναντήσετε (και θα χρησιμοποιήσετε) όλες αυτές τις ιδιότητες και πολλά άλλα!
Οι ιδιότητες χρειάζονται τιμές
Κάθε φορά που χρησιμοποιείτε μια ιδιότητα, πρέπει να της δώσετε μια τιμή – και ορισμένες ιδιότητες μπορούν να δεχτούν μόνο συγκεκριμένες τιμές. Στο πρώτο μας παράδειγμα της ιδιότητας «χρώμα», πρέπει να χρησιμοποιήσουμε μια τιμή χρώματος. Αυτό θα μπορούσε να είναι μια δεκαεξαδική τιμή, τιμή RGBA ή ακόμη και έγχρωμες λέξεις-κλειδιά. Οποιαδήποτε από αυτές τις τιμές θα λειτουργούσε, ωστόσο, εάν χρησιμοποιούσατε τη λέξη «ζοφερή» με αυτήν την ιδιότητα, δεν θα έκανε τίποτα γιατί, όσο περιγραφικά μπορεί να είναι αυτή η λέξη, δεν είναι αναγνωρισμένη τιμή στο CSS. Το δεύτερο παράδειγμα του «background-image» απαιτεί τη χρήση μιας διαδρομής εικόνας για τη λήψη μιας πραγματικής εικόνας από τα αρχεία του ιστότοπού σας. Αυτή είναι η τιμή / σύνταξη που απαιτείται. Όλες οι ιδιότητες CSS έχουν τιμές που αναμένουν. Για παράδειγμα:
- Το χρώμα περιγράμματος αναμένει μια τιμή χρώματος.
- Το μέγεθος περιγράμματος αναμένει μια τιμή μεγέθους, όπως pixel ή ποσοστά.
- Τα στυλ περιγράμματος αναμένουν ένα από τα δεσμευμένα στυλ που χρησιμοποιούνται για αυτήν την ιδιότητα, όπως «συμπαγές».
Εάν περάσετε από τη λίστα των ιδιοτήτων CSS, θα ανακαλύψετε ότι κάθε μία από αυτές έχει συγκεκριμένες τιμές που θα χρησιμοποιήσουν για να δημιουργήσουν τα στυλ για τα οποία προορίζονται.
Αναφέρετε αυτό το άρθρο
Μορφή mla apa chicago Η αναφορά σας
Kyrnin, Jennifer. «Ορισμός σχεδιασμού του CSS Property.» ThoughtCo, Μάιος. 14, 2021, thinkco.com/property-definition-3466899.
Kyrnin, Jennifer. (2021, 14 Μαΐου). Ορισμός σχεδίασης του CSS Property. Ανακτήθηκε από το https://www.thoughtco.com/property-definition-3466899
Kyrnin, Jennifer. «Ορισμός σχεδιασμού του CSS Property.» ThoughtCo. https://www.thoughtco.com/property-definition-3466899 (πρόσβαση στις 29 Μαΐου 2021).
αντιγραφή παραπομπής