Verkkosivustot koostuvat useista yksittäisistä kappaleista, mukaan lukien kuvat, teksti ja erilaiset asiakirjat. Nämä asiakirjat eivät sisällä vain asiakirjoja, joihin voidaan linkittää eri sivuilta, kuten PDF-tiedostoja, mutta myös asiakirjoja, joita käytetään itse sivujen rakentamiseen, kuten HTML-asiakirjat määrittää sivun rakenne ja CSS (Cascading Style Sheet) -asiakirjat sanelemaan sivun ulkoasun. Tässä artikkelissa käsitellään CSS: ää, joka kattaa mitä se on ja missä sitä käytetään verkkosivustoilla tänään.
CSS-historian oppitunti
CSS kehitettiin ensimmäisen kerran vuonna 1997 keinona web-kehittäjille määritellä luomiensa verkkosivujen visuaalinen ulkonäkö. Sen tarkoituksena oli antaa web-ammattilaisille mahdollisuus erota sisältö ja verkkosivuston koodin rakenne visuaalisesta suunnittelusta, mikä ei ollut ollut mahdollista ennen tätä aikaa.
Rakenteen ja tyylin erottaminen antaa HTML: lle mahdollisuuden suorittaa enemmän funktiota, johon se alun perin perustui - merkinnän sisältöä tarvitsematta huolehtia itse sivun ulkoasusta ja ulkoasusta, mikä tunnetaan yleisesti nimellä "ulkoasu" sivu.
CSS: n kehitys
CSS: n suosio kasvoi vasta vuonna 2000, jolloin verkkoselaimet alkoivat käyttää enemmän kuin tämän merkintäkielen perusfonttia ja värejä. Nykyään kaikki modernit selaimet tukevat kaikkia CSS-tasoja 1, suurinta osaa CSS-tasoista 2 ja jopa suurinta osaa CSS-tason 3 tasoista. Kun CSS kehittyy jatkuvasti ja uusia tyylejä otetaan käyttöön, verkkoselaimet ovat alkaneet toteuttaa moduuleja jotka tuovat uuden CSS-tuen näihin selaimiin ja antavat web-suunnittelijoille tehokkaita uusia muotoilutyökaluja toimimaan kanssa.
(Monien) vuosien aikana oli valikoituja web-suunnittelijoita, jotka kieltäytyivät käyttämästä CSS: ää verkkosivustojen suunnittelu ja kehittäminen, mutta tämä käytäntö on vain poissa teollisuudesta tänään. CSS on nyt laajasti käytetty verkkosuunnittelun standardi, ja sinun olisi vaikea löytää ketään teollisuudessa tänään työskentelevää, jolla ei ole ainakin perustietoa tästä kielestä.
CSS on lyhenne
Kuten jo mainittiin, termi CSS tarkoittaa "CSS-tyylisivua". Hajotetaan tämä lause hieman erittelemään paremmin, mitä nämä asiakirjat tekevät.
Sana "tyylitaulukko" viittaa itse asiakirjaan (kuten HTML, CSS-tiedostot ovat oikeastaan vain tekstidokumentteja, joita voidaan muokata useilla ohjelmilla). Tyylitaulukoita on käytetty asiakirjasuunnittelussa monien vuosien ajan. Ne ovat teknisen erittelyn asettelulle, joko tulostetulle tai verkossa. Painosuunnittelijat ovat pitkään käyttäneet tyylitaulukoita varmistaakseen, että heidän kuvionsa tulostetaan täsmälleen heidän määritystensä mukaisesti. Verkkosivun tyylitaulukko palvelee samaa tarkoitusta, mutta sillä on lisäominaisuuksia kertoa verkkoselaimelle, kuinka renderöitävä asiakirja näytetään. Nykyään CSS-tyylisivut voivat myös käyttää mediakyselyt muuttaa tapaa, jolla sivu etsii erilaiset laitteet ja näytön koot. Tämä on uskomattoman tärkeää, koska se sallii yhden HTML-asiakirjan renderoinnin eri tavalla sen mukaan, mitä näyttöä sitä käytetään.
ryöpytä on todella erityinen osa termiä "CSS-tyylisivu". Web-tyylisivu on tarkoitettu kaskadiksi sarjan arkkien läpi, kuten joki vesiputouksen yli. Joen vesi osuu kaikkiin vesiputouksen kiviin, mutta vain pohjassa olevat vaikuttavat tarkalleen missä vesi virtaa. Sama pätee verkkosivuston tyylisivujen kaskadiin.
Suunnittelijan tyylitaulukot ohittavat selaimen oletustyylitaulukot
Ainakin yksi tyylitaulukko vaikuttaa jokaiseen verkkosivuun, vaikka verkkosuunnittelija ei käytä mitään tyylejä. Tämä tyylitaulukko on käyttäjäagentin tyylitaulukko - tunnetaan myös oletustyyleinä, joita selain käyttää näyttämään sivua, ellei muita ohjeita anneta. Esimerkiksi hyperlinkit on oletusarvoisesti sininen ja alleviivattu. Nämä tyylit ovat peräisin selaimen oletustyylitaulukosta. Jos web-suunnittelija antaa muita ohjeita, selaimen on kuitenkin tiedettävä, mitkä ohjeet ovat etusijalla. Kaikilla selaimilla on omat oletustyylinsä, mutta monet näistä oletuksista (kuten siniset alleviivatut tekstilinkit) jaetaan kaikille tai useimmille tärkeimmille selaimille ja versioille.
Toinen esimerkki selaimen oletusasetuksista on verkkoselaimessa oletusfontti "Times New Roman"näytetään koossa 16. Lähes yhdelläkään sivuista, joissa vierailemme, ei kuitenkaan näytetä kyseisessä kirjasinperheessä ja -kokossa. Tämä johtuu siitä, että kaskadi määrittää, että suunnittelijoiden itsensä asettamat toiset tyylisivut määritellään uudelleen fonttikoko ja perhe, ohittamalla selaimesi oletukset. Kaikilla verkkosivulle luomillasi tyylitaulukoilla on enemmän spesifisyyttä kuin selaimen oletustyyleillä, joten oletusasetuksia sovelletaan vain, jos tyylitaulukko ei korvaa niitä. Jos haluat linkkien olevan sinisiä ja alleviivattuja, sinun ei tarvitse tehdä mitään, koska se on oletusarvo, mutta jos sivustosi CSS-tiedostossa sanotaan, että linkkien on oltava vihreitä, tämä väri ohittaa oletussinisen. Alaviiva säilyy tässä esimerkissä, koska et ole määrittänyt toisin.
Missä CSS: ää käytetään?
CSS: ää voidaan käyttää myös määrittämään, miltä verkkosivujen tulisi näyttää muissa medioissa kuin a nettiselain. Voit esimerkiksi luoda tulostustyylisivun, joka määrittää, kuinka verkkosivun tulisi tulostaa. Koska verkkosivun kohteilla, kuten siirtymispainikkeilla tai verkkolomakkeilla, ei ole tarkoitusta tulostetulla sivulla, tulostustyylisivua voidaan käyttää "sammuttamaan" nämä alueet, kun sivu tulostetaan. Vaikka se ei todellakaan ole yleinen käytäntö monilla sivustoilla, mahdollisuus luoda tulostustyyliä on tehokas ja houkutteleva (meidän kokemus - useimmat verkkoammattilaiset eivät tee tätä yksinkertaisesti siksi, että sivuston budjetti ei vaadi tätä lisätyötä olla tehty).
Miksi CSS on tärkeä?
CSS on yksi tehokkaimmista työkaluista, joita verkkosuunnittelija voi oppia, koska sen avulla voit vaikuttaa koko verkkosivuston ulkoasuun. Hyvin kirjoitetut tyylitaulukot voidaan päivittää nopeasti ja antaa sivustoille mahdollisuuden muuttaa sitä, mikä on visuaalisesti priorisoitu -näyttö, joka puolestaan näyttää arvon ja kohdennuksen kävijöille ilman, että taustalla HTML-merkintä.
CSS: n tärkein haaste on, että opittavaa on melko vähän - ja selainten vaihdellessa päivittäin, mikä toimii tänään ei ehkä ole järkevää huomenna, kun uusia tyylejä tuetaan ja toiset hylätään tai heistä ei suinkaan syystä tai toinen.
CSS-oppimiskäyrä on sen arvoinen
Koska CSS pystyy kasaamaan ja yhdistymään, ja kun otetaan huomioon, kuinka eri selaimet voivat tulkita ja toteuttaa direktiivejä eri tavalla, CSS: ää voi olla vaikeampaa oppia kuin yksinkertaista HTML: ää. CSS muuttuu myös selaimissa tavalla, jota HTML ei todellakaan tee. Kun kuitenkin aloitat CSS: n käytön, huomaat, että tyylitaulukoiden voiman hyödyntäminen antaa sinulle uskomattoman joustavuuden verkkosivujen asetteluun ja niiden ulkoasun määrittelyyn. Matkan varrella keräät "laukun temppuja" tyyleistä ja lähestymistavoista, jotka ovat toimineet sinulle aiemmin ja joihin voit kääntyä uudestaan rakentaa uusia verkkosivuja tulevaisuudessa.