Kuriant tinkamo stiliaus svetaines šiandieniniame žiniatinklyje reikia giliai jas suprasti Kaskados stiliaus lapai. Taikykite CSS stilių seriją savo HTML dokumente, kad sužinotumėte apie savo tinklalapio išvaizdą.
Klasės ir ID atributai
Dizaineriai kartais turi pritaikyti stilių tik kai kurie elemento dokumente, bet ne visi to elemento atvejai. Norėdami pasiekti šiuos norimus stilius, naudokite klasė ir ID HTML atributai. Šie atributai yra visuotiniai atributai, taikomi beveik kiekvienam HTML žyma—Taip ar jūs stilizuosite skirstymą, pastraipas, nuorodas, sąrašus ar bet kurį kitą HTML dokumento elementą, galite kreiptis į klasės ir ID atributus, kurie padės jums atlikti šią užduotį!
Klasių rinkėjai
Klasės parinkiklis nustato kelis stilius tame pačiame dokumento elemente ar žymoje. Pvz., Norėdami iškviesti tam tikras teksto dalis kaip skirtingą spalvą kaip įspėjimą, priskirkite pastraipas tokioms klasėms:
p {spalva: # 0000ff; }
p.alert {spalva: # ff0000; }
Šie stiliai nustatytų spalvą
visi pastraipų iki mėlynos (# 0000ff), bet bet kurios pastraipos, kurios klasės atributas yra budrus vietoj to būtų parašyta raudonai (# ff0000). Taip yra todėl, kad klasės atributas turi aukštesnį specifiškumą nei pirmoji CSS taisyklė, kuriai naudojamas tik žymos parinkiklis. Dirbdamas su CSS, tikslesnė taisyklė pakeis mažiau specifinę taisyklę. Taigi šiame pavyzdyje bendresnė taisyklė nustato visų pastraipų spalvą, tačiau antroji, konkretesnė taisyklė, nei nepaiso to nustatymo tik kai kuriose pastraipose.Štai kaip tai galima naudoti kai kuriuose HTML žymėjimuose:
Ši pastraipa būtų rodoma mėlyna spalva, kuri yra numatytoji puslapio reikšmė.
Ši pastraipa taip pat būtų mėlyna.
Ši pastraipa būtų rodoma raudonai, nes klasės atributas perrašys standartinę mėlyną spalvą iš elementų parinkiklio stiliaus.
Šiame pavyzdyje p. įspėjimas būtų taikoma tik pastraipos elementams, kurie tuo naudojasi budrus klasė. Norėdami naudoti šią klasę keliuose HTML elementuose, pašalinkite HTML elementą iš stiliaus skambučio pradžios, taip:
.alert {background-color: # ff0000;}
Ši klasė dabar prieinama visiems elementams, kuriems jos reikia. Bet koks jūsų HTML fragmentas, kurio klasės atributo vertė yra budrus dabar įgis šį stilių. Žemiau esančiame HTML turime ir pastraipą, ir antrojo lygio antraštę, kurioje naudojama budrus klasė. Abiejų spalvų fono spalva yra raudona:
Ši pastraipa būtų parašyta raudonai.
Šiandien svetainėse klasės atributai dažnai naudojami daugumai elementų, nes su jais lengviau dirbti atsižvelgiant į specifiškumo perspektyvą nei su ID. Rasite, kad dauguma dabartinių HTML puslapių būtų užpildyti klasės atributais, kai kurie iš jų dokumente dažnai kartojami, o kiti gali būti rodomi tik vieną kartą.
ID parinkėjai
ID selektorius įvardija konkretų stilių, nesiedamas jo su žyme ar kitu HTML elementas.
Tarkime, kad HTML žymėjime yra padalijimas, kuriame yra informacija apie įvykį. Šiam dalijimui galėtumėte suteikti ID atributas apie įvykisir tada apibūdinkite tą padalijimą 1 pikselio pločio juodu kraštu:
#event {border: 1px solid # 000; }
Iššūkis su ID parinkėjai yra tai, kad HTML dokumente jų negalima pakartoti. Jie turi būti unikalūs (tą patį ID galite naudoti keliuose savo svetainės puslapiuose, bet tik vieną kartą kiekviename HTML dokumente). Taigi trims įvykiams, kuriems visiems reikalinga ši riba, turite identifikuoti ID atributus įvykis1, įvykis2ir įvykis3 ir stilizuokite kiekvieną iš jų. Todėl būtų daug lengviau naudoti minėtą klasės atributą įvykis ir stilizuokite juos visus vienu metu.
ID atributų komplikacijos
Kitas iššūkis, susijęs su ID atributais, yra tas, kad jie turi aukštesnį specifiškumą nei klasės atributai. Jei norite nepaisyti anksčiau nustatyto stiliaus, gali būti sunku tai padaryti, jei per daug pasikliautumėte asmens tapatybės dokumentais. Daugelis interneto kūrėjų nutolo naudodami ID savo žymėjime, net jei jie ketina tą vertę naudoti tik vieną kartą, o beveik visiems kreipėsi į mažiau specifinius klasės atributus stilius.
Viena sritis, kurioje atpažįstami ID atributai, yra ta, kai norite sukurti puslapį, kuriame yra inkaro nuorodos. Pavyzdžiui, apsvarstykite paralaksinio stiliaus svetainę, kurioje yra visas turinys viename puslapyje su nuorodomis, kurios „pereina“ į įvairias to puslapio dalis. ID atributai ir teksto nuorodos naudoja šias inkaro nuorodas. Pridėkite šio atributo vertę, prieš kurią rašoma # simbolis href nuorodos atributas, toks:
Tai yra nuoroda
Spustelėjus ar palietus, ši nuoroda pereina į puslapio dalį, kurioje yra šis ID atributas. Jei nė vienas puslapio elementas nenaudoja šios ID vertės, nuoroda nieko nepadarys.
Norėdami sukurti nuorodą puslapyje, reikės naudoti ID atributus, tačiau vis tiek galite kreiptis į klases bendro stiliaus CSS tikslais. Taip dizaineriai šiandien žymi puslapius - jie kuo daugiau naudoja klasės parinkiklius ir kreipiasi į ID tik tada, kai jiems reikia, kad atributas veiktų ne tik kaip CSS kabliukas, bet ir kaip nuorodą puslapyje.