Hojas de estilo CSS (Cascade Style Sheets)
Upcoming SlideShare
Loading in...5
×
 

Hojas de estilo CSS (Cascade Style Sheets)

on

  • 5,203 views

Introducción a las hojas de estilo CSS (Cascade Style Sheets)

Introducción a las hojas de estilo CSS (Cascade Style Sheets)

Statistics

Views

Total Views
5,203
Views on SlideShare
5,158
Embed Views
45

Actions

Likes
2
Downloads
126
Comments
0

10 Embeds 45

http://internetmultimedia.wikispaces.com 17
http://www.slideshare.net 16
http://www.educacion.es 5
http://mpiiesvaldehierro.blogspot.jp 1
http://www.linkedin.com 1
http://mpiiesvaldehierro.blogspot.com.es 1
http://mpiiesvaldehierro.blogspot.mx 1
http://adrian-pyxis.internexo.com 1
http://static.slidesharecdn.com 1
http://www.slideee.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

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

Hojas de estilo CSS (Cascade Style Sheets) Hojas de estilo CSS (Cascade Style Sheets) Presentation Transcript

  • Hojas de estilo en cascada (CSS)
    • Introducción a las hojas de estilos
    • CSS – Cascade Style Sheets
    • Juan Ignacio Rodríguez de León
    • jileon (arroba) parcan.es
  • ¿Qué son las hojas de estilo?
    • Las hojas de estilo son una forma sencilla de modificar la apariencia de una página web cambiando tipografía, colores, fondos, efectos de texto, etc...
  • Ventajas de usar CSS
    • Consistencia en el estilo de las páginas
    • Mayor control sobre la apariencia y la disposición de los elementos
    • Optimización de la descarga
    • Código HTML más simple y fácil de mantener
    • Interacción con javascript
  • Estructura del CSS
    • Una hoja de estilos se compone de una serie de reglas ( rules )
    • Cada regla, a su vez, consiste en un selector y una declaración
    • El selector define cuando se debe aplicar la regla
    • La declaración consiste en una lista de características que definen el estilo
  • Ejemplo
    • h1 {
      • color: blue;
      • background-color: silver;
      • }
    • El selector es h1: Esta regla sólo se aplica a los encabezados de nivel 1
    • La declaración define dos características: Las letras serán azules y el fondo gris plata.
  • Las declaraciones (1)
    • Las declaraciones consisten en dos valores separados por el caracter dos puntos (:)
    • La primera parte es el nombre del atributo a modificar
    • la segunda parte es el valor de dicho atributo
    • font-size: 12pt;
  • Las declaraciones (2)
    • La lista de declaraciones debe ir separada por el caracter punto y coma (;)
    • Si se ponen varios valores y no se separan adecuadamente, la declaración fallará
    • Si una declaración no se refleja en la página, lo primero que hay que hacer es mirar si la declaración anterior termina en punto y coma.
  • Aplicando CSS
    • Hay tres formas de aplicar hojas de estilo a una página:
      • En línea (inline)
      • Declaración interna (Internal)
      • Declaración externa (External)
  • En linea (inline)
    • Consiste en definir la apariencia de una etiqueta dentro de la misma, usando el atributo style .
    • <p style=”color: navy”>Hola</p>
    • NO se recomienda este estilo, porque debemos intentar en lo posible separar el contenido de los datos de la presentación de los mismos.
  • Representación Interna
    • Incluyendo las declaraciones de estilo en la sección head de la página HTML
    • <html>
    • <head>
    • <style>
    • p { color: navy; }
    • </style>
    • </head>
    • <Body>...
  • Representación externa
    • Consiste en enlazar con un archivo externo que incluye las declaraciones de la hoja de estilos.
    • <html>
    • <head>
    • <link rel=”stylesheet” type=”text/css” href=”estilo.css”>
    • </head>
    • <Body>
    • ...
  • Longitudes y porcentajes
    • Hay una serie de unidades que se pueden usar para expresar una longitud:
      • px – pixels
      • em – El ancho que ocupa la m en la fuente actual
      • ex – La altura de la x en la fuente actual
      • pt – puntos tipográficos (1 punto equivale a 1/72 pulgadas)
      • cm, mm, in – Centímetros, milímetros, pulgadas
      • Cuando el valor es 0, no es necesario indicar las unidades
  • Colores
    • Para especificar colores se pueden usar tres sintáxis diferentes:
      • Usando los nombres predefinidos de 17 colores:
        • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
      • Usando la expresión rgb(r,g,b), donde r, g y b son los componente rojo, verde y azul del color en valores decimales entre 0 y 255
      • Usando la expresión #RRGGGG, donde RR, GG y BB son los componente rojo, verde y azul en hexadecimal
  • La propiedad display
    • Controla la forma de visualización de cada elemento, puede tener los siguientes valores:
      • none – El elemento no se visualizará
      • block – El elemento se mostrará como un bloque, con un salto de línea antes y otro después
      • inline – El elemento se mostrará como un elemento en línea, sin saltos antes ni después
      • list-item – El elemento forma parte de una lista
  • Posicionamiento
    • Podemos indicar las posiciones de los elementos de cuatro maneras distintas
      • Static
      • Relative
      • Absolute
      • Fixed
  • Posicionamiento con Static
    • Static es el valor por defecto, posiciona las cosas según el orden en que estan dispuestas en la página HTML
  • Posicionamiento con Relative
    • Relative es muy parecidad a la static , pero podemos desplazar el elemento desde la posición predeterminada dando valores a los atributos left , right , top y bottom .
  • Posicionamiento con Absolute
    • Absolute nos permite ubicar un elemento de forma absoluta, es decir, indicando su posición con respecto a la página, de nuevo usando los atributos left , right , top y bottom .
  • Posicionamiento con Fixed
    • Fixed es similar a Absolute , la diferencia es que el elemento quedará fijo en la posicion indicada, aun cuando nos desplazemos por el contenido. Las propiedades left , right , top y bottom se toman en referencia a la ventana del navegador, en vez de a la página.
  • Elemento flotantes
    • Un elemento puede definir un valor del atributo float , asignadole un valor de none (por defecto), left o right . En ese caso, el elemento se desplazará en el eje x en la dirección indicada, y el resto de los contenidos de la página fluirá en el espacio libre que quede
    • Un uso habitual es posicionar una foto a la derecha, por ejemplo, y que el texto se ajuste por la izquierda.
  • Ejemplo de elemento float