2.Sintaxis (diseño con CSS)
Upcoming SlideShare
Loading in...5
×
 

2.Sintaxis (diseño con CSS)

on

  • 1,336 views

Normas para escribir reglas CSS correctas

Normas para escribir reglas CSS correctas

Statistics

Views

Total Views
1,336
Views on SlideShare
1,324
Embed Views
12

Actions

Likes
1
Downloads
40
Comments
0

1 Embed 12

http://larasaregune.wordpress.com 12

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

2.Sintaxis (diseño con CSS) 2.Sintaxis (diseño con CSS) Presentation Transcript

  • SINTAXIS
    TEMA 2
    www.laramarcos.com
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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