Υπάρχουν πολλές CSS tutorials είναι διαθέσιμες στο διαδίκτυο, αλλά τα λίγα μαθήματα είναι χρήσιμα. Σε αυτό το σεμινάριο θα βρείτε 5 βήματα για να γράψουν καλύτερο κώδικα CSS για την επόμενη ιστοσελίδα του έργου σας. Ελπίζω ότι θα απολαύσετε αυτό το σεμινάριο.

1. ResetCss

Πρέπει πάντα να χρησιμοποιείτε επαναφέρετε αν μπορεί να Eric Meyer Επαναφορά, η YUI Reset, ή τη δική σας προσαρμοσμένη επαναφορά, απλά χρησιμοποιήστε κάτι.

Ο στόχος της επαναφοράς stylesheet είναι να μειωθούν οι αντιφάσεις στο πρόγραμμα περιήγησης πράγματα όπως ύψη γραμμή προεπιλογή, τα περιθώρια και μεγέθη γραμματοσειρών των κλάσεων, και ούτω καθεξής - Eric Meyer

  html, body, div, span, applet, αντικείμενο, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, ακρωνύμιο, διεύθυνση, μεγάλα, αναφέρω, κωδικός, del, DFN, em, 
  γραμματοσειρά, IMG, INS, KBD, q, s, Samp, μικρά, υπο απεργία, ισχυρή,, sup, tt, var, 
  dd, dl, dt, fieldset, μορφή, ετικέτα, θρύλος, πίνακας, τίτλος, tbody, tfoot, 
  thead, tr, th, td, input, επιλέξτε, textarea 

  ; padding : 0 ; } (Margin: 0? Padding: 0?) 


  ; padding : 0 ; } * (Margin: 0? Padding: 0?) 

2. CSS Στενογραφία

Ένα από τα καλύτερα και σημαντικό χαρακτηριστικό των CSS είναι η ικανότητα να γράφουν κώδικα σε ένα ελαχιστοποιημένο τρόπο.

Εσφαλμένη Κωδικός

  ( 
  margin-top: 10px? 
  margin-right: 7px? 
  margin-bottom: 10px? 
  margin-left: 7px? 

  padding-top: 10px? 
  padding-right: 7px? 
  padding-bottom: 10px? 
  padding-left: 7px? 

  font-size: 12px? 
  font-weight: bold? 
  ; font-οικογένεια: Arial, Verdana, Tahoma, sans-serif? 
  ) 

Σωστό Κωδικός

 : 10px 7px 10px 7px ; padding : 10px 7px 10px 7px ; font :bold 12px Arial, Verdana, Tahoma, sans-serif ; } (Margin: 10px 7px 10px 7px? Padding: 10px 7px 10px 7px? Γραμματοσειρά: bold 12px Arial, Verdana, Tahoma, sans-serif?) 

3. Μην χρησιμοποιείτε τόσα πολλά μαθήματα και την ταυτότητα του

Έχω παρατηρήσει ότι οι περισσότεροι από τους αρχάριους προσθέσετε τάξεις και ταυτότητας για σχεδόν κάθε στοιχείο της σελίδας, η οποία δεν είναι required.There είναι μερικά παραδείγματα κάτω από ό, τι αναφέρομαι.

Εσφαλμένη Κωδικός

 class = "wrapper" > <p class = "heading" > <strong class = "subheading" > Welcome </strong> </p> <p class = "linka" > <a href = "#" class = "link" > Home </a> </p> <p class = "linkb" > <a href = "#" class = "link" > About </a> </p> <p class = "linkc" > <a href = "#" class = "link" > Services </a> </p> <p class = "linkd" > <a href = "#" class = "link" > Contact </a> </p> </div> <div id = "wrapper" class = "wrapper"> class <p = "heading"> <strong class = "subheading"> Καλώς </ strong> </ p> class <p = "linka"> <a href = "#" class = "link"> Αρχική </ a> </ p> class <p "linkb" => href <a = "#" class "link" => Πληροφορίες </ a> </ p> <p class = "linkc"> href <a = "#" class = "link"> Υπηρεσίες </ a> </ p> class <p "linkd" => href <a = "#" class "link" => Επικοινωνία </ a> </ p> </ p> 

Εδώ είναι το σωστό κωδικό

Σωστό Κωδικός

  > <h1> Welcome </h1> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Contact </a> </li> </ul> </div> <div id = "wrapper"> <h1> Καλώς </ h1> <ul> <li> href <a = "#"> Αρχική </ a> </ li> <li> href <a = "#"> Πληροφορίες </ a> </ li> <li> href <a "#" => Υπηρεσίες </ a> </ li> <li> href <a "#" => Επικοινωνία </ a> </ li> < / ul> </ p> 

4. Οργάνωση σας Stylesheet

Θα πρέπει να οργανώσετε stylesheet σας έτσι ώστε να είναι εύκολο να βρει κανείς τα πράγματα και συναφή είδη είναι κοντά μεταξύ τους. Παρατηρήσεις Χρήση αποτελεσματικά. Για παράδειγμα, υπάρχει το παράδειγμα θα σας πει πώς να οργανώσετε stylesheet σας

  / * Reset * / 
   elements Αφαιρέστε περιθώριο και στοιχεία padding 

  / * Βασικά στοιχεία * / 
  Ορίστε στυλ για τα βασικά στοιχεία: σώμα, H1, H2, H3, H4, H6, ol, ul, dl, p κ.λπ. 

  / * Μαθήματα Generic * / 
  Ορίστε στυλ για γενικές κατηγορίες: απλά πράγματα, όπως αφαίρεση κάτω,  
  επιπλέουν στην πλευρές κλπ.  
  / * Βασικές Layout * / 

  / * Βασικές Layout * / 
  Ορίστε το στυλ για τη βασική διάταξη: header.  υποσημείωση, πλαϊνή μπάρα κ.λπ. 

  / * Header * / 
  Ορίστε το στυλ για κεφαλίδα 

  / * Περιεχόμενο * / 
  Ορίστε το στυλ για το περιεχόμενο περιοχή 

  / * Footer * / 
  Ορίστε το στυλ για το υποσέλιδο 

  / * Etc * / 
  Συνέχεια 

5. Χρήση Φύλλαστυλ υπό όρους

Ο Internet Explorer είναι το πιο λάθη από όλες τις μηχανές αναζήτησης. Ευτυχώς, μπορείτε να χρησιμοποιήσετε εξαρτάται από τις παρατηρήσεις για τη διαχείριση των CSS που σερβίρονται σε IE. Αν μου την έχουν ανάγκη έχω ένα στυλ που ονομάζεται ie6.css ότι οι στόχοι παλαιότερες εκδόσεις του IE. Θα μου επιτρέπει να διαχειριστείτε CSS για μεγάλα προγράμματα περιήγησης γρήγορα και εύκολα.

Εδώ είναι το Παράδειγμα

  <!--[ if LTE IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > rel <link = "stylesheet" href = "ie6.css" τύπο = "text/css" μέσα ενημέρωσης = "screen" /> 
 
  -- > <! [Endif] -> 

Συμπέρασμα

Αυτές είναι μερικές μόνο από τις συμβουλές που θα με βοηθήσει να γράψω καλύτερο κώδικα. Ελπίζω ότι το σεμινάριο θα σας βοηθήσει επίσης να γράψετε καλύτερα και καθαρό κώδικα. Εφαρμόστε αυτές τις άκρες για την τρέχουσα και την επόμενη έργα σας, και εσείς σίγουρα θα εκτιμήσουν τις προσπάθειες.

Αν νομίζετε ότι το σεμινάριο μπορεί να είναι πιο καλύτερα, παρακαλώ μοιραστείτε μαζί μας. Σχόλιο μας

εάν επιθυμείτε να λάβετε περισσότερες έμπνευση από εμάς, παρακαλώ σκεφτείτε να εγγραφείτε για να μας ζωοτροφές από RSS ή με ηλεκτρονικό ταχυδρομείο.

Filed under: Css, Tutorials από admin