Ulkoisen tyyliarkin rakentaminen

CSS-sivuston laaja käyttö

Verkkosivustot ovat tyyliltään ja rakenteeltaan yhdistelmä, ja nykyisellä verkolla on paras käytäntö pitää nämä sivuston kaksi osaa erillään toisistaan.

HTML on aina tarjonnut sivuston, jolla on sen rakenne. Web-alkuaikoina HTML sisälsi myös tyylitietoja. Elementit, kuten -tunniste, olivat täynnä HTML-koodia, lisäämällä ulkoasua ja rakenteellisia tietoja rinnakkain. Web-standardien liike pyysi meitä muuttamaan tätä käytäntöä ja painamaan sen sijaan kaikki tyylitiedot CSS- tai Cascading Style Sheets -työkaluihin. Kun otat tämän askeleen eteenpäin, nykyiset suositukset ovat, että käytät sivustosi tyylisuunnittelua, mitä kutsutaan "ulkoisiksi tyylisivuiksi".

Ulkoisten tyyliarkkien edut ja haitat

Yksi parhaista Cascading Style Sheets -työkaluista on, että voit käyttää niitä pitämään koko sivustosi yhtenäisenä. Helpoin tapa tehdä tämä on linkittää tai tuoda ulkoista tyyliarkkia . Jos käytät samaa ulkoista tyylialuetta jokaiselle sivustosi sivulle, voit olla varma, että kaikilla sivuilla on sama tyyli. Voit myös helpottaa muutosten tekemistä tulevaisuudessa. Koska jokainen sivu käyttää samaa ulkoista tyyliarkkia, muutokset kyseiseen arkkiin vaikuttavat jokaiseen sivustosivulle. Tämä on paljon parempi kuin jokaisen sivun muuttaminen erikseen!

Ulkoisten tyyliarkkien edut

  • Voit hallita useiden asiakirjojen ulkoasua kerralla.
    • Tämä on erityisen hyödyllinen, jos työskentelet ihmisten kanssa, jotta voit luoda verkkosivustosi. Monia tyyliä koskevia sääntöjä voi olla vaikea muistaa, ja vaikka sinulla on painettu tyylisuunnitelma, se on tehotonta ja tylsiä jatkuvasti selattaessa sitä, onko esimerkkiteksti kirjoitettava 12 pisteen Arial-kirjasimeen tai 14 pisteen kuriiriin. Kun kaikki on yhdessä paikassa, ja koska paikka on myös silloin, kun teet muutoksia, voit ylläpitää paljon helpompaa.
  • Voit luoda tyylejä, joita voidaan käyttää useissa eri HTML-elementeissä .
    • Jos käytät usein tiettyä kirjasintyyliä korostamalla sivusi eri asioita, voit käyttää tyyliluettelossasi määritettyä luokkamääritettä saadaksesi tämän ulkoasun sen sijaan, että määritettäisiin tietty tyyli jokaiselle käyttäjälle. painotus.
  • Voit helposti ryhmittää tyylejäsi tehokkaammin.
    • Kaikki CSS: n käytettävissä olevat ryhmittelytavat voidaan käyttää ulkoisissa tyyliarkeissa, ja tämä antaa sinulle entistä paremman hallinnan ja joustavuuden sivuillesi.

Ulkoisten tyyliarkkien haitat

  • Ulkoiset tyyliarkit voivat lisätä latausaikaa, varsinkin jos ne ovat erittäin suuria. Koska CSS-tiedosto on erillinen asiakirja, joka on ladattava, se vaikuttaa suorituskykyyn latauksen suorittamiseksi.
  • Ulkopuoliset tyyliarkit tulevat isoksi hyvin nopeasti, koska on vaikea kertoa, milloin tyyli ei enää ole käytössä, koska sitä ei poisteta sivun poistamisen jälkeen. CSS-tiedostojen asianmukainen hallinta on tärkeää, varsinkin jos useat ihmiset toimivat samassa tiedostossa.
  • Jos sinulla on vain yhden sivun verkkosivusto, ulkoisen tiedoston CSS-versio ei välttämättä ole tarpeellinen, koska sinulla on vain yksi sivu tyyliin. Monet ulkoisen CSS: n eduista kadota, kun sinulla on vain yksi sivu.

Ulkoisen tyyliarkin luominen

Ulkoiset tyyliarkit luodaan samanlaisella syntaksilla kuin asiakirjatason tyyliarkit. Kaikki, mitä tarvitset, ovat valitsin ja ilmoitus. Aivan kuten asiakirjatason tyyliarkilla, säännön syntaksi on:

valitsin {omaisuus: arvo;}

Tallenna nämä säännöt tekstitiedostoon, jossa on .css-laajennus. Tätä ei vaadita, mutta se on hyvä tapa päästä mukaan, joten voit tunnistaa tyylitiedostot välittömästi hakemistoluetteloon.

Kun sinulla on tyyliarkin asiakirja, sinun on linkitettävä sen Web-sivuillesi . Tämä voidaan tehdä kahdella tavalla:

  1. linkittäminen
    1. HTML-tagin käyttäminen tyylitiedoston yhdistämiseen. Tässä on attribuutit rel , type ja href . Rel attribuutti kertoo, mitä yhdistät (tässä tapauksessa tyylitaulukko), tyyppi määrittelee MIME-tyypin selaimelle ja href on .css-tiedoston polku.
  2. Tuodaan
    1. Käytät tuodun tyyliarkin dokumenttityyppisen tyylitiedoston sisällä, jotta voit tuoda ulkoisen tyylitiedoston attribuutit samalla, kun et menettäisi asiakirjakohtaisia ​​tyyliä. Soitat sen samalla tavalla kuin kutsuttiin yhdistettyyn tyylitiedostoon, mutta sitä on vain kutsuttava asiakirjatason tyyliin. Voit tuoda niin monta ulkoista tyyliä kuin haluat ylläpitää verkkosivustoasi.

Alkuperäinen artikkeli Jennifer Krynin. Julkaisija Jeremy Girard 8/8/17