CSS Επιστροφή στα βασικά Ορολογία εξηγείται
CSS ή Cascading Stylesheets συμπληρώνουν την καθοριστική γλώσσα των κανόνων σχεδιασμού για τον ιστό μας. Οι καλλιτέχνες παντού χρησιμοποιούν το CSS σε καθημερινή βάση για να δημιουργούν, να οργανώνουν και να κωδικοποιούν σύνολα κανόνων για βασικές διατάξεις ιστοτόπων. Αυτό έχει γίνει η πιο δημοφιλής γλώσσα για σχεδιασμό front-end και προσφέρει εκπληκτικές δυνατότητες με την πρόσφατη έκδοση του CSS3. Αλλά τι σημαίνει όλο αυτό το κώδικα πραγματικά?
Η ίδια η γλώσσα έχει αναπτυχθεί πλήρως εδώ και μερικά χρόνια. Η σύγχυση μπορεί να προκύψει κυρίως λόγω κακής επικοινωνίας και κατάχρησης παρόμοιων όρων. Το CSS φέρνει στο τραπέζι πολλές νέες ιδέες. Θα καλύψουμε μερικές από τις πιο δημοφιλείς ορολογίες για να κυριαρχήσουμε ως γκουρού CSS.
Γιατί να ειδικεύεστε με το CSS?
Αυτή η ερώτηση έχει τεθεί πριν, και ακόμη και την είσοδο του 2011, μπορούμε να δούμε τα ίδια αποτελέσματα να εμφανίζονται. Το CSS είναι μια στιβαρή γλώσσα που δεν ανήκει στις προτιμήσεις για scripting ή προγραμματισμό. Είναι μια γλώσσα στυλ, πιο συγκεκριμένα ένας κώδικας που χρησιμοποιείται για να περιγράψει τον τρόπο συμπεριφοράς μιας ιστοσελίδας.
Χρησιμοποιώντας το CSS μπορούμε να χειριστούμε άμεσα ιδιότητες από μεμονωμένα στοιχεία HTML. Όλα τα μπλοκ, οι παραγράφους, οι σύνδεσμοι και οι εικόνες μπορούν να επηρεαστούν μέσω των κανόνων CSS. Η βελτίωση της σημασιολογίας παρουσίασης για τον ιστό ήταν πάντα ένα τεράστιο βήμα. Αυτός είναι ο κύριος λόγος για τον οποίο η CSS εξακολουθεί να είναι ο κορυφαίος παίκτης για σχεδιαστές - κανείς δεν έχει δημιουργήσει κάτι καλύτερο!
Ιδιότητες και αξίες
Αυτός είναι ο απλούστερος τρόπος για να σπάσετε το CSS. Όλος ο κώδικας εμπίπτει σε δύο ενέργειες: την επιλογή ενός στοιχείου για την εφαρμογή σχεδίων και την εφαρμογή. Το τελευταίο δημιουργείται μέσω ζευγών ιδιοκτησίας / αξίας.
Ως παράδειγμα χρώμα: κόκκινο; είναι ένα πολύ απλό ζεύγος ιδιοκτησίας / αξίας. Το ακίνητο που χρησιμοποιήσαμε είναι χρώμα που μας επιτρέπει να περάσουμε σε οποιαδήποτε αποδεκτή αξία για να αλλάξετε το χρώμα του κειμένου. Αυτό θα μπορούσε επίσης να είναι εξάγωνο ή RGB (κόκκινο-πράσινο-μπλε) δεδομένα χρώματος. Πολλές φορές οι σχεδιαστές δεν θα αναφέρουν την ιδέα των αξιών, επειδή μπορεί να είναι παραπλανητικές.
Οι ιδιότητες και οι αξίες είναι πραγματικά μια ενιαία ιδέα. Κάθε δήλωση ιδιοκτησίας απαιτεί μια αξία και οι αξίες από μόνοι τους δεν έχουν νόημα. Υπάρχει πολλή τεκμηρίωση σε απευθείας σύνδεση η οποία πηγαίνει πάνω από τις πολλές διαφορετικές ιδιότητες και πώς επηρεάζουν τα στοιχεία HTML. Θα συνιστούσα να αγοράσετε ένα βιβλίο αναφοράς CSS από οποιοδήποτε κοντινό κατάστημα βιβλίων. Είναι αρκετά φτηνά και κρατούν τις περισσότερες πληροφορίες που χρειάζεστε.
Τιμές επιλογέα
Οι επιλογείς είναι απαραίτητοι για την ολοκλήρωση μιας ολόκληρης γραμμής κώδικα CSS. Αυτά είναι αυτά που δηλώνουμε για να καθορίσουμε τι είδους στοιχείο στοχεύουμε. Υπάρχουν πολλοί επιλογείς και πολλοί είναι τόσο περίπλοκοι που ο μέσος σχεδιαστής δεν θα χρειαζόταν τις δεξιότητες. Ελέγξτε τα έγγραφα επιλογής του W3 αν θέλετε να μάθετε περισσότερα.
Ο πιο απλός τρόπος για να ξεκινήσετε ορισμούς στυλ είναι να χρησιμοποιήσετε γυμνά στοιχεία ως επιλογείς ιδιοκτησίας. Αυτό σημαίνει το χειρισμό του κώδικα ρίζας, όπως Π για παραγράφους, div για τμήματα, ακόμα και σώμα και html μπορεί να χρησιμοποιηθεί για να χειριστεί ολόκληρο το έγγραφο της ιστοσελίδας. Παρακάτω είναι ένα γρήγορο παράδειγμα σχεδιασμού όλων των στοιχείων παραγράφου.
p font-family: Arial, sans-serif; χρώμα: # 222; γραμματοσειρά-βάρος: έντονα.
Αυτό που δίνει το πραγματικό βάρος του CSS είναι το πόσο ακριβής μπορεί να είναι το sniping του επιλογέα. Ο καλύτερος τρόπος για να επιτευχθούν στοχευμένες μορφές είναι μέσω 2 μεθόδων γνωστών ως τάξεις και IDs. Αυτές είναι κοινές ιδέες στην HTML, όπου μπορείτε να ορίσετε οποιοδήποτε στοιχείο να έχει αξία ταυτότητας και κλάσης μέσω χαρακτηριστικών. Στη συνέχεια, χρησιμοποιώντας το CSS, είναι απλό να εφαρμόσετε στυλ σε αυτό το συγκεκριμένο μπλοκ.
p # πρώτος αριθμός font-size: 14px; / * στυλ με την ταυτότητα του "firstpar" * / p.comment font-size: 1.0em; ύψος γραμμής: 1.3εμ. / * στυλ παραγράφου (εων) με τάξη "comment" * /
Μονάδες και τιμές μονάδων
Συχνά οι όροι αυτοί μπερδεύονται, όχι μια μεγάλη έκπληξη. Οι τιμές επεξηγήθηκαν νωρίτερα ως η τοποθέτηση που χρησιμοποιούμε για να περιγράψουμε μια ιδιότητα. Οι μονάδες μήκους είναι επίσης αξίες στο ότι χρησιμοποιούνται για να περιγράψουν μια ιδιότητα.
Η διαφορά είναι ότι αυτές οι τιμές απαιτούν αριθμητικά δεδομένα και επομένως πρέπει να επιστρέψουν κάποια μορφή μονάδων. Τα εικονοστοιχεία (px) είναι τα πιο διαδεδομένα και μπορούν να χρησιμοποιηθούν για τα περισσότερα οτιδήποτε: πλάτος / ύψος, μέγεθος γραμματοσειράς, προσθήκη / περιθώρια, για να αναφέρουμε μερικά.
Εκτός από αυτά μπορείτε να δείτε τα ποσοστά (%) που χρησιμοποιούνται συχνά μέσω υγρών διατάξεων. Όταν ρυθμίζετε τιμές πλάτους σε ένα ποσοστό, ο μεταγλωττιστής θα αναλάβει το 100% για να είναι ολόκληρο το πλάτος του προγράμματος περιήγησης ιστού. Αυτό δίνει μεγάλη ακρίβεια στους σχεδιαστές όταν εφαρμόζουν στυλ σε δομές σχεδίασης και ακόμα και τυπογραφία σελίδων.
Το μπλοκ δήλωσης
Τώρα αφού βάλουμε μαζί όλους αυτούς τους όρους, είμαστε τελικά σε θέση να συζητήσουμε την ιδέα του πυρήνα πίσω από τα φύλλα στυλ. Τα μπλοκ κώδικα χρησιμοποιούνται για να οριοθετήσουν τις περιοχές θεμάτων και να καθορίσουν λεπτομερή στοιχεία. Για παράδειγμα, παρακάτω είναι μια γραμμή κώδικα για ένα απλό δοχείο πλοήγησης:
div #nav εμφάνιση: μπλοκ; πλάτος: 100%. padding: 3px 6px; περιθώριο-κάτω: 20px;
Ο ευκολότερος τρόπος για την εμφάνιση αυτού του κώδικα είναι οι ιδιότητες γραμμών το ένα μετά το άλλο. Οι προγραμματιστές του CSS χρησιμοποίησαν μπλοκ κώδικα για να σπάσουν κάθε ιδιοκτησία στη δική της γραμμή. Αυτή η ατζέντα όχι μόνο καταλαμβάνει πολύ περισσότερο χώρο αλλά μειώνει την ικανότητα “ξαφρίζω” το φύλλο σας για να βρείτε ακριβώς αυτό που χρειάζεστε.
Ένας καλύτερος τρόπος να σπάσουν τα μπλοκ του κώδικα είναι να διαχωρίσουν τα σπειροειδή στοιχεία σε δικά τους, αφού φτάσουν σε ένα όριο. Αυτός ο αριθμός είναι προσωπικός και θα είναι διαφορετικός μεταξύ των προγραμματιστών. Είναι το σημείο όπου η λογική υπαγορεύει ότι είναι ανόητο να κρατά τα πάντα σε μια γραμμή, κυρίως λόγω της αναγνωσιμότητας.
Παρακάτω έχω γράψει ένα παράδειγμα ενός μπλοκ των ιδιοτήτων πλοήγησης όλοι μαζί. Αυτή η πρακτική διατηρεί βαθύτερα στοιχεία στην ίδια θέση, έτσι ώστε οι τροποποιήσεις σε όλα τα στοιχεία πλοήγησης να είναι πολύ απλούστερες.
div #nav εμφάνιση: μπλοκ; πλάτος: 100%. padding: 3px 6px; περιθώριο-κάτω: 20px; div # επισκεφτείτε το style-style: none; εμφάνιση: μπλοκ? div # nav ul li float: αριστερά; περιθώριο-δεξιά: 10px; μέγεθος γραμματοσειράς: 12px; div # nav ul li a χρώμα: # 0f0f0f; κείμενο-διακόσμηση: κανένα? εμφάνιση: inline-block padding: 2px 5px;
Πιθανές εξελίξεις από το CSS2 / CSS3
Στα πρωτοσέλιδα έχει πρόσφατα μιλήσει για τα εκπληκτικά οφέλη από το CSS3. Αλλά τι έχει πραγματικά άλλαξε στη γλώσσα; Ο καθαρά παλιός κώδικας θα συνεχίσει να λειτουργεί καλά. Αυτό δείχνει τουλάχιστον πλήρη συμβατότητα προς τα πίσω μεταξύ των μεταγλωττιστών (πάντα καλό).
Οι μεγάλες διαφορές σχετίζονται κυρίως με νέες ιδιότητες. Αυτά επιτρέπουν τις στρογγυλεμένες γωνίες και τα εφέ σκιάς να πέφτουν σε φυλλομετρητή. Το CSS3 προσφέρει επίσης νέα εργαλεία για την περιγραφή των χρωμάτων στο έγγραφο. Το HSL (Hue-Saturation-Lightness) είναι το νεότερο εκτός από το HSLA το οποίο περιλαμβάνει ένα κανάλι Alpha για τη μείωση της αδιαφάνειας.
Οι επιλογείς χαρακτηριστικών είναι ένα τεράστιο βήμα προς τα εμπρός σε σχέση με το ευδιάκριτο styling. Με αυτό το στυλ κώδικα μπορείτε να στοχεύσετε ένα συγκεκριμένο όνομα στοιχείου που περιέχει ιδιότητες με συγκεκριμένες τιμές. Αυτά είναι ως επί το πλείστον χρήσιμα όταν εργάζεστε με σήμανση όπως η XML όπου δεν υπάρχουν τυπικές αρχές σχεδίασης για τον χειρισμό κόμβων. Το παρακάτω παράδειγμα είναι μια σχετικά απλή ιδέα:
div [attrib ^ = "1"] / * στυλ εδώ * /
Ο παραπάνω κώδικας είναι μέρος της βιβλιοθήκης επιλογών CSS. Αυτό θα επηρέαζε όλα τα στοιχεία div με ένα χαρακτηριστικό “attrib” η οποία κατέχει επίσης την αξία “1”. Εάν αυτό εξακολουθεί να είναι συγκεχυμένη αναφορά στο παρακάτω παράδειγμα για να διευκρινιστεί. Θεωρητικά αυτοί οι δύο επιλογείς πρέπει να εκτελούν τις ίδιες ενέργειες.
p [id ^ = "πρωτογενές"] / * στυλ * / p # πρωτογενή / * στυλ * /
συμπέρασμα
Μετά την κατάρριψη μερικών από τους πιο υπερβολικά συγκεχυμένους όρους, το CSS μοιάζει με μια βόλτα στο πάρκο. Η γλώσσα είναι πολύ διαισθητική και οι αρχάριοι μπορούν να αρχίσουν να σχεδιάζονται μέσα στις πρώτες ώρες στο χέρι. Αυτό κάνει το CSS τόσο δημοφιλές στους προγραμματιστές ιστού.
Τα οφέλη του CSS3 μόλις άρχισαν να ισχύουν. Κατά τη διάρκεια των νέων ετών, οι εξελισσόμενες τάσεις στον ιστό θα μας δείξουν πόσο έλεγχο έχουμε πραγματικά πάνω από το σχεδιασμό ιστοσελίδας. Το CSS είναι σήμερα υπερήφανη ως η κυρίαρχη γλώσσα για το styling του δικτυακού τόπου. Η εξάσκηση σε ακόμη και στοιχειώδεις ενδιάμεσες δεξιότητες μπορεί να δημιουργήσει πλούσια εμπειρία σχεδίασης και περαιτέρω γνώση.
