Mikä on CSS-tyylisi?

Yksi hämmentävämmistä CSS-tyylisivujen (Cascading Style Sheets) kanssa työskentelyssä on se, että voit kirjoittaa tyylejä niin monella tavalla. Kuten proosan kirjoittaminen, se, että ymmärrät kieliopin ja oikeinkirjoituksen perussäännöt, ei tarkoita, että olet oppinut kirjoittamaan tiivistä proosaa.

Kokeneet CSS-suunnittelijat käyttävät paljon aikaa luodakseen lyhyitä, selkeitä CSS-tiedostoja, joita on helppo muokata ja päivittää. Mutta ne, jotka ovat uusia CSS:ssä, ovat taipuvaisia ​​kirjoittamaan enemmän tyylejä kuin on tarpeen ja luomaan tarpeettomia tyylejä.

Redundantin koodin lataaminen verkkoselaimeen kestää kauemmin, mutta sen muokkaaminen tai tarkistaminen myöhemmin on paljon vaikeampaa. Ja mitä ylimääräisempi koodisi, sitä todennäköisemmin joudut tyyliristiriioihin.

Tässä on viisi vinkkiä puhtaiden ja tehokkaiden tyylien kirjoittamiseen:

• Älä koskaan luo kahta tyyliä, kun yksi riittää. Voit esimerkiksi luoda tyylin kaikille tunnisteenvalitsimella

  tunnisteet, jotka muuttavat otsikoidesi kirjasinperhettä, ja luo sitten toinen tyyli luokanvalitsimella, jota voit käyttää otsikoihisi muuttaaksesi väriä.

  Mutta olisi tehokkaampaa määrittää sekä väri että kirjasinperhe samalla tyylillä. Muista, että voit aina palata takaisin ja muokata tyyliä lisätäksesi toisen säännön, jos haluat muuttaa tyylin muotoilua.

• Lyhennä heksadesimaalivärikoodeja. Voit määrittää värit CSS:ssä sisällyttämällä koko heksadesimaalivärikoodin. Kuitenkin, kun käytät toistuvia värikoodeja, sinun on sisällytettävä vain kolme ensimmäistä merkkiä. Esimerkiksi #ffffff on sama kuin #ffff; molemmat luovat valkoisen värin.

• Käytä ulkoisia tyylisivuja. Voit määrittää tyylejä kunkin verkkosivun yläreunassa olevassa sisäisessä tyylitaulukossa tai voit tallentaa tyylit ulkoiseen tiedostoon .css-tunnisteella ja liittää tyylisivun kaikille verkkosivuillesi. Ulkoiset tyylisivut ovat luonnostaan ​​tehokkaampia, koska niiden avulla voit käyttää samaa tyyliä millä tahansa tai kaikilla sivustosi sivuilla.

  Jos esimerkiksi määrität tyylin, joka tekee kaikista pääotsikoista lihavoitun, sinisen ja suuren, voit käyttää samaa tyyliä jokaisessa otsikossa, kun tallennat kyseisen tyylin ulkoiseen tyylitaulukkoon. Jos päätät myöhemmin muuttaa otsikot vihreiksi, voit muuttaa tyyliä yhdessä ulkoisessa tyylisivussa ja muuttaa kaikkia otsikoita kerralla.

  Jos olet tallentanut tyylit sisäiseen tyylitaulukkoon, sinun on muokattava kunkin tiedoston otsikotyyliä.

• Kehitä tyyleillesi nimeämiskäytäntö. Vaikka voit nimetä luokka- tai tunnusvalitsimilla luoduille tyyleille mitä tahansa, on parasta valita tyylejä, joilla on merkitystä muotoilun lisäksi. Jos esimerkiksi luot tyylin nimeltä .redHeadlines ja päätät myöhemmin, että haluat kaikkien .redHeadlines-otsikoidesi olevan sinisiä, saat joko sinisen otsikotyylin nimeltä .redHeadlines tai joudut nimeämään tyylin uudelleen.

  Ja tyylin uudelleennimeämiseen kuuluu palata takaisin ja soveltaa tyyliä uudelleen kaikkialla, missä on punainen otsikko, jonka haluat muuttaa siniseksi, mikä tekee tyhjäksi tyylien kyvyn tehdä maailmanlaajuisia päivityksiä. Voit välttää tämän ongelman luomalla tyylinimiä, jotka viittaavat elementtien sijaintiin tai tärkeyteen, kuten .mainHeadlines tai .sidebarHeadlines.

• * Testaa ja vahvista koodisi. Jopa kokeneet CSS-suunnittelijat tekevät virheitä, minkä vuoksi Dreamweaver sisältää niin monia loistavia työkaluja verkkosivujesi koodin testaamiseen ja validointiin. Varmista, että testaat CSS:si yleisten virheiden varalta.

  Seuraavassa on kaksi online-testauspalvelua, joiden avulla voit tarkistaa CSS-koodisi virheiden varalta. Kirjoita vain minkä tahansa Internet-sivun URL-osoite jommankumman sivuston osoitekenttään ja napsauta Lähetä-painiketta saadaksesi raportin, joka näyttää koodissasi olevat virheet:

  • W3C CSS Validation Service

  • XHTML-CSS : Ole Valid or Die Learning