20 Βασικά κόλπα CSS Κάθε σχεδιαστής πρέπει να ξέρει
Αυτός είναι για τους απόλυτους αρχάριους. Μόλις μάθετε πώς λειτουργεί το μοντέλο κιβωτίου και πώς να επιπλέει αυτά τα κουτιά, ήρθε η ώρα να κάνετε σοβαρά τα CSS. Για το σκοπό αυτό, έχουμε συντάξει μια τεράστια λίστα με συμβουλές, κόλπα, τεχνικές και την περιστασιακή βρώμικη χάκ για να σας βοηθήσει να φτιάξετε το σχέδιο που θέλετε.
Το CSS μπορεί να γίνει πολύ δύσκολο, και πρέπει επίσης να το κάνετε. Και τώρα, σε καμία συγκεκριμένη σειρά, (σχεδόν) όλα όσα θα πρέπει να γνωρίζετε:
1. Απόλυτη τοποθέτηση
Εάν θέλετε να ελέγξετε πού ένα στοιχείο ζει στην ιστοσελίδα μας ανά πάσα στιγμή, η απόλυτη τοποθέτηση είναι το κλειδί για να συμβεί αυτό. Αν νομίζετε ότι το πρόγραμμα περιήγησής σας είναι ένα μεγάλο κιβώτιο οριοθέτησης, η απόλυτη τοποθέτηση σάς επιτρέπει να ελέγχετε ακριβώς πού σε αυτό το κουτί θα παραμείνει ένα στοιχείο. Χρησιμοποιήστε τα πάνω, δεξιά, κάτω και αριστερά, συνοδευόμενα από μια τιμή εικονοστοιχείου για να ελέγξετε πού παραμένει ένα στοιχείο.
position:absolute;top:20px;right:20pxΤο CSS παραπάνω ορίζει τη θέση ενός στοιχείου για να παραμείνει 20px από την επάνω και δεξιά άκρη του προγράμματος περιήγησης. Μπορείτε επίσης να χρησιμοποιήσετε την απόλυτη τοποθέτηση μέσα στο div.
2. * + επιλογέας
Το * σας επιτρέπει να επιλέξετε όλα τα στοιχεία ενός συγκεκριμένου επιλογέα. Για παράδειγμα, αν χρησιμοποιούσατε * p και στη συνέχεια προσθέσατε στυλ CSS σε αυτό, θα το έκανε σε όλα τα στοιχεία του εγγράφου σας με ένα
ετικέτα. Αυτό καθιστά εύκολη την στόχευση τμημάτων του ιστοτόπου σας παγκοσμίως.
3. Απαλλαγή όλων των μορφών
Αυτό θα πρέπει να χρησιμοποιείται με φειδώ, γιατί αν το κάνετε αυτό για όλα, θα βρεθείτε σε μπελάδες μακροπρόθεσμα. Ωστόσο, εάν θέλετε να αντικαταστήσετε ένα άλλο στυλ CSS για ένα συγκεκριμένο στοιχείο, χρησιμοποιήστε το ! Σημαντικό μετά το στυλ στο css. Για παράδειγμα, εάν ήθελα οι κεφαλίδες Η2 σε συγκεκριμένο τμήμα της περιοχής μου να είναι κόκκινες αντί για μπλε, θα χρησιμοποιούσα το ακόλουθο CSS:
.section h2 { color:red !important; }4. Κεντράρισμα
Ο κεντράρισμα είναι δύσκολος, επειδή εξαρτάται από αυτό που προσπαθείτε να εστιάσετε. Ας ρίξουμε μια ματιά στο CSS των αντικειμένων που πρέπει να επικεντρωθούν, με βάση το περιεχόμενο.
Κείμενο
Το κείμενο κεντράρεται χρησιμοποιώντας το κείμενο-align: center. . Εάν θέλετε να είναι και στις δύο πλευρές, χρησιμοποιήστε το αριστερό ή το δεξί αντί για το κέντρο.
Περιεχόμενο
Ένα div (ή οποιοδήποτε άλλο στοιχείο) μπορεί να κεντραριστεί προσθέτοντας την ιδιότητα του μπλοκ σε αυτό και στη συνέχεια χρησιμοποιώντας τα περιθώρια αυτόματης αντιστοίχισης. Το CSS θα μοιάζει με αυτό:
#div1 {display: block;margin: auto;width: anything under 100%}Ο λόγος που έβαλα "οτιδήποτε κάτω από το 100%" για το πλάτος είναι επειδή αν ήταν 100% ευρύ, τότε αν ήταν πλήρους πλάτους και δεν θα χρειαζόταν κεντράρισμα. Είναι καλύτερο να έχετε σταθερό πλάτος, όπως 60% ή 550px, κ.λπ.
5. Κάθετη ευθυγράμμιση (για μια γραμμή κειμένου)
Θα το χρησιμοποιήσετε σε ένα μενού πλοήγησης CSS, μπορώ σχεδόν να εγγυηθώ αυτό. Το κλειδί είναι να κάνετε το ύψος του μενού και το ύψος γραμμής του κειμένου το ίδιο. Βλέπω αυτή την τεχνική πολύ όταν επιστρέφω και επεξεργάζομαι υπάρχουσες ιστοσελίδες για πελάτες. Ακολουθεί ένα παράδειγμα:
.nav li{line-height:50px;height:50px;}6. Επίδραση του δείκτη πτώσης
Αυτό χρησιμοποιείται για κουμπιά, συνδέσμους κειμένου, τμήματα bock του ιστότοπού σας, εικονίδια και πολλά άλλα. Εάν θέλετε κάτι να αλλάξει τα χρώματα όταν κάποιος κλίνει το ποντίκι πάνω από αυτό, χρησιμοποιήστε το ίδιο CSS, αλλά προσθέστε : τοποθετήστε το δείκτη του ποντικιού πάνω του και αλλάξτε το στυλ. Ακολουθεί ένα παράδειγμα:
.entry h2{font-size:36px;color:#000;font-weight:800;}.entry h2:hover{color:#f00;}Αυτό που κάνει αυτό είναι ότι αλλάζει το χρώμα της ετικέτας σας h2 από μαύρο σε κόκκινο, όταν κάποιος αιωρείται πάνω από αυτό. Το μεγάλο πράγμα για τη χρήση: hover είναι ότι δεν χρειάζεται να δηλώσετε πάλι το μέγεθος ή το βάρος του γράμματος, αν δεν αλλάζει. Αλλάζει μόνο ό, τι καθορίζετε.
Μετάβαση
Για εφέ κίνησης, όπως με μενού ή εικόνες στον ιστότοπό σας, δεν θέλετε τα χρώματα να σπάνε πολύ γρήγορα στο τελικό αποτέλεσμα. Στην ιδανική περίπτωση, θέλετε να διευκολύνετε τη σταδιακή αλλαγή, στην οποία θα αρχίσει να παίζει το μεταβατικό ακίνητο.
.entry h2:hover{color:#f00;transition: all 0.3s ease;}Αυτό κάνει την αλλαγή να συμβαίνει σε .3 δευτερόλεπτα, αντί να απλώς σπρώχνει αμέσως στο κόκκινο. Αυτό κάνει την επίδειξη αιωρήματος πιο ευχάριστη για το μάτι και λιγότερο εκνευριστική.
7. Καταστάσεις σύνδεσης
Αυτά τα στυλ χάνονται από πολλούς σχεδιαστές και προκαλούν πραγματικά προβλήματα χρηστικότητας με τους επισκέπτες σας. Η ψευδο-τάξη συνδέσεων ελέγχει όλους τους συνδέσμους στους οποίους δεν έχει γίνει ακόμη κλικ. Η : ψευδο-τάξη που επισκέπτεστε χειρίζεται το στυλ όλων των συνδέσμων που έχετε ήδη επισκεφθεί. Αυτό λέει στους επισκέπτες του ιστότοπου, όπου έχουν ήδη βρεθεί στον ιστότοπό σας, και όπου δεν έχουν ακόμη εξερευνήσει.
a:link { color: blue; }a:visited { color: purple; }8. Εύκολη αλλαγή μεγέθους εικόνων για να ταιριάζει
Μερικές φορές παίρνετε σε ένα τσίμπημα όπου οι εικόνες πρέπει να ταιριάζουν σε ένα ορισμένο πλάτος, ενώ η κλιμάκωση αναλογικά. Ένας εύκολος τρόπος να το κάνετε αυτό είναι να χρησιμοποιήσετε το μέγιστο πλάτος για να το χειριστείτε. Ακολουθεί ένα παράδειγμα:
img {max-width:100%;height:auto;}Αυτό σημαίνει ότι το μεγαλύτερο μέγεθος της εικόνας μπορεί να είναι το 100% και το ύψος υπολογίζεται αυτόματα, με βάση το πλάτος της εικόνας. Σε ορισμένες περιπτώσεις, ίσως χρειαστεί να καθορίσετε το πλάτος στο 100%.
9. Ελέγξτε τα στοιχεία ενός τμήματος
Χρησιμοποιώντας το παράδειγμα εικόνας παραπάνω, εάν θέλετε να στοχεύσετε μόνο τις εικόνες μιας συγκεκριμένης ενότητας, όπως το ιστολόγιό σας, χρησιμοποιήστε μια κλάση για την ενότητα ιστολογίου και συνδυάστε την με τον πραγματικό επιλογέα. Αυτό θα σας επιτρέψει να επιλέξετε μόνο τις εικόνες της ενότητας blog και όχι άλλες εικόνες, όπως το λογότυπό σας ή τα κοινωνικά εικονίδια ή εικόνες σε οποιαδήποτε άλλη ενότητα του ιστότοπού σας, όπως στην πλαϊνή γραμμή. Δείτε πώς θα φαίνεται το CSS:
.blog img{max-width:100%;height:auto;}10. Άμεση παιδιά
Θα ήθελα να το ήξερα αυτό όταν ξεκίνησα πρώτα με τη χρήση του CSS. Αυτό θα με έσωσε τόσο πολύ χρόνο! Χρησιμοποιήστε το > για να επιλέξετε τα άμεσα παιδιά ενός στοιχείου. Για παράδειγμα:
#footer > aΜε αυτόν τον τρόπο θα επιλέξετε και θα διαμορφώσετε όλα τα ενεργά στοιχεία συνδέσμων που βρίσκονται αμέσως κάτω από το αναγνωριστικό υποσέλιδου. Δεν θα επιλέξει τίποτα πέρα από το ενεργό στοιχείο ή οτιδήποτε άλλο περιέχεται στο υποσέλιδο, όπως το απλό κείμενο. Αυτό λειτουργεί εξαιρετικά με τα στοιχεία πλοήγησης κορυφαίου επιπέδου.
Συγκεκριμένα στοιχεία παιδιού
Πιστέψτε με, αυτό είναι βολικό όταν είστε λίστες στυλ. Απλά πρέπει να μετρήσετε πόσες επιλογές κάτω από το στοιχείο είναι ότι θέλετε να στυλ και στη συνέχεια να εφαρμόσετε αυτό το ύφος.
li:nth-child(2) {font-weight:800;color: blue;text-style:underline;}Το CSS παραπάνω στοχεύει στο δεύτερο στοιχείο της λίστας και το κάνει με έντονα, υπογραμμισμένα και μπλε χρώματα. Προσθέστε ένα "n" μετά τον αριθμό σε παρένθεση και μπορείτε να στοχεύσετε κάθε 2ο στοιχείο λίστας. Φανταστείτε να είστε σε θέση να στυλ κάθε άλλη γραμμή σε μια διάταξη στυλ πίνακα για εύκολη ανάγνωση. Το CSS θα είναι:
li:nth-child(2)11. Εφαρμογή CSS σε πολλαπλές κλάσεις ή επιλογείς
Ας υποθέσουμε ότι θέλετε να προσθέσετε ένα όμοιο περίγραμμα γύρω από όλες τις εικόνες, την ενότητα blog και την πλευρική γραμμή. Δεν χρειάζεται να γράφετε το ίδιο ακριβές CSS 3 φορές. Απλά απαριθμήστε αυτά τα στοιχεία, διαχωρισμένα με κόμματα. Ακολουθεί ένα παράδειγμα:
.blog, img, .sidebar {border: 1px solid #000;}Είτε είστε σχεδιαστής ιστοσελίδων για χρόνια, είτε απλά αρχίζετε, μαθαίνοντας πώς να φτιάχνετε ιστότοπους, ο σωστός τρόπος μπορεί να φανεί σαν ένα βραχώδες, ατελείωτο ταξίδι. Μόλις μειώσετε τις γλώσσες που θέλετε να μάθετε, πρέπει να μάθετε και να βελτιώσετε τις ικανότητές σας.
Ανεξάρτητα από το τι μαθαίνετε, το CSS είναι ένα από αυτά τα απαραίτητα, αλλά τρομακτικά δεξιότητες που πρέπει να καταλάβετε. Δεν χρειάζεται όμως να είναι τόσο δύσκολο, ειδικά αν γνωρίζετε μερικές πρακτικές και λιγότερο γνωστές τεχνικές CSS για να ολοκληρώσετε τη δουλειά σας.
12. μέγεθος κιβωτίου: πλαίσιο-πλαίσιο ·
Αυτό είναι ένα από τα αγαπημένα μεταξύ πολλών σχεδιαστές ιστοσελίδων, διότι λύνει το πρόβλημα των παραγεμισμάτων και τα θέματα διάταξης. Βασικά, όταν ορίσετε ένα κουτί σε ένα συγκεκριμένο πλάτος και προσθέσετε μια επένδυση σε αυτό, η επένδυση προσθέτει στο μέγεθος του κουτιού. Ωστόσο, με το μέγεθος του κιβωτίου: πλαίσιο-πλαίσιο? , αυτό είναι αναιρείται, και τα κιβώτια παραμένουν το μέγεθος που προορίζονται να είναι.
13.: πριν
Αυτό το CSS είναι ένας επιλογέας που σας επιτρέπει να επιλέξετε ένα στοιχείο CSS και να εισάγετε περιεχόμενο πριν από κάθε στοιχείο με συγκεκριμένη κλάση που εφαρμόζεται σε αυτό. Ας υποθέσουμε ότι είχατε έναν ιστότοπο στον οποίο θέλετε ένα συγκεκριμένο κείμενο πριν από κάθε ετικέτα H2. Θα μας κάνατε αυτό το setup:
h2:before {content: "Read: "; color: #F00;}Αυτό είναι εξαιρετικά βολικό, ειδικά αν χρησιμοποιείτε μια γραμματοσειρά εικονιδίων. Μπορείτε να τοποθετήσετε εικονίδια πριν από ορισμένα στοιχεία και να τα εφαρμόσετε παγκοσμίως.
14.: μετά
Όπως και ο προηγούμενος επιλογέας, μπορείτε να χρησιμοποιήσετε: μετά την εισαγωγή του περιεχομένου σε παγκόσμιο επίπεδο σε συγκεκριμένα στοιχεία. Μια πρακτική χρήση θα ήταν να προσθέσετε "διαβάστε περισσότερα" μετά από κάθε απόσπασμα σε ένα blog. Δείτε πώς θα το κάνατε αυτό.
p:after{content: " -Read more… ";color:#f00;}
15. περιεχόμενο
το περιεχόμενο είναι μια ιδιότητα CSS που έρχεται βολική όταν πρέπει να εισαγάγετε ένα στοιχείο που θέλετε να μπορείτε να ελέγξετε. Η πιο συνηθισμένη χρήση που έχω δει για αυτό είναι να εισαγάγετε ένα εικονίδιο από μια γραμματοσειρά εικονιδίων σε ένα συγκεκριμένο μέρος. Στα παραπάνω παραδείγματα, μπορείτε να δείτε ότι πρέπει να τυλίξετε το κείμενο που θέλετε να εισαγάγετε σε εισαγωγικά.
16. Επαναφορά CSS
Τα διαφορετικά προγράμματα περιήγησης έχουν προεπιλεγμένες ρυθμίσεις CSS, επομένως είναι απαραίτητο να επαναφέρετε αυτές τις ρυθμίσεις, ώστε να έχετε ένα σταθερό, συνεπές πεδίο παιχνιδιού. Σκεφτείτε το πως χτίζετε ένα σπίτι και αν χτίζετε στην πλευρά ενός βουνού, σε μια αμμώδη παραλία ή στη μέση μιας δασικής έκτασης, θέλετε το ίδρυμα να είναι επίπεδο.
Αυτή η μέθοδος επαναφοράς CSS θέτει μια τυπική βάση για όλους τους ιστοτόπους σας, δίνοντάς τους συνέπεια στο σημείο εκκίνησης του CSS. Αφαιρεί τα ανεπιθύμητα περιθώρια, τα προεπιλεγμένα περιθώρια, τα επιθέματα, τα ύψη των γραμμών, τα στυλ σε λίστες κ.λπ. Ο Eric Meyer δημιούργησε ένα που λειτουργεί καλά .
17. Καπάκια πτώσης
Όλοι αγαπούν τα καπάκια. Μας θυμίζει το παραδοσιακό έντυπο βιβλίο και είναι ένας πολύ καλός τρόπος για να ξεκινήσετε μια σελίδα περιεχομένου. Αυτό το πρώτο , μεγάλο γράμμα προσελκύει πραγματικά την προσοχή σας. Υπάρχει ένας εύκολος τρόπος για να δημιουργήσετε ένα καπάκι πτώσης στο css, και είναι με τη χρήση του στοιχείου ψευδο:: πρώτο γράμμα. Ακολουθεί ένα παράδειγμα:
p:first-letter{display:block;float:left;margin:3px;color:#f00;font-size:300%;}Αυτό που κάνει αυτό είναι να ορίσετε το γράμμα σε 3x το μέγεθος των άλλων γραμμάτων. Ρυθμίζει 3px χώρο γύρω από το γράμμα για να αποφευχθεί η επικάλυψη και ορίζει το χρώμα του γράμματος στο κόκκινο.
18. Δέσε το κείμενο να είναι όλα τα κεφαλαία, όλα πεζά ή κεφαλαία
Θα ήταν παράλογο να πληκτρολογήσετε ολόκληρο το τμήμα σε όλα τα ανώτατα όρια. Φανταστείτε να επιστρέψετε και να το διορθώσετε αργότερα, όταν αλλάξει η μορφή του ιστότοπου ή ενημερωθεί. Αντ 'αυτού, χρησιμοποιήστε τα παρακάτω στυλ css για να εξαναγκάσετε το κείμενο σε μια συγκεκριμένη μορφοποίηση. Αυτό το css στοχεύει στην ετικέτα τίτλου h2.
- h2 {text-transform: κεφαλαία; } - όλα τα ανώτατα όρια
- h2 {text-transform: πεζά; } - όλα τα πεζά
- h2 {κείμενο-μετασχηματισμός: κεφαλαία; } - κεφαλαιοποιεί το πρώτο γράμμα κάθε λέξης.
19. Κάθετο ύψος οθόνης
Μερικές φορές θέλετε μια ενότητα να γεμίσει ολόκληρη την οθόνη, ανεξάρτητα από το μέγεθος της οθόνης. Μπορείτε να ελέγξετε αυτό με vh, ή να δείτε ύψος. Ο αριθμός πριν από αυτό είναι ένα ποσοστό, οπότε αν θέλετε να γεμίσει το 100% του προγράμματος περιήγησης, θα το ορίσετε στο 100. Μπορεί να το ορίσετε σε μια τιμή όπως το 85% για να φιλοξενήσει ένα σταθερό μενού πλοήγησης.
Δημιουργήστε μια κλάση για το δοχείο και εφαρμόστε το ποσό του vh που θέλετε να έχει. Ένα πράγμα που μπορεί να χρειαστεί να τσίμπημα είναι η τιμή ερώτησης μέσων για συγκεκριμένες οθόνες ή προσανατολισμούς, όπως τα τηλέφωνα σε κατάσταση πορτραίτου. Φανταστείτε να τεντώσετε μια εικόνα τοπίου για να ταιριάζει σε πορτραίτο. Αυτό απλά δεν θα φαινόταν καλό.
.fullheight { height: 85vh; }20. Τηλεφωνικοί σύνδεσμοι στυλ
Εάν έχετε έναν σύνδεσμο που καλεί έναν αριθμό τηλεφώνου όταν ένας χρήστης συνδέει το τηλέφωνο με το τηλέφωνό του, ίσως έχετε πρόβλημα να το στυλίσουμε με τον παραδοσιακό ενεργό επιλογέα συνδέσμων. Αντ 'αυτού, χρησιμοποιήστε το ακόλουθο CSS:
a[href^=tel] { color: #FFF; text-decoration: none;}