ตัวเลือกแอตทริบิวต์

หากต้องการเปลี่ยนสไตล์ขององค์ประกอบที่มีพารามิเตอร์ต่างๆ ได้มีการแนะนำตัวเลือกแอตทริบิวต์ใน CSS ช่วยให้คุณสามารถกำหนดรูปแบบของแท็กโดยพิจารณาจากการมีอยู่ของพารามิเตอร์บางตัวหรือค่าของมัน ตัวเลือกคุณสมบัติ - 1

หมายเหตุ:ตัวเลือกแอตทริบิวต์ได้รับการสนับสนุนโดย Internet Explorer เวอร์ชัน 7.0 และใหม่กว่า และต้องเพิ่ม <!DOCTYPE> ที่ถูกต้องเพื่อให้ตัวอย่างทำงานได้อย่างถูกต้อง มาดูการใช้งานทั่วไปของตัวเลือกดังกล่าวกัน

ตัวเลือกแอตทริบิวต์อย่างง่าย

ตั้งค่าสไตล์สำหรับองค์ประกอบหากมีการระบุแอตทริบิวต์เฉพาะ ความหมายของมันไม่สำคัญในกรณีนี้ ไวยากรณ์สำหรับการใช้ตัวเลือกดังกล่าวมีดังนี้

[атрибут] { Описание правил стиля } Селектор[атрибут] { Описание правил стиля }

ไม่อนุญาตให้มีช่องว่างระหว่างชื่อตัวเลือกและวงเล็บเหลี่ยม ตัวอย่าง 12.1 แสดงวิธีการจัดสไตล์แท็ก <Q> เมื่อมีการเพิ่มพารามิเตอร์ชื่อเข้าไป ตัวอย่างที่ 12.1 ประเภทขององค์ประกอบขึ้นอยู่กับพารามิเตอร์

<!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>

ผลลัพธ์ของตัวอย่างจะแสดงในรูป 12.1 ตัวเลือกแอตทริบิวต์ - 2

ในตัวอย่างนี้ สีของข้อความภายในคอนเทนเนอร์ 7lt;Q> จะเปลี่ยนไปเมื่อมีการเพิ่มพารามิเตอร์ชื่อเข้าไป โปรดทราบว่าสำหรับตัวเลือก Q[title] ไม่จำเป็นต้องทำซ้ำแอตทริบิวต์เนื่องจากสืบทอดมาจากตัวเลือก Q

ตัวเลือกแอตทริบิวต์ที่มีค่า

ตั้งค่าสไตล์สำหรับองค์ประกอบหากมีการระบุค่าเฉพาะสำหรับพารามิเตอร์เฉพาะ ไวยากรณ์ของแอปพลิเคชันมีดังนี้

[атрибут="meaning"] { Описание правил стиля } Селектор[атрибут="meaning"] { Описание правил стиля }

ในกรณีแรก สไตล์จะถูกนำไปใช้กับองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ที่ระบุ และอย่างที่สอง - เฉพาะกับตัวเลือกบางตัวเท่านั้น ตัวอย่าง 12.2 แสดงวิธีการเปลี่ยนรูปแบบลิงก์หากแท็ก A มีtarget="_blank"พารามิเตอร์ ในกรณีนี้ ลิงก์จะเปิดขึ้นในหน้าต่างใหม่และเพื่อแสดงสิ่งนี้ โดยใช้สไตล์ที่เราเพิ่มรูปภาพเล็ก ๆ ไว้ด้านหน้าข้อความลิงก์ ตัวอย่างที่ 12.2 รูปแบบการเปิดลิงค์ในหน้าต่างใหม่

<!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>

ผลลัพธ์ของตัวอย่างแสดงไว้ด้านล่าง (รูปที่ 12.2) ตัวเลือกคุณสมบัติ - 3

ในตัวอย่างนี้ รูปภาพจะถูกเพิ่มลงในลิงก์โดยใช้backgroundแอตทริบิวต์ หน้าที่ของมันคือการสร้างภาพพื้นหลังที่ซ้ำกัน แต่การทำซ้ำพื้นหลังสามารถยกเลิกการทำซ้ำได้ผ่านอาร์กิวเมนต์no-repeatส่งผลให้ได้ภาพเดียว

คุณลักษณะเริ่มต้นด้วยค่าเฉพาะ

ตั้งค่าสไตล์สำหรับองค์ประกอบหากแอตทริบิวต์เริ่มต้นด้วยค่าที่ระบุ ไวยากรณ์ของแอปพลิเคชันมีดังนี้

[атрибут^="meaning"] { Описание правил стиля } Селектор[атрибут^="meaning"] { Описание правил стиля }

ในกรณีแรก สไตล์จะถูกนำไปใช้กับองค์ประกอบทั้งหมดที่ขึ้นต้นด้วยค่าแอตทริบิวต์ที่ระบุ และอย่างที่สอง - เฉพาะกับตัวเลือกบางตัวเท่านั้น สมมติว่าเว็บไซต์ของคุณต้องแยกรูปแบบของลิงก์ปกติและลิงก์ภายนอกออกจากกัน ซึ่งเป็นลิงก์ที่นำไปสู่ไซต์อื่น เพื่อหลีกเลี่ยงการเพิ่มAคลาสใหม่ให้กับแท็ก เราจะใช้ตัวเลือกแอตทริบิวต์ ลิงก์ภายนอกมีลักษณะเฉพาะโดยการเพิ่มโปรโตคอลไปยังที่อยู่ เช่น โปรโตคอล HTTP ใช้เพื่อเข้าถึงเอกสารไฮเปอร์เท็กซ์ ดังนั้น ลิงก์ภายนอกจะขึ้นต้นด้วยคีย์เวิร์ด http:// และเราเพิ่มลงในตัวเลือกAดังที่แสดงในตัวอย่างที่ 12.3 ตัวอย่างที่ 12.3 การเปลี่ยนสไตล์ 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>

ผลลัพธ์ของตัวอย่างแสดงไว้ด้านล่าง (รูปที่ 12.3) ตัวเลือกคุณสมบัติ - 4

ในตัวอย่างนี้ ลิงก์ภายนอกจะถูกเน้นด้วยตัวหนา คุณยังสามารถใช้เทคนิคที่แสดงในตัวอย่างที่ 12.2 และเพิ่มรูปภาพขนาดเล็กลงในลิงก์ ซึ่งจะระบุว่าลิงก์นั้นนำไปสู่ไซต์อื่น

แอตทริบิวต์ลงท้ายด้วยค่าเฉพาะ

ตั้งค่าสไตล์สำหรับองค์ประกอบหากแอตทริบิวต์ลงท้ายด้วยค่าที่ระบุ ไวยากรณ์ของแอปพลิเคชันมีดังนี้

[атрибут$="meaning"] { Описание правил стиля } Селектор[атрибут$="meaning"] { Описание правил стиля }

ในกรณีแรก สไตล์จะถูกนำไปใช้กับองค์ประกอบทั้งหมดที่ลงท้ายด้วยค่าแอตทริบิวต์ที่ระบุ และอย่างที่สอง - เฉพาะกับตัวเลือกบางตัวเท่านั้น ด้วยวิธีนี้ คุณสามารถแยกสไตล์สำหรับไซต์ของโดเมน ru และไซต์ของโดเมนอื่น เช่น com ได้โดยอัตโนมัติ ดังที่แสดงในตัวอย่างที่ 12.4 ตัวอย่างที่ 12.4 สไตล์สำหรับโดเมนที่แตกต่างกัน

<!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>

ตัวอย่างนี้มีสองลิงก์ที่นำไปสู่โดเมนที่แตกต่างกัน - comและru. ในเวลาเดียวกัน แต่ละลิงก์ดังกล่าวจะมีภาพพื้นหลังของตัวเองเพิ่มโดยใช้สไตล์ คุณลักษณะของสไตล์จะถูกเพิ่มเฉพาะสำหรับลิงก์hrefที่มีพารามิเตอร์ลงท้ายด้วย ".ru" หรือ ".com" โปรดทราบว่าโดยการเพิ่มเครื่องหมายทับ ( http://www.yandex.ru/ ) หรือที่อยู่หน้า ( http://www.yandex.ru/fun.html ) ให้กับชื่อโดเมน เราจะเปลี่ยนส่วนท้ายและ สไตล์จะไม่ถูกนำมาใช้ ในกรณีนี้ ควรใช้ตัวเลือกที่สามารถระบุค่าเฉพาะไว้ที่ใดก็ได้ในแอตทริบิวต์จะดีกว่า

ค่าเกิดขึ้นที่ใดก็ได้ในแอตทริบิวต์

มีหลายตัวเลือกเมื่อควรใช้สไตล์กับตัวเลือกที่มีแอตทริบิวต์เฉพาะซึ่งมีค่าเป็นส่วนหนึ่ง อย่างไรก็ตาม ยังไม่ทราบแน่ชัดว่าอาร์กิวเมนต์เริ่มต้นหรือสิ้นสุดด้วยค่านี้ จากนั้นควรใช้ไวยากรณ์ต่อไปนี้

[атрибут*="meaning"] { Описание правил стиля } Селектор[атрибут*="meaning"] { Описание правил стиля }

ค่าสามารถปรากฏได้ทุกที่ในอาร์กิวเมนต์ เช่น ที่จุดเริ่มต้น สิ้นสุด หรือที่ใดที่หนึ่งในระหว่างนั้น สิ่งสำคัญคือมันเป็นส่วนหนึ่งของมัน ดังนั้น ตัวอย่างที่ 12.5 จะแสดงการเปลี่ยนแปลงรูปแบบของลิงก์ที่มีคำว่า “htmlbook” ปรากฏขึ้น ตัวอย่างที่ 12.5 สไตล์สำหรับไซต์ต่างๆ

<!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>

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 12.4 ตัวเลือกคุณสมบัติ - 5

มีตัวเลือกอาร์กิวเมนต์ประเภทอื่นๆ อยู่บ้าง แต่จะไม่ค่อยได้ใช้ ดังนั้นเราจะละคำอธิบายไว้ ลิงก์ไปยังแหล่งที่มาดั้งเดิม: http://stepbystep.htmlbook.ru/?id=54

ความคิดเห็น

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION