2.Sintaxis (diseño con CSS)
- 2. SintaxisCon las reglas CSS podemos acceder a cualquier elemento de la página y modificar su diseñoRegla CSSDeclaraciónp { color : red }SelectorPropiedadValorwww.laramarcos.com
- 3. 2.1 SELECTORESCon ellos accedemos al elemento XHTML que queremos modificarHay 4 tipos básicos:Universal: asterísco * (selecciona todos los elementos de la página)De etiquetaDe claseDe idSe pueden combinar entre elloswww.laramarcos.com
- 4. SELECTOR de etiquetaPara llamar a los elementos, se utiliza la propia etiqueta de XHTML que los clasificaEjemplos:p { color: red } h1 { color: green }strong { color: yellow }thead { color: aqua }li { color: fuchsia } www.laramarcos.com
- 5. SELECTOR de CLASEPara transformar el o los elementos, se utiliza el atributo class de dicho elementoEjemplos:.obligatorio { color: red } .ok { color: green } .alerta { color: yellow } .par { color: aqua } .impar { color: fuchsia } www.laramarcos.com
- 6. SELECTOR de IDPara llamar a un único elemento, se utiliza su atributo idEjemplos:#home { color: red } #pie { color: green } #cabecera { color: yellow } #contenedor { color: aqua } #accesibilidad { color: black } www.laramarcos.com
- 7. Combinación de SELECTOresSe 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 gradowww.laramarcos.com
- 8. SELECTOR descendienteEjemplos:#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 CSSLa nueva apariencia que damos a lo seleccionadoPropiedad: característica a transformarValor: el nuevo parámetroEjemplos: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 CSSMúltiples declaraciones pueden afectar a un mismo elementoPor herenciaPor reglas duplicadasLo 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íficoEl orden en que se escriben las reglas: si los selectores son igual de específicos, se aplica la última regla escritawww.laramarcos.com