CSS-pili, at ang kanyang papel sa pag-format html-dokumento

Ang paglikha ng isang website at pagpuno ito na may ilang mga elemento ng web page, lahat ay nakaharap sa isang termino tulad ng CSS-selector. Naghahain ito upang mas tumpak na matukoy ang lahat ng mga elemento ng html-file ng kanilang mga disenyo at lokasyon sa pahina. Upang gawin ito, lumikha ng isang CSS-isang dokumento na lumunok ng ilang tagapili at ang kanilang mga pagpipilian sa pag-format: kulay, laki, lokasyon at iba pang mga. Ang bawat web designer ay dapat na malaman at ma-maayos ipasok ang ninanais na mga seleksyon. Ang mga ito ay nahahati sa pamamagitan ng uri, ang pangunahing ng kung saan kami ay talakayin sa ibaba.

Uri ng tagapili sa CSS

Depende sa kung saan ang sangkap ay inilapat html-format, CSS-selector ay maaaring nauugnay sa isa sa mga sumusunod na grupo:

• tag selector;
• klase selector;
• id-pili;
• ipatungkol selector.

tag selector

Ito ay tinatawag din na "i-type ang selector" o "element", ito ay ang pinaka-simple at pangkaraniwan. Tulad ng kanyang CSS-dokumento ang mga pangalan ng mga elemento ng html-file, na naglalarawan namin. Halimbawa, kung kailangan namin upang itakda ang estilo ng talata, tukuyin natin ang mga katangian at ang kanilang mga halaga para sa mga sangkap p {background: x; Kulay: y; size: z}. Sa kasong ito, ang lahat ng mga talata ng web page ay magkakaroon ng parehong format (kulay ng background, laki ng teksto, at iba pa. D.).

klase selector

At paano kung kailangan mong tanungin ang iyong bawat talata ay naiiba mula sa iba pang mga estilo? Upang gawin ito, diyan ay isang klase selector.

CSS-dokumento sa kasong ito ay naglalaman ng isang entry sa mga sumusunod na form: p.first {color: x; font-size: y}. Kaya, kami ay tukuyin ang mga katangian ng "kulay" at "laki" para lamang sa unang klase talata.

Sa isang html-dokumento sa kasong ito ay pumasok sa isang klase attribute sa pangalan ng ang estilo muna. Mga Klase ay maaaring maging kasindami ng mga estilo na gusto mong mag-apply para sa isang elemento ng web page.

tagapili ng id

Kadalasan mayroong isang pangangailangan upang tukuyin ang isang estilo na mas tumpak, halimbawa sa anumang isang elemento ng pahina, o upang makapag-sample ang mga ito. Sa situasyon na ito, ang aid ay dumating id-selector. Html file magtalaga ng isang ninanais na pangalan ng item na nagpapakilala ito sa gitna ng mga iba. Halimbawa, ang mga elemento na gusto naming magtakda ng iba't ibang mula sa iba pang estilo ang magiging pamagat ng artikulo.

Pagkatapos ay sa isang html-dokumento ng pagtatalaga sa header h1 tagapagpakilala, tulad articlename. At sa CSS-file, tukuyin ang estilo, ang pagdaragdag ng pangalan ng ID ihawan: #articlename {color: blue; text-align: center}. Ngayon ang aming mga ulo ng ad ay magkakaroon ng kulay asul at nakasentro.

Ang bawat isa sa mga uri sa itaas ay maaaring ma-inilarawan bilang "isang simpleng CSS-selector". Sila tukuyin ang pag-format para sa isang partikular parameter ng html-dokumento:-sama katulad na mga elemento (eg, ang lahat ng mga talata ng artikulo), isa sa klase (halimbawa, tanging ang unang talata) o isang partikular na item (halimbawa, ang pamagat na artikulo).

ipatungkol tagapili

Sa karagdagan sa nasa itaas, mayroong isang CSS-tagapili katangian - mas masalimuot na paraan ng estilo application. Ito ay nagpapahintulot sa html elemento format sa napiling attribute o halaga. Mayroong ilang mga varieties ng selector na ito:

• sa pamamagitan ng pagkakaroon ng mga katangian;
• sa kanyang eksaktong halaga;
• sa pamamagitan ng bahagyang halaga ng katangian;
• sa kanyang mga tiyak na halaga.

Ipaalam sa amin isaalang-alang ang bawat isa sa mga uri ng hayop:

1. Ang unang kaso. Formatting ay inilapat, kung naroroon sa isang partikular na attribute html-code (maaari itong maging isang p, div, header, atbp). Kung ito ay hindi, ito ay gumagamit ng isang generic na para sa lahat ng mga elemento ng estilo. Halimbawa, para sa mga elemento na kinakailangang ang pamagat (tool tip).
2. Ang ikalawang kaso. Ang estilo ay nalalapat lamang sa html-mga sangkap na magkaroon ng isang eksaktong tugma ng mga halaga ng katangian. Halimbawa, upang i-input ang mga elemento, kung saan ang halaga ng mga uri ng katangian ay katumbas ng isumite.
3. Ang ikatlong kaso. Sa ilalim ng format lamang ay isasama ang mga item sa listahan ng mga halaga na may isang tiyak na salita. Halimbawa, sidebar attribute "class" para sa mga elemento div.
4. Ang ika-apat na kaso. Estilo ay tinukoy lamang sa mga elemento ng html-dokumento, na ang partikular na katangian ay may isang tiyak na halaga, at ay nagsisimula sa kanya. Halimbawa, ang paggamit ng mga tinukoy na kulay sa lahat ng mga elemento na kung saan ang wikang Ingles na katangian (na maaaring en, en-rus, en-au at t. D.).

Kaya, sa pamamagitan ng paggamit ng isa o ang iba pang, ang CSS selector, maaaring maging pinakamahusay na tinukoy bilang isang buong pahina ng web, at ilarawan ang ilan sa mga elemento nito.