CSS tai CSS-tyyliarkit, ovat verkkosuunnittelualan hyväksytty tapa lisätä visuaalisia tyylejä sivustoon. CSS: n avulla voit hallita sivun asettelua, värejä, typografia, taustakuva ja paljon muuta. Pohjimmiltaan, jos se on visuaalinen tyyli, CSS on tapa tuoda nämä tyylit verkkosivustollesi.
Kun lisäät CSS-tyylejä asiakirjaan, saatat huomata, että asiakirja alkaa pidentyä ja pidentyä. Jopa pienellä sivustolla, jolla on vain muutama sivu, voi päätyä huomattava CSS-tiedosto - ja erittäin suurella sivustolla, jossa on paljon ja paljon ainutlaatuisen sisällön sivuja, voi olla erittäin suuria CSS-tiedostoja. Tätä pahentaa reagoivat sivustot joilla on paljon mediakyselyt sisältyvät tyylisivuihin, jotta voit muuttaa ulkoasun ulkoasua ja sivun ulkoasua eri näytöille.
Kyllä, CSS-tiedostot voivat pidentyä. Tämä ei ole suuri ongelma sivuston suorituskyky ja latausnopeus, koska jopa pitkä CSS-tiedosto on todennäköisesti melko pieni (koska se on oikeastaan vain tekstidokumentti). Silti jokainen pieni sivunopeus laskee, joten jos voit tehdä tyylisivustasi ohuemman, se on hyvä idea. Tässä "pilkku" voi olla erittäin kätevä tyylisivullasi!
Kommat ja CSS
Olet ehkä miettinyt, mikä rooli pilkulla on CSS-valitsimen syntaksissa. Kuten lauseissa, pilkku tuo selkeyttä - ei koodia - erottimiin. Pilkku a CSS-valitsin erottaa useita valitsimia samoissa tyyleissä.
Tarkastellaan esimerkiksi alla olevaa CSS: ää.
th {väri: punainen; }
td {väri: punainen; }
p.punainen {väri: punainen; }
div # firstred {väri: punainen; }
Tällä syntaksilla sanot haluavasi th tunnisteet, td Tunnisteet, kappaletagit, joissa on luokka punainen, ja div-tunniste, joissa on tunnus, vahvistivat kaikki tyylin värin punaiseksi.
Tämä on täysin hyväksyttävä CSS, mutta sen kirjoittamiselle tällä tavalla on kaksi merkittävää haittapuolta:
- Jos päätät tulevaisuudessa muuttaa fontin väri näistä ominaisuuksista siniseksi, sinun on tehtävä tämä muutos neljä kertaa tyylitaulukossasi.
- Se lisää tyylisivullesi paljon ylimääräisiä merkkejä, joita et tarvitse. Nämä 4 tyyliä eivät välttämättä tunnu ylisuurilta, mutta jos jatkat tämän tekemistä koko tyylitaulukossasi, viivat summautuvat ja kyseinen arkki on paljon, paljon suurempi kuin sen pitäisi olla.
Näiden haittojen välttämiseksi ja CSS-tiedostosi virtaviivaistamiseksi yritämme käyttää pilkkuja.
Komentajien käyttäminen valitsimien erottamiseen
Sen sijaan, että kirjoitat 4 erillistä CSS-valitsinta ja 4 sääntöä, voit yhdistää kaikki nämä tyylit yhdeksi säännön ominaisuudeksi erottamalla yksittäiset valitsimet pilkulla. Näin se tehdään:
th, td, p.red, div # firstred {väri: punainen; }
Pilkku toimii periaatteessa sanana "tai" valitsimen sisällä. Joten tämä koskee th tunnisteet TAI td tunnisteet TAI kappaleetunnisteet luokan punaisella TAI div-tunniste tunnuksella. Juuri niin meillä oli aiemmin, mutta sen sijaan, että tarvitsisimme 4 CSS-sääntöä, meillä on yksi sääntö, jossa on useita valitsimia. Tätä pilkku tekee valitsimessa, se antaa meille mahdollisuuden olla useita valitsimia yhdessä säännössä.
Tämä lähestymistapa ei vain tee ohuempia, puhtaampia CSS-tiedostoja, vaan myös helpottaa tulevia päivityksiä. Jos haluat nyt vaihtaa värin punaisesta siniseksi, sinun on vain muutettava yhdessä paikassa alkuperäisten 4 tyylisäännön sijaan! Ajattele näitä ajansäästöjä koko CSS-tiedostossa ja näet, kuinka tämä säästää sekä aikaa että tilaa pitkällä aikavälillä!
Syntaksi vaihtelu
Jotkut ihmiset päättävät tehdä CSS: stä luettavamman erottamalla kukin valitsin omalle rivilleen sen sijaan, että kirjoittaisit kaikki yhdelle riville kuten yllä. Näin se tehdään:
th,
td,
p. punainen,
div # firstred
{
väri punainen;
}
Huomaa, että asetat pilkun jokaisen valitsimen perään ja sitten "enter" -näppäimellä katkaiset seuraavan valitsimen omalle rivilleen. ÄLÄ lisää pilkua viimeisen valitsimen jälkeen.
Käyttämällä pilkkuja valitsimesi välillä luot lisää kompakti tyyli jota on helpompi päivittää tulevaisuudessa ja joka on helpompi lukea tänään!