Verkkosivustot koostuvat useista yksittäisistä kappaleista, kuten kuvista, tekstistä ja erilaisista asiakirjoista. Näissä asiakirjoissa ei ole vain niitä, jotka voidaan linkittää eri sivuilta, kuten PDF-tiedostoina, mutta myös asiakirjat, joita käytetään itse sivujen rakentamiseen, kuten HTML-asiakirjat sivun ja CSS (Cascading Style Sheet) -dokumenttien sanella sivun ulkoasua. Tämä artikkeli kattaa CSS: ään, joka kattaa sen, mitä se on ja missä sitä käytetään verkkosivustoilla tänään.
CSS-historian oppitunti
CSS kehitettiin ensimmäisen kerran vuonna 1997 web-kehittäjien tapa määritellä niiden luomien verkkosivujen ulkoasu. Web-ammattilaisten tarkoituksena oli sallia verkkosivuston koodin sisällön ja rakenteen erottaminen visuaalisesta suunnittelusta, mikä ei ollut ollut mahdollista ennen tätä ajankohtaa.
Rakenteen ja tyylin erottaminen sallii HTML: n suorittavan enemmän toimintoa, johon se alunperin perustui - sisällön merkitseminen ilman, että itse sivun suunnittelusta ja ulkoasusta, joka tunnetaan yleisesti "ulkoasua ja tunnetta" sivulla.
CSS ei noussut suosioon vasta noin 2000, kun web-selaimet alkoivat käyttää enemmän kuin tämän merkintäkielen perusfontit ja värit. Nykyään kaikki modernit selaimet tukevat kaikkia CSS: n tasoa 1, suurinta osaa CSS: n tasosta 2 ja jopa useimpia CSS: n tasoja 3. Koska CSS jatkuu kehittymisen ja uusien tyylien käyttöönoton, selaimet ovat alkaneet toteuttaa moduuleja, jotka tuovat uutta CSS-tukea selaimiin ja anna web-suunnittelijoille tehokkaita uusia muotoilutyökaluja työskennellä.
Monien vuosien aikana on ollut valittuja web-suunnittelijoita, jotka kieltäytyivät käyttämästä CSS: ää verkkosivujen suunnittelussa ja kehittämisessä, mutta tämä käytäntö on kokonaan pois teollisuudesta. CSS on nykyään laajalti käytetty web-suunnittelun standardi, ja teidän olisi vaikea löytää alan työntekijöitä, joilla ei ole tällä hetkellä ainutlaatuista käsitystä.
CSS on lyhyt
Kuten jo mainittiin, termi CSS tarkoittaa "Cascading Style Sheet". Let's break tämä lause alas hieman selittää tarkemmin, mitä nämä asiakirjat tekevät.
Sana "tyylitaulukko" viittaa itse asiakirjaan (kuten HTML, CSS-tiedostot ovat oikeastaan vain tekstitiedostoja, joita voidaan muokata useilla eri ohjelmilla). Asiakirjan suunnitteluun on käytetty useita vuosia tyyliarkkeja. Ne ovat ulkoasun teknisiä eritelmiä, olivatpa ne tulostettuja tai verkossa. Tulosta suunnittelijat ovat pitkään käytettyjä tyyliarkkeja varmistaakseen, että heidän mallejaan painetaan täsmälleen niiden määrityksiä. Web-sivun tyyliarkki palvelee samaa tarkoitusta, mutta lisätty toiminnallisuus kertoo myös selaimella, miten asiakirjan katselu tapahtuu. Nykyään CSS-tyyliarkit voivat myös käyttää mediakyselyitä, jotta muutettaisiin tapaa, jolla sivu etsii erilaisia laitteita ja näytön koon. Tämä on uskomattoman tärkeää, koska se sallii yhden HTML-asiakirjan erilaisen näyttämisen sen näytön mukaan.
Cascade on todella erikoinen osa termiä "Cascading style sheet". Web-tyyppinen arkki on tarkoitettu kasaamaan sarjan tyylejä kyseisen arkin läpi, kuten joki vesiputouksen yli. Joen vesistö osuu kaikkiin vesiputouksen kiviin, mutta vain pohjaan vaikuttavat osat vaikuttavat juuri siihen, missä vesi virtaa. Sama pätee kaskadiin verkkosivujen tyyliarkeissa.
Jokaiseen verkkosivuun vaikuttaa ainakin yksi tyylisivu, vaikka web-suunnittelija ei käytä mitään tyyliä. Tämä tyyliarkki on käyttäjäagentin tyyppisivu - tunnetaan myös oletustyyleinä, joita web-selain käyttää sivun näyttämiseen, jos muita ohjeita ei ole annettu. Esimerkiksi oletuksena hyperlinkit on muotoiltu sinisellä ja ne on alleviivattu. Nämä tyylit tulevat selaimen oletustyylialustalta. Jos web-suunnittelija tarjoaa muita ohjeita, selaimen on kuitenkin tiedettävä, mitkä ohjeet ovat etusijalla. Kaikilla selaimilla on omat oletustyylinsä, mutta monet näistä oletusasetuksista (kuten siniset alleviivatut tekstilinkit) jaetaan kaikille tai useimmille tärkeimmistä selaimista ja versioista.
Toinen esimerkki selaimen oletusarvosta on selaimessamme oletusfontti "Times New Roman", joka näkyy koossa 16. Lähes kukaan sivuista, joita käytämme näytössä kyseisessä kirjasimen perheessä ja koossa, ei kuitenkaan ole. Tämä johtuu siitä, että kaskadi määrittelee, että muut tyylit, jotka suunnittelijat itse määrittelevät, määrittelevät fonttikoko ja -perhe uudelleen määrittämällä selaimen oletusasetukset. Web-sivulle luodut tyylialustat ovat täsmällisempää kuin selaimen oletustyylit, joten nämä oletusasetukset tulevat voimaan vain, jos tyylisivusi ei korvaa niitä. Jos haluat, että linkit ovat sinisiä ja alleviivattuja, sinun ei tarvitse tehdä mitään, koska oletus on, mutta jos sivustosi CSS-tiedosto sanoo, että linkkien pitäisi olla vihreitä, kyseinen väri ohittaa oletussinisen. Korostus säilyy tässä esimerkissä, koska et ole määrittänyt toisin.
Missä CSS on käytössä?
CSS: ää voidaan käyttää myös määrittelemään, miten web-sivut näyttävät katsottavilta muilta mediatiedostoilta kuin verkkoselaimilta. Voit esimerkiksi luoda tulostustyyppilevyn, joka määrittää, miten web-sivu tulostetaan. Koska verkkosivujen kohteet, kuten navigointipainikkeet tai web-lomakkeet, eivät ole tarkoituksenmukaisia tulostetulle sivulle, voidaan tulosteiden tyyliä käyttää "sammuttamaan" kyseiset alueet, kun sivu tulostetaan.Vaikka monilla sivustoilla ei tavallisesti ole yleistä käytäntöä, tulostustyylien luominen on tehokasta ja houkuttelevaa (kokemuksemme mukaan useimmat web-ammattilaiset eivät tee tätä yksinkertaisesti siksi, että sivuston budjetin laajuus ei edellytä sitä, että tämä lisätyö tehdään ).
Miksi CSS on tärkeä?
CSS on yksi tehokkaimmista työkaluista, joita web-suunnittelija voi oppia, koska sen avulla voit vaikuttaa verkkosivuston koko visuaaliseen ulkoasuun. Hyvin kirjoitetut tyyliarkit voidaan päivittää nopeasti ja sallia sivustojen vaihtaa prioriteettia näytöllä, mikä puolestaan osoittaa arvoa ja keskittyy kävijöihin ilman mitään muutoksia, jotka on tehtävä HTML-merkinnällä.
CSS: n tärkein haaste on, että on melko vähän oppia - ja selaimilla, jotka muuttuvat joka päivä, mikä toimii hyvin tänään, ei ehkä ole järkevää huomenna, kun uusia tyylejä tuetaan ja toiset hylätään tai pudota pois syystä tai toisesta .
Koska CSS voi kasaantua ja yhdistää, ja koska eri selaimet voivat tulkita ja toteuttaa direktiivejä toisin, CSS voi olla vaikeampi kuin tavallinen HTML hallita. CSS muuttuu myös selaimissa tavalla, jota HTML ei todellakaan ole. Kun aloitat CSS: n käytön, näet kuitenkin, että tyyliarkkien tehokkuuden lisääminen antaa sinulle uskomattoman joustavuuden siitä, miten asettelet verkkosivut ja määrität heidän ulkoasunsa. Matkan varrella voit kerätä "laukkuja temppuja" tyyleistä ja lähestymistavoista, jotka ovat työskennelleet aiemmin ja joita voit kääntää uudestaan, kun rakentaat uusia verkkosivuja tulevaisuudessa.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 7/5/17
