Artikulo
Magsimula
Simulan ang pag-aaral
JavaRush /Java Blog /Random-TL /Mga tagapili ng katangian
articles
Antas

Mga tagapili ng katangian

Nai-publish sa grupo
Upang baguhin ang estilo ng mga elemento na naglalaman ng iba't ibang mga parameter, ang mga tagapili ng katangian ay ipinakilala sa CSS. Nagbibigay-daan sa iyo ang mga ito na itakda ang istilo ng isang tag batay sa pagkakaroon ng isang partikular na parameter o halaga nito. Mga tagapili ng katangian - 1Tandaan: Ang mga tagapili ng katangian ay sinusuportahan ng bersyon 7.0 ng Internet Explorer at mas bago, at dapat idagdag ang tamang <!DOCTYPE> para gumana nang tama ang mga halimbawa. Tingnan natin ang ilang karaniwang paggamit ng mga naturang tagapili.

Simpleng tagapili ng katangian

Itinatakda ang istilo para sa isang elemento kung may tinukoy na partikular na katangian. Ang kahulugan nito ay hindi mahalaga sa kasong ito. Ang syntax para sa paggamit ng naturang selector ay ang mga sumusunod. 
[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }
Ang espasyo sa pagitan ng pangalan ng tagapili at mga square bracket ay hindi pinapayagan. Ipinapakita ng Halimbawa 12.1 kung paano naka-istilo ang tag na <Q> kapag idinagdag dito ang isang parameter ng pamagat. Halimbawa 12.1. Uri ng elemento depende sa parameter nito 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   Q {
    font-style: italic; /* Курсивное начертание */
    quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
   }
   Q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность
  может случиться, то она обязательно случится</q>, можем ввести свое наблюдение:
  <q title="Из законов Фергюсона-Мержевича">После
  того, How веб-page будет корректно отображаться в одном браузере, выяснится,
  что она неправильно показывается в другом</q>.</p>
 </body>
</html>
Ang resulta ng halimbawa ay ipinapakita sa Fig. 12.1 Mga tagapili ng katangian - 2 Sa halimbawang ito, nagbabago ang kulay ng text sa loob ng 7lt;Q> container kapag idinagdag dito ang parameter ng pamagat. Tandaan na para sa Q[title] na tagapili ay hindi na kailangang ulitin ang mga katangian dahil ang mga ito ay minana mula sa Q selector.
Java-университет

Tagapili ng katangian na may halaga

