• Like
CSS - Hojas de Estilo en Cascada
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

CSS - Hojas de Estilo en Cascada

  • 4,563 views
Published

Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades en las diferentes etiquetas para mejorar su apariencia. Así las cosas, se pensó en una estrategia …

Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades en las diferentes etiquetas para mejorar su apariencia. Así las cosas, se pensó en una estrategia que permitiera independizar la parte visual del contenido propio del documento HTML.

CSS son las siglas de Cascade Style Sheets, que quiere decir en español “Hojas de Estilos en Cascada”. Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML y trata de dar la separación definitiva de la lógica (estructura) y la presentación del documento HTML.

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,563
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
221
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Didier Fabián Granados Muñoz Sesión 6: CSS - Hojas de Estilo en Cascada Septiembre 12 de 2009
  • 2. • Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades en las diferentes etiquetas para mejorar su apariencia. Texto Texto <font face="Arial" size="3" color="yellow"> Texto </font>
  • 3. • Si se quería aplicar la misma apariencia a varios elementos, había que repetir las instrucciones! <font face="Arial” size="3" Texto 1 Texto 1 color="yellow"> Texto 1 </font> … … <font face="Arial” size="3" color="yellow"> Texto 2 Texto 2 Texto 2 </font>
  • 4. • Aún peor, si se quería aplicar la misma apariencia a varios elementos en varias páginas, las instrucciones se repiten cada vez más. • El desarrollador veía tedioso este proceso, pues no había forma alguna de evitar tantas repeticiones. Texto 1 Texto 1 <font face="Arial” size="3“ color="yellow"> ( Texto 1 </font> ) n
  • 5. • Y si era algo más que texto… • Para organizar el contenido se debía recurrir únicamente a las tablas. • No había forma de poner un objeto sobre otro (caso de los tooltips o regiones con imágenes o tablas). • Para que los vínculos se vieran agradables, había que recurrir a imágenes. • Muchos de los efectos se tenían que realizar con Javascript, incluso en detrimento del rendimiento del navegador… • Etc.
  • 6. • Así las cosas, se pensó en una estrategia que permitiera independizar la parte visual del contenido propio del documento HTML.
  • 7. • Siglas de Cascade Style Sheets, que quiere decir “Hojas de Estilos en Cascada”. • Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML. • Trata de dar la separación definitiva de la lógica (estructura) y la presentación del documento HTML.
  • 8. Estilos • El estilo físico no se preocupa de la estructura del documento, sino por la apariencia final: párrafos con un cierto tipo de letra, tablas con un determinado color de fondo, entre otros. • El estilo lógico, en cambio, se refiere específicamente a la estructura del documento. • CSS se ocupa de adaptar el estilo físico al estilo lógico.
  • 9. ¿Por qué usar CSS? (1/2) • Porque es más limpio tener por separado el contenido (HTML) de la presentación (CSS). • Porque para cambiar el formato de un elemento HTML específico, solo se tendría que definir en la hoja de estilos una única vez y no tantas veces como dicho elemento aparezca. • Porque el HTML es muy limitado para lograr una maquetación atractiva de las páginas web (posicionamiento lineal).
  • 10. ¿Por qué usar CSS? (2/2) • Porque permite mantener una cierta consistencia entre todas las páginas. • Porque permite una carga más rápida de las páginas. • Porque es más accesible que HTML. • Porque es un estándar y los estándares son el camino para que se pueda ver internet de la misma manera. • Porque se trata de definir las características en cascada. • Porque se pueden definir los estilos utilizando unidades diferentes a los pixeles.
  • 11. Sintaxis básica • CSS utiliza la siguiente sintaxis básica para cada una de sus instrucciones: propiedad1: valor1; propiedad2: valor2; ... • La propiedad es aquél comportamiento que se desea agregar al elemento HTML y que posee uno o varios valores. • El valor es lo que efectivamente se verá reflejado en la propiedad a la cual pertenece.
  • 12. • No es lo más recomendable, dado que se debe definir en un atributo de la etiqueta HTML sobre la que se quiere aplicar. • El atributo utilizado es STYLE, de donde la sintaxis sería la siguiente: <etiqueta style="propiedad1: valor1; propiedad2: valor2; ... propiedadN: valorN"> ... </etiqueta> • Ver ejemplo 1.
  • 13. • Se desea definir estilos que apliquen a una, varias o todas las etiquetas del documento. • Se definen entonces estilos globales, entre las etiquetas <head> y </head>, de acuerdo a la siguiente sintaxis: <style type="text-css"> <!— etiqueta { propiedad1: valor1; propiedad2: valor2; ... } /* Y esto aplica para todas las demás */ --> </style>
  • 14. • Otras variantes pueden ser las siguientes: <style type="text-css"> <!— etiqueta1, etiqueta2 { propiedad1: valor1; propiedad2: valor2; ... } etiqueta3 { propiedadA: valorA; propiedadB: valorB; ... } --> </style> • Ver ejemplo 2
  • 15. • Es lo más recomendado. Los estilos se declaran en un archivo por aparte, especialmente cuando se trata de reutilizarlos en todas las páginas. • Debe declararse entre las etiquetas <head> y </head>. • La sintaxis sería la siguiente: <link rel="stylesheet" type="text/css" href="ruta_hoja_de_estilos.css" /> • Ver ejemplo 3.
  • 16. • A pesar de esto, desde la etiqueta style o el atributo style de cada etiqueta HTML, se puede modificar un estilo que ya estaba predefinido en la hoja de estilos. Ver ejemplo 4.
  • 17. • Se tiene la posibilidad de definir, en lugar de un estilo para una etiqueta, varios estilos que apliquen sobre dicha etiqueta. • Por ejemplo, se puede hacer que el color del texto de una sección en negrita se vea rojo dentro de un párrafo o verde dentro de una lista. Ver ejemplo 5.
  • 18. • Una clase es una definición de un estilo concreto que en principio no está asociado a alguna etiqueta HTML, pero que en el documento se pueden asociar a etiquetas concretas. • La sintaxis en la hoja de estilos es la siguiente: .NombreDeLaClase { propiedad1: valor1; propiedad2: valor2: … }
  • 19. • Para aplicar el estilo de una clase a una etiqueta concreta, se utiliza el parámetro CLASS: <etiqueta class="NombreDeLaClase">...</etiqueta> • Nótese que se ha invocado la clase en el atributo class, pero no se le ha puesto el punto antes. El punto es el identificador de que lo declarado en el CSS es una clase. Ver ejemplo 6.
  • 20. • También es posible que un elemento tenga asociada más de una clase: <etiqueta class="clase1 clase2 … claseN">...</etiqueta> • Todas las clases asociadas deben estar dentro del atributo class separadas por espacios. Ver ejemplo 7.
  • 21. • Cualquier etiqueta HTML puede tener asociado el atributo ID. <etiqueta id="nombreReferencia">...</etiqueta> • Este “nombreReferencia” debe ser único en todo el documento HTML, puesto que servirá para tratarla tanto desde Javascript como desde CSS.
  • 22. • Para definir un estilo mediante un ID, se usará la siguiente notación: #NombreDelId { propiedad: valor; ... propiedadN: valorN; } • Es decir, escribiendo #, seguido del nombre del ID correspondiente en el documento HTML.
  • 23. • Los ID y las clases pueden también ser combinados, como se muestra en la siguiente notación: #NombreDelId.clase { propiedad: valor; ... propiedadN: valorN; } • Aunque esto es poco común, pero es posible que un elemento pueda manejar varias clases al tiempo...
  • 24. • O también pueden ser combinados de la siguiente forma: .clase#NombreDelId { propiedad: valor; ... propiedadN: valorN; } • En otras palabras, por una misma clase se pueden definir diferentes comportamientos para cada elemento con un ID definido. Ver ejemplo 8.
  • 25. • Un selector es la parte de un estilo CSS donde se indica sobre qué parte del documento (X)HTML se debe aplicar el estilo, o dicho de otra manera, el nombre del estilo. div { font-size: 18px; } • El ejemplo muestra lo que sería un selector básico de todos: la redefinición de una etiqueta HTML. • Sin embargo, existen diferentes tipos de selectores.
  • 26. • Los siguientes son ejemplos de selectores simples, es decir, aquellos a los cuales solo se les aplica una característica especial. • A continuación unos ejemplos y sus mapeos en HTML. body { ... } <body> ... </body> h2.first{ ... } <h2 class="first"> ... </h2> div#logo { ... } <div id="logo"> ... </div> a:visited { ... } <a href="link.html“> ... </a>
  • 27. • Estos selectores afectan a una etiqueta hija de otra en forma descendiente. div span { font-size: 18px } <div><span>Cualquier texto o cosa aquí</span></div>
  • 28. • Existen 2, el + y el >. • El + no se aplica ni a padres, ni a hijos, sino a hermanos (etiquetas contiguas o adyacentes). • El > es otra manera de representar la herencia. h2.first > span { <h2 class="first"> <span> ... } Texto </span> div#logo { ... } <div id="logo"></div><h3>Texto</h3>
  • 29. • Se utiliza para todos los elementos del documento HTML, es decir, si se utiliza este selector, automáticamente todos los elementos hijos van a tomar las características dadas, * { margin: 0px; padding: 0px; } div#header * { color: #CCCCCC; text-decoration: none; }
  • 30. Vamos a hacerlo con un ejemplo práctico.
  • 31.  Página Oficial de CSS  http://www.w3.org/Style/CSS/  Guías y tutoriales de CSS  http://www.w3schools.com/css  http://www.htmlhelp.com/reference/css/  Validador de CSS  http://jigsaw.w3.org/css-validator/