SINTAXIS<br />TEMA 2<br />www.laramarcos.com<br />
Sintaxis<br />Con las reglas CSS podemos acceder a cualquier elemento de la página y modificar su diseño<br />Regla CSS<br...
2.1 SELECTORES<br />Con ellos accedemos al elemento XHTML que queremos modificar<br />Hay 4 tipos básicos:<br />Universal:...
SELECTOR de etiqueta<br />Para llamar a los elementos, se utiliza la propia etiqueta de XHTML que los clasifica<br />Ejemp...
SELECTOR de CLASE<br />Para transformar el o los elementos, se utiliza el atributo class de dicho elemento<br />Ejemplos:<...
SELECTOR de ID<br />Para llamar a un único elemento, se utiliza su atributo id<br />Ejemplos:<br />#home  { color: red }<b...
Combinación de SELECTOres<br />Se pueden combinar los tres selectores anteriores<br /> Se tiene que cumplir la condición d...
SELECTOR descendiente<br />Ejemplos:<br />#home  p .primero { color: red }<br />		h1 span .autor { color: yellow }<br />		...
2.2 DECLARACIÓN CSS<br />La nueva apariencia que damos a lo seleccionado<br />Propiedad: característica a transformar<br /...
2.2 DECLARACIÓN CSS<br />Múltiples declaraciones pueden afectar a un mismo elemento<br />Por herencia<br />Por reglas dupl...
Upcoming SlideShare
Loading in …5
×

2.Sintaxis (diseño con CSS)

1,185 views
1,047 views

Published on

Normas para escribir reglas CSS correctas

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,185
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
54
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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 />

×