Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2.Sintaxis (diseño con CSS)

1,269 views

Published on

Normas para escribir reglas CSS correctas

Published in: Design
  • Be the first to comment

2.Sintaxis (diseño con CSS)

  1. 1. SINTAXIS<br />TEMA 2<br />www.laramarcos.com<br />
  2. 2. Sintaxis<br />Con las reglas CSS podemos acceder a cualquier elemento de la página y modificar su diseño<br />Regla CSS<br />Declaración<br />p { color : red }<br />Selector<br />Propiedad<br />Valor<br />www.laramarcos.com<br />
  3. 3. 2.1 SELECTORES<br />Con ellos accedemos al elemento XHTML que queremos modificar<br />Hay 4 tipos básicos:<br />Universal: asterísco * (selecciona todos los elementos de la página)<br />De etiqueta<br />De clase<br />De id<br />Se pueden combinar entre ellos<br />www.laramarcos.com<br />
  4. 4. SELECTOR de etiqueta<br />Para llamar a los elementos, se utiliza la propia etiqueta de XHTML que los clasifica<br />Ejemplos:<br />p { color: red }<br /> h1 { color: green }<br />strong { color: yellow }<br />thead { color: aqua }<br />li { color: fuchsia } <br />www.laramarcos.com<br />
  5. 5. SELECTOR de CLASE<br />Para transformar el o los elementos, se utiliza el atributo class de dicho elemento<br />Ejemplos:<br />.obligatorio { color: red }<br /> .ok { color: green }<br /> .alerta { color: yellow }<br /> .par { color: aqua }<br /> .impar { color: fuchsia } <br />www.laramarcos.com<br />
  6. 6. SELECTOR de ID<br />Para llamar a un único elemento, se utiliza su atributo id<br />Ejemplos:<br />#home { color: red }<br /> #pie { color: green }<br /> #cabecera { color: yellow }<br /> #contenedor { color: aqua }<br /> #accesibilidad { color: black } <br />www.laramarcos.com<br />
  7. 7. Combinación de SELECTOres<br />Se pueden combinar los tres selectores anteriores<br /> Se tiene que cumplir la condición de que el 2º elemento esté dentro del 1º, y el 3º dentro del 2º, etc.<br />Pero no tiene porqué ser descendiente de primer grado<br />www.laramarcos.com<br />
  8. 8. SELECTOR descendiente<br />Ejemplos:<br />#home p .primero { color: red }<br /> h1 span .autor { color: yellow }<br /> .obligatorio span { color: green }<br />CUIDADO, no es lo mismo que:<br />#home p.primero { color: red }<br /> h1 span.autor { color: yellow }<br />TAMPOCO que:<br />#home p, .primero { color: red }<br /> h1 span, .autor { color: yellow }<br />www.laramarcos.com<br />
  9. 9. 2.2 DECLARACIÓN CSS<br />La nueva apariencia que damos a lo seleccionado<br />Propiedad: característica a transformar<br />Valor: el nuevo parámetro<br />Ejemplos:<br />color: red (por defecto, negro)<br />text-align: center; (por defecto, left)<br />width: 200px; (por defecto, auto)<br />border-color: green; (por defecto, negro)<br />www.laramarcos.com<br />
  10. 10. 2.2 DECLARACIÓN CSS<br />Múltiples declaraciones pueden afectar a un mismo elemento<br />Por herencia<br />Por reglas duplicadas<br />Lo que puede provocar ‘colisión de estilos’<br />Para resolverlo, tener en cuenta:<br />El nivel de especificidad del selector: se aplica la regla con el selector más específico<br />El orden en que se escriben las reglas: si los selectores son igual de específicos, se aplica la última regla escrita<br />www.laramarcos.com<br />

×