Artikel
Miwiti
Mulai sinau
JavaRush /Blog Jawa /Random-JV /Pamilih atribut
articles
tingkat

Pamilih atribut

Diterbitake ing grup
Kanggo ngganti gaya unsur sing ngemot macem-macem paramèter, pamilih atribut wis dikenalaké ing CSS. Padha ngidini sampeyan nyetel gaya tag adhedhasar anané parameter tartamtu utawa nilai. Pamilih atribut - 1Cathetan: Pamilih atribut didhukung dening Internet Explorer versi 7.0 lan luwih anyar, lan <!DOCTYPE> sing bener kudu ditambahake supaya conto bisa mlaku kanthi bener. Ayo goleki sawetara panggunaan khas saka pamilih kasebut.

Pamilih atribut prasaja

Nyetel gaya kanggo unsur yen atribut tartamtu ditemtokake. Tegese ora penting ing kasus iki. Sintaks kanggo nggunakake pamilih kaya ing ngisor iki. 
[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }
Spasi antarane jeneng pamilih lan kurung kothak ora diijini. Conto 12.1 nuduhake carane tag <Q> ditata nalika parameter judhul ditambahake. Tuladha 12.1. Jinis unsur gumantung ing parameter sawijining 
<!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>
Asil saka conto ditampilake ing Fig. 12.1 Pamilih atribut - 2 Ing conto iki, werna teks ing 7lt;Q> wadhah diganti nalika parameter judhul ditambahake menyang. Elinga yen kanggo Q[judhul] pamilih ora perlu kanggo mbaleni atribut amarga padha dipun warisaken saka pamilih Q.
Java-университет

Pamilih atribut kanthi nilai

Nyetel gaya kanggo unsur yen nilai tartamtu ditemtokake kanggo parameter tartamtu. Sintaks aplikasi kaya ing ngisor iki. 
[атрибут="meaning"] { Описание правил стиля } Селектор[атрибут="meaning"] { Описание правил стиля }
Ing kasus sing sepisanan, gaya ditrapake kanggo kabeh unsur sing ngemot nilai atribut sing ditemtokake. Lan ing kaloro - mung kanggo pamilih tartamtu. Conto 12.2 nuduhake carane ngganti gaya link yen tag A ngemot parameter target="_blank". Ing kasus iki, link bakal mbukak ing jendela anyar lan kanggo nuduhake iki, nggunakake gaya kita nambah gambar cilik ing ngarepe teks link. Tuladha 12.2. Gaya kanggo mbukak pranala ing jendela anyar 
<!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>
Asil saka conto ditampilake ing ngisor iki (Gambar 12.2). Pamilih atribut - 3Ing conto iki, gambar ditambahake menyang link nggunakake atribut background. Fungsine kanggo nggawe gambar latar mburi sing bola-bali, nanging pengulangan latar mburi bisa dibatalake liwat argumentasi no-repeat, ngasilake gambar siji.

Atribut diwiwiti kanthi nilai tartamtu

Nyetel gaya kanggo unsur yen atribut diwiwiti kanthi nilai sing ditemtokake. Sintaks aplikasi kaya ing ngisor iki. 
[атрибут^="meaning"] { Описание правил стиля } Селектор[атрибут^="meaning"] { Описание правил стиля }
Ing kasus sing sepisanan, gaya ditrapake kanggo kabeh unsur sing diwiwiti kanthi nilai atribut sing ditemtokake. Lan ing kaloro - mung kanggo pamilih tartamtu. Coba anggep yen situs sampeyan kudu misahake gaya pranala biasa lan eksternal - pranala sing ngarah menyang situs liyane. Supaya ora nambah Akelas anyar menyang tag, kita bakal nggunakake pamilih atribut. Pranala njaba ditondoi kanthi nambahake protokol menyang alamat, contone, protokol HTTP digunakake kanggo ngakses dokumen hiperteks. Mulane, pranala njaba diwiwiti nganggo tembung kunci http: //, lan kita tambahake menyang pamilih A, kaya sing ditampilake ing conto 12.3. Tuladha 12.3. Ngganti gaya 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>
Asil conto ditampilake ing ngisor iki (Fig. 12.3) Pamilih atribut - 4 Ing conto iki, pranala njaba disorot kanthi kandel. Sampeyan uga bisa nggunakake teknik sing ditampilake ing Conto 12.2 lan nambah gambar cilik menyang link, sing bakal nuduhake yen link kasebut ndadékaké menyang situs liya.

Atribut rampung karo nilai tartamtu

Nyetel gaya kanggo unsur yen atribut rampung karo nilai sing ditemtokake. Sintaks aplikasi kaya ing ngisor iki. 
[атрибут$="meaning"] { Описание правил стиля } Селектор[атрибут$="meaning"] { Описание правил стиля }
Ing kasus sing sepisanan, gaya ditrapake kanggo kabeh unsur sing diakhiri karo nilai atribut sing ditemtokake. Lan ing kaloro - mung kanggo pamilih tartamtu. Kanthi cara iki, sampeyan bisa kanthi otomatis misahake gaya kanggo situs domain ru lan situs domain liyane kaya com, kaya sing ditampilake ing conto 12.4. Tuladha 12.4. Gaya kanggo macem-macem 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>
Conto iki ngemot rong pranala sing ngarah menyang domain sing beda - comlan ru. Ing wektu sing padha, saben pranala kasebut nduweni gambar latar mburi dhewe sing ditambahake nggunakake gaya. Atribut gaya bakal ditambahake mung kanggo pranala hrefsing parameter rampung ing ".ru" utawa ".com". Elinga yen kanthi nambahake garis miring ( http://www.yandex.ru/ ) utawa alamat kaca ( http://www.yandex.ru/fun.html ) menyang jeneng domain, kita bakal ngganti pungkasan lan gaya ora bakal Applied. Ing kasus iki, luwih becik nggunakake pamilih ing ngendi nilai tartamtu bisa ditemokake ing endi wae ing atribut kasebut.

Nilai kasebut ana ing endi wae ing atribut

Ana opsi nalika gaya kudu diterapake menyang pamilih kanthi atribut tartamtu, sing ana nilai. Nanging, ora dingerteni persis apa argumen kasebut diwiwiti utawa diakhiri karo nilai kasebut. Banjur sintaks ing ngisor iki kudu digunakake. 
[атрибут*="meaning"] { Описание правил стиля } Селектор[атрибут*="meaning"] { Описание правил стиля }
Nilai kasebut bisa katon ing endi wae ing argumentasi, kayata ing wiwitan, pungkasan, utawa ing endi wae ing antarane. Ingkang utama yaiku bagean kasebut. Dadi, Conto 12.5 nuduhake owah-owahan ing gaya pranala ing ngendi tembung "htmlbook" katon. Tuladha 12.5. Gaya kanggo macem-macem situs 
<!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>
Asil saka conto iki ditampilake ing Fig. 12.4 Pamilih atribut - 5 Ana sawetara jinis pamilih argumen liyane, nanging digunakake arang banget, mula kita bakal ngilangi deskripsi kasebut. Pranala menyang sumber asli: http://stepbystep.htmlbook.ru/?id=54
Komentar
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION