Sivuston ulkoasun tai "tyylin" sanelee CSS (CSS-tyylitaulukot). Tämä on tiedosto, jonka lisäät verkkosivustosi hakemistoon, joka sisältää erilaiset CSS-säännöt, jotka luovat sivujen visuaalisen suunnittelun ja asettelun.
Vaikka sivustot voivat käyttää ja usein käyttävät useita tyylitaulukoita, sitä ei tarvitse tehdä. Voit sijoittaa kaikki CSS-säännöt yhteen tiedostoon, ja siitä on todella hyötyä, myös nopeammin latausaika ja sivujen suorituskyky, koska niiden ei tarvitse hakea useita tiedostoja. Vaikka erittäin suuret yrityssivustot saattavat tarvita ajoittain erillisiä tyylitaulukoita, monet pienet ja keskisuuret sivustot voivat toimia hyvin vain yhdellä tiedostolla kaikilla sivuillasi tarvittavilla säännöillä. Tämä herättää kysymyksen "Mitä minun pitäisi nimetä tämä CSS-tiedosto"? "
Nimeämisen yleissopimuksen perusteet
Kun luot ulkoinen tyyli Web-sivuillesi sinun tulisi nimetä tiedosto noudattamalla vastaavia HTML-tiedostojesi nimeämistapoja.
Älä käytä erikoismerkkejä
Käytä CSS-tiedostonimissäsi vain kirjaimia a-z, numeroita 0-9, alleviivaa (_) ja väliviivoja (-). Vaikka tiedostojärjestelmäsi saattaa antaa sinun luoda tiedostoja, joissa on muita merkkejä, palvelimen käyttöjärjestelmässä saattaa olla ongelmia erikoismerkkien kanssa. Olet turvallisempi käyttää vain tässä mainittuja merkkejä. Loppujen lopuksi, vaikka palvelimesi sallisi erikoismerkkejä, niin ei välttämättä ole, jos päätät siirtyä tulevaisuudessa eri isäntäkoneiden tarjoajille.
Älä käytä mitään välilyöntejä
Aivan kuten erikoismerkkien kohdalla, välilyönnit voivat aiheuttaa ongelmia Web-palvelimellasi. On hyvä välttää niitä tiedostojen nimissä; sinun on jopa syytä nimetä tiedostot, kuten PDF-tiedostot, näiden samojen käytäntöjen avulla, vain jos sinun on koskaan lisättävä niitä verkkosivustolle. Jos sinusta tuntuu vahvasti, että tarvitset tilaa tiedostonimen lukemisen helpottamiseksi, valitse sen sijaan yhdysviivat tai alaviivat. Esimerkiksi sen sijaan, että käytettäisiin "tämä on tiedosto.pdf", käytä "tämä on tiedosto-tiedosto.pdf".
Tiedostonimen tulisi alkaa kirjaimella
Vaikka tämä ei ole ehdoton vaatimus, joissakin järjestelmissä on ongelmia tiedostonimien kanssa, jotka eivät ala kirjaimella. Esimerkiksi, jos päätät aloittaa tiedoston numeromerkillä, se voi aiheuttaa ongelmia rivillä.
Käytä kaikkia pieniä kirjaimia
Vaikka tätä ei vaadita tiedostonimelle, se on hyvä idea, koska jotkut verkkopalvelimet erottavat kirjainkoon ja jos unohdat tiedoston ja viittaat siihen toisessa tapauksessa, se ei lataudu. Pienien kirjainten käyttö jokaiselle tiedostonimelle on aina fiksu tapa edetä. Itse asiassa monet uudet web-suunnittelijat kamppailevat muistaa tämän, heidän oletusarvoinen toiminto tiedoston nimeämisessä on isännöidä nimen ensimmäinen merkki. Vältä tätä ja pääse tottumaan vain pienistä kirjaimista.
Pidä tiedostonimi mahdollisimman lyhyt
Vaikka useimmilla on rajoitettu tiedostonimen koko käyttöjärjestelmät, se on paljon pidempi kuin on kohtuullista CSS-tiedostonimelle. Hyvä nyrkkisääntö on enintään 20 merkkiä tiedostonimelle ilman laajennusta. Realistisesti kaikki, mikä on paljon pidempää, on hankala työskennellä ja linkittää joka tapauksessa.
Tärkein osa CSS-tiedostonimeäsi
CSS-tiedostonimen tärkein osa ei ole itse tiedostonimi, vaan laajennus. Laajennuksia ei vaadita Macintoshissa ja Linux-järjestelmät, mutta kannattaa sisällyttää sellainen joka tapauksessa CSS-tiedostoa kirjoitettaessa. Näin tiedät aina, että se on tyylitaulukko, eikä sinun tarvitse avata tiedostoa määritelläksesi, mikä se on tulevaisuudessa.
Se ei todennäköisesti ole iso yllätys, mutta CSS-tiedostosi laajennuksen tulisi olla:
.css
CSS-tiedostojen nimeämiskäytännöt
Jos sinulla on koskaan vain yksi CSS-tiedosto sivustolla, voit nimetä sen haluamallasi tavalla. Yksi seuraavista on suositeltava:
style.css
standard.css
oletus.css
Jos verkkosivustosi käyttää useita CSS-tiedostoja, nimeä tyylitaulukot niiden toiminnan jälkeen, jotta on selvää, mikä kunkin tiedoston tarkoitus on. Koska verkkosivuun voi olla liitetty useita tyylitaulukoita, se auttaa jakamaan tyylisi eri taulukoihin riippuen kyseisen taulukon toiminnasta ja siinä olevista tyyleistä. Esimerkiksi:
-
Asettelu vs. design
layout.css design.css
-
Sivu-osiot
main.css nav.css
-
Koko sivusto, jossa on alaosioita
mainstyles.css subpage.css
Jos verkkosivustosi käyttää jonkinlaista kehystä, huomaat todennäköisesti, että se käyttää useita CSS-tiedostoja, jokainen on omistettu sivujen eri osille tai sivuston osa-alueille (typografia, väri, asettelu, jne.).