20 Χρήσιμες συμβουλές CSS για αρχάριους

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

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

1. Χρήση reset.css

   Όταν πρόκειται για την απόδοση στυλ CSS, τα προγράμματα περιήγησης όπως το Firefox και ο Internet Explorer έχουν διαφορετικούς τρόπους χειρισμού τους. reset.css επαναφέρει όλα τα θεμελιώδη στυλ, έτσι ξεκινάτε με ένα πραγματικό κενό νέο stylesheets.

   Εδώ είναι λίγοι συνήθως χρησιμοποιούνται reset.css πλαισίων - Yahoo Επαναφορά CSS, Επαναφορά του CSS του Eric Meyer, Τρίπολις

2. Χρησιμοποιήστε τη συντομογραφία CSS

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

   Αντί να δημιουργείτε CSS όπως αυτό

   .κεφαλίδα χρώμα-φόντου: #fff; εικόνα φόντου: διεύθυνση URL (image.gif); αναπαράσταση φόντου: όχι-επανάληψη Θέση φόντου: πάνω αριστερά. 

   Μπορεί να είναι βραχυπρόθεσμα στα εξής:

   .header background: #fff url (image.gif) δεν επαναλαμβάνεται προς τα επάνω αριστερά

   Περισσότερο - Εισαγωγή στη CSS στενογραφία, Χρήσιμες ιδιότητες στενογραφίας CSS

3. Κατανόηση Τάξη και ταυτότητα

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

   Περισσότερο - Κατηγορία έναντι ταυτότητας | Πότε πρέπει να χρησιμοποιήσετε την κλάση, ID | Εφαρμόζοντας μαζί την κλάση και το αναγνωριστικό

4. Δύναμη από

