Hästi kujundatud veebisaitide loomine tänapäeva veebis nõuab nende põhjalikku mõistmist Kaskaadiga stiililehed. Rakendage oma HTML-dokumendile CSS-stiilide seeria, et teavitada oma veebisaidi ilmet.
Klassi ja ID atribuudid
Disainerid peavad mõnikord stiili rakendama ainult mõned dokumendi elementidest, kuid mitte kõiki selle elemendi eksemplare. Nende soovitud stiilide saavutamiseks kasutage nuppu klass ja ID HTML atribuudid. Need atribuudid on globaalsed atribuudid, mis kehtivad peaaegu kõigile HTML-märgend- nii et olenemata sellest, kas kujundate dokumendis jaotusi, lõike, linke, loendeid või mõnda muud HTML-i tükki, võite selle ülesande täitmiseks pöörduda klassi ja ID atribuutide poole!
Klassivalijad
Klassi valija määrab dokumendis samale elemendile või sildile mitu stiili. Näiteks, kui soovite oma tekstist teatud värvilisi jaotisi hoiatusena välja kutsuda, määrake oma lõigud järgmiste klassidega:
p {värv: # 0000ff; }
p.alert {color: # ff0000; }
Need stiilid määraksid värvikõik
lõigud siniseks (# 0000ff), kuid kõik paragrahvid, mille klassi atribuut on hoiatus teeks selle asemel punase kujundusega (# ff0000). Selle põhjuseks on asjaolu, et klassi atribuudil on kõrgem spetsiifilisus kui esimesel CSS-reeglil, mis kasutab ainult siltide valijat. Töötades koos CSS, alistab spetsiifilisem reegel vähem spetsiifilise reegli. Nii et selles näites määrab üldisem reegel kõigi lõikude värvi, kuid teine, spetsiifilisem reegel kui alistab selle sätte ainult mõnes lõigus.Nii saab seda mõnes HTML-i märgistuses kasutada:
See lõik kuvatakse sinisena, mis on lehe vaikeväärtus.
See lõik oleks ka sinine.
Ja see lõik kuvatakse punasena, kuna klassi atribuut kirjutab elementide valija stiililt üle sinise standardvärvi.
Selles näites on p.alert rakenduks ainult seda kasutavatele lõikuelementidele hoiatus klass. Selle klassi kasutamiseks mitmetes HTML-elementides eemaldage HTML-element stiilikõne algusest järgmiselt:
.alert {background-color: # ff0000;}
See klass on nüüd saadaval kõigile elementidele, kes seda vajavad. Teie HTML-i mis tahes tükk, millel on klassi atribuudi väärtus hoiatus saab nüüd selle stiili. Allolevas HTML-is on meil nii lõik kui ka teise taseme pealkiri, mis kasutavad seda hoiatus klass. Mõlemal on punane taustavärv:
See lõik oleks kirjutatud punasega.
Tänapäeval kasutatakse veebisaitidel enamikul elementidel sageli klassi atribuute, kuna nendega on spetsiifilisuse seisukohast lihtsam töötada kui ID-d. Leiate, et kõige praegused HTML-lehed täidetakse klassi atribuutidega, millest mõnda korratakse dokumendis sageli ja teisi, mis võivad ilmuda ainult ühe korra.
ID valijad
ID valija nimetab konkreetse stiili, seostamata seda silti või muud HTML-element.
Oletame, et HTML-i märgistuses on jaotus, mis sisaldab teavet sündmuse kohta. Sa võiksid sellele jaotusele anda ID atribuut kohta sündmusja seejärel kirjeldage seda jaotust 1 piksli laiuse musta äärisega:
#event {ääris: 1px kindel # 000; }
Väljakutse koos ID valijad on see, et neid ei saa HTML-dokumendis korrata. Need peavad olema ainulaadsed (sama ID-d saate kasutada oma saidi mitmel lehel, kuid ainult üks kord igas HTML-dokumendis). Nii et kolme sündmuse jaoks, mis kõik vajavad seda piiri, peate tuvastama ID atribuudid sündmus1, sündmus2ja sündmus3 ja stiili igaüks neist. Seetõttu oleks palju lihtsam kasutada ülalnimetatud klassi atribuuti sündmus ja stiilige need kõik korraga.
ID-atribuutide tüsistused
Teine ID-atribuutide väljakutse on see, et neil on kõrgem spetsiifilisus kui klassi atribuutidel. Varem väljakujunenud stiili alistamiseks võib olla keeruline seda teha, kui olete liiga palju lootnud ID-dele. Paljud veebiarendajad on eemaldunud kasutades ID-sid oma märgistuses, isegi kui nad kavatsevad seda väärtust kasutada ainult ühe korra, ja on selle asemel pöördunud peaaegu kõigi klassi vähem atribuutide poole stiilid.
Üks atribuut, kus ID-atribuudid tulevad mängu, on see, kui soovite luua lehe, millel on lehesisesed ankurlingid. Näiteks kaaluge parallaksi stiilis veebisaiti, mis sisaldab kogu sisu ühel lehel koos linkidega, mis "hüppavad" selle lehe erinevatesse osadesse. ID-atribuudid ja tekstilingid kasutavad neid ankru linke. Lisage selle atribuudi väärtus, millele eelneb # sümbol href lingi atribuut, selline:
See on link
Kui klõpsatakse või puudutatakse, hüppab see link lehe sellesse ossa, millel on see ID-atribuut. Kui ükski lehe element ei kasuta seda ID-väärtust, ei tee link midagi.
Saidil lehesisese linkimise loomiseks on vaja kasutada ID-atribuute, kuid üldiste CSS-i stiilieesmärkide saamiseks võite siiski klasside poole pöörduda. Nii märgistavad disainerid tänapäeval lehti - nad kasutavad nii palju kui võimalik klassi valijaid ja pöörduvad ID-de poole ainult siis, kui neil on vaja atribuuti, mis toimiks mitte ainult CSS-i konksuna, vaid ka lehesisese lingina.