Lai izveidotu labi veidotas vietnes mūsdienu tīmeklī, ir nepieciešama dziļa izpratne par tām Kaskādes stila lapas. Pielietojiet CSS stilu sēriju savam HTML dokumentam, lai informētu par jūsu tīmekļa izskatu un izskatu.
Klases un ID atribūti
Dažreiz dizaineriem stils jāpiemēro tikai daži no dokumenta elementiem, bet ne visi šī elementa gadījumi. Lai sasniegtu šos vēlamos stilus, izmantojiet klasē un ID HTML atribūti. Šie atribūti ir globāli atribūti, kas piemērojami gandrīz ikvienam HTML tags—Tātad neatkarīgi no tā, vai jūs dokumentā veidojat sadalījumus, rindkopas, saites, sarakstus vai kādu citu HTML fragmentu, varat pievērsties klases un ID atribūtiem, lai palīdzētu jums veikt šo uzdevumu!
Klases atlasītāji
Klases atlasītājs dokumentā vienam elementam vai tagam iestata vairākus stilus. Piemēram, lai izsauktu noteiktas teksta sadaļas ar citu krāsu kā brīdinājumu, piešķiriet rindkopas šādām klasēm:
p {krāsa: # 0000ff; }
p.alert {color: # ff0000; }
Šie stili iestatītu krāsuvisi rindkopas līdz zilai (# 0000ff), bet jebkura rindkopa ar klases atribūtu
trauksme vietā būtu veidots sarkanā krāsā (# ff0000). Tas ir tāpēc, ka klases atribūtam ir augstāka specifika nekā pirmajai CSS kārtulai, kurā tiek izmantots tikai tagu atlasītājs. Strādājot ar CSS, konkrētāks noteikums ignorēs mazāk specifisku. Tātad šajā piemērā vispārīgāks noteikums nosaka visu punktu krāsu, bet otrais, konkrētāks noteikums, nekā šo iestatījumu ignorē tikai dažos punktos.Lūk, kā to varētu izmantot dažos HTML marķējumos:
Šis punkts tiktu parādīts zilā krāsā, kas ir lapas noklusējums.
Arī šis punkts būtu zilā krāsā.
Šis punkts tiktu parādīts sarkanā krāsā, jo klases atribūts pārrakstīs standarta zilo krāsu no elementu atlasītāja stila.
Šajā piemērā p.brīdinājums attiecas tikai uz rindkopu elementiem, kas to izmanto trauksme klasē. Lai izmantotu šo klasi vairākos HTML elementos, noņemiet HTML elementu no stila izsaukuma sākuma šādi:
.alert {background-color: # ff0000;}
Šī klase tagad ir pieejama visiem elementiem, kuriem tā nepieciešama. Jebkurš jūsu HTML gabals, kuram ir klases atribūta vērtība trauksme tagad iegūs šo stilu. Zemāk esošajā HTML mums ir gan rindkopa, gan otrā līmeņa virsraksts, kas izmanto trauksme klasē. Abās fona krāsa ir sarkana:
Šis punkts būtu rakstīts sarkanā krāsā.
Mūsdienās vietnēs klases atribūti bieži tiek izmantoti lielākajai daļai elementu, jo no specifikas viedokļa ar tiem ir vieglāk strādāt nekā ar ID. Jūs atradīsit lielāko daļu pašreizējo HTML lapu, kas jāaizpilda ar klases atribūtiem, no kuriem daži dokumentā tiek atkārtoti bieži, bet citi var parādīties tikai vienu reizi.
ID atlasītāji
ID selektors nosauc konkrētu stilu, nesaistot to ar tagu vai citu HTML elements.
Pieņemsim, ka HTML iezīmējumā ir sadalījums, kas satur informāciju par notikumu. Jūs varētu piešķirt šim sadalījumam ID atribūts gada notikumuun pēc tam iezīmējiet šo sadalījumu ar 1 pikseļa platu melnu apmali:
#event {apmale: 1px ciets # 000; }
Izaicinājums ar ID atlasītāji ir tas, ka tos nevar atkārtot HTML dokumentā. Tiem jābūt unikāliem (vienu un to pašu ID varat izmantot vairākās savas vietnes lapās, bet tikai vienreiz katrā atsevišķā HTML dokumentā). Tātad trim notikumiem, kuriem visiem ir nepieciešama šī robeža, jums jāidentificē ID atribūti notikums1, event2, un notikums3 un ieveidojiet katru no tiem. Tāpēc būtu daudz vieglāk izmantot iepriekš minēto klases atribūtu notikumu un stils tos visus uzreiz.
ID atribūtu komplikācijas
Vēl viens ID atribūtu izaicinājums ir tāds, ka tiem ir augstāka specifika nekā klases atribūtiem. Lai ignorētu iepriekš izveidotu stilu, to var būt grūti izdarīt, ja esat pārāk paļāvies uz ID. Daudzi tīmekļa izstrādātāji ir attālinājušies no izmantojot ID savos marķējumos, pat ja viņi šo vērtību plāno izmantot tikai vienu reizi, un gandrīz visiem ir pievērsušies mazāk specifiskajiem klases atribūtiem stili.
Vieta, kur tiek izmantoti ID atribūti, ir tāda, kad vēlaties izveidot lapu, kurā ir enkura saites lapā. Piemēram, ņemiet vērā paralakses stila vietni, kas satur visu vienā lapā esošo saturu ar saitēm, kas "pāriet" uz dažādām šīs lapas daļām. ID atribūtos un teksta saitēs tiek izmantotas šīs enkura saites. Pievienojiet šī atribūta vērtību, pirms kuras ir # simbols href saites atribūts, piemēram:
Šī ir saite
Noklikšķinot vai pieskaroties, šī saite pāriet uz tās lapas daļu, kurai ir šis ID atribūts. Ja neviens lapas elements neizmanto šo ID vērtību, saite neko nedarīs.
Lai vietnē izveidotu saites lapā, būs jāizmanto ID atribūti, taču jūs joprojām varat vērsties klasēs vispārīgiem CSS stila mērķiem. Šādi dizaineri šodien atzīmē lapas - viņi pēc iespējas vairāk izmanto klases atlasītājus un vēršas pie ID tikai tad, kad viņiem nepieciešams atribūts, kas darbotos ne tikai kā CSS āķis, bet arī kā saite lapā.