Itinatakda ang estilo para sa isang elemento kung ang isang partikular na halaga ay tinukoy para sa isang partikular na parameter. Ang syntax ng application ay ang mga sumusunod. 
[атрибут="meaning"] { Описание правил стиля } Селектор[атрибут="meaning"] { Описание правил стиля }
Sa unang kaso, inilalapat ang istilo sa lahat ng elemento na naglalaman ng tinukoy na value ng attribute. At sa pangalawa - sa ilang mga pumipili lamang. Ipinapakita ng Halimbawa 12.2 kung paano baguhin ang istilo ng link kung ang A tag ay naglalaman ng isang parameter target="_blank". Sa kasong ito, magbubukas ang link sa isang bagong window at upang ipakita ito, gamit ang mga istilong nagdaragdag kami ng maliit na larawan sa harap ng teksto ng link. Halimbawa 12.2. Estilo para sa pagbubukas ng mga link sa isang bagong window 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[target="_blank"] {
    background: url(blank.gif) no-repeat 0 2px; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная link</a> |
     <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>
Ang resulta ng halimbawa ay ipinapakita sa ibaba (Figure 12.2). Mga tagapili ng katangian - 3Sa halimbawang ito, may idinagdag na larawan sa link gamit ang attribute background. Ang function nito ay upang lumikha ng isang umuulit na larawan sa background, ngunit ang pag-uulit sa background ay maaaring kanselahin sa pamamagitan ng argumento no-repeat, na nagreresulta sa isang solong larawan.

Nagsisimula ang attribute sa isang partikular na value

Itinatakda ang istilo para sa isang elemento kung ang katangian ay nagsisimula sa tinukoy na halaga. Ang syntax ng application ay ang mga sumusunod. 
[атрибут^="meaning"] { Описание правил стиля } Селектор[атрибут^="meaning"] { Описание правил стиля }
Sa unang kaso, inilalapat ang istilo sa lahat ng elemento na nagsisimula sa tinukoy na value ng attribute. At sa pangalawa - sa ilang mga pumipili lamang. Ipagpalagay natin na kailangang paghiwalayin ng iyong site ang istilo ng mga regular at panlabas na link—mga link na humahantong sa iba pang mga site. Para maiwasan ang pagdaragdag Ang bagong klase sa tag, gagamit kami ng mga attribute selector. Ang mga panlabas na link ay nailalarawan sa pamamagitan ng pagdaragdag ng isang protocol sa address, halimbawa, ang HTTP protocol ay ginagamit upang ma-access ang mga hypertext na dokumento. Samakatuwid, ang mga panlabas na link ay nagsisimula sa keyword na http://, at idinaragdag namin ito sa selector A, tulad ng ipinapakita sa halimbawa 12.3. Halimbawa 12.3. Pagbabago ng istilo ng xref 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href^="http://"] {
    font-weight: bold; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная link</a> |
  <a href="http://htmlbook.ru" target="_blank" rel="nofollow" >Внешняя link на сайт htmlbook.ru</a></p>
 </body>
</html>
Ang resulta ng halimbawa ay ipinapakita sa ibaba (Larawan 12.3) Mga tagapili ng katangian - 4 Sa halimbawang ito, ang mga panlabas na link ay naka-highlight sa bold. Maaari mo ring gamitin ang pamamaraan na ipinapakita sa Halimbawa 12.2 at magdagdag ng maliit na larawan sa link, na magsasaad na ang link ay humahantong sa isa pang site.

Ang katangian ay nagtatapos sa isang tiyak na halaga

Itinatakda ang istilo para sa isang elemento kung ang attribute ay nagtatapos sa tinukoy na halaga. Ang syntax ng application ay ang mga sumusunod. 
[атрибут$="meaning"] { Описание правил стиля } Селектор[атрибут$="meaning"] { Описание правил стиля }
Sa unang kaso, inilalapat ang istilo sa lahat ng elemento na nagtatapos sa tinukoy na value ng attribute. At sa pangalawa - sa ilang mga pumipili lamang. Sa ganitong paraan, maaari mong awtomatikong paghiwalayin ang estilo para sa mga site ng ru domain at para sa mga site ng iba pang mga domain tulad ng com, tulad ng ipinapakita sa halimbawa 12.4. Halimbawa 12.4. Estilo para sa iba't ibang domain 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href$=".ru"] { /* Если link заканчивается на .ru */
    background: url(ru.gif) no-repeat; /* Параметры фонового рисунка */
    padding-left: 10px; /* Смещаем текст вправо */
   }
   A[href$=".com"] { /* Если link заканчивается на .com */
    background: url(com.gif) no-repeat;
    padding-left: 10px;
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.yandex.com" rel="nofollow" >Yandex.Com</a> |
  <a href="http://www.yandex.ru" rel="nofollow" >Yandex.Ru</a></p>
 </body>
</html>
Ang halimbawang ito ay naglalaman ng dalawang link na humahantong sa magkaibang mga domain - comat ru. Kasabay nito, ang bawat naturang link ay may sariling background na imahe na idinagdag gamit ang mga estilo. Ang mga katangian ng istilo ay idaragdag lamang para sa mga link hrefna ang parameter ay nagtatapos sa ".ru" o ".com". Pakitandaan na sa pamamagitan ng pagdaragdag ng slash ( http://www.yandex.ru/ ) o ang address ng pahina ( http://www.yandex.ru/fun.html ) sa domain name, babaguhin namin ang pagtatapos at hindi ilalapat ang istilo. Sa kasong ito, mas mainam na gumamit ng isang tagapili kung saan ang isang partikular na halaga ay matatagpuan saanman sa katangian.

Ang halaga ay nangyayari kahit saan sa katangian

May mga opsyon kung kailan dapat ilapat ang istilo sa isang selector na may partikular na katangian, kung saan bahagi ang isang value. Gayunpaman, hindi eksaktong alam kung ang argumento ay nagsisimula o nagtatapos sa halagang ito. Pagkatapos ay dapat gamitin ang sumusunod na syntax. 
[атрибут*="meaning"] { Описание правил стиля } Селектор[атрибут*="meaning"] { Описание правил стиля }
Maaaring lumabas ang value kahit saan sa argument, gaya ng sa simula, dulo, o sa isang lugar sa pagitan. Ang pangunahing bagay ay ito ay bahagi nito. Kaya, ang Halimbawa 12.5 ay nagpapakita ng pagbabago sa istilo ng mga link kung saan lumalabas ang salitang "htmlbook". Halimbawa 12.5. Estilo para sa iba't ibang mga site 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   [href*="htmlbook"] {
    background: yellow; /* Желтый цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/" rel="nofollow" >Tagи HTML</a> |
  <a href="http://stepbystep.htmlbook.ru" rel="nofollow" >Шаг за шагом</a> |
  <a href="http://webimg.ru" rel="nofollow" >Графика для Веб</a></p>
 </body>
</html>
Ang resulta ng halimbawang ito ay ipinapakita sa Fig. 12.4 Mga tagapili ng katangian - 5 Mayroong ilang iba pang mga uri ng mga tagapili ng argumento, ngunit ang mga ito ay bihirang ginagamit, kaya aalisin namin ang kanilang paglalarawan. Link sa orihinal na pinagmulan: http://stepbystep.htmlbook.ru/?id=54
Mga komento
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION