REZULTATAS:

Pilka teksto spalva visose tinklalapio pastraipose

Pilka teksto spalva visose tinklalapio pastraipose

Išoriniai (susieti) stiliai

Išoriniai (susiję) stiliai apibrėžiami atskirame faile su plėtiniu css. Išoriniai stiliai leidžia visiems svetainės puslapiams atrodyti nuosekliai.

Norėdami susieti su stilius apibūdinančiu failu, naudokite žymą esantis konteineryje ... .

Šioje žymoje turi būti nustatyti du atributai: rel="stiliaus lapas" Ir href, apibrėžiantis stilių failo adresą.

Pavyzdys

Stilių sujungimas

Globalių ir išorinių stilių sujungimo taisyklė susideda iš parinkiklis Ir reklamos stilius.

Kairėje taisyklės pusėje esantis parinkiklis nustato elementą (-ius), kuriam (-iems) nustatyta taisyklė. Toliau stiliaus deklaracijos pateikiamos riestiniais skliaustais, atskirtais kabliataškiais. Pavyzdžiui:

P (teksto įtrauka: 30 taškų; šrifto dydis: 14 pikselių; spalva: #666; )

Stiliaus deklaracija yra pora CSS nuosavybė: CSS vertė.

Pavyzdžiui: spalva: raudona

Prijungiant stilių viduje, CSS taisyklė, kuri yra atributo reikšmė stilius, susideda iš stiliaus deklaracijų, atskirtų kabliataškiais. Pavyzdžiui:

CSS parinkikliai

Universalus selektorius

Universalus parinkiklis atitinka bet kurį HTML dokumento elementą.

Žvaigždutės simbolis (*) naudojamas universaliam selektoriui žymėti.

Jis naudojamas, jei reikia nustatyti tą patį stilių visiems tinklalapio elementams. Pavyzdžiui:

* ( paraštė: 0; užpildymas: 0; )

Kai kuriais atvejais žvaigždutės (*) simbolis gali būti praleistas:
*.Mano klasė Ir .Mano klasė ekvivalentai,
*#mano Ir #myid lygiavertis

Žymų parinkikliai

Parinkiklis gali būti bet kokia HTML žyma, kuriai nustatytos stiliaus taisyklės. Pavyzdžiui:

H1 (spalva: raudona; teksto lygiavimas: centre;)

Jei keli elementai turi bendrą stilių, juos atitinkantys parinkikliai gali būti išvardyti stiliaus lape, atskirti kableliais. Pavyzdžiui:

H1, h2, h3, h4 (spalva: raudona; teksto lygiavimas: centre;)

ID parinkikliai

HTML suteikia galimybę bet kuriai žymai priskirti unikalų identifikatorių. Identifikatorius nurodomas atributu id. Pavyzdžiui:

Identifikatoriaus reikšmė turi prasidėti lotyniška raide ir gali būti sudaryta iš raidžių (,), skaičių (), brūkšnelių (-) ir apatinių brūkšnių (_).

Visos atributų reikšmės id html dokumente turi būti unikalus. Jei jie susitiks id su tomis pačiomis reikšmėmis, tada šie identifikatoriai nepaisomi ir tinklalapio kodas tampa negaliojantis.

CSS kode identifikatoriaus parinkiklis pavaizduotas maišos ženklu (#). Nuo identifikatoriaus id taikoma tik unikaliems elementams, žymos pavadinimas prieš maišos ženklą (#) paprastai praleidžiamas:

Div#a1 (spalva: žalia;)

panašiai

#a1 (spalva: žalia;)

Patartina naudoti id ne elemento stiliui sudaryti, o prieigai prie jo naudojant scenarijus arba sekant nuorodą.

Klasių parinkėjai

Klasių parinkikliai dažniausiai naudojami stiliui. Žymos klasė nurodoma atributu klasė. Pavyzdžiui:

Klasės pavadinimas turi prasidėti lotyniška raide ir jame gali būti raidžių (,), skaičių (), brūkšnelių (-) ir apatinių brūkšnių (_).

Jei atributas id naudojamas unikaliam identifikavimui, tada naudojamas atributas klasėžyma priskiriama vienai ar kitai grupei.

CSS kode identifikatoriaus parinkiklis pavaizduotas tašku (.). Į tą pačią klasę galima priskirti skirtingas žymes. Šiuo atveju žymos pavadinimas prieš tašką (.) praleidžiamas:

I.green (spalva: #008000;) b.red (spalva: #f00;).mėlyna (spalva: #00f;)

Žymei galite nurodyti kelias klases vienu metu, įtraukdami jas į atributą klasė per erdvę. Šiuo atveju elementui taikomi kiekvienos nurodytos klasės stiliai.

Jei kai kuriose iš šių klasių yra tos pačios stiliaus savybės, bet skirtingos reikšmės, tada bus taikomos klasės, esančios žemiau CSS kode, stiliaus reikšmės.

Atributų parinkikliai

Yra daug atributų parinktuvų, kuriuos galite naudoti norėdami stiliuoti žymą pagal jos atributus.

Tarp žymos pavadinimo ir laužtinio skliausto ([) neturi būti tarpo!

Universalus parinkiklis, žyma, identifikatorius, klasės ir atributo parinkikliai bei pseudoklasės yra paprasti parinkikliai.

Paprasti parinkikliai gali būti sujungti į konkrečias sekas, remiantis elementų ryšiais žiniatinklio dokumentų medyje. Tokios konstrukcijos vadinamos kombinatoriais.

Konteksto parinkikliai

Vienas iš dažniausiai naudojamų kombinatorių yra konteksto parinkiklis.

Konteksto parinkikliai arba palikuonių parinkikliai apibrėžia kelis elementus, iš kurių vienas yra kitame. Konteksto parinkiklyje paprasti parinkikliai atskiriami tarpu.

Pavyzdys

1. Puškinas A.S.
   • "Šūvis"
   • "Pūga"
   • "Dubrovskis"
2. Gogolis N.V.
   • "inspektorius"
   • "Taras Bulba"
   • "Mirusios sielos"
3. Tolstojus L.N.
   • "Karas ir taika"
   • "Ana Karenina"
   • "Prisikėlimas"

REZULTATAS:

1. Puškinas A.S.
   • "Šūvis"
   • "Pūga"
   • "Dubrovskis"
2. Gogolis N.V.
   • "inspektorius"
   • "Taras Bulba"
   • "Mirusios sielos"
3. Tolstojus L.N.
   • "Karas ir taika"
   • "Ana Karenina"
   • "Prisikėlimas"

Vaikų parinkėjai

Vaikų parinkiklis identifikuoja elementą, esantį kitame pačiame. Vaikų parinkiklyje paprasti parinkikliai atskiriami didesniu nei ženklu (>).

Pavyzdys

1. Puškinas A.S.
   • "Šūvis"
   • "Pūga"
   • "Dubrovskis"
2. Gogolis N.V.
   • "inspektorius"
   • "Taras Bulba"
   • "Mirusios sielos"
3. Tolstojus L.N.
   • "Karas ir taika"
   • "Ana Karenina"
   • "Prisikėlimas"

REZULTATAS:

1. Puškinas A.S.
   • "Šūvis"
   • "Pūga"
   • "Dubrovskis"
2. Gogolis N.V.
   • "inspektorius"
   • "Taras Bulba"
   • "Mirusios sielos"
3. Tolstojus L.N.
   • "Karas ir taika"
   • "Ana Karenina"
   • "Prisikėlimas"

Gretimi selektoriai

Gretimas parinkiklis nurodo pliuso ženklą (+), skiriantį dvi paprastų parinktuvų sekas. Elementai, kuriuos žymi šios sekos, yra viename konteineryje, o antrasis iškart po pirmojo, neatskiriamas jokiomis kitomis žymomis.

Pavyzdys

REFLEKSOLOGIJA

REZULTATAS:

REFLEKSOLOGIJA

Gretimi selektoriai

Gretimas parinkiklis nurodo tildės (~) simbolį, skiriantį dvi paprastų parinktuvų sekas. Elementai, pavaizduoti šiomis sekomis, yra tame pačiame konteineryje, o antrasis seka po pirmojo (nebūtinai tiesiogiai).

Pavyzdys

REFLEKSOLOGIJA

"Visi sąmoningo ir nesąmoningo gyvenimo veiksmai, atsižvelgiant į jų kilmę, yra refleksai". JUOS. Sechenovas

Refleksologija – tai ligų gydymas kontroliuojant refleksus. Jis sėkmingai naudojamas kompleksinėse gydymo programose arba kaip individuali technika.

REZULTATAS:

REFLEKSOLOGIJA

"Visi sąmoningo ir nesąmoningo gyvenimo veiksmai, atsižvelgiant į jų kilmę, yra refleksai". JUOS. Sechenovas

Refleksologija – tai ligų gydymas kontroliuojant refleksus. Jis sėkmingai naudojamas kompleksinėse gydymo programose arba kaip individuali technika.

Parinkiklis naudojamas unikaliai identifikuoti elementą HTML dokumente, kuriam norime pritaikyti tam tikrą CSS stilių.

• Rinkiklis pagal elementą;
• Rinkėjas pagal klasę;
• parinkiklis pagal id;
• Konteksto parinkiklis;

Elementų parinkiklis

Iki šiol dirbome su šiuo parinkikliu. HTML elemento, kuriam norėjome pritaikyti šį stilių, pavadinimas buvo naudojamas kaip parinkiklis. Tie. Parašius klasę, pavyzdžiui, pastraipai (P), visos puslapio pastraipos įgavo šios klasės stilių.

P(
šrifto dydis: 12 pikselių
}

Dabar įsivaizduokite situaciją, kai pirmą pastraipą reikia padaryti vienu stiliumi, antrą – kitu, trečią – trečiu ir pan. Čia jis ateis mums į pagalbą parinkėjas pagal klasę.

Rinkėjas pagal klasę

Pažiūrėkime, kaip sukurti bendrąją klasę CSS. Ir tai padaryti labai paprasta: pirmiausia dedame tašką, tada iš karto, be tarpo, surašome klasės pavadinimą, o tada – stilių riestiniuose skliaustuose. Pavyzdžiui:

.žalias(
šriftų šeima: arial, verdana, sans-serif;
šrifto dydis: 12 pikselių; spalva: žalia;
}

Kaip pritaikyti šį stilių?

Tarkime, kad šį stilių norime pritaikyti konkrečiai dokumento pastraipai. Štai kaip tai atrodys html:

Pastraipos tekstas...

Kaip matote, atributas naudojamas klasė su stiliaus pavadinimo reikšme.

PAVYZDYS:

Tai įprasta pastraipa, joje naudojamas elementų parinkiklis

p(
šriftų šeima: arial, verdana, sans-serif;
šrifto dydis: 18 pikselių;
}
.green (spalva: žalia;)
.big_red(
šrifto dydis: 28 pikseliai;
spalva: raudona;
}

Pirmiausia nurodome visų pastraipų bazinį stilių (parinkiklis pagal elementą), o tada, jei norime ką nors pakeisti kurioje nors pastraipoje, sukuriame jai specialų stilių (selector by class) ir priskiriame šiai pastraipai. Kurdami šią labai ypatingą klasę, turime įrašyti tik tas savybes, kurias norime pridėti arba pakeisti, atsižvelgiant į pagrindinį šio elemento stilių.

Klasės iš aukščiau pateikto pavyzdžio gali būti taikomos ne tik pastraipai, bet ir, pavyzdžiui, antraštėms arba, pavyzdžiui, lentelės langeliui arba visai lentelei; trumpai tariant, jas galima pritaikyti visur, kur tik įmanoma. ką nors paveikti (šiuo atveju visur, kur yra spalvos ir teksto parametras).

Galite priversti klasę veikti tik konkretų elementą (pavyzdžiui, pastraipą), nurodydami elemento pavadinimą prieš tašką:

P.green (spalva: žalia;)

Dabar žalia klasė neveiks nieko, išskyrus P elementą.

Rinkiklis pagal id

Šis parinkiklis naudojamas, jei reikia pasirinkti vieną elementą, unikalų, kitokį nei visi kiti dokumente. Pavyzdžiui, tam tikru būdu paryškinkime pirmąją puslapio antraštę:

html dalis:

<Н1 id="firstheader">Pirma antraštė puslapyje

css – dalis:

H1#firstheader (spalva: raudona; šrifto svoris: paryškintas; teksto lygiavimas: centre)

Kaip matote, html dalyje vietoj klasės atributo naudojamas id atributas, o css vietoje taško – # ženklas.

Iš esmės tą patį galima padaryti naudojant J klasės selektorių

Konteksto parinkiklis

Tai labai naudingas dalykas. Tarkime, kad turime puslapį su lentelėmis ir teksto pastraipomis, o tiek lentelėje, tiek pastraipose yra paryškinti žodžiai. Būtina įsitikinti, kad pastraipoje paryškinti žodžiai tampa žali. Taigi čia yra:

p stiprus (spalva: žalia)

Tie. iš pradžių P tada tarpas, tada STIPRUS, ir tik tada stilius. Ši eilutė skamba maždaug taip: Jei elemento viduje P yra elementas STIPRUS tada stipriam elementui priskirkite žalią stilių.

Lizdas gali būti bet kokio lygio. Kitas pavyzdys: „Jei staiga atsidursite lentelės langelyje ( td), pastraipa ( P) , kurio viduje bus paryškintas paryškintas žodis ( STIPRUS), tegul šis žodis tampa raudonas! “

td p stiprus (spalva: raudona;)

CSS yra stiliaus taisyklės, kurias interpretuoja naršyklė ir pritaiko atitinkamiems dokumento elementams. Stiliaus taisyklė susideda iš trijų dalių:

• Rinkiklis yra HTML žyma, kuriai bus pritaikytas stilius. Tai gali būti bet kokia žyma, pvz.

  arba ir tt

  Nuosavybė yra HTML žymos atributo tipas. Paprasčiau tariant, visi HTML atributai konvertuojami į CSS ypatybes. Tai gali būti spalvos, rėmeliai, paminkštinimas ir kt.

  Reikšmė- yra nustatytas į nuosavybę. Pavyzdžiui, spalvos ypatybė gali būti žalia, #008000 ir kt.

  CSS selektorių sintaksė yra tokia:

  parinkiklis ( savybė: vertė )

  Pavyzdys. Lentelės kraštą galite nustatyti taip:

  Lentelė (kraštinė: 2 piks. vientisas #FF8C00; )

  Čia parinkiklio sintaksė yra tokia: lentelė yra parinkiklis, o kraštinė yra ypatybė, o 2 pikselių solidus #FF8C00 yra tos ypatybės vertė.

  Galite nurodyti parinkiklius įvairiais būdais, kaip jums atrodo tinkama. Toliau pateikiami selektorių tipai.>

  Standartiniai selektoriai

  Tai tas pats parinkiklis, kurį matėte aukščiau. Vėlgi, dar vienas pavyzdys, suteikiantis spalvą visoms pirmojo lygio antraštėms:

  H1 (spalva: #8B4513; )

  Universalūs selektoriai

  Užuot pasirinkęs konkretaus tipo elementus, universalus parinkiklis tiesiog atitinka bet kurio elemento tipo pavadinimą:

  * ( spalva: #808080; )

  Pagal šią taisyklę kiekvieno dokumento elemento turinys rodomas pilka spalva.

  Palikuonių parinkikliai arba įdėtieji parinkikliai

  Tarkime, kad stiliaus taisyklę norite taikyti tam tikram elementui tik tada, kai jis yra tam tikrame elemente, tada įdėtieji arba palikuonių parinkikliai padės tai padaryti. Kaip parodyta kitame pavyzdyje, elementui bus taikoma stiliaus taisyklė tik tada, kai jis yra žymos viduje

  .

  Ul em (spalva: #CD5C5C; )

  Klasių parinkėjai

  Galite nustatyti elementų stiliaus taisykles pagal klasės atributą. Visi elementai, turintys šią klasę, bus suformatuoti pagal tam tikrą taisyklę.

  Mėlyna (spalva: #0000FF;)

  klasė = "mėlyna". Galite šiek tiek konkretizuoti klasės parinkiklį. Pavyzdžiui:

  H1.mėlyna (spalva: #0000FF; )

  su atributu klasė = "mėlyna".

  Vienam elementui galite taikyti kelis klasės parinkiklius. Apsvarstykite šį pavyzdį:

  Ši pastraipa bus suformatuota klasėmis centras Ir drąsus.

  ID parinkikliai

  Galite nustatyti elementų stiliaus taisykles pagal id atributą. Visi elementai, turintys šį ID, bus suformatuoti pagal tam tikrą taisyklę.

  #mėlyna (spalva: #0000FF; )

  Pagal šią taisyklę kiekvieno elemento su atributu turinys mūsų dokumente rodomas mėlyna spalva id = "mėlyna". Galite šiek tiek konkretizuoti ID parinkiklį. Pavyzdžiui:

  H1#mėlyna (spalva: #0000FF; )

  Ši taisyklė rodo turinį mėlyna spalva tik elementams

  su atributu id = "mėlyna".

  Tikroji ID parinktuvų galia yra tada, kai jie naudojami kaip palikuonių parinktuvų pagrindas, pavyzdžiui:

  #blue h2 (spalva: #0000FF; )

  Šiame pavyzdyje visos antrojo lygio antraštės bus rodomos mėlynos spalvos, kai jos yra žymose su atributu id = "mėlyna".

  Vaikų parinkėjai

  Jūs jau žinote palikuonių rinkėjus. Yra ir kito tipo parinkiklis, labai panašus į vaikų parinkiklius, bet turintis skirtingą funkcionalumą – vaikų parinkiklis. Apsvarstykite šį pavyzdį:

  Body > p ( spalva: #0000FF; )

  Ši taisyklė visos pastraipos bus rodomos mėlyna spalva, jei jos yra tiesioginės elemento antrinės dalys . Kitos pastraipos, dedamos į kitų tipų elementus

  arba

  Gretimi selektoriai Vienas po kito sekantys HTML elementai vadinami gretimais elementais. Apsvarstykite šį pavyzdį: Stiprus + em (spalva: #0000FF; ) Ši taisyklė parodys žymos turinį mėlyna, jei ji ateina po elemento . Kitos žymos , nepatenka po žymos , ši taisyklė neturės įtakos. Atributų parinkikliai Taip pat galite taikyti stilius HTML elementams su tam tikrais atributais. Toliau pateikta stiliaus taisyklė atitiks visus įvesties elementus, turinčius tipo atributą su vertės tekstu: Įvestis (spalva: #0000FF; ) Atributų parinktuvų naudojimo pranašumas yra tas, kad elementas nesikeičia, o spalva taikoma tik norimiems teksto laukams. Atributo parinkikliui taikomos šios taisyklės: p – pasirenka visus pastraipos elementus su atributu lang. p – pasirenka visus pastraipos elementus, kuriuose lang atributas turi tikslią reikšmę „ru“. p – pasirenka visus pastraipos elementus, kuriuose lang atribute yra žodis „ru“. p - pasirenka visus pastraipos elementus, kuriuose lang atribute yra reikšmės, kurios yra tikslios „ru“ arba prasideda „ru“. Keletas stiliaus taisyklių Gali reikėti apibrėžti kelias vieno elemento stiliaus taisykles. Galite apibrėžti šias taisykles, kad sujungtumėte kelias ypatybes ir jas atitinkamas reikšmes į vieną bloką, kaip parodyta šiame pavyzdyje: H1 (spalva: #00CED1; tarpai tarp raidžių: 0,2 em; teksto transformacija: mažosios raidės; paraštė ir apačia: 2 em; šrifto svoris: 700; ) Visos nuosavybės ir vertės poros yra atskirtos kabliataškiu (;). Galite juos saugoti vienoje arba keliose eilutėse. Kad būtų lengviau skaityti, laikykite juos atskirose eilutėse. Nesijaudinkite dėl savybių, paminėtų aukščiau esančiame bloke. Šios savybės bus paaiškintos tolesnėse pamokose. Grupavimo parinkikliai CSS Jei norite, galite sudaryti daugybę pasirinkimų. Tiesiog atskirkite parinkiklius kableliais, kaip parodyta šiame pavyzdyje: H1, h2, h3 (spalva: #00CED1; tarpai tarp raidžių: 0,2 em; teksto transformacija: mažosios raidės; paraštės apačia: 2 em; šrifto svoris: 700; ) Ši stiliaus taisyklė bus taikoma h1, h2 ir h3 elementams. Grupuojant parinkiklius sąrašo tvarka nėra svarbi. Visiems parinkiklio elementams bus pritaikytos atitinkamos deklaracijos. Galite sugrupuoti skirtingus parinkiklio ID, kaip nurodyta toliau: #header, #content, #footer (pozicija: absoliuti; plotis: 300 pikselių; kairėje: 250 pikselių; ) Vladas Merževičius Identifikatorius (taip pat vadinamas „ID parinkikliu“) apibrėžia unikalų elemento pavadinimą, kuris naudojamas pakeisti jo stilių ir nukreipti į jį per scenarijus. Identifikatoriaus naudojimo sintaksė yra tokia. Universalus selektorius Vladas Merževičius Kartais reikia nustatyti vieną stilių visiems tinklalapio elementams vienu metu, pavyzdžiui, nustatyti šriftą arba teksto stilių. Tokiu atveju padės universalus parinkiklis, atitinkantis bet kurį tinklalapio elementą. Žvaigždutės simbolis (*) naudojamas universaliam parinkikliui žymėti, o bendrai sintaksė yra tokia. * (Stiliaus taisyklių aprašymas) Atributų parinkikliai Vladas Merževičius Daugelio žymų poveikis skiriasi priklausomai nuo to, kokius atributus jos naudoja. Pavyzdžiui, žymėti gali sukurti mygtuką, teksto lauką ir kitus formos elementus tiesiog pakeisdami tipo atributo reikšmę. Tačiau pridėjus stiliaus taisykles prie INPUT parinkiklio, stilius bus taikomas vienu metu visiems elementams, sukurtiems naudojant šią žymą. Siekiant lanksčiai valdyti tokių elementų stilių, į CSS buvo įtraukti atributų parinkikliai. Vaikų parinkėjai Vladas Merževičius Antrinis elementas yra elementas, kuris yra tiesiogiai pirminio elemento viduje. Norėdami geriau suprasti ryšius tarp dokumento elementų, pažvelkime į nedidelį kodą (12.1 pavyzdys). 12.1 pavyzdys. Elementų įdėjimas į dokumentą HTML5 CSS 2.1 IE Cr Op Sa Fx Gretimi selektoriai Vladas Merževičius Tinklalapio elementai vadinami gretimais, kai jie iš karto seka vienas kitą dokumento kode. Pažvelkime į keletą elementų santykių pavyzdžių. Lorem ipsum spalvingas sėdėti amet. Šiame pavyzdyje žyma yra žymos antrinė dalis Nes jis yra šio konteinerio viduje. Atitinkamai Veikia kaip tėvai . Konteksto parinkikliai Vladas Merževičius Kurdami tinklalapį dažnai turite įdėti kai kurias žymas kitose. Norint užtikrinti, kad šių žymų stiliai būtų naudojami teisingai, padės selektoriai, kurie veikia tik tam tikrame kontekste. Pavyzdžiui, nustatykite žymos stilių tik tada, kai jis yra konteinerio viduje Tokiu būdu vienu metu galite nustatyti atskiros žymos stilių, taip pat žymą, kuri yra kitoje. Tam tikroms html žymoms taikomas dizaino taisyklių rinkinys (kuris savo ruožtu susideda iš selektorių su skelbimų bloku), dėl kurių formuojasi svetainės išvaizda. CSS parinkiklis– tai CSS taisyklės komponentas, atsakingas už konkrečių html žymų, kurioms bus taikomi šioje taisyklėje nurodyti dizaino stiliai, apibrėžimą. Taigi, būtent selektorių dėka naršyklė supranta, kuriems puslapio kodo elementams reikia pritaikyti konkrečius dizaino stilius. CSS elementų pasirinkimo įrankis yra itin lankstus ir patogus pasirenkant tiek atskirus kodo elementus, tiek ištisas elementų grupes, apibrėžtas tam tikromis savybėmis. CSS selektorių tipai Kaip ir sakiniai tekste, CSS parinkikliai gali būti paprasti arba sudėtingi. Skirtumas tarp jų yra tas, kad sudėtingi gaunami sujungiant kelis paprastus ir naudojami tiksliau pritaikyti galutinį išteklių dizainą. Tik skirtingai nuo įprastų tekstų, pakopiniuose stilių lapuose svarbu, kokia tvarka ir kokius selektorius naudojame. Be to, nuo to priklausys ne tik, kokius elementus pasirinksime ir kokiais kriterijais remsimės, bet ir viso mūsų kodo apdorojimo greitį, tačiau apie subtilybes kalbėsime kituose straipsniuose. Paprasti selektoriai Universalus parinkiklis – atsakingas už visų dokumento elementų pasirinkimą. Nurodyta žvaigždute. Paprastai jis naudojamas norint iš naujo nustatyti numatytuosius naršyklių stilius, kad kiekvienas apsilankęs svetainėje neprarastų savo dizaino, jei naudotų kai kuriuos savo naršyklės nustatymus ar įvairius papildinius... * (kažkoks stilius;) Tipo parinkiklis – parenkamos visos žymos, atitinkančios konkretų tipą. Nurodomas žymos pavadinimas. Naudojamas norint nustatyti bendrąsias dokumento dizaino taisykles, pavyzdžiui, nustatyti skirtingus šriftus antraštėms ir paprastam dokumento tekstui. h1 (tam tikras stilius;) – taikys css taisyklę visoms žymoms su konkrečiu klasės pavadinimu. Nurodoma tašku, po kurio iškart parašytas klasės pavadinimas. Galbūt labiausiai paplitęs išdėstymo parinkiklis. Paprastai jis naudojamas norint nustatyti skirtingus to paties tipo, bet skirtingo funkcionalumo žymų dizaino stilius. Kairysis stulpelis (tam tikras stilius;) ID parinkiklis – naudojamas sukurti unikalius puslapio elementus. Jį nurodo maiša, po kurios nurodomas pavadinimas id. Naudojamas, jei reikia sukurti vieną konkretų puslapio elementą. #alertButton (tam tikras stilius; ) – parenka žymes, turinčias atributą. Nurodomas atributo pavadinimu laužtiniuose skliaustuose. Jis gali būti naudojamas kuriant žymų grupę, kurioje tiesiog yra tam tikras atributas, ir žymų grupei, kurioje yra tam tikras atributas su konkrečia reikšme. [ tipas] ( tam tikras stilius; ) [ type= "submit" ] ( tam tikras stilius; ) input[ type= "submit" ] ( tam tikras stilius; ) Sudėtingi selektoriai Palikuonių parinkiklis – pasirenka palikuonių (žymų, esančių kitos žymos viduje) elementus. Nurodyta atskiriant tarpu (tėvas – tarpas – vaikas). div p (tam tikras stilius;) Antrinio elemento parinkiklis – pasirenka elementą, tiesiogiai įdėtą kitame elemente. Nurodoma simboliu ">" (tėvas-patikrinti-vaikas). Antrinis elementas skiriasi nuo palikuonio elemento tuo, kad jis ateina iškart po pirminio elemento (pirmasis įdėjimo lygis). Nors vaikas laikomas bet kokia žyma kitoje, neatsižvelgiant į lizdo lygį. Šoninė juosta>ul (tam tikras stilius;) Sister element Selector – parenka žymą, kuri ateina iškart po kitos žymos (neuždaryta viduje, o einanti toliau). Nurodomas pliusas (pirmasis elementas – pliusas – seserinis elementas). Praktikoje jis naudojamas retai. Būtina naudojimo sąlyga yra bendras visų elementų su kombinuotu „+“ ženklu buvimas. h1+ p (tam tikras stilius; ) Pseudoklasės ir pseudoelementai Aukščiau pateikta CSS selektorių klasifikacija priklausė tik nuo dokumento žymėjimo. Jei norime nustatyti elementų išvaizdos pakeitimą, atsižvelgiant į jo būsenos pasikeitimą puslapyje (pavyzdžiui, pakeisti mygtuko spalvą užvedus pelės žymeklį), galime naudoti pseudoklases ir pseudoelementų parinkiklius. Atminkite, kad, skirtingai nei html, CSS yra didžiosios ir mažosios raidės. Tai yra, klasė.aktyvus ir .aktyvus nėra tas pats! Jie bus taikomi skirtingiems elementams, jei tokių yra dokumente. Pavadinkite dizaino parinkiklius, kad vėliau nesusipainiotumėte: .leftColumn yra geras pavadinimas, .left priklauso nuo situacijos, bet nelabai, .llll yra kažkoks šiukšlynas, galite pasakyti patys nežiūrėdami. kodas iš kur atsirado ši klasė? Dar kartą priminsiu – jei puslapyje yra tik vienas elementas ir jis visas yra unikalus, tada mes naudojame id, bet jei yra tikimybė, kad atsiras kitas, arba tiesiog yra keli panašūs elementai. puslapyje, tada dizainui naudokite klases. Apibendrinant Selektoriai CSS– tai galingas įrankis, leidžiantis atpažinti tam tikrus puslapio elementus arba elementų grupę, kurią vienija specifinė charakteristika, skirta tolesniam dizaino stilių pritaikymui iš su šiuo selektoriumi susijusio skelbimų bloko. Įvaldę bendruosius sąveikos ir parinktuvų kūrimo principus, pamiršite apie žiniatinklio dokumentų dizaino problemas. Geras selektorių išmanymas gali žymiai sutrumpinti HTML puslapių išdėstymo laiką. Nors tema iš pirmo žvilgsnio atrodo itin paini, tačiau po praktikos, paremtos kokybine teorija, ji tampa paprasta ir suprantama. Taip pat skaitykite tema: Kaip įjungti saugųjį režimą windows 8 Kodėl mano kompiuteris nemato televizoriaus per HDMI? Connectify – „Wi-Fi“ adapterio nustatymas kaip prieigos taškas Kas yra „Connectify Hotsport“. Kaip padalinti standųjį diską Kietojo disko skaidymas Diskpart