Klases un ID palīdz paplašināt jūsu CSS
Šodienas tīmekļa vietņu veidošanai ir nepieciešama dziļa CSS (Cascading Style Sheets) izpratne. Tie ir norādījumi, ka jūs sniedzat vietni, lai noteiktu, kā tā būs izkārtojums pārlūkprogrammas logā. HTML dokumentu izmantojat virkni "stilu", kas izveidos jūsu tīmekļa lapas izskatu un izskatu.
Pastāv vairāki veidi, kā piemērot šos iepriekš minētos stilus visā dokumentā, taču bieži vien jūs vēlaties izmantot stilu tikai dažiem dokumenta elementiem, bet ne visiem šī elementa gadījumiem.
Varat arī vēlēties izveidot stilu, ko var piemērot vairākiem dokumenta elementiem, neprasot atkārtot stilu noteikšanu katram atsevišķam gadījumam. Lai sasniegtu šos vēlamos stilus, jūs izmantosiet klases un ID HTML atribūtus. Šie atribūti ir globālie atribūti, ko var izmantot gandrīz katram HTML tagam . Tas nozīmē, ka jūsu dokumentā varat veidot sadaļas, rindkopas, saites, sarakstus vai jebkuru citu HTML daļu, un jūs varat vērsties pie klases un ID atribūtiem uz palīdzi izpildīt šo uzdevumu!
Klases atlasītāji
Klases selektors ļauj iestatīt vairākus stilus vienam un tam pašam elementam vai tagam dokumentā. Piemēram, jūs varētu vēlēties, lai jūsu teksta daĜas tiktu sauktas citā krāsā no pārējā dokumenta teksta. Šīs iezīmētās sadaļas varētu būt brīdinājums, kuru jūs iestatāt lapā. Jūs varat piešķirt savus punktus šādām nodarbībām:
p {krāsa: # 0000ff; }
p.alert {color: # ff0000; }
Šie stili visas krāsas punktus iestatīs uz zilu (# 0000ff), bet vietā ar rindas atribūtu "brīdinājums" tiks norādīts sarkanā krāsā (# ff0000). Tas ir tāpēc, ka klases atribūtam ir augstāka specifika nekā pirmais CSS noteikums, kurš izmanto tikai taga izvēli.
Strādājot ar CSS, īpašāks noteikums ignorē mazāk specifisku. Tātad šajā piemērā vispārīgāks noteikums nosaka visu rindkopu krāsu, bet otrais, specifiskāks noteikums nekā ignorē šo iestatījumu tikai dažos punktos.
Tālāk ir parādīts, kā to var izmantot dažās HTML atzīmēs:
Šis punkts tiks parādīts zilā krāsā, kas ir lapas noklusējums.
Šis punkts būtu arī zilā krāsā.
Un šis punkts tiks parādīts sarkanā krāsā, jo klases atribūts pārraksta standarta zilu krāsu no elementu atlasītāja stila.
Šajā piemērā "p.alert" stils attiecas tikai uz punktu elementiem, kas izmanto šo brīdinājuma klasi. Ja vēlaties izmantot šo klasi vairākos HTML elementos, jūs vienkārši noņemtu HTML elementu no sākuma stila zvans (tikai noteikti atstājiet laiku (.) vietā), piemēram:
.alert {fona krāsa: # ff0000;}
Šī klase tagad ir pieejama jebkuram elementam, kuram tas ir vajadzīgs. Jebkurš jūsu HTML kods, kam ir klases atribūta vērtība "brīdinājums", tagad iegūs šo stilu. Tālāk tekstā HTML ir gan punkts, gan arī virsraksts 2. līmenis, kas izmanto "brīdinājuma" klasi. Abām šīm krāsām būtu sarkana fona krāsa, pamatojoties uz CSS, kuru tikko parādījām.
Šis punkts būtu rakstīts sarkanā krāsā.
Un šis h2 arī būtu sarkans.
Mūsdienās klases atribūti bieži tiek izmantoti lielākajā daļā elementu, jo tiem ir vieglāk strādāt, izmantojot specifiskās perspektīvas, kas ir ID. Jūs atradīsiet visjaunākās HTML lapas, kas jāaizpilda ar klases atribūtiem, no kuriem daži tiek atkārtoti vairākkārt dokumentā un citi, kas var parādīties tikai vienreiz.
ID atlasītāji
ID atlasītājs ļauj piešķirt nosaukumu konkrētam stilam, nesaistot to ar tagu vai citu HTML elementu . Pieņemsim, ka jūsu HTML marķējumā ir sadalījums, kurā ir informācija par notikumu.
Jūs varētu piešķirt šim dalījumam "notikuma" ID atribūtu, un tad, ja jūs vēlētos izklīdināt šo sadalījumu ar 1-pikseļu platuma melnu malu, jums rakstīt šādu ID kodu:
#event {robeža: 1px cietais # 000; }
Izaicinājums ar ID atlasītājiem ir tāds, ka tos nevar atkārtot HTML dokumentā. Tiem jābūt unikāliem (jūs varat izmantot to pašu ID vairākās vietnes lapās, bet tikai vienu reizi katrā atsevišķā HTML dokumentā). Tātad, ja jums bija 3 notikumi, kuriem visiem bija nepieciešama šī robeža, jums vajadzētu piešķirt viņiem "event1", "event2" un "event3" ID atribūtus un stilu katram no tiem. Tādēļ būtu daudz vieglāk izmantot iepriekšminēto "notikuma" klases atribūtu un vienlaikus stilīgi tos visus.
Vēl viens ID atribūtu izaicinājums ir tas, ka tiem ir augstāka specifika nekā klases atribūtām. Tas nozīmē, ka, ja jums ir nepieciešama CSS, kas ignorē iepriekš izveidotu stilu, to var būt grūti izdarīt, ja jūs pārāk lielā mērā esat paļāvies uz ID. Tieši šī iemesla dēļ daudzi tīmekļa izstrādātāji ir atvairījušies no ID izmantošanas to atzīmēšanā, pat ja viņi tikai plāno šo vērtību izmantot vienreiz, un gandrīz visiem stiliem tā vietā ir vērsušies pie mazāk specifiskiem klases atribūtiem.
Viena no jomām, kurā tiek parādīti ID atribūti, ir tad, kad vēlaties izveidot lapu, kurai ir lappuses enkuru saites. Piemēram, ja jums ir paralakses stila vietne, kas satur visu saturu vienā lapā ar saitēm, kas "pāriet" uz dažādām šīs lapas daļām. Tas tiek darīts, izmantojot ID atribūtus un teksta saites, kas izmanto šīs enkura saites.
Jūs vienkārši pievienotu šī atribūta vērtību, kuram seko # simbols, saites href atribūtam, piemēram:
Šī ir saite
Noklikšķinot vai pieskaroties, šī saite pāriet uz lapas daļu, kurai ir šis ID atribūts. Ja šai ID vērtībai nav neviena elementa lapā, saite nedarītu neko.
Atcerieties, ka, ja vēlaties izveidot vietnes saiti vietnē, būs nepieciešami ID atribūti, taču jūs joprojām varat vērsties pie klasēm, lai izmantotu vispārīgus CSS stilizācijas mērķus. Tas ir tas, kā es šodien iezīmēju lapas - es pēc iespējas izmantoju klases atlasītājus un tikai pagriežos pie ID, kad man ir nepieciešams atribūts, kas darbojas ne tikai kā CSS āķis, bet arī kā lappuses saite.
Jennifera Krīnina oriģinālais raksts. Rediģējis Jeremijs Girards, kas datēts ar 8/9/17