CSS- tai Cascading Style Sheets -työkaluja käytetään nykyaikaisen verkkosivuston suunnittelussa, jotta visuaalinen ulkoasua voidaan soveltaa sivulle. HTML luo sivun rakenteen ja Javascript pystyy hallitsemaan käyttäytymistään. Verkkosivun ulkoasu ja tunnelma ovat CSS: n verkkotunnus. Näissä tyyleissä niitä käytetään useimmiten ulkoisten tyyliarkkien avulla, mutta voit myös soveltaa CSS-tyyppejä yhteen yksittäiseen elementtiin käyttämällä "inline-tyylejä".
Inline-tyylit ovat CSS-tyylejä, joita sovelletaan suoraan sivun HTML: ssä. Tällä lähestymistavalla on sekä etuja että haittoja. Tarkastellaan ensin, miten nämä tyylejä kirjoitetaan.
Kuinka kirjoittaa sisäinen tyyli
Jotta voit luoda sisäisen CSS-tyylin, aloita kirjoittamalla tyyliasi vastaava ominaisuus, joka on samanlainen kuin tyyliarkki, mutta sen on oltava koko rivin. Erota useita ominaisuuksia puolipisteellä aivan kuten tyyliarkissa.
tausta: #ccc; väri: #fff; raja: kiinteä musta 1px;
Aseta kyseinen tyylisarja elementin tyyliattribuuttiin, jonka haluat muotoilla. Jos esimerkiksi haluat käyttää tätä tyyliä HTML-kappaleeseen, elementti näyttää tältä:
Tässä esimerkissä tämä kohta näyttäisi vaalean harmaan taustan (eli mitä #ccc tekee), mustasta tekstistä (# 000 väristä) ja 1 pikselin kiinteällä musta reunalla kappaleen kaikkien neljän puolen ympärillä .
Inline-tyylien edut
Cascading Style Sheet -työkalujen kaskadin ansiosta asiakirjoissa on korkein prioriteetti tai spesifisyys. Tämä tarkoittaa, että niitä sovelletaan, riippumatta siitä, mitä muuta sanotaan ulkoisessa tyylisivustossasi (lukuun ottamatta kaikkia tyylejä, joille on annettu tärkeä ilmoitus kyseisestä arkistosta, mutta tämä ei ole jotain, joka pitäisi tehdä tuotantopaikoilla, jos se voidaan välttää).
Ainoat tyylit, joilla on korkeampi etuoikeus kuin inline-tyyleissä, ovat itse käyttämän käyttäjän tyylit . Jos sinulla on vaikeuksia saada muutokset käyttöön, voit yrittää asettaa elementin sisäisen tyylin. Jos tyylit eivät vielä näytä inline-tyyliä, tiedät, että jotain muuta tapahtuu.
Inline-tyylejä on helppo ja nopea lisätä, eikä sinun tarvitse huolehtia siitä, että kirjoitat oikean CSS-valitsimen, koska lisäät tyylit suoraan elementtiin, jonka haluat muuttaa (tämä elementti korvaa olennaisesti valitsimen, jonka kirjoittaisit ulkoiseen tyyliarkistoon ). Sinun ei tarvitse luoda täysin uutta asiakirjaa (kuten ulkoisten tyyliarkkien kanssa) tai muokata uutta elementtiä asiakirjan otsassa (kuten sisäisissä tyylisivuissa). Lisät vain tyyliominaisuutta, joka on voimassa lähes kaikissa HTML-elementeissä. Nämä ovat kaikki syitä, joiden vuoksi saatat olla houkuttelevaa käyttää inline-tyylejä, mutta sinun on myös tiedostettava tämän lähestymistavan erittäin merkittävät haitat.
Inline-tyylien haitat
Koska inline-tyylit ovat kaikkein tarkimpia kaskadissa, he voivat ohjata sellaisia asioita, joita et ole aiottanut. He myös kieltävät yhden CSS: n tehokkaimmista osa-alueista - kykyä muotoilla paljon ja paljon verkkosivuja yhdestä keskeisestä CSS-tiedostosta, jotta tulevaisuuden päivityksiä ja tyylimuotoja voidaan helpommin hallita.
Jos sinun tarvitsee käyttää vain inline-tyylejä, asiakirjasi nopeasti paisuneet ja erittäin vaikea ylläpitää. Tämä johtuu siitä, että inline-tyylejä on sovellettava jokaiseen elementtiin, jota haluat. Joten jos haluat, että kaikki kappaleesi ovat fonttiperheen "Arial", sinun on lisättävä sisäinen tyyli jokaiseen
-tunnisteen asiakirjaan. Tämä lisää sekä huoltotyön että lukijan latausaikaa, koska sinun on muutettava tämän sivuston jokaisen sivun päälle, jotta fonttiperheen muuttaminen olisi mahdollista. Vaihtoehtoisesti, jos käytät erillistä tyylitaulukkoa, voit ehkä muuttaa sen yhdellä paikalla ja saada jokaisen sivun saamaan päivityksen.
Todella tämä on askel taaksepäin web-suunnittelussa - takaisin -tunnisteen päiviin!
Toinen haittapuoli inline-tyyleille on, että on mahdotonta suunnitella pseudo-elementtejä ja -luokkia heidän kanssaan. Esimerkiksi ulkoisilla tyylisivuilla voit muokata ankkurointitunnisteen vierailun, liukuvan, aktiivisen ja linkin värin , mutta sisäisellä tyylillä kaikki, jotka voit tyylillä, ovat itse linkki, koska tyyliattribuutti on liitetty tähän .
Viime kädessä suosittelemme , että et käytä verkkosisällön sisäisiä tyylejä , koska ne aiheuttavat ongelmia ja tekevät sivuista paljon enemmän työtä ylläpitämiseksi. Ainoa tapa käyttää niitä on, kun haluamme tarkistaa tyylin nopeasti kehityksen aikana. Kun olemme nähneet tämän yhden elementin oikein, siirrämme sen ulkoiseen tyyliarkkiimme.
Jennifer Krynin alkuperäiskappale. Toimittaja Jeremy Girard.