Stila klašu un ID izmantošana

Klases un ID paplašina jūsu CSS

E+/Getty Images

Lai mūsdienu tīmeklī izveidotu labi veidotas vietnes, ir nepieciešama dziļa izpratne par Kaskādes stila lapas . Lietojiet savam HTML dokumentam virkni CSS stilu, lai informētu par savas tīmekļa lapas izskatu un izskatu.

Klases un ID atribūti

Dizaineriem dažreiz ir jāpiemēro tikai stils daži dokumenta elementiem, bet ne visiem šī elementa gadījumiem. 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 visiem HTML tags — tātad neatkarīgi no tā, vai savā dokumentā veidojat iedalījumus, rindkopas, saites, sarakstus vai jebkuru citu HTML daļu, varat izmantot klases un ID atribūtus, lai palīdzētu veikt šo uzdevumu!

Klašu atlasītāji

Klases atlasītājs iestata vairākus stilus vienam dokumenta elementam vai tagam. Piemēram, lai izsauktu noteiktas teksta sadaļas citā krāsā kā brīdinājums, piešķiriet rindkopām šādas klases:

|_+_|

Šie stili noteiktu krāsu visi rindkopas uz zilu (#0000ff), bet jebkura rindkopa ar klases atribūtu brīdinājums tā vietā veidotu 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 aizstās ne tik specifisku. Tātad šajā piemērā vispārīgākais noteikums nosaka visu rindkopu krāsu, bet otrs, konkrētāks noteikums, ignorē šo iestatījumu tikai dažās rindkopās.

Lūk, kā to varētu izmantot dažos HTML iezīmējumos:

|_+_|

Šī rindkopa tiks parādīta zilā krāsā, kas ir lapas noklusējuma vērtība.

Arī šī rindkopa būtu zilā krāsā.

Un šī rindkopa tiks parādīta sarkanā krāsā, jo klases atribūts pārrakstītu standarta zilo krāsu no elementu atlasītāja stila.

Šajā piemērā stils p.alert attiektos tikai uz rindkopas elementiem, kas to izmanto brīdinājums klasē. Lai izmantotu šo klasi vairākos HTML elementos, noņemiet HTML elementu no stila izsaukuma sākuma, piemēram:

|_+_|

Šī klase tagad ir pieejama jebkuram elementam, kuram tā ir nepieciešama. Jebkurš HTML fails, kuram ir klases atribūta vērtība brīdinājums tagad iegūs šo stilu. Tālāk esošajā HTML ir gan rindkopa, gan otrā līmeņa virsraksts, kas izmanto brīdinājums klasē. Abiem ir sarkana fona krāsa:

|_+_|

Šī rindkopa būtu rakstīta sarkanā krāsā.

Mūsdienu vietnēs klases atribūti bieži tiek izmantoti lielākajai daļai elementu, jo ar tiem ir vieglāk strādāt no specifikas viedokļa nekā ar ID. Jūs atradīsit lielāko daļu jaunāko HTML lapu, kas jāaizpilda ar klases atribūtiem, no kuriem daži dokumentā tiek atkārtoti atkārtoti, bet citi var parādīties tikai vienu reizi.

ID atlasītāji

ID atlasītājs nosauc konkrētu stilu, nesaistot to ar tagu vai citu HTML elements .

Pieņemsim, ka savā HTML iezīmējumā ir daļa, kas satur informāciju par notikumu. Jūs varētu piešķirt šim sadalījumam ID atribūts no notikumu un pēc tam iezīmējiet šo sadalījumu ar 1 pikseļa platu melnu apmali:

|_+_|

Izaicinājums ar ID atlasītāji ir tas, ka tos nevar atkārtot HTML dokumentā. Tiem ir jābūt unikāliem (jūs varat izmantot vienu un to pašu ID vairākās vietnes lapās, bet tikai vienu reizi katrā atsevišķā HTML dokumentā). Tātad trim notikumiem, kuriem visiem nepieciešama šī robeža, jums ir jānorāda ID atribūti pasākums 1 , pasākums2 , un pasākums 3 un stilu katru no tiem. Tāpēc būtu daudz vienkāršāk izmantot iepriekš minēto klases atribūtu notikumu un veidojiet tos visus vienlaikus.

ID atribūtu sarežģījumi

Vēl viens izaicinājums ar ID atribūtiem ir tas, ka tiem ir augstāka specifika nekā klases atribūtiem. Lai ignorētu iepriekš izveidoto stilu, var būt grūti to izdarīt, ja esat pārāk paļāvies uz ID. Daudzi tīmekļa izstrādātāji ir atteikušies no ID izmantošanas savos marķējumos, pat ja viņi plāno izmantot šo vērtību tikai vienu reizi, un tā vietā ir pievērsušies mazāk specifiskiem klases atribūtiem gandrīz visiem stiliem.

Vienīgā joma, kurā tiek izmantoti ID atribūti, ir tad, kad vēlaties izveidot lapu, kurā ir lapas enkura saites. Piemēram, apsveriet paralakses stila vietni, kurā ir viss saturs vienā lapā ar saitēm, kas 'pārlec' uz dažādām šīs lapas daļām. ID atribūti un teksta saites izmanto šīs enkura saites. Pievienojiet šī atribūta vērtību, pirms kuras ir # simbols, uz href saites atribūts, piemēram:

|_+_|

Noklikšķinot vai pieskaroties, šī saite pāriet uz to lapas daļu, kurā ir šis ID atribūts. Ja neviens lapas elements neizmanto šo ID vērtību, saite neko nedarīs.

Lai vietnē izveidotu saiti lapā, būs jāizmanto ID atribūti, taču jūs joprojām varat vērsties pie klasēm vispārīgiem CSS stila mērķiem. Šādi dizaineri mūsdienās atzīmē lapas — viņi pēc iespējas vairāk izmanto klašu atlasītājus un pievēršas ID tikai tad, kad nepieciešams atribūts, lai tas darbotos ne tikai kā CSS āķis, bet arī kā saite lapā.