Selectores CSS
Sintaxis
Todos los estilos CSS se compone de 3 partes: un selector, una propiedad y un valor. Para mantenerse en línea con las reglas de formato XHTML todo el código CSS se deben escribir en minúsculas.
Sintaxis CSS
- Selector: Define las etiquetas HTML que va a recibir las reglas CSS. Para cambiar el estilo de todos sus párrafos se puede escribir
p {property:value}. - Propiedad: Este es el estilo CSS que desea aplicar. Para cambiar el color del texto de todos los párrafos se puede escribir
p {color:value}. - Valor: El valor de la propiedad. Para que todo el texto del párrafo rojo se puede escribir
p {color:red}.
Las declaraciones CSS puede tener más de una propiedad: par de valores separándolos con un punto y coma ; .
De propiedad múltiple: pares de valores
Propiedades quieren ofrecer al menos un valor, pero a veces puede aceptar más. Múltiples valores pueden ser separadas por espacios que significa que todos los valores se utilizan para la propiedad. O pueden ser separados por comas que significa que una serie de valores que se sugiere y que se aplica primero se utiliza.
Espacio de valores separados por
Por encima de la declaración CSS usa los 3 valores para representar los puntos con un borde de 5 píxeles de ancho rojo.
Valores separados por comas
Por encima de la declaración de la ESC sugiere 3 fuentes que se utilizarán para los párrafos, de izquierda a derecha. En caso de que no Verdana está disponible en el sistema del usuario que tratará de utilizar Arial y si eso no funciona, también, se recurrirá a una genérica sans-serif.
Varios selectores
En lugar de escribir la regla CSS misma para cada etiqueta HTML que prefiera realizar aplicarlo, puede agrupar los selectores y separarlas por comas. Esto hace que el código CSS extremadamente compacto y eficiente.
Mismo estilo para cada selección (malo)
h2 {color:black}
h3 {color:black}
h4 {color:black}
h5 {color:black}
h6 {color:black}
Selectores agrupados (bueno)
Selectores contextuales
Si sólo se aplican a una selección de estilos de párrafo, todos los párrafos se verán afectados. ¿Qué pasa si sólo desea cambiar los apartados dentro de elementos de la lista? En ese caso, usted necesita selectores contextuales que sólo se aplican una regla CSS si una etiqueta se produce en un contexto determinado. Un selector de contexto es creado por una lista de los tags anidados en el orden en que deben aparecer en el documento.
Selectores contextuales
h1 em {background:gray}
En el ejemplo anterior los elementos párrafo sólo <p> dentro de elementos de la lista <li> Obtener el texto en rojo y sólo hizo hincapié en el texto <em> en <h1> partidas obtiene un fondo gris.
Comentarios
A veces puede ser útil para poner comentarios CSS junto a algunas declaraciones para explicar lo que están haciendo. Estos comentarios son ignorados por los navegadores web, pero aún suman el tamaño final del archivo (a diferencia de los lenguajes de programación tales como PHP, donde los comentarios no son parte de la producción final).
Comentario CSS
p {font-weight:bold} /* this makes all paragraphs bold */
Compatibilidad del navegador
Todos los actuales navegadores web más importantes de apoyo de ambos tipos de selectores de modo que puede utilizar con seguridad ellos. Hay algunas más avanzadas selectores CSS que no son todos soportados por los navegadores como Internet Explorer (ver un patrón aquí?). Estas personas serán objeto de la CSS tutorial avanzado.