¿Cómo trabajar con selectores de atributos css3
Dentro de muchas etiquetas son atributos que describen propiedades de la etiqueta. Dos atributos comunes son el identificador de la etiqueta (id) y la clasificación CSS (clase). Sin embargo, CSS3 permite seleccionar objetos por cualquier atributo deseado. La siguiente lista le informa acerca de los selectores de atributos que se utilizan comúnmente en la creación de estilos.
.Nombre de la clase: Selecciona todos los objetos que tienen un valor de atributo de la clase con el nombre dado. Por ejemplo, .StdPara seleccionaría cada objeto que tiene a = atributo de clase”StdPara” sin tener en cuenta el tipo de objeto.
#Carné de identidad: Selecciona todos los objetos que tienen un valor de atributo id con el nombre dado. Por ejemplo, #ThirdHeader seleccionaría cada objeto que tiene una =”ThirdHeader” atributo id sin tener en cuenta el tipo de objeto.
: Lang (Identificador del idioma): Selecciona cualquier objeto con el valor de idioma especificado. Por ejemplo,: lang (en) sería seleccionar cualquier objeto que utiliza Inglés como su idioma. Puede encontrar una lista de identificadores de idioma en común w3schools.com.
[Atributo]: Selecciona todos los objetos que utilizan un atributo particular, independientemente del valor del atributo. Por ejemplo, [lang] seleccionaría todos los objetos que utilizan el atributo lang.
[Atributo=Valor]: Selecciona todos los objetos que tienen un atributo con un valor particular. El valor debe coincidir con precisión. Por ejemplo, [lang =”en-us”] Seleccionaríamos los objetos que tengan un atributo de idioma con un valor de Inglés.
[Atributo~ =Valor]: Selecciona todos los objetos que tienen un atributo que contiene un valor particular. El valor de búsqueda sólo tiene que aparecer en algún lugar dentro del valor en su conjunto. Por ejemplo, [título ~ =”secundario”] selecciona todos los objetos con atributos de título que contienen la palabra secundaria como una palabra discreta. Este selector trabaja con palabras completas.
Es posible restringir aún muchos de estos selectores de atributos combinándolas con los selectores de etiquetas. Por ejemplo, p [título ~ =”secundario”] selecciona sólo el
Tag objetos con atributos de título que contienen la palabra secundaria como una palabra discreta. A menudo es posible combinar selectores de maneras únicas para crear precisamente el efecto que desea.
[Atributo| =Valor]: Selecciona todos los objetos que tienen un atributo que comienza con un valor particular. El valor de búsqueda debe aparecer al principio del valor en su conjunto, pero no tiene por qué ser el valor completo. Por ejemplo, [título | =”Sub”] selecciona todos los objetos con atributos de título que comienzan con la palabra Sub. Este selector funciona con términos con guiones.
[Atributo^ =Valor]: Selecciona todos los objetos que tienen un atributo que comienza con un valor particular. Por ejemplo, [título | =”Sub”] selecciona todos los objetos con atributos de título que comienzan con la palabra Sub. Esta forma del selector difiere de la [Atributo | = Valor] atributo en que es menos restrictiva. Usando este formulario seleccione title =”sub-cabecera”, title =”Encabezado Sub”, o title =”sub-cabecera” con la misma fiabilidad.
Video: Tutorial CSS3: Selector de atributos en CSS3
[Atributo$ =Valor]: Selecciona todos los objetos que tienen un atributo que termina con un valor particular. Por ejemplo, [título $ =”secundario”] selecciona todos los objetos con el título atributos que terminar con la palabra Secundaria. Esta forma del atributo es no restrictiva - no requiere ningún formato especial.
[Atributo* =Valor]: Selecciona todos los objetos que tienen un atributo que contiene un valor particular. Por ejemplo, [Título $ =”secundario”] selecciona todos los objetos con atributos de título que contienen la palabra secundaria. Esta forma de la selector es menos restrictivo que el [Atributo ~ = Valor] atributo. Usando este formulario seleccionar title =”SecondaryParagraph”, title =”Párrafo secundario”, o title =”SecondaryParagraph” con la misma fiabilidad.
Ahora que tiene una idea de cómo funcionan los selectores de atributos, es el momento de verlos en acción. El siguiente procedimiento le ayuda a comprender lo atribuyen selectores hacen y cómo puede utilizarlos para seleccionar objetos específicos dentro de un documento para el formato.
crear el ExternalCSS.HTML archivos y ExternalCSS.CSS y copiarlos a una nueva carpeta.
ExternalCSS.HTML abierta.
Escriba el siguiente código después de la existente
etiqueta en el archivo y guardar los cambios en el disco.
otra partida
más texto
Video: HTML y CSS Esencial #6 - Selectores de clase CSS
Aún otra partida
Aún más texto
Incluso más texto
Este código se limita a añadir etiquetas en los arreglos específicos para que pueda probar los diferentes selectores. Si abre el archivo resultante ahora, se ve que cada una de las
y
etiquetas ha sido formateado automáticamente como el original
y
etiquetas-el resultado es similar a esto:
ExternalCSS.CSS abierta.
Escriba el siguiente código después de los estilos existentes y guardar los cambios en el disco.
.Subtítulo {border: double-frontera-ancho: espesor-border-color: Green-}Actualizar la página de prueba.
Se ve el efecto de hacer que el cambio de estilo. Cada objeto que tiene un valor de clase de subtítulo tiene ahora un doble borde grueso de color verde.
Hay muchas maneras de definir los colores que desea utilizar. Muchos desarrolladores utilizan el formato hexadecimal mostrado hasta ahora porque es preciso y flexible. Sin embargo, # 008000 es un poco difícil de leer. Usando el nombre del color, verde, es mucho más fácil. Por supuesto, esto significa que usted necesita saber el nombre del color. Afortunadamente, usted puede encontrar una lista de nombres que los navegadores entienden en w3schools.com.
Escriba el siguiente código después de los estilos existentes y guardar los cambios en el disco.
#ThirdHeader {text-decoration: línea pasante}Actualizar la página de prueba.
Se ve el efecto de hacer que el cambio de estilo. Cada objeto que tiene un valor de ID de ThirdHeader ahora tiene un valor de texto-decoración de la línea a través, en vez de subrayado. Observe que el nuevo valor sobrescribe el valor anterior. Si desea conservar el valor original, debe especificar de nuevo.
Escriba el siguiente código después de los estilos existentes y guardar los cambios en el disco.
[Título | ="Sub"] {Text-align: right; background-color: rgb (128, 255, 128) -}Actualizar la página de prueba.
Se ve el efecto de hacer que el cambio de estilo. Cada objeto que tiene la palabra Sub algún lugar de su atributo título se cambió. Observe que este cambio en particular afecta tanto
y
las etiquetas. Este ejemplo también muestra otra forma de definir las selecciones de color. Cada color: rojo, verde, azul (RGB) está representado por un valor entre 0 y 255.
Puede leer más sobre el enfoque rgb () para crear colores en w3schools.com.