5. a.k.a μια λίστα συνδέσεων, είναι πολύ χρήσιμη όταν χρησιμοποιούνται σωστά με
   ή
   , ιδιαίτερα για να στυλ ένα μενού πλοήγησης.

   • Ξεχνάμε , προσπαθήστε

     Ένα από τα μεγαλύτερα πλεονεκτήματα του CSS είναι η χρήση του

     για να επιτευχθεί η συνολική ευελιξία όσον αφορά το styling.

     είναι αντίθετες

     , όπου τα περιεχόμενα είναι «κλειδωμένα» μέσα σε ένα

     's cell. Είναι ασφαλές να πούμε τα περισσότερα οι διατάξεις είναι εφικτές με τη χρήση του και το σωστό στυλ, και ίσως εκτός από τα μαζικά πίνακα περιεχομένων. Περισσότερο - Οι πίνακες είναι νεκροί, Πίνακες Vs. CSS, CSS vs πίνακες Εργαλείο εντοπισμού σφαλμάτων CSS Είναι πάντα καλό να λαμβάνετε άμεση προεπισκόπηση της διάταξης ενώ τροποποιείτε το CSS, βοηθά καλύτερα στην κατανόηση και την αποσφαλμάτωση των στυλ CSS. Εδώ είναι μερικά δωρεάν εργαλεία εντοπισμού σφαλμάτων CSS που μπορείτε να εγκαταστήσετε στο πρόγραμμα περιήγησης: FireFox Web Developer, DOM Inspector, γραμμή εργαλείων προγραμματιστών του Internet Explorer και Firebug. Αποφύγετε τους περιττούς επιλογείς Μερικές φορές, η δήλωση CSS μπορεί να είναι πιο απλή, δηλαδή αν βρεθείτε να κωδικοποιήσετε τα εξής: ul li ... ol li ... πίνακας tr td ... Μπορούν να μειωθούν σε μόλις li ... td ... Εξήγηση: θα υπάρχουν μόνο μέσα ή και και θα είναι μόνο μέσα οπότε δεν είναι πραγματικά απαραίτητο να τα τοποθετήσετε ξανά. Γνωρίζων !σπουδαίος Οποιοδήποτε στυλ σημειώνεται με !σπουδαίος θα τεθεί σε χρήση ανεξάρτητα εάν υπάρχει κανένας αντικαταστάσεως κάτω από αυτό. .σελίδα χρώμα-φόντου: μπλε! φόντο-χρώμα: κόκκινο · Στο παραπάνω παράδειγμα, φόντο-χρώμα: μπλε θα προσαρμοστεί επειδή έχει επισημανθεί με !σπουδαίος, ακόμα και όταν υπάρχει α φόντο-χρώμα: κόκκινο; κάτω από αυτό. !σπουδαίος χρησιμοποιείται σε κατάσταση όπου θέλετε να αναγκάσετε ένα στυλ χωρίς να το αντικαταστήσετε, ωστόσο ενδέχεται να μην λειτουργήσει στον Internet Explorer. Αντικαταστήστε το κείμενο με την εικόνα Αυτό είναι συνήθως πρακτική να αντικατασταθεί τίτλος από τίτλο που βασίζεται σε κείμενο σε εικόνα. Εδώ είναι πώς το κάνετε. h1 κείμενο-παύλα: -9999px; υπόβαθρο: url ("title.jpg") χωρίς επανάληψη. πλάτος: 100px; ύψος: 50px; Εξήγηση: κείμενο-παύλα: -9999px; ρίχνει τον τίτλο κειμένου εκτός οθόνης, αντικαταστάθηκε από μια εικόνα που δηλώθηκε από Ιστορικό: … με σταθερό πλάτος και ύψος. Κατανοήστε την τοποθέτηση CSS Το παρακάτω άρθρο σας δίνει μια σαφή κατανόηση στη χρήση της τοποθέτησης CSS - θέση: ... Περισσότερο - Μάθετε την τοποθέτηση CSS σε δέκα βήματα CSS @εισαγωγή vs Υπάρχουν 2 τρόποι να καλέσετε ένα εξωτερικό αρχείο CSS - αντίστοιχα @εισαγωγή και . Εάν δεν είστε βέβαιοι για τη μέθοδο που θα χρησιμοποιήσετε, δείτε μερικά άρθρα που θα σας βοηθήσουν να αποφασίσετε. Περισσότερο - Διαφορά μεταξύ @import και συνδέσμου Σχεδιασμός εντύπων σε CSS Οι φόρμες ιστού μπορούν εύκολα να σχεδιαστούν και να προσαρμοστούν με το CSS. Αυτά τα παρακάτω άρθρα σας δείχνουν πώς: Περισσότερο - Μορφή χωρίς τραπέζι, Φόρμα Κήπου, Διαμόρφωση ακόμη περισσότερων ελέγχων φόρμας Εμπνέομαι Εάν ψάχνετε γύρω για ένα όμορφα σχεδιασμένο CSS με βάση την ιστοσελίδα για έμπνευση, ή απλά περιηγηθείτε για να βρείτε κάποια καλή UI, εδώ είναι μερικά CSS βιτρίνα site συνιστούμε: CSS Remix CSS Beauty CSS Elite CSS Mania Διαρροή CSS Κρατήστε τους κωδικούς CSS καθαρό Αν οι κωδικοί σας CSS είναι βρώμικοι, θα καταλήξετε να δημιουργήσετε σύγχυση και να δυσκολευτείτε να αναφέρετε τον προηγούμενο κώδικα. Για αρχάριους, μπορείτε να δημιουργήσετε σωστή εσοχή, να τα σχολιάσετε σωστά. Περισσότερο - 12 αρχές για να διατηρήσετε τον κώδικα σας καθαρό, Μορφοποίηση κωδικών CSS σε απευθείας σύνδεση Μετρήσεις τυπογραφίας: px vs em Έχει πρόβλημα να επιλέξει πότε να χρησιμοποιήσετε τη μονάδα μέτρησης px ή em? Αυτά τα παρακάτω άρθρα μπορούν να σας δώσουν μια καλύτερη κατανόηση σχετικά με τις μονάδες τυπογραφίας. Πίνακας συμβατότητας προγραμμάτων περιήγησης CSS Όλοι γνωρίζουμε ότι κάθε πρόγραμμα περιήγησης έχει διαφορετικούς τρόπους εμφάνισης στυλ CSS. Είναι καλό να έχετε μια αναφορά, ένα γράφημα ή μια λίστα που να δείχνει ολόκληρη τη συμβατότητα CSS για κάθε πρόγραμμα περιήγησης. Πίνακας υποστήριξης CSS: # 1, # 2, # 3, # 4. Σχεδίαση πολλών καλαθιών στο CSS Έχετε πρόβλημα με τη σωστή ευθυγράμμιση της αριστεράς, μέσης και δεξιάς στήλης; Εδώ είναι μερικά άρθρα που θα μπορούσαν να βοηθήσουν: Στην αναζήτηση του Αγίου Δισκοπότηρου Faux Columns Οι κορυφαίοι λόγοι για τους οποίους οι στήλες CSS σας έχουν ενοχληθεί Λιθοειδή κουτιά (παραδείγματα) Διατάξεις πολλαπλών στηλών ανεβαίνουν από το κουτί Απόλυτες στήλες Αποκτήστε έναν ελεύθερο επεξεργαστή CSS Οι ειδικοί συντάκτες είναι πάντα καλύτεροι από ένα σημειωματάριο. Εδώ είναι μερικοί συνιστούμε: Περισσότερο - Απλό CSS, Μπλοκ ΣΗΜΕΙΩΣΕΩΝ ++, Ένας επεξεργαστής στυλ CSS Κατανόηση των τύπων μέσων Υπάρχουν μερικοί τύποι μέσων όταν δηλώνετε το CSS με . η εκτύπωση, η προβολή και η οθόνη είναι μερικοί από τους συνήθεις τύπους. Η κατανόησή τους και η σωστή χρήση τους επιτρέπουν την καλύτερη πρόσβαση των χρηστών. Το ακόλουθο άρθρο εξηγεί τον τρόπο αντιμετώπισης των τύπων μέσων CSS. Περισσότερο - CSS και Τύποι μέσων, Τύποι μέσων W3, Τύποι μέσων CSS, Τύποι μέσων CSS2 20 Χρήσιμες εφαρμογές iPhone για προγραμματιστές και σχεδιαστές 20 Χρήσιμα εργαλεία SVG για καλύτερη γραφική παράσταση 20 εξαιρετικά ελαφριές και κομψές γραμματοσειρές για τους σχεδιαστές ιστοσελίδων Επόμενο άρθρο 20 Χρήσιμα πρόσθετα Sidebar του Firefox Προηγούμενο άρθρο 20 χρήσιμες εφαρμογές για να αξιοποιήσετε στο έπακρο το Instagram