Š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 dokumentā, bet bieži vien jūs vēlaties izmantot stilu tikai daži no dokumenta elementiem, bet ne visi šī elementa gadījumi. 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, kurus var izmantot gandrīz katram HTML tagam. Tas nozīmē, ka jūsu dokumentā, vai dokumentā ir stilizējošas nodaļas, rindkopas, saites, saraksti vai kāds cits HTML elements, jūs varat vērsties pie klases un ID atribūtiem, lai palīdzētu jums 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 nosaka krāsu visi punktus zilā krāsā (# 0000ff), bet jebkuru punktu ar klases atribūtu "brīdinājums" vietā aizstātu ar sarkanu krāsu (# 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 jūs vēlētos izmantot šo klasi vairākiem HTML elementiem, vienkārši noņemiet HTML elementu no stila zvana sākuma (vienkārši izlaidiet periodu ( .) 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ā.
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ā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, pirms kura ir simbols "#", uz saites atribūtu "href", piemēram, šo: Šī ir saite Noklikšķinot vai pieskaroties, šī saite pāriet uz lapas daļu, kurai ir šis ID atribūts.Ja neviens no šī elementa elementiem neizmanto šo ID vērtību, 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. Šādā veidā mēs šodien iezīmējam lapas - mēs izmantojam klases atlasītājus cik vien iespējams, un tikai pagriezīsim uz ID, kad mums vajadzīgs atribūts, kas darbojas ne tikai kā CSS āķis, bet arī kā lappusi.Un šis h2 arī būtu sarkans.
ID atlasītāji
ID atribūtu komplikācijas
