Šiuolaikinio žiniatinklio svetainių kūrimas reikalauja gilių CSS (kaskadinių stilių lapų) supratimo. Tai yra instrukcijos, kurias pateikiate tinklalapiui, kad nustatytumėte, kaip ji bus išdėstyta naršyklės lange. Savo "HTML" dokumente galite taikyti "stilių" seriją, kuri sukurs jūsų svetainės išvaizdą ir jausmą.
Yra keletas būdų, kaip taikyti tuos aukščiau minėtus stilius dokumente, tačiau dažnai norite naudoti tik stilių kai kurie dokumento elementų, bet ne visi elementai. Taip pat galite sukurti stilių, kurį galite taikyti keliems dokumento elementams, nereikėtų pakartoti stiliaus taisyklės kiekvienam atskiram egzemplioriui. Norėdami pasiekti norimus stilius, naudosite klasės ir ID HTML atributus. Šie atributai yra globalūs atributai, kuriuos galima pritaikyti beveik kiekvienai HTML žymei. Tai reiškia, kad savo dokumente esate stiliaus skyrių, pastraipų, nuorodų, sąrašų ar kitų HTML elementų, galite kreiptis į klasės ir ID atributus, kad padėtų jums įvykdyti šią užduotį!
Klasių parinkėjai
Klasės selektorius leidžia nustatyti kelis stilius viename dokumente esančiam elementui ar žymei. Pavyzdžiui, galbūt norėsite, kad tam tikros jūsų teksto skilties dalys skambėtų kitokia spalva nei likusi dokumento teksto dalis. Šie išskirti skyriai gali būti "įspėjimas", kurį nustatote puslapyje. Galite priskirti savo pastraipas tokiomis klasėmis:
p (spalva: # 0000ff; } p.alert {color: # ff0000; } Šie stiliai nustatys spalvą visi punktai yra mėlyni (# 0000ff), bet bet kuria pastraipa su klasės įspėjimu klasėje būtų vietoj raudonos spalvos (# ff0000). Taip yra todėl, kad klasės atributas turi didesnę specifiškumą nei pirmoji CSS taisyklė, kuri naudoja tik žymeklio parinkiklį. Kai dirbate su CSS, konkretesnė taisyklė ignoruoja mažiau konkrečią. Taigi šiame pavyzdyje bendresnė taisyklė nustato visų pastraipų spalvą, tačiau antroji, konkretesnė taisyklė nei pakeičia šį nustatymą tik kai kuriose pastraipose. Štai kaip tai gali būti naudojama kai kuriuose HTML žymėjimuose: Ši pastraipa bus rodoma mėlynai, kuri yra puslapio numatytoji reikšmė.
Ši pastraipa taip pat bus mėlyna.
Ir ši pastraipa bus rodoma raudonai, nes klasės atributas perrašys standartinę mėlyną spalvą iš elementų parinkiklio stiliaus.
Šiame pavyzdyje "p.alert" stilius būtų taikomas tik elementų elementams, naudojantiems šią "alert" klasę. Jei norite naudoti šią klasę keliuose HTML elementuose, paprasčiausiai pašalinkite HTML elementą iš stiliško skambučio pradžios (tiesiog būtinai palikite laikotarpį ( .) vietoje), tokia: .alert {fono spalva: # ff0000;} Ši klasė dabar yra prieinama visiems elementams, kuriems to reikia. Bet koks jūsų HTML elementas, turintis "įspėjimo" klasės atributo reikšmę, dabar gaus šį stilių. Žemiau pateiktame HTML puslapyje mes turime tiek pastraipą, tiek antraštę 2 lygį, kuriuose naudojama "įspėjimo" klasė. Abu šie paveikslėliai turėtų būti raudonos spalvos pagal CSS, kurį ką tik parodėme.
Ši pastraipa būtų parašyta raudonai.
Šiandien tinklalapiuose klasės elementai dažnai naudojami daugumoje elementų, nes jiems lengviau dirbti, atsižvelgiant į specifines nuostatas, kurios yra ID. Rasite naujausius HTML puslapius, kurie bus užpildyti klasės atributais, kai kurie iš jų kartojami kelis kartus dokumente ir kiti, kurie gali būti rodomi tik vieną kartą. ID atrankos priemonė leidžia nurodyti tam tikro stiliaus pavadinimą, nesiejant jo su žyma ar kitais HTML elementais. Tarkime, kad turėjote padalijimą į HTML žymėjimą, kuriame yra informacijos apie įvykį. Galite suteikti šį padalijimą "įvykio" ID atributą, o tada, jei norėtumėte apibūdinti tą padalijimą su 1 pikselių pločio juodą sieną, rašote tokį kodą: #event {border: 1px solid # 000; } Problema su ID atranka yra tai, kad HTML dokumentas negali būti kartojamas. Jie turi būti unikalūs (galite naudoti tą patį ID keliuose jūsų svetainės puslapiuose, bet tik vieną kartą kiekviename atskirame HTML dokumente). Taigi, jei jums buvo 3 įvykiai, kuriems visiems reikėjo šios sienos, reikės nurodyti jiems "event1", "event2" ir "event3" ID atributus ir kiekvieno iš jų stilių. Todėl būtų daug lengviau naudoti pirmiau minėtą "įvykio" klasės požymį ir juos vienu metu sudaryti. Kitas ID atributų iššūkis yra tas, kad jie turi aukštesnę specifiškumą nei klasės atributai. Tai reiškia, kad jei jums reikia CSS, kuris pakeičia anksčiau nustatytą stilių, tai gali būti sunku tai padaryti, jei per daug rėmėsi ID. Dėl šios priežasties daugelis žiniatinklio kūrėjų atsisakė naudoti identifikatorius savo žymėjime, net jei jie tik ketina tą vertę naudoti tik vieną kartą, o vietoj to kreipėsi į mažiau specifinius klasės atributus beveik visiems stiliams. Viena sritis, kurioje ID atributai įsitvirtina, yra tada, kai norite sukurti puslapį, kuriame yra puslapio inkaro nuorodos. Pvz., Jei turite paralaksinio stiliaus svetainę, kurioje yra visas vieno puslapio turinys su nuorodomis, kurios "peršokti" į įvairias šio puslapio dalis. Tai atliekama naudojant ID atributus ir tekstinius saitus, kurie naudoja šiuos inkaro saitus. Jūs tiesiog pridėtumėte šio atributo reikšmę, prieš ją nurodydami simbolį "#", į "href" atributą, tokį kaip: Tai yra nuoroda Kai paspausite arba paliesite, ši nuoroda pereis į puslapio dalį, kurioje yra šis ID atributas.Jei nė vienas elementas šiame puslapyje nenaudoja šios ID vertės, nuoroda nieko nedarytų. Atminkite, kad jei norite sukurti puslapio nuorodą svetainėje, reikės naudoti ID atributus, tačiau vis tiek galite kreiptis į klases, kad galėtumėte naudoti CSS stiliaus tikslus. Štai kaip mes šiandien žyminame puslapius - mes naudojamės klasių selektoriais kiek įmanoma ir tik kreipiasi į ID, kai mums reikia atributo, kuris veiktų ne tik kaip CSS kablys, bet ir kaip puslapio nuoroda.Ir šis h2 taip pat būtų raudonas.
ID rinktuvai
ID atributų komplikacijos
