Để thay đổi kiểu của các phần tử chứa các tham số khác nhau, bộ chọn thuộc tính đã được đưa vào CSS. Chúng cho phép bạn đặt kiểu thẻ dựa trên sự hiện diện của một tham số nhất định hoặc giá trị của nó. Lưu ý: Bộ chọn thuộc tính được hỗ trợ bởi Internet Explorer phiên bản 7.0 trở lên và phải thêm <!DOCTYPE> chính xác để các ví dụ hoạt động chính xác. Chúng ta hãy xem xét một số cách sử dụng điển hình của các bộ chọn như vậy.
Bộ chọn thuộc tính đơn giản
Đặt kiểu cho một phần tử nếu một thuộc tính cụ thể được chỉ định. Ý nghĩa của nó không quan trọng trong trường hợp này. Cú pháp sử dụng bộ chọn như sau.
[атрибут]{ Описание правил стиля } Селектор[атрибут]{ Описание правил стиля }
Không được phép có khoảng cách giữa tên bộ chọn và dấu ngoặc vuông. Ví dụ 12.1 cho thấy thẻ <Q> được tạo kiểu như thế nào khi tham số tiêu đề được thêm vào nó. Ví dụ 12.1. Loại phần tử tùy thuộc vào tham số của nó
<!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>
Kết quả của ví dụ được hiển thị trong Hình. 12.1 Trong ví dụ này, màu của văn bản bên trong vùng chứa 7lt;Q> thay đổi khi tham số tiêu đề được thêm vào nó. Lưu ý rằng đối với bộ chọn Q[title] không cần lặp lại các thuộc tính vì chúng được kế thừa từ bộ chọn Q.
Bộ chọn thuộc tính có giá trị
Đặt kiểu cho một phần tử nếu một giá trị cụ thể được chỉ định cho một tham số cụ thể. Cú pháp ứng dụng như sau.
[атрибут="meaning"]{ Описание правил стиля } Селектор[атрибут="meaning"]{ Описание правил стиля }
Trong trường hợp đầu tiên, kiểu được áp dụng cho tất cả các phần tử chứa giá trị thuộc tính được chỉ định. Và trong phần thứ hai - chỉ dành cho một số bộ chọn nhất định. Ví dụ 12.2 cho thấy cách thay đổi kiểu liên kết nếu thẻ A chứa tham số target="_blank". Trong trường hợp này, liên kết sẽ mở trong một cửa sổ mới và để hiển thị điều này, bằng cách sử dụng các kiểu, chúng tôi thêm một hình ảnh nhỏ phía trước văn bản liên kết. Ví dụ 12.2. Kiểu mở liên kết trong cửa sổ mới
<!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 02px;/* Параметры фонового рисунка */
padding-left:15px;/* Смещаем текст вправо */}</style></head><body><p><a href="link1.html">Обычная link</a>|<a href="link2" target="_blank">Ссылка в новом окне</a></p></body></html>
Kết quả của ví dụ được thể hiện dưới đây (Hình 12.2). Trong ví dụ này, một hình ảnh được thêm vào liên kết bằng thuộc tính background. Chức năng của nó là tạo một hình nền lặp lại, nhưng sự lặp lại của nền có thể bị hủy thông qua đối số no-repeat, dẫn đến một hình ảnh duy nhất.
Thuộc tính bắt đầu bằng một giá trị cụ thể
Đặt kiểu cho một phần tử nếu thuộc tính bắt đầu bằng giá trị đã chỉ định. Cú pháp ứng dụng như sau.
[атрибут^="meaning"]{ Описание правил стиля } Селектор[атрибут^="meaning"]{ Описание правил стиля }
Trong trường hợp đầu tiên, kiểu được áp dụng cho tất cả các phần tử bắt đầu bằng giá trị thuộc tính được chỉ định. Và trong phần thứ hai - chỉ dành cho một số bộ chọn nhất định. Giả sử rằng trang web của bạn cần tách biệt kiểu liên kết thông thường và liên kết bên ngoài—các liên kết dẫn đến các trang web khác. Để tránh thêm Amột lớp mới vào thẻ, chúng tôi sẽ sử dụng bộ chọn thuộc tính. Các liên kết bên ngoài được đặc trưng bằng cách thêm một giao thức vào địa chỉ, ví dụ: giao thức HTTP được sử dụng để truy cập các tài liệu siêu văn bản. Do đó, các liên kết bên ngoài bắt đầu bằng từ khóa http://, và chúng ta thêm nó vào bộ chọn A, như trong ví dụ 12.3. Ví dụ 12.3. Thay đổi kiểu 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>
Kết quả của ví dụ được hiển thị bên dưới (Hình 12.3) Trong ví dụ này, các liên kết bên ngoài được tô đậm. Bạn cũng có thể sử dụng kỹ thuật được hiển thị trong Ví dụ 12.2 và thêm một hình ảnh nhỏ vào liên kết, điều này sẽ cho biết rằng liên kết dẫn đến một trang web khác.
Thuộc tính kết thúc bằng một giá trị cụ thể
Đặt kiểu cho một phần tử nếu thuộc tính kết thúc bằng giá trị đã chỉ định. Cú pháp ứng dụng như sau.
[атрибут$="meaning"]{ Описание правил стиля } Селектор[атрибут$="meaning"]{ Описание правил стиля }
Trong trường hợp đầu tiên, kiểu được áp dụng cho tất cả các phần tử kết thúc bằng giá trị thuộc tính được chỉ định. Và trong phần thứ hai - chỉ dành cho một số bộ chọn nhất định. Bằng cách này, bạn có thể tự động tách kiểu cho các trang web thuộc miền ru và cho các trang web thuộc các tên miền khác như com, như trong ví dụ 12.4. Ví dụ 12.4. Phong cách cho các miền khác nhau
<!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>
Ví dụ này chứa hai liên kết dẫn đến các tên miền khác nhau - comvà ru. Đồng thời, mỗi liên kết như vậy đều có hình nền riêng được thêm bằng cách sử dụng style. Thuộc tính kiểu sẽ chỉ được thêm cho những liên kết hrefcó tham số kết thúc bằng “.ru” hoặc “.com”. Xin lưu ý rằng bằng cách thêm dấu gạch chéo ( http://www.yandex.ru/ ) hoặc địa chỉ trang ( http://www.yandex.ru/fun.html ) vào tên miền, do đó chúng tôi sẽ thay đổi phần cuối và phong cách sẽ không được áp dụng. Trong trường hợp này, tốt hơn là sử dụng bộ chọn trong đó một giá trị cụ thể có thể được đặt ở bất kỳ đâu trong thuộc tính.
Giá trị xảy ra ở bất cứ đâu trong thuộc tính
Có các tùy chọn khi áp dụng kiểu cho bộ chọn có thuộc tính cụ thể, trong đó giá trị là một phần. Tuy nhiên, người ta không biết chính xác liệu đối số bắt đầu hay kết thúc bằng giá trị này. Sau đó nên sử dụng cú pháp sau.
[атрибут*="meaning"]{ Описание правил стиля } Селектор[атрибут*="meaning"]{ Описание правил стиля }
Giá trị có thể xuất hiện ở bất kỳ đâu trong đối số, chẳng hạn như ở đầu, cuối hoặc ở đâu đó ở giữa. Điều chính là nó là một phần của nó. Do đó, Ví dụ 12.5 cho thấy sự thay đổi trong kiểu liên kết trong đó từ “htmlbook” xuất hiện. Ví dụ 12.5. Phong cách cho các trang web khác nhau
<!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>
Kết quả của ví dụ này được hiển thị trong Hình. 12.4 Có một số loại bộ chọn đối số khác nhưng chúng hiếm khi được sử dụng nên chúng ta sẽ bỏ qua mô tả của chúng. Link nguồn gốc: http://stepbystep.htmlbook.ru/?id=54
Lưu ý: Bộ chọn thuộc tính được hỗ trợ bởi Internet Explorer phiên bản 7.0 trở lên và phải thêm <!DOCTYPE> chính xác để các ví dụ hoạt động chính xác. Chúng ta hãy xem xét một số cách sử dụng điển hình của các bộ chọn như vậy.
Trong ví dụ này, màu của văn bản bên trong vùng chứa 7lt;Q> thay đổi khi tham số tiêu đề được thêm vào nó. Lưu ý rằng đối với bộ chọn Q[title] không cần lặp lại các thuộc tính vì chúng được kế thừa từ bộ chọn Q.
Trong ví dụ này, một hình ảnh được thêm vào liên kết bằng thuộc tính 
Trong ví dụ này, các liên kết bên ngoài được tô đậm. Bạn cũng có thể sử dụng kỹ thuật được hiển thị trong Ví dụ 12.2 và thêm một hình ảnh nhỏ vào liên kết, điều này sẽ cho biết rằng liên kết dẫn đến một trang web khác.
Có một số loại bộ chọn đối số khác nhưng chúng hiếm khi được sử dụng nên chúng ta sẽ bỏ qua mô tả của chúng. Link nguồn gốc: http://stepbystep.htmlbook.ru/?id=54
GO TO FULL VERSION