Ang halimbawa sa ibaba ay hindi gagana:

Ang talata at nasa loob nito mataba elemento, at narito ito hilig elemento.

Dito mataba At binigyang-diin elemento, higit pa hilig.

Higit pang tunay na halimbawa

Tingnan natin kung paano gumagana ang katabing tagapili gamit ang isang mas makatotohanang halimbawa. Sa malalaking artikulo na naglalaman ng ilang mga seksyon na minarkahan ng mga tag

, ipinapayong taasan ang pinakamataas na margin (margin-top property). Ang isang indentation na 30px ay gagawing nababasa ang teksto. Ngunit kung ang tag

darating kaagad pagkatapos

, at ito ay maaaring nasa simula ng artikulo, ang tuktok na indent sa itaas ng tag

magiging redundant. Ang problemang ito ay maaaring malutas gamit ang isang katabing tagapili ng elemento.

Narito ang html code na may halimbawa kung paano gumagana ang katabing tagapili ng elemento.

Hello!

Heading h2

Heading h2

Ang teksto ng talata ay tungkol sa hindi kapani-paniwalang mga pakikipagsapalaran.

Heading h2

Ang teksto ng talata ay tungkol sa hindi kapani-paniwalang mga pakikipagsapalaran.

Heading h2

Ang teksto ng talata ay tungkol sa hindi kapani-paniwalang mga pakikipagsapalaran.

Gayundin, gamit ang katabing tool ng tagapili, maginhawang ayusin ang indent sa pagitan ng heading at unang talata ng seksyon, sa aming halimbawa ito ay mga tag

At

Kapansin-pansin din na upang mabawasan ang indentasyon ay maginhawang gumamit ng mga negatibong halaga.

Hello!

Heading h2

Ang teksto ng talata ay tungkol sa hindi kapani-paniwalang mga pakikipagsapalaran.

Heading h2

Ang teksto ng talata ay tungkol sa hindi kapani-paniwalang mga pakikipagsapalaran.

Heading h2

Ang teksto ng talata ay tungkol sa hindi kapani-paniwalang mga pakikipagsapalaran.

Heading h2

Ang teksto ng talata ay tungkol sa hindi kapani-paniwalang mga pakikipagsapalaran.

Ngayon ay isang halimbawa kung paano gumamit ng isang katabing tagapili upang piliin ang lahat ng mga elemento ng listahan maliban sa una.

• Listahan ng item #1.
• Listahan ng item #2.
• Listahan ng item #3.
• Ilista ang item #4.

Ito ang mangyayari bilang resulta ng halimbawang ito:

Figure 1. Halimbawa No. 5 sa trabaho.

Kumusta, mahal na mga mambabasa! Ipinagpapatuloy namin ang paksa ng mga tagapili ng CSS at ngayon ay susubukan kong ipaliwanag nang malinaw kung ano ang mga ito katabing mga tagapili ng CSS, at ano rin ang papel na ginagampanan nito? universal selector. Ang kaalaman sa mekanismo para sa paggamit ng lahat ng uri ng mga tool ng CSS ay magbibigay-daan sa iyo na makamit ang pinakamainam at compact na nilalaman ng dokumento kung saan inilarawan ang mga estilo ng elemento, na isa sa mga bahagi ng matagumpay na pag-promote ng iyong mapagkukunan, kaya't sa anumang kaso ay napapabayaan ang pagkakataong makakuha ng kapaki-pakinabang na impormasyon tungkol sa konsepto ng isang tagapili at ang iba't ibang uri nito.

Kung naaalala mo at maingat na susundin ang mga publikasyon, maraming uri ng mga tagapili ang naisip na; ; . Muli, hinihimok ko kayong huwag pabayaan ang pag-aaral ng mga pangunahing kaalaman sa CSS, dahil ito ay magbibigay sa inyo ng maraming pakinabang sa hinaharap.

Universal selector

Ngayon ay direktang lumipat tayo sa esensya ng publikasyon ngayon. Tulad ng para sa unibersal na tagapili, ito ay medyo simple, kaya hindi ko ito papansinin nang mahabang panahon. Ang syntax para sa pagsusulat ng panuntunan ng CSS na gumagamit ng universal selector ay ang mga sumusunod:

Dito, ang operator na “*” ay nangangahulugan na mayroon tayong universal selector. Ito ay ginagamit kapag ito ay kinakailangan upang magtakda ng isang solong estilo para sa lahat ng mga elemento sa isang web page. Minsan hindi kinakailangan ang isang universal selector. Halimbawa, ang entry na .*class at .class ay ganap na magkapareho sa mga kasong ito. Ngayon para sigurado ng isang halimbawa. Karaniwan, ang pinakakaraniwan ay ang pagtukoy ng pare-parehong font, laki at kulay, at paglalagay ng regular na teksto sa isang pahina ng blog o website.

* ( font-family: Tahoma, Arial, Helvetica, sans-serif; /* Text font */ color: #646464; /* Text color */ font-size: 75%; /* Text size */ text-align : kaliwa; /* Lokasyon ng teksto */ )

Sa ganitong paraan maaari mong tukuyin ang disenyo ng teksto para sa lahat ng mga elemento na matatagpuan sa pahina. Hayaan akong tandaan na sa kasong ito ang resulta ay magiging katulad kung, sa halip na isang universal selector, gagamitin mo ang pangalan ng body tag, na kinabibilangan ng mga tag ng lahat ng elemento.

Mga Katabing CSS Selector

Well, ngayon ay gumugol tayo ng kaunting oras sa mga kalapit na tagapili. Ang mga elemento sa isang web page ay tinukoy bilang magkatabi kapag direktang lumilitaw ang mga ito sa tabi ng bawat isa sa code ng dokumento. Sa kasong ito, ganito ang hitsura ng syntax ng mga istilo ng CSS:

Ngayon, kumuha ng isang talata ng teksto na tinukoy ng p tag, na isasama ang b, i at malalaking tag bilang mga elemento ng bata, na tumutukoy sa pag-format ng teksto, ayon sa pagkakabanggit, bold, italic at pinalaki na font:

Ang talatang ito ay gumagamit ng tag b, tag i, malaking tag.

At gamit ang tool sa pag-edit ng CSS at HTML, na binuo sa pinakabagong mga bersyon ng lahat ng mga sikat na browser (,) at isang analogue ng sikat na Firefox browser plugin (), ilalagay namin ang talatang ito kahit saan sa ganap na anumang web page (I ginawa ito mismo sa pahina ng nakaraang artikulo, unang talata). Ang tool na ito, halimbawa, sa Chrome ay tinatawag sa pamamagitan lamang ng pagpindot sa F12 key. Maaari itong magamit para sa praktikal na pagpapatibay ng materyal sa mga seksyong "Mga Pangunahing Kaalaman sa HTML" at "Tutorial ng CSS". Kaya, nagpasok ako ng isang piraso ng teksto bilang unang talata:

Ang talatang ito ay magiging eksperimental at gamit ang halimbawa nito ay isasaalang-alang namin ang aplikasyon mga katabing tagapili. Gaya ng sinabi ko, ang b, i, at malalaking tag ay mga anak ng p paragraph tag dahil lahat sila ay diretso sa loob ng p container. Narito ang mga katabing tag ay b at i, pati na rin ang i at malaki. Ngayon, ilapat natin ang panuntunan ng CSS para sa mga katabing tagapili:

B+i (kulay: pula;) i+malaki (kulay: berde;)

Pagkatapos mailapat ang mga istilong ito, magiging ganito ang hitsura ng talata:

Totoo ito para sa lahat ng mga tag ng web page na naglalaman ng b, i, at malalaking elemento. Bukod dito, ang b at i, i at malaki ay dapat na malapit; para sa iba pang mga kumbinasyon ay hindi gagana ang panuntunang ito ng CSS. Sa tingin ko, malinaw na sa iyo ngayon kung paano ginagamit ang mga katabing tagapili kapag nagsusulat o nag-e-edit ng isang CSS na dokumento. Isa pang napakahalagang tala: kung napansin mo, sa kaso ng mga katabing elemento, ang tinukoy na istilo ay inilalapat lamang sa pangalawang elemento.

Ang halimbawa na may talata na tinalakay ay napakalinaw at nagbibigay-daan sa iyong mabilis na maunawaan ang kakanyahan ng mga katabing tagapili sa CSS. Gayunpaman, sa pagsasagawa ng iba pang mga lugar ng aplikasyon ng mga katabing tagapili ay karaniwang ginagamit. Halimbawa, napakadalas na kinakailangang isama ang ilang piraso ng teksto sa katawan ng isang artikulo, lalo na ang naka-format, tulad ng mga footnote, tala, atbp.

Para sa mga layuning ito, kadalasan ay gumagawa sila ng hiwalay na klase at inilalapat ito sa nais na talata. Ngunit ang isang mas pinakamainam na paraan ay ang paggamit ng mga katabing tagapili. Halimbawa, sa aking blog ay may mga istilong nilikha para mag-istilo ng isang regular na header ng h3.

H3 ( font-size: 1.7em; /* Font size */ text-align: center; /* Text placement */ font-weight: normal; /* Normal text weight */ font-family: Tahoma, Arial, Helvetica, sans-serif /* Estilo ng font */ kulay: #646464 /* Kulay ng teksto */ )

Upang i-highlight ang pamagat ng isang tala o footnote, tukuyin natin ang isang espesyal na klase, sabihin nating, ilagay:

H3.put ( color: red; /* Text color */ margin-left: 5px; /* Left padding */ margin-top: 0.5em; /* Top padding */ padding: 10px; /* Margins around text */ text-align: left; /* Text location */ )

Ngayon, gamitin natin ang mga katabing tagapili upang lumikha ng isang espesyal na istilo para sa talata ng talababa, ang talatang ito ay ilalagay nang direkta sa ibaba ng heading na may istilong "h3.put":

H3.put+p ( background: #ffefd5; /* Kulay ng background */ margin-left: 15px; /* Left padding */ margin-right: 120px; /* Right padding */ margin-top: 0.5em; /* Nangungunang padding */ padding: 5px /* Mga margin sa paligid ng text */ )

Muli gamit ang tool sa pag-edit ng Google Chrome, na ibinibigay ko sa iyo (ngunit sulit ito), ipinasok namin ang pamagat para sa footnote, hindi nakakalimutang ilagay ang klase ng put para dito:

Pansin!

Pagkatapos ay isusulat namin ang teksto ng footnote mismo:

Ang mga materyal na ipinakita sa publikasyong ito ay napakahalaga sa mga tuntunin ng pag-aaral ng mga pangunahing kaalaman ng CSS (Cascading Style Sheets)

.

Pagkatapos ng lahat ng mga paggalaw na ito, makukuha natin ang sumusunod na talata sa talababa sa web page (Ipapaalala ko sa iyo na inilagay ko ang talatang ito sa dulo ng aking nakaraang artikulo tungkol sa mga tagapili ng bata at konteksto):

Ngayon sa isang blog o website, kapag itinali mo ang "put" na klase sa anumang h3 tag, lalabas ang naturang footnote sa web page. Bukod dito, tanging ang unang talata pagkatapos ng h3 tag na may "class="put"" ang ipo-format sa isang espesyal na paraan. Pero iyon naman talaga ang gusto natin, di ba?

Sa pamamagitan nito, hayaan mo akong tapusin ang manu-manong ngayon, kung saan ibinigay ang isang algorithm para sa paggamit ng katabi at pangkalahatang mga tagapili. Umaasa ako na ang artikulong ito ay hikayatin ka, mahal na mga mambabasa, na mag-subscribe sa

Pagbati, mahal na mga mambabasa. Sa mga nakaraang artikulo, pangunahing pinag-aralan namin ang mga katangian ng estilo ng CSS. Marami sila. Ang ilan ay nagtatakda ng mga parameter ng font, ang iba ay ang mga parameter ng background, at ang iba pa ay ang mga parameter para sa mga indent at frame.

Sa artikulong ito ay pag-uusapan natin ang tungkol sa mga tagapili ng estilo. Sa isa sa mga artikulo na nahawakan na natin. Ngayon ay titingnan natin ang ilang higit pang uri ng mga tagapili na hindi tahasang nagbubuklod ng panuntunan ng istilo sa isang elemento ng web page. Ang mga ito ay tinatawag na mga espesyal na tagapili. Mayroong ilang mga uri ng mga ito.

Mga Kombinator sa CSS (Mga Tagapili ng Katabi, Bata at Konteksto)

Mga combinator ay isang uri ng mga tagapili ng CSS na nagbubuklod ng panuntunan ng istilo sa isang elemento ng web page batay sa lokasyon nito na nauugnay sa iba pang mga elemento.

Unang simbolo ng combinator plus(+) o katabing tagapili. Nakatakda ang plus sa pagitan ng dalawang tagapili:

<селектор 1> + <селектор 2> { <стиль> }

Ang estilo sa kasong ito ay inilapat sa tagapili 2, ngunit kung ito ay katabi lamang ng tagapili 1 at dumating kaagad pagkatapos nito. Tingnan natin ang isang halimbawa:

malakas + i (

}
...

Normal na text ito. Ito ay naka-bold na teksto, simpleng teksto, pulang teksto

Normal na text ito. Ito ay naka-bold na teksto, simpleng teksto, at ito ay normal na teksto.

Resulta:

Ang istilong inilarawan sa halimbawa ay ilalapat lamang sa unang text na nakapaloob sa tag , dahil ito ay dumating kaagad pagkatapos ng tag .

Kombinator tilde Nalalapat din ang (~) sa mga katabing tagapili, ngunit sa pagkakataong ito ay maaaring may iba pang elemento sa pagitan nila. Sa kasong ito, ang parehong mga tagapili ay dapat na naka-nest sa parehong parent na tag:

<селектор 1> ~ <селектор 2> { <стиль> }

Ang istilo ay ilalapat sa tagapili 2 na dapat sundin tagapili 1. Isaalang-alang ang isang halimbawa:

malakas~i(
kulay:pula; /* Pulang kulay ng teksto */
}
...

Normal na text ito. Ito ay naka-bold na teksto, simpleng teksto, pulang teksto inilapat dito ang katabing panuntunan ng selector.

Normal na text ito. Ito ay naka-bold na teksto, simpleng teksto, at ito ay pulang teksto.

Resulta:

Gaya ng nakikita mo, sa pagkakataong ito, gumana ang panuntunan ng istilo para sa parehong mga tekstong nakapaloob sa tag , sa kabila ng katotohanan na sa pangalawang kaso sa pagitan ng tag At sulit ang tag .

Kombinator > tumutukoy sa mga pumipili ng bata. Binibigyang-daan kang itali ang istilo ng CSS sa isang elemento ng web page na direktang naka-nest sa loob ng isa pang elemento:

<селектор 1> > <селектор 2> { <стиль> }

Estilo ay itali sa tagapili 2, na direktang naka-nest sa tagapili 1.

div > malakas (

}
...

Normal na text ito. Ito ay naka-bold na italic na teksto.

Normal na text ito. At ito ay regular na naka-bold na teksto.

At ang resulta:

Tulad ng makikita mo sa figure, ang panuntunan ng istilo ay nakaapekto lamang sa unang tag , na direktang naka-nest sa loob ng tag

. At ang agarang magulang ng pangalawang tag ay ang tag

, kaya hindi naaangkop sa kanya ang panuntunan.

Susunod na titingnan natin tagapili ng konteksto<пробел> . Binibigyang-daan ka nitong itali ang isang estilo ng CSS sa isang elementong naka-nest sa loob ng isa pang elemento, at maaaring mayroong anumang antas ng nesting:

<селектор 1> <селектор 2> { <стиль> }

Ang istilo ay ilalapat sa tagapili 2, kung ito ay nakalagay sa anumang paraan tagapili 1.

Tingnan natin ang nakaraang halimbawa, kapag naglalarawan lamang ng panuntunan ng CSS ginagamit namin ang tagapili ng konteksto:

malakas ang div(
font-style: italic /* Italic */
}
...

Normal na text ito. Ito ay naka-bold na italic na teksto.

Normal na text ito. At ito ay italic bold text din.

Plain text at bold text lang

Resulta:

Gaya ng nakikita mo, sa pagkakataong ito, naapektuhan ng panuntunan ang parehong mga tag , kahit na ang nakapugad sa lalagyan

at sa isang talata

. Upang i-tag , na naka-nest lang sa loob ng isang talata

Ang panuntunan ng css ay hindi gumagana sa lahat.

Mga tagapili ayon sa mga katangian ng tag

Ang mga tagapili ng katangian ay mga espesyal na tagapili na nagbubuklod ng isang istilo sa isang elemento batay sa kung naglalaman ito ng isang partikular na katangian o may isang tiyak na halaga. Mayroong ilang mga opsyon para sa paggamit ng mga naturang tagapili.

1. Simpleng tagapili ng katangian

Mukhang:

<селектор>[<имя атрибута тега>] { <стиль> }

At itinatali ang istilo sa mga elementong iyon kung saan idinagdag ang tinukoy na katangian. Halimbawa:

malakas(
kulay:pula;
}
...

Sasakyan ito ay isang mekanikal na motor na walang track sasakyan sa kalsada na may hindi bababa sa 4 na gulong.

Resulta:

Sa larawan makikita mo na ang css rule (pulang kulay ng teksto) ay inilapat sa elemento malakas, kung saan idinaragdag ang katangian pamagat.

2. Tagapili ng katangian na may halaga

Ang syntax para sa selector na ito ay ang mga sumusunod:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

Nagbubuklod istilo sa mga elemento na ang mga tag ay may katangian na may tinukoy pangalan At ibig sabihin. Halimbawa:

a(
kulay:pula;
laki ng font:150%;
}
...
.ru" target="_blank">Link sa bagong window

Resulta:

Tulad ng nakikita mo, ang parehong mga elemento ng uri ng hyperlink ay may katangian target, ngunit ang panuntunan ng css na nagpapalaki sa text ng link ng isa at kalahating beses at nagpapalit ng kulay nito sa pula ay inilalapat sa tag kaninong katangian target bagay "_blangko".

3. Isa sa ilang value ng attribute

Ang ilang mga halaga ng katangian ay maaaring paghiwalayin ng mga puwang, tulad ng mga pangalan ng klase. Upang magtakda ng panuntunan sa istilo kapag ang kinakailangang halaga ay nasa listahan ng mga value ng katangian, gamitin ang sumusunod na tagapili:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

Inilapat ang istilo kung ang attribute ay may kinakailangang halaga o bahagi ng isang listahan ng mga value na pinaghihiwalay ng espasyo. Halimbawa:

{
kulay:pula;
laki ng font:150%;
}
...

Ang aming telepono: 777-77-77

Ang aming address: Moscow st. Sovetskaya 5

Makukuha mo ang sumusunod na resulta:

Nalalapat ang panuntunan sa isang elemento na ang mga value ng attribute ay kinabibilangan ng: klase may ibig sabihin tel.

4. Hyphen sa attribute value

Ang isang gitling ay pinapayagan sa identifier at mga halaga ng klase. Upang itali ang isang estilo sa mga elemento na ang mga halaga ng katangian ay maaaring naglalaman ng isang gitling, maaari mong gamitin ang sumusunod na konstruksiyon:

[attribute|="value"] ( style )
Selector[attribute|="value"] ( style )

Inilapat ang istilo sa mga elementong iyon na ang value ng attribute ay nagsisimula sa tinukoy na value na sinusundan ng gitling. Halimbawa:

{
kulay:pula;
laki ng font:150%;
}
...

• Punto 1


• Punto 2


• Point 3


• Punto 4

Resulta:

Sa halimbawa, ang panuntunan ng istilo ay nalalapat lamang sa mga elemento ng listahan na ang pangalan ng klase ay nagsisimula sa halaga "menu-".

5. Nagsisimula ang value ng attribute sa partikular na text

Itinatakda ng selector na ito ang istilo para sa isang elemento kung ang value ng attribute ng tag ay nagsisimula sa isang partikular na value. Maaaring may dalawang pagpipilian:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

Sa unang kaso istilo nalalapat sa lahat ng elemento na may katangian ang mga tag na may tinukoy pangalan at isang halaga na nagsisimula sa tinukoy mga substring. Sa pangalawang kaso, ang parehong bagay, lamang sa ilang mga elemento na tinukoy sa pangunahing tagapili. Halimbawa:

a(
kulay:berde;
font-weight:bold;
}
...

Resulta:

Ang halimbawa ay nagpapakita kung paano magpakita ng mga panlabas na link at panloob na mga link sa magkaibang paraan. Palaging nagsisimula ang mga panlabas na link sa string na "http://". Samakatuwid, sa tagapili ay ipinapahiwatig namin na ang istilo ay ilalapat lamang sa mga link na may katangian href nagsisimula sa kahulugan http://.

6. Nagtatapos ang attribute value sa ilang partikular na text

Nagbubuklod ng istilo sa mga elemento na ang value ng attribute ay nagtatapos sa tinukoy na text. May sumusunod na syntax:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

Sa unang kaso istilo nalalapat sa lahat ng elemento na mayroon katangian kasama ang tinukoy pangalan at may kahulugang nagtatapos sa tinukoy substring. Sa pangalawang kaso, ang parehong bagay, lamang sa ipinahiwatig mga pumipili. Sa ganitong paraan, halimbawa, ang iba't ibang mga graphic na format ng imahe ay maaaring ipakita sa ibang paraan. Halimbawa:

IMG (
hangganan: 5px solid na pula;
}
...

GIF na larawan

Format ng larawan png

Resulta:

Sa halimbawa, ang lahat ng mga larawang may gif extension ay ipapakita na may pulang hangganan na limang pixel ang kapal.

7. Ang attribute value ay naglalaman ng tinukoy na string

Ang selector na ito ay nagbubuklod ng isang istilo sa mga tag na ang value ng attribute ay naglalaman ng partikular na text. Syntax:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Estilo nagbubuklod sa mga elementong mayroon katangian na may tinukoy na pangalan at ang halaga nito ay naglalaman ng tinukoy substring. Halimbawa:

IMG (
hangganan: 5px solid na pula;
}
...

Larawan mula sa folder ng gallery

Larawan mula sa isa pang folder

Resulta:

Sa halimbawa, ang estilo ay inilapat sa mga larawan na na-load mula sa folder "gallery".

Iyon lang ang tungkol sa mga tagapili ng katangian. Ang lahat ng mga pamamaraan sa itaas ay maaaring pagsamahin sa bawat isa:

Selector[attribute1="value1"][attribute2="value2"] ( style )

Bilang karagdagan, hayaan mo akong ipaalala sa iyo ang tungkol sa mga espesyal na tagapili ng CSS:

• gamit ang mga simbolo na "+" at "~" ay nabuo;
• ang ">" na simbolo ay nagbubuklod sa mga istilo ng css mga subsidiary mga tag;
• simbolo<пробел>bumubuo ng mga tagapili ng konteksto.

Sa mga artikulo sa hinaharap, titingnan din natin ang mga pseudo-element at pseudo-class, na nagbibigay ng makapangyarihang mga tool sa pamamahala ng istilo.

Yun lang, see you again.