On paljon CSS tutorials ovat saatavilla Internetissä, mutta muutamat oppitunnit ovat hyödyllisiä. Tämän opetusohjelman löydät 5 toimenpiteet kirjoittamaan paremmin CSS-koodi seuraavan sivuston projekti. Toivottavasti nautitte tässä opetusohjelmassa.

1. ResetCss

Sinun tulisi aina käyttää nollata voiko se olla Eric Meyer Nollaa, YUI Nollaa tai omia muokattuja nollata, käytä vain jotain.

Tavoitteena on palauttaa tyylisivu on vähentää selaimen epäjohdonmukaisuuksia asioita, kuten oletus linja korkeudet, katteet ja fontin koon nimikkeiden, ja niin edelleen - Eric Meyer

  html, body, div, span, appletti, objekti, H1, H2, H3, H4, H5, H6, iframe, 
  blockquote, pre, abbr, acronym, osoite, iso, cite, code, del, dfn, em, 
  fontti, img, ins, kbd, q, s, leimaan, pieni, lakko, vahva, sub, sup, tt, var, 
  dd, dl, dt, fieldset, form, label, legend, table, caption, div, tfoot, 
  thead, tr, th, td, input, select, textarea 

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


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

2. CSS Pikakirjoitus

Yksi parhaista ja tärkeä piirre CSS on kyky kirjoittaa koodia minimoitu tavalla.

Virheellinen koodi

  ( 
  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; 
  ) 

Oikean koodin

 : 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. Älä käytä niin monta luokkaa ja ID: n

Olen huomannut, että useimmat aloittelijoille Lisää luokat ja ID: n lähes jokaisesta osasta sivulla, joka ei ole required.There ovat esimerkkejä alla, mitä minä tarkoitan.

Virheellinen koodi

 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"> <p class = "heading"> <strong class = "subheading"> Tervetuloa </ strong> </ p> <p class = "linka"> <a href = "#" class = "linkki"> Home </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> Tietoa </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Palvelut </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Yhteystiedot </ a> </ font> </ span> 

Tässä on oikea koodi

Oikean koodin

 > <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> Tervetuloa </ h1> <ul> <li> <a href = "#"> Home </ a> </ li> <li> <a href = "#"> Tietoja </ a> </ li> <li> <a href = "#"> Palvelut </ a> </ li> <li> <a href = "#"> Yhteystiedot </ a> </ li> < / ul> </ span> 

4. Organisaatio olet Tyylitaulukon

Sinun pitäisi järjestää tyylitaulukko niin, että se on helppo löytää asioita ja niihin liittyvät tuotteet ovat lähellä toisiaan. Käytä kommentit tehokkaasti. Esimerkiksi on esimerkki kertoo, miten järjestää tyylitaulukko

  / * Reset * / 
   elements Poista marginaali ja padding elementit 

  / * Peruselementit * / 
  Määrittele tyylin peruselementtiä: body, H1, H2, H3, H4, H6, ol, ul, dl, p jne. 

  / * Generic Classes * / 
  Määrittele tyylin yleiset luokat: yksinkertaisia asioita, kuten poistaa pohjan,  
  kelluva sivuille jne.  
  / * Basic Layout * / 

  / * Basic Layout * / 
  Määrittele tyylin perus-layout: header.  alatunniste astiakaappi jne. 

  / * Header * / 
  Määrittele tyylin header 

  / * Sisältö * / 
  Määrittele tyylin sisällön alalla 

  / * Footer * / 
  Määrittele tyylin alatunniste 

  / * Jne * / 
  Jatka 

5. Ehdollisen Tyylisivut

Internet Explorer on kaikkein buginen kaikki selaimet. Onneksi voit käyttää ehdollista kommentteja hallita CSS, joka tarjoillaan IE. Jos tarvitsen sitä olen tyylitaulukon nimeltä ie6.css että tavoitteet vanhemmat versiot IE. Se antaa minulle mahdollisuuden hallita CSS vanhemmat selaimet nopeasti ja helposti.

Tässä on esimerkki

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

Tekemisen

Nämä ovat vain joitakin vinkkejä, jotka auttavat minua kirjoittamaan parempaa koodia. Toivon, että opetusohjelma myös auttaa kirjoittamaan paremmin ja puhdasta koodia. Soveltaa näitä vihjeitä nykyisen ja seuraavan hankkeita, ja olet varmasti arvostaa ponnisteluja.

Jos luulet, että opetusohjelma voi olla parempi, hyvä jakaa kanssamme. Kommentti us

Jos haluat saada lisää inspiraatiota meille, ota huomioon tilaamalla myös syötteen RSS-tai sähköpostitse.

Filed under: Css, Tutorials by admin