Normas para escribir reglas CSS correctas

1. SINTAXIS TEMA 2 www.laramarcos.com

2. Sintaxis Con las reglas CSS podemos acceder a cualquier elemento de la página y modificar su diseño Regla CSS Declaración p { color : red } Selector Propiedad Valor www.laramarcos.com

3. 2.1 SELECTORES Con ellos accedemos al elemento XHTML que queremos modificar Hay 4 tipos básicos: Universal: asterísco * (selecciona todos los elementos de la página) De etiqueta De clase De id Se pueden combinar entre ellos www.laramarcos.com

4. SELECTOR de etiqueta Para llamar a los elementos, se utiliza la propia etiqueta de XHTML que los clasifica Ejemplos: p { color: red } h1 { color: green } strong { color: yellow } thead { color: aqua } li { color: fuchsia } www.laramarcos.com

5. SELECTOR de CLASE Para transformar el o los elementos, se utiliza el atributo class de dicho elemento Ejemplos: .obligatorio { color: red } .ok { color: green } .alerta { color: yellow } .par { color: aqua } .impar { color: fuchsia } www.laramarcos.com

6. SELECTOR de ID Para llamar a un único elemento, se utiliza su atributo id Ejemplos: #home { color: red } #pie { color: green } #cabecera { color: yellow } #contenedor { color: aqua } #accesibilidad { color: black } www.laramarcos.com

7. Combinación de SELECTOres Se pueden combinar los tres selectores anteriores Se tiene que cumplir la condición de que el 2º elemento esté dentro del 1º, y el 3º dentro del 2º, etc. Pero no tiene porqué ser descendiente de primer grado www.laramarcos.com

8. SELECTOR descendiente Ejemplos: #home p .primero { color: red } h1 span .autor { color: yellow } .obligatorio span { color: green } CUIDADO, no es lo mismo que: #home p.primero { color: red } h1 span.autor { color: yellow } TAMPOCO que: #home p, .primero { color: red } h1 span, .autor { color: yellow } www.laramarcos.com

9. 2.2 DECLARACIÓN CSS La nueva apariencia que damos a lo seleccionado Propiedad: característica a transformar Valor: el nuevo parámetro Ejemplos: color: red (por defecto, negro) text-align: center; (por defecto, left) width: 200px; (por defecto, auto) border-color: green; (por defecto, negro) www.laramarcos.com

10. 2.2 DECLARACIÓN CSS Múltiples declaraciones pueden afectar a un mismo elemento Por herencia Por reglas duplicadas Lo que puede provocar ‘colisión de estilos’ Para resolverlo, tener en cuenta: El nivel de especificidad del selector: se aplica la regla con el selector más específico El orden en que se escriben las reglas: si los selectores son igual de específicos, se aplica la última regla escrita www.laramarcos.com