Ci sono un sacco di tutorial CSS sono disponibili su internet, ma poche le esercitazioni sono utili. In questo tutorial troverete 5 passi a scrivere meglio il codice CSS per il vostro prossimo progetto del sito. Spero che potrete godere di questo tutorial.

1. ResetCss

Si dovrebbe usare sempre reset se si può Eric Meyer Reset, il Reset YUI, o il reset personalizzati, basta usare qualcosa.

L'obiettivo di un foglio di stile reset è quello di ridurre le incoerenze del browser in cose come altezze linea predefinita, i margini e le dimensioni dei caratteri delle voci, e così via - Eric Meyer

  html, body, div, span, applet, object, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, acronym, indirizzo, big, cite, code, del, DFN, em, 
  font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
  dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot, 
  thead, tr, th, td, input, select, textarea 

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


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

2. CSS stenografia

Uno dei migliori e importanti funzionalità di CSS è la capacità di scrivere codice in modo ridotto.

Codice errato

  ( 
  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-family: Arial, Verdana, Tahoma, sans-serif; 
  ) 

Corretto codice

 : 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; font: bold 12px Arial, Verdana, Tahoma, sans-serif;) 

3. Non utilizzando le classi tante e Id

Ho notato che la maggior parte dei principianti aggiungere classi e ID di quasi ogni elemento della pagina, che non è required.There sono alcuni esempi di sotto di quello che mi riferisco.

Codice errato

 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" => class <strong "subheading" => Benvenuti </ strong> </ class p <p = "linka"> <a href = "#" class = "link"> Home </ a> </ class p <p "linkb" => href <a = "#" class = "link"> Informazioni </ a> </ p> <p href class = "linkc"> <a = "#" class = "link"> Servizi </ a> </ class p <p "linkd" => href <a = "#" class = "link"> Contatti </ a> </ p> </ div> 

Ecco il codice corretto

Codice corretto

  > <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> Benvenuto </ h1> <ul> <li> href <a = "#"> Home </ a> </ li> <li> href <a = "#"> circa </ a> </ li> <li> href <a = "#"> Servizi </ a> </ li> <li> href <a "#" => Contatto </ a> </ li> < / UL> </ div> 

4. L'organizzazione è di stile

Si dovrebbe organizzare il vostro foglio di stile in modo che sia facile trovare le cose e gli oggetti correlati sono vicine tra loro. Usare i commenti in modo efficace. Ad esempio, vi è l'esempio vi dirà come organizzare il vostro foglio di stile

  / * Reset * / 
   elements Rimuovere margine ed elementi padding 

  / * Elementi di base * / 
  Definire lo stile per gli elementi di base: corpo, H1, H2, H3, H4, H6, OL, UL, DL, p ecc 

  / * Classi generico * / 
  Definire lo stile per le classi generiche: le cose semplici come rimuovere il fondo,  
  galleggianti ai lati ecc  
  / * Layout di base * / 

  / * Layout di base * / 
  Definire lo stile per il layout di base: intestazione.  footer, sidebar, ecc 

  / * Header * / 
  Definire lo stile di intestazione 

  / * Contenuto * / 
  Definire lo stile per l'area dei contenuti 

  / * Footer * / 
  Definire lo stile di piè di pagina 

  / * Etc * / 
  Continua 

5. Uso condizionale Stylesheets

Internet Explorer è il passeggino più di tutti i browser. Fortunatamente è possibile utilizzare i commenti condizionali per gestire i CSS che è servita a IE. Se ne ho bisogno io ho un foglio di stile chiamato ie6.css che gli obiettivi di vecchie versioni di IE. Che mi permette di gestire i CSS per i browser più vecchi velocemente e facilmente.

Ecco l'esempio

  <!--[ if lte IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > rel <link = "stylesheet" href = "ie6.css" type = "text/css" media = "screen" /> 
 
  -- > <! [Endif] -> 

Conclusione

Questi sono solo alcuni dei consigli che mi aiutano a scrivere codice migliore. Mi auguro che il tutorial vi aiuterà anche a scrivere meglio e pulito il codice. Applicare questi suggerimenti per i vostri progetti in corso e il prossimo, e voi saprete apprezzare gli sforzi.

Se pensate che il tutorial può essere più meglio, si prega condividere con noi. Commento di noi

Se desiderate ricevere maggiori ispirazione da noi, ti invitiamo a iscriverti al nostro feed RSS o tramite e-mail.

Archiviato in: Css, Tutorials by admin