Kennsluskrá og auðkenni hjálpa til við að lengja CSS
Að byggja upp vefsíður á vefnum í dag krefst djúps skilnings á CSS (Cascading Style Sheets). Þetta eru leiðbeiningar um að þú veitir vefsíðu til að ákvarða hvernig það muni skipta út í vafranum. Þú notar röð af "stílum" við HTML skjalið þitt sem mun skapa útlit og feel á vefsíðunni þinni.
Það eru margar leiðir til að beita þessum ofangreindum stílum yfir skjal, en oft ertu að nota stíl á aðeins sumum þáttum í skjali, en ekki öllum tilvikum þess þáttar.
Þú gætir líka viljað búa til stíl sem þú getur sótt um nokkra þætti í skjali, án þess að þurfa að endurtaka stílregluna fyrir hvert einstakt tilvik. Til að ná þessum æskilegum stíll, verður þú að nota kennsluskilyrðin og kennimerki HTML. Þessir eiginleikar eru alþjóðlegar eiginleikar sem hægt er að nota á næstum hverju HTML tagi . Það þýðir að hvort þú ert stíll skiptingar, málsgreinar, tenglar, listar eða einhver önnur HTML-skjal í skjalinu þínu, geturðu snúið þér í kennslustund og kennitölu hjálpa þér að ná þessu verkefni!
Class Selectors
Valið á bekknum gerir þér kleift að stilla margar stíll í sama frumefni eða merkið í skjali. Til dæmis gætirðu viljað láta tiltekna hluta textans hringja í annan lit frá því sem eftir er af textanum í skjalinu. Þessi hápunktur köflum gæti verið "viðvörun" sem þú setur á síðunni. Þú gætir tengt málsgreinar þínar við flokka eins og þetta:
p {lit: # 0000ff; }
p.alert {litur: # ff0000; }
Þessi stíll myndi stilla lit allra málsgreinanna í bláa (# 0000ff), en hvaða málsgrein með bekksvottorð "viðvörun" myndi í staðinn vera stíll í rauðu (# ff0000). Þetta er vegna þess að eigindin í bekknum hefur meiri sérkenni en fyrsta CSS reglan, sem aðeins notar merki val.
Þegar unnið er með CSS mun tiltekin regla hunsa ósértækari. Svo í þessu dæmi setur almennari reglan lit allra málsgreinanna, en seinni, nákvæmari reglan en overrides sem stillir aðeins á nokkrum málsgreinum.
Hér er hvernig hægt er að nota þetta í einhverjum HTML markup:
Þessi málsgrein birtist í bláu, sem er sjálfgefið fyrir síðuna.
Þessi málsgrein myndi einnig vera í bláu.
Og þessi málsgrein yrði sýnd í rauðu þar sem eigindin í bekknum myndi skrifa yfir staðlaða bláa litinn frá frumstillingarstílnum.
Í því dæmi myndi stíllinn "p.alert" aðeins gilda um þætti sem nota þessa "viðvörun" bekk. Ef þú vilt nota þennan flokk yfir margar HTML þættir, þá ættir þú einfaldlega að fjarlægja HTML frumefni frá upphafi (bara vertu viss um að láta tímabilið (.) vera í stað), svona:
.alert {bakgrunnslit: # ff0000;}
Þessi flokkur er nú laus við hvaða þætti sem þarfnast hennar. Hvert stykki af HTML sem hefur eigindaskil eiginleika "viðvörun" mun nú fá þessa stíl. Í HTML hér fyrir neðan höfum við bæði málsgrein og fyrirsögn stig 2 sem nota "viðvörunar" bekkinn. Báðir þessir myndu hafa bakgrunnslit á rauðum byggðum á CSS sem við sýndu bara.
Þessi málsgrein væri skrifuð í rauðu.
Og þetta h2 myndi einnig vera rautt.
Á vefsíðum í dag eru flokks eiginleikar oft notaðar á flestum þáttum vegna þess að þau eru auðveldara að vinna með sértæku sjónarmiði sem auðkenni eru. Þú munt finna nýjustu HTML síðurnar sem verða fylltar með eiginleikum flokki, en sum þeirra eru endurtekin oft í skjali og aðrir sem geta aðeins birst einu sinni.
Kennimerki
Númeravalið leyfir þér að gefa nafn á tiltekna stíl án þess að tengja það við merki eða annað HTML-atriði . Segðu að þú hafir deild í HTML-merkinu þínu sem inniheldur upplýsingar um atburði.
Þú gætir gefið þessum deild ID eigindi af "atburði" og þá ef þú vildi skilgreina þessi deilingu með 1 pixla breiðum svörtum landamærum, skrifaðuðu kennitölu eins og þetta:
#event {landamæri: 1px solid # 000; }
Áskorunin með auðkenni valmöguleika er að þau geta ekki verið endurtekin í HTML skjali. Þeir verða að vera einstökir (þú getur notað sömu auðkenni á mörgum síðum vefsvæðisins, en aðeins einu sinni í hverju HTML skjali). Svo ef þú átt 3 atburði sem allir þurfa þessa ramma, þá ættir þú að gefa þeim auðkenni einkenni "event1", "event2" og "event3" og stíll hvert þeirra. Það væri því miklu auðveldara að nota framangreinda flokka eiginleika "atburðar" og stilla þau öll í einu.
Annar áskorun með einkenni eiginleiki er sú að þeir hafa meiri sértækni en bekkjaratriði. Þetta þýðir að ef þú þarft að hafa CSS sem stýrir fyrirfram ákveðnum stíl getur verið erfitt að gera það ef þú hefur treyst of mikið á auðkenni. Það er af þessum sökum að margir vefur verktaki hefur flutt í burtu frá því að nota auðkenni í merkingu þeirra, jafnvel þótt þeir ætla aðeins að nota þessi gildi einu sinni og hafa í staðinn snúið sér að minna sértækum flokki eiginleiki fyrir næstum allar stíll.
Eina svæðið þar sem auðkenni einkenni koma inn í leik er að þegar þú vilt búa til síðu sem hefur á síðu akkeri tengla. Til dæmis, ef þú ert með parallax stíl vefsíðu sem inniheldur allt innihald á einum síðu með tenglum sem "stökkva" á ýmsum hlutum þess síðu. Þetta er gert með því að nota ID eiginleika og textatengla sem nota þessar akkeri tenglar.
Þú ættir einfaldlega að bæta við gildi þess eiginleiki, fyrirfram með # tákninu, við href eiginleiki tengilins, eins og þetta:
Þetta er tengilinn
Þegar smellt er á eða snertir, mun þessi hlekkur hoppa til hluta þess síðu sem hefur þennan auðkenni. Ef enginn þáttur á síðunni notaði þetta auðkenni, myndi hlekkurinn ekki gera neitt.
Mundu að ef þú vilt búa til tengingu á síðu á síðunni verður að nota auðkenni eiginleika, en þú getur ennþá snúið til flokka fyrir almennar CSS stíl tilgangi. Þannig að ég merki síður í dag - ég notaði bekkjarvalsmenn eins mikið og mögulegt er og aðeins snúið sér að auðkenni þegar ég þarf eiginleiki til að starfa ekki aðeins sem krókur fyrir CSS heldur einnig sem tengill á síðu.
Upprunaleg grein af Jennifer Krynin. Breyttur af Jeremy Girard á 8/9/17