Mitä ovat Cascading Style Sheets?
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 ennen noin 2000, jolloin verkkoselaimet alkoivat käyttää enemmän kuin tämän merkintäkielen perusfontit ja värit. Nykyään kaikki nykyaikaiset 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öönotossa, selaimet ovat alkaneet toteuttaa moduuleja, jotka tuovat uutta CSS-tukea näihin selaimiin ja antavat web-suunnittelijoille tehokkaita uusia muotoilutyökaluja työskennellä.
Monien vuosien aikana on ollut valittuja web-suunnittelijoita, jotka kieltäytyivät käyttämään CSS: ää web-sivustojen suunnittelussa ja kehittämisessä, mutta tämä käytäntö on poissa teollisuudesta tänään. CSS on nykyään laajalti käytetty web-suunnittelun standardi, ja teidän olisi vaikea löytää alan työntekijöitä nykyään, joilla ei ole ainakin peruskäsitystä tästä kielestä.
CSS on lyhennelmä
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 "tyyliarkki" viittaa itse asiakirjaan (kuten HTML, CSS-tiedostot ovat oikeastaan vain tekstitiedostoja, joita voidaan muokata erilaisilla ohjelmilla). Asiakirjan suunnitteluun on käytetty useita vuosia tyyliarkkeja. Ne ovat ulkoasun teknisiä eritelmiä, olivatpa ne tulostettuja tai verkossa. Tulostimien suunnittelijat ovat pitkään käyttäneet 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 verkkoselaimen 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 oletusasetuksista selaimessani oletusfontti on " Times New Roman ", joka näkyy koossa 16. Lähes mikään vierailemani sivu ei näy kyseisessä kirjasimen perheessä ja koossa. Tämä johtuu siitä, että kaskadi määrittelee, että toiset tyyliarkit, jotka suunnittelijat itse määrittelevät, määrittävät fonttikoon ja perheen uudelleen määrittämällä uudelleen selaimen oletusasetukset. Web-sivulle luodut tyylialustat ovat täsmällisempää kuin selaimen oletustyylit, joten nämä oletusasetukset tulevat voimaan vain, jos tyyliarkki 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 verkkosivut näyttävät, kun niitä katsellaan muussa mediassa kuin selaimessa. 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 ei useinkaan ole yleinen käytäntö monilla sivustoilla, tulostustyyliarkkien luominen on tehokas ja houkutteleva (kokemukseni 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ä tyylikkäitä ja lähestymistapoja, jotka ovat työskennelleet aiemmin sinulle ja joita voit kääntää uudestaan, kun rakennat uusia verkkosivuja tulevaisuudessa.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 7/5/17,