CSS(Cascading Style Sheets) yra pagrindinė žiniatinklio kūrimo sudedamoji dalis, kuri atlieka lemiamą vaidmenį kontroliuojant HTML elementų vizualinę išvaizdą jūsų svetainėje. Jame pateikiamas galingas taisyklių ir savybių rinkinys, apibrėžiantis, kaip elementai rodomi, formatuojami ir išdėstomi, todėl galite tinkinti savo tinklalapių išvaizdą.
Pradėkime nuo selektorių sąvokos supratimo
Selektoriai naudojami konkretiems stiliaus HTML elementams taikyti. Vienas iš paprasčiausių parinktuvų yra elementų parinkiklis, kuris parenka visus konkretaus HTML elemento egzempliorius.
Pavyzdžiui, ši CSS taisyklė taikoma visoms dokumento pastraipoms:
p {
color: blue;
}
Šiame pavyzdyje p parinkiklis pasirenka visus <p> elementus ir nustato jų teksto spalvą į mėlyną.
Kitas įprastas parinkiklis yra klasės parinkiklis
Klasės naudojamos panašių savybių elementams grupuoti. Priskirdami klasę HTML elementams, galite juos taikyti ir stiliuoti kartu.
Štai pavyzdys:
.blue-text {
color: blue;
}
Šiuo atveju .blue-text parinkiklis taiko visus elementus su klase blue-text ir jų tekstui taiko mėlyną spalvą.
Be to, ID parinkiklis leidžia taikyti konkretų elementą pagal jo unikalų identifikatorių. ID paprastai priskiriami atskiriems puslapio elementams.
Štai pavyzdys:
#header {
background-color: gray;
}
Šiame pavyzdyje #header parinkiklis pasirenka elementą su ID header ir pritaiko jam pilką fono spalvą.
Pereinant prie CSS sintaksės, kiekviena CSS taisyklė susideda iš parinkiklio ir deklaravimo bloko
Deklaracijos blokas yra įtrauktas į riestinius skliaustus {} ir jame yra viena ar daugiau deklaracijų. Deklaracijas sudaro turtas ir jį atitinkanti vertė.
Štai pavyzdys:
h1 {
font-size: 24px;
color: #333;
}
Šiame kodo fragmente h1 parinkiklis parenka visus <h1> elementus ir nustato jų šrifto dydį į 24 pikselius, o teksto spalvą – į tamsiai pilką(#333).
Šioje serijoje tyrinėsime ir paaiškinsime įvairias CSS ypatybes, parinkiklius ir jų derinius, kad galėtumėte sukurti vizualiai patrauklias ir geros struktūros svetaines. CSS ir pagrindinės sintaksės supratimas suteiks pagrindą valdyti savo tinklalapių stiliaus aspektus, užtikrinant unikalią ir suasmenintą vartotojo patirtį. Pasinerkime ir atraskime neribotas CSS galimybes!