CSS vai Kaskādes stila lapas, ir tīmekļa dizaina nozares pieņemtais veids, kā vietnei pievienot vizuālos stilus. Izmantojot CSS, jūs varat kontrolēt lapas izkārtojumu, krāsas, tipogrāfija, fona attēls un daudz kas cits. Būtībā, ja tas ir vizuāls stils, tad CSS ir veids, kā šos stilus ievietot savā vietnē.
Pievienojot dokumentam CSS stilus, iespējams, pamanīsit, ka dokuments sāk kļūt arvien garāks. Pat neliela vietne ar tikai nedaudzām lapām var beigties ar lielu CSS failu - un ļoti lielai vietnei ar daudz un daudz unikāla satura lapu var būt ļoti lieli CSS faili. To papildina atsaucīgas vietnes kas ir daudz plašsaziņas līdzekļu vaicājumi iekļauti stila lapās, lai mainītu vizuālo izskatu un lapas izkārtojumu dažādiem ekrāniem.
Jā, CSS faili var būt ilgi. Runājot par to, tā nav liela problēma vietnes veiktspēja un lejupielādes ātrums, jo pat garš CSS fails, visticamāk, būs diezgan mazs (jo tas patiesībā ir tikai teksta dokuments). Tomēr lappuses ātruma ziņā ir mazums, tāpēc, ja jūs varat padarīt savu stila lapu plānāku, tā ir laba ideja. Tieši šeit "komats" var būt ļoti noderīgs jūsu stila lapā!
Komas un CSS
Iespējams, esat domājis, kādu lomu komats spēlē CSS selektora sintaksē. Tāpat kā teikumos, komats atdala atdalītājiem skaidrību, nevis kodu. Komats a CSS atlasītājs atdala vairāki selektori to pašu stilu ietvaros.
Piemēram, apskatīsim dažus CSS tālāk.
th {krāsa: sarkana; }
td {krāsa: sarkana; }
p.sarkana {krāsa: sarkana; }
div # firstred {krāsa: sarkana; }
Izmantojot šo sintaksi, jūs sakāt, ka vēlaties th tagi, td tagiem, rindkopu tagiem ar klasi sarkanu un div tagam ar ID, lai stila krāsa būtu sarkana.
Tas ir pilnīgi pieņemams CSS, taču tā rakstīšanai šādā veidā ir divi būtiski trūkumi:
- Nākotnē, ja jūs nolemjat mainīt fonta krāsa no šīm īpašībām līdz zilai krāsai, stila lapā šīs izmaiņas ir jāveic četras reizes.
- Jūsu stila lapai tiek pievienotas daudzas papildu rakstzīmes, kas jums nav vajadzīgas. Šie 4 stili var nešķist pārspīlēti, taču, ja jūs turpināsiet to darīt visā savā stila lapā, līnijas tiks summētas, un šī lapa būs daudz, daudz lielāka nekā vajadzētu.
Lai izvairītos no šiem trūkumiem un racionalizētu CSS failu, mēs mēģināsim izmantot komatus.
Komatu izmantošana, lai atdalītu selektorus
Tā vietā, lai rakstītu 4 atsevišķus CSS atlasītājus un 4 kārtulas, varat apvienot visi šie stili vienā noteikuma īpašumā, atdalot atsevišķus atlasītājus ar komatu. Lūk, kā tas tiktu darīts:
th, td, p.red, div # firstred {krāsa: sarkana; }
Komata raksturs atlasītājā pamatā darbojas kā vārds "vai". Tātad tas attiecas uz th tagi VAI td tagi VAI rindkopu tagus ar klases sarkanu VAI div tagu ar ID firstred. Tas ir tieši tas, kas mums bija iepriekš, bet tā vietā, lai būtu nepieciešami 4 CSS noteikumi, mums ir viens noteikums ar vairākiem atlasītājiem. Tas ir tas, ko komats dara atlasītājā, tas ļauj mums vienā regulā būt vairākiem atlasītājiem.
Šī pieeja ne tikai padara vienkāršākus, tīrākus CSS failus, bet arī daudz atvieglo nākotnes atjauninājumus. Tagad, ja vēlaties mainīt krāsu no sarkanās uz zilo, izmaiņas jāveic tikai vienā vietā, nevis sākotnējos 4 stila noteikumos, kas mums bija! Padomājiet par šiem laika ietaupījumiem visā CSS failā, un jūs varat redzēt, kā tas ilgtermiņā ietaupīs gan laiku, gan vietu!
Sintakses variācija
Daži cilvēki izvēlas padarīt CSS salasāmāku, atdalot katru atlasītāju uz savas līnijas, nevis ierakstot visu vienā rindā, kā norādīts iepriekš. Tas tiktu darīts šādi:
th,
td,
p.sarkans,
div # firstred
{
krāsa: sarkana;
}
Ievērojiet, ka aiz katra selektora jūs ievietojat komatu un pēc tam izmantojat taustiņu "enter", lai nākamo atlasītāju sadalītu pa savu līniju. Jūs nepievienojat komatu aiz pēdējā atlasītāja.
Izmantojot komatus starp atlasītājiem, jūs izveidojat vairāk kompakta stila lapa to ir vieglāk atjaunināt nākotnē, un to ir vieglāk lasīt šodien!