Toolbox CSS
7 Μάη 2008 από chriscoyier · 13 Σχόλια 
Τι είναι Toolbox CSS;
Εργαλειοθήκη CSS είναι στυλ πληροφορίες που δεν έχει τίποτα να κάνει αποκλειστικά με κάποιο συγκεκριμένο δικτυακό τόπο. Πρόκειται για μια συλλογή από κοινού στυλ που μπορεί να είναι χρήσιμη για κάθε έργο διαδίκτυο. Πόσες φορές έχετε γράψει μια τάξη για την εκκαθάριση χρηματικού αποθέματος; Πάρα πολλοί, είναι εικασία μου. Η ιδέα με Toolbox CSS είναι να περιλαμβάνει ένα ξεχωριστό στυλ για αυτές τις «χρησιμότητα» στυλ.
What ISN'T Toolbox CSS?
Εργαλειοθήκη CSS isn'ta CSS επαναφορά. Εργαλειοθήκη CSS isn'ta CSS-πλαίσιο. Εργαλειοθήκη CSS περιέχει Δεν του στυλ "ψυχή" που κάνει κάθε σχέδιο web μοναδική.
Γιατί να κάνετε Εργαλεία CSS;
Χρησιμοποιώντας Εργαλεία CSS θα σας εξοικονομήσει χρόνο. Θα σας σώζει από εγγράφως την ίδια στυλ ξανά και ξανά και ξανά. Ανάγκη για να επιπλεύσει κάτι προς τα αριστερά; Μπορείτε πάντα να υπολογίζετε στην εργαλειοθήκη σου. Θα σας βοηθά επίσης να διατηρηθεί η συνέπεια μεταξύ των χώρων σας. Εάν χρησιμοποιείτε πάντα την ίδια εργαλειοθήκη, επισημάνσεις σας θα μοιράζονται τα ίδια κοινά ονόματα τάξη και καθιστά ευκολότερο για σας να μεταβείτε πίσω και να κατανοήσουν.
Ο κώδικας
Ο κωδικός για το Toolbox CSS είναι κάτω. Ή, χρησιμοποιήστε την άμεση σύνδεση.
/* Toolbox CSS Chris Coyier http://css-tricks.com */ /* LAYOUT TOOLS */ .floatLeft { float: left; } .floatRight { float: right; } .clear { clear: both; } .layoutCenter { margin: 0 auto; } .textCenter { text-align: center; } .textRight { text-align: right; } .textLeft { text-align: left; } /* PRINT TOOLS */ .page-break { page-break-before: always; } /* TYPOGRAPHIC TOOLS */ .error { border: 1px solid #fb4343; padding: 3px; color: #fb4343; } .warning { border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; } .success { border: 1px solid #149b0d; padding: 3px; color: #149b0d; } .callOut { font-size: 125%; font-weight: bold; } .strikeOut { text-decoration: line-through; } .underline { text-decoration: underline; } .resetTypeStyle { font-weight: normal; font-style: normal; font-size: 100%; text-decoration: none; background-color: none; word-spacing: normal; letter-spacing: 0px; text-transform: none; text-indent: 0px; } /* STYLING EXTRAS */ a[href^="mailto"] { background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; } a[href~=".pdf"] { background: url(images/pdfIcon.png) left center no-repeat; padding-left: 10px; } a.button { color: black; border: 1px solid black; padding: 3px; } a.button:hover { background: black; color: white; } .transpBlack { background: url(images/transpBlack.png); } /* DISPLAY VALUES */ .hide { display: none; } .show { display: block; } .invisible { visibility: hidden; } A Little Επεξήγηση
Η αλλαγή σελίδας: Με την προσθήκη του "σελίδα-break" τάξη, μια νέα σελίδα θα ξεκινήσει κατά την εκτύπωση του δικτυακού τόπου σε έναν εκτυπωτή. Χρήσιμες πριν μεγάλες εικόνες ή μεγάλα τμήματα.
Extras Styling: Αυτά τα κάνουν αναφορά σε ένα ζευγάρι των αρχείων εικόνας που δεν έχουν συμπεριληφθεί εδώ. Υπάρχουν πολλά μέρη για να βρείτε ωραία εικονίδια, δοκιμάστε Finder Icon.
Αξίες Display: Υπάρχει μια διαφορά μεταξύ απεικόνιση: Δεν υπάρχει και η ορατότητα: κρυφή. Η ρύθμιση της οθόνης σε τιμή Δεν θα αφαιρέσετε το κουτί διάταξη από τη σελίδα, προκαλώντας εκ νέου ροή. Μερικές φορές επιθυμητό, μερικές φορές δεν είναι. Εάν επιθυμείτε απλά να κρύψει ένα στοιχείο, αλλά αφήνουν το χώρο που καταλαμβάνει άθικτα, χρησιμοποιήστε το χαρακτηριστικό ορατότητα.
Ήμουν δίδαξε ότι για ένα ". Σαφές" κατηγορία, θα πρέπει να έχετε
ύψος: 1px?
line-height: 1px?
font-size: 1px?
margin-top:-1px?
σαφής: οι δύο?
Είναι αυτό υπερβολή; Η αντίληψή μου ήταν αυτή ήταν για τον καθορισμό ορισμένων IE προβλήματα.
Σκέψεις;
Μια σελίδα demo για αυτά θα ήταν ωραία, είναι προφανές τι κάνουμε κάποιες περβάζι, οι τάξεις τυπογραφία δεν είναι τόσο προφανής.
Thanks, καλύτερα από ένα πλαίσιο, και απλά!
Looks great! Πραγματικά, όπως το τμήμα Styling Extras. Πολύ χρήσιμο, μέτωπο-smacking νίκη για μένα είναι η resetTypeStyle τάξη ... brilliant. Νομικά ζητήματα - αν θέλουμε να τροποποιήσει αυτό το κάνουμε σε μεγάλο βαθμό σε αυτό προσθέσουμε το όνομά μας ως mod στην ψευδο-περιοχή πνευματικά δικαιώματα; Αν το καταργήσει εντελώς θα μας κυνηγούν κάτω και ...;
@ Pat έχω δει τέτοια πράγματα πριν, αλλά νομίζω ότι είναι περιττό. Δεν είμαι αρκετά σίγουρος ποιο είναι το πρόβλημα αυτό λύνει πραγματικά και φαίνεται σαν να μπορούσε να προκαλέσει στην πραγματικότητα περισσότερα πιθανά προβλήματα από όσα επιλύει. Είμαι πρόθυμη να ακούσει περισσότερα σχετικά με το αν!
@ Kevin: Μπορείτε να κάνετε ό, τι θέλεις με αυτό, να προχωρήσει και να αφαιρέσετε το όνομα, δεν πειράζει!
Αρκετά καλή ιδέα ...
Ωραίο άρθρο και CSS εργαλείου!
Βρήκα ένα μικρό λάθος όμως: η γραμμή: α [~ href = ". Pdf] ... λείπει ένα" μετά τη λέξη pdf και έτσι το CSS θα σταματήσει εκεί με την εκτέλεση. Θα πρέπει να διαβάσετε: ένα σωστά [~ href = . pdf "] ....
Συνεχίστε την καλή δουλειά σας, αγάπη άρθρα σας.
@ Pat - πάνω σκοτώσουν ...
KISS είναι πάντοτε η καλύτερη μέθοδος.
@ Chris - Αυτό είναι πολύ καλύτερη από μια ανόητη επαναφορά ή κάποιο πλαίσιο, το οποίο προσθέτει μόνο πρησμένο σκουπίδια στους ιστοχώρους.
@ Χάρη Marlyse, ότι πράγματι ήταν ένα συντακτικό λάθος στον κώδικα που εμφανίζεται στο άρθρο, έχω εκείνη που έχει καθοριστεί.
Ποια προγράμματα περιήγησης υποστηρίζουν αυτό το στυλ;
Αυτό είναι ένα μεγάλο βήμα προς τα πίσω, αν πιστεύετε σχεδιασμού και της κατασκευής θα πρέπει να διαχωρίζονται. Είναι πραγματικά μόνο μια shortcutted εκδοχή του χρησιμοποιώντας inline στυλ ... δεν είναι ακριβώς ιδανική.
@ Tobias Συμφωνώ, τάξης θα πρέπει να περιγράφει το περιεχόμενο που σήμα επάνω, έτσι, ένα στυλ φύλλων μπορεί να εφαρμοστεί το στυλ για μια συγκεκριμένη κατάσταση, το σχεδιασμό, ή σελίδα.
@ Jermayn reset style-φύλλα είναι ωραία, αν σας ανησυχούν σχετικά με τη διατήρηση πράγματα όπως τα μεγέθη γραμματοσειρών, τα ύψη γραμμή, κ.λπ. περιθώρια. συνεπής σε πολλούς φυλλομετρητές. Υπάρχουν κάποια που μπορεί να είναι πρησμένο, αλλά σε γενικές γραμμές εξυπηρετούν μια γενικότερη λειτουργία του ΙΜΟ.
Το πιο ισχυρό πτυχή αυτού πιστεύω ότι είναι η ικανότητα να πηδήσει πέρα δώθε μεταξύ των διαφόρων χώρων, και να αισθάνονται άνετα.
Ο καθένας θα μπορούσε να δημιουργήσει μια «εργαλειοθήκη» για τον εαυτό τους με βάση αυτό που βολεύει, αλλά για να είμαστε ειλικρινείς: ποιος θα ήταν; Ειδικά όταν κάποιος άλλος έχει κάνει για σας.
Καλή δουλειά.
Τα ονόματα των κατηγοριών δεν είναι σημασιολογικές και περιέχουν αναφορές οπτικής επαφής - που είναι ένα μεγάλο "nono". Αν ο πελάτης, για παράδειγμα, αποφασίζει να αλλάξει τη διάταξη του κειμένου του περιέκτη ορισμένες θέλετε δύο κακές επιλογές: 1. αναζήτηση και αντικατάσταση όλων η «κατηγορία =" textRight "» με κάτι άλλο, το οποίο νίκησε η όλη ιδέα της CSS και θα μπορούσαν να προκαλέσουν ανεπιθύμητα αποτελέσματα (όπως η αλλαγή κάτι που δεν θα έπρεπε), ή 2. αλλάξετε το στυλ μόνο, στο εσωτερικό της δήλωσης τάξη, η οποία είναι ορθή χρήση των CSS, αλλά θα σας αφήσει με μια κατηγορία που ονομάζεται "textRight" που ευθυγραμμίζει το κείμενο στα αριστερά. Οποία θα προβεί σε συνολική χάος έξω από το στρώμα παρουσίασης.
Επίσης, χαρακτηριστικό επιλογείς δεν υποστηρίζονται πλήρως και δεν πρέπει να χρησιμοποιούνται.
Αντίθετη περίπτωση, είναι μια ωραία ιδέα, αλλά λίγο δύσκολο να εφαρμόσουν, όπως είναι.