Para cambiar el estilo de los elementos que contienen varios parámetros, se han introducido selectores de atributos en CSS. Le permiten establecer el estilo de una etiqueta en función de la presencia de un determinado parámetro o su valor. Nota: Los selectores de atributos son compatibles con Internet Explorer versión 7.0 y posteriores, y se debe agregar el <!DOCTYPE> correcto para que los ejemplos funcionen correctamente. Veamos varios usos típicos de dichos selectores.
Selector de atributos simple
Establece el estilo de un elemento si se especifica un atributo específico. Su significado no es importante en este caso. La sintaxis para utilizar dicho selector es la siguiente.
[атрибут]{ Описание правил стиля } Селектор[атрибут]{ Описание правил стиля }
No se permiten espacios entre el nombre del selector y los corchetes. El ejemplo 12.1 muestra cómo se aplica el estilo a la etiqueta <Q> cuando se le agrega un parámetro de título. Ejemplo 12.1. Tipo de elemento según su parámetro
<!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="Из законов Фергюсона-Мержевича">После
того, Cómo веб-página будет корректно отображаться в одном браузере, выяснится,
что она неправильно показывается в другом</q>.</p></body></html>
El resultado del ejemplo se muestra en la Fig. 12.1 En este ejemplo, el color del texto dentro del contenedor 7lt;Q> cambia cuando se le agrega el parámetro de título. Tenga en cuenta que para el selector Q[title] no es necesario repetir los atributos ya que se heredan del selector Q.
Selector de atributos con valor.
Establece el estilo de un elemento si se especifica un valor específico para un parámetro específico. La sintaxis de la aplicación es la siguiente.
[атрибут="significado"]{ Описание правил стиля } Селектор[атрибут="significado"]{ Описание правил стиля }
En el primer caso, el estilo se aplica a todos los elementos que contienen el valor del atributo especificado. Y en el segundo, solo para ciertos selectores. El ejemplo 12.2 muestra cómo cambiar el estilo del enlace si la etiqueta A contiene un parámetro target="_blank". En este caso, el enlace se abrirá en una nueva ventana y para mostrarlo, usando estilos agregamos una pequeña imagen delante del texto del enlace. Ejemplo 12.2. Estilo para abrir enlaces en una nueva ventana.
<!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">Обычная enlace</a>|<a href="link2" target="_blank">Ссылка в новом окне</a></p></body></html>
El resultado del ejemplo se muestra a continuación (Figura 12.2). En este ejemplo, se agrega una imagen al enlace usando el atributo background. Su función es crear una imagen de fondo repetida, pero la repetición del fondo se puede cancelar mediante el argumento no-repeat, lo que da como resultado una sola imagen.
El atributo comienza con un valor específico
Establece el estilo de un elemento si el atributo comienza con el valor especificado. La sintaxis de la aplicación es la siguiente.
[атрибут^="significado"]{ Описание правил стиля } Селектор[атрибут^="significado"]{ Описание правил стиля }
En el primer caso, el estilo se aplica a todos los elementos que comienzan con el valor del atributo especificado. Y en el segundo, solo para ciertos selectores. Supongamos que su sitio necesita separar el estilo de enlaces regulares y externos (enlaces que conducen a otros sitios). Para evitar agregar Auna nueva clase a la etiqueta, usaremos selectores de atributos. Los enlaces externos se caracterizan por agregar un protocolo a la dirección, por ejemplo, el protocolo HTTP se utiliza para acceder a documentos de hipertexto. Por lo tanto, los enlaces externos comienzan con la palabra clave http:// y la agregamos al selector A, como se muestra en el ejemplo 12.3. Ejemplo 12.3. Cambiar el estilo de referencia externa
<!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">Обычная enlace</a>|<a href="http://htmlbook.ru" target="_blank" rel="nofollow">Внешняя enlace на сайт htmlbook.ru</a></p></body></html>
El resultado del ejemplo se muestra a continuación (Fig. 12.3) . En este ejemplo, los enlaces externos están resaltados en negrita. También puede utilizar la técnica que se muestra en el ejemplo 12.2 y agregar una pequeña imagen al enlace, lo que indicará que el enlace conduce a otro sitio.
El atributo termina con un valor específico.
Establece el estilo de un elemento si el atributo termina con el valor especificado. La sintaxis de la aplicación es la siguiente.
[атрибут$="significado"]{ Описание правил стиля } Селектор[атрибут$="significado"]{ Описание правил стиля }
En el primer caso, el estilo se aplica a todos los elementos que terminan con el valor del atributo especificado. Y en el segundo, solo para ciertos selectores. De esta manera, puede separar automáticamente el estilo para sitios del dominio ru y para sitios de otros dominios como com, como se muestra en el ejemplo 12.4. Ejemplo 12.4. Estilo para diferentes dominios
<!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"]{/* Если enlace заканчивается на .ru */
background:url(ru.gif) no-repeat;/* Параметры фонового рисунка */
padding-left:10px;/* Смещаем текст вправо */}A[href$=".com"]{/* Если enlace заканчивается на .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>
Este ejemplo contiene dos enlaces que conducen a dominios diferentes: comy ru. Al mismo tiempo, cada enlace tiene su propia imagen de fondo agregada mediante estilos. Los atributos de estilo se agregarán solo para aquellos enlaces hrefcuyo parámetro termine en “.ru” o “.com”. Tenga en cuenta que al agregar una barra diagonal ( http://www.yandex.ru/ ) o la dirección de la página ( http://www.yandex.ru/fun.html ) al nombre de dominio, cambiaremos el final y el estilo no se aplicará. En este caso, es mejor utilizar un selector en el que un valor específico pueda ubicarse en cualquier parte del atributo.
El valor ocurre en cualquier parte del atributo.
Hay opciones cuando el estilo debe aplicarse a un selector con un atributo específico, del cual forma parte un valor. Sin embargo, no se sabe exactamente si el argumento comienza o termina con este valor. Entonces se debe utilizar la siguiente sintaxis.
[атрибут*="significado"]{ Описание правил стиля } Селектор[атрибут*="significado"]{ Описание правил стиля }
El valor puede aparecer en cualquier parte del argumento, como al principio, al final o en algún punto intermedio. Lo principal es que es parte de ello. Así, el ejemplo 12.5 muestra un cambio en el estilo de los enlaces en los que aparece la palabra “htmlbook”. Ejemplo 12.5. Estilo para diferentes sitios
<!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">Etiquetaи HTML</a>|<a href="http://stepbystep.htmlbook.ru" rel="nofollow">Шаг за шагом</a>|<a href="http://webimg.ru" rel="nofollow">Графика для Веб</a></p></body></html>
El resultado de este ejemplo se muestra en la Fig. 12.4 Existen otros tipos de selectores de argumentos, pero se utilizan muy raramente, por lo que omitiremos su descripción. Enlace a la fuente original: http://stepbystep.htmlbook.ru/?id=54
Nota: Los selectores de atributos son compatibles con Internet Explorer versión 7.0 y posteriores, y se debe agregar el <!DOCTYPE> correcto para que los ejemplos funcionen correctamente. Veamos varios usos típicos de dichos selectores.
En este ejemplo, el color del texto dentro del contenedor 7lt;Q> cambia cuando se le agrega el parámetro de título. Tenga en cuenta que para el selector Q[title] no es necesario repetir los atributos ya que se heredan del selector Q.
En este ejemplo, se agrega una imagen al enlace usando el atributo 
. En este ejemplo, los enlaces externos están resaltados en negrita. También puede utilizar la técnica que se muestra en el ejemplo 12.2 y agregar una pequeña imagen al enlace, lo que indicará que el enlace conduce a otro sitio.
Existen otros tipos de selectores de argumentos, pero se utilizan muy raramente, por lo que omitiremos su descripción. Enlace a la fuente original: http://stepbystep.htmlbook.ru/?id=54
GO TO FULL VERSION