CSS: Hojas de Estilo en Cascada. Didier Fabián Granados Muñoz

Transcripción

1 CSS: Hojas de Estilo en Cascada Didier Fabián Granados Muñoz

2 Contexto Qué hay detrás de esto?

3 Contexto 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> 26/09/2016 CSS: Hojas de Estilo en Cascada 3

4 Contexto Si se quería aplicar la misma apariencia a varios elementos, había que repetir las instrucciones! Texto 1 Texto 1 Texto 2 Texto 2 <font face="arial size="3" color="yellow"> Texto 1 </font> <font face="arial size="3" color="yellow"> Texto 2 </font> 26/09/2016 CSS: Hojas de Estilo en Cascada 4

5 Contexto 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 ( )n <font face="arial size="3 color="yellow"> Texto 1 </font> 26/09/2016 CSS: Hojas de Estilo en Cascada 5

6 Contexto 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 6

7 Contexto Así las cosas, se pensó en una estrategia que permitiera independizar la parte visual del contenido propio del documento HTML. 26/09/2016 CSS: Hojas de Estilo en Cascada 7

8 Y se pensó en 26/09/2016 CSS: Hojas de Estilo en Cascada 8

9 CSS 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 9

10 CSS 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 10

11 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). 26/09/2016 CSS: Hojas de Estilo en Cascada 11

12 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 12

13 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 13

14 Aplicaciones Dónde puede ser implementado

15 Aplicación directa en etiquetas 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> 26/09/2016 CSS: Hojas de Estilo en Cascada 15

16 Redefinición de etiquetas (1) 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> 26/09/2016 CSS: Hojas de Estilo en Cascada 16

17 Redefinición de etiquetas (2) Otras variantes pueden ser las siguientes: <style type="text/css"> <!-- etiqueta1, etiqueta2 { propiedad1: valor1; propiedad2: valor2;... } etiqueta3 { propiedada: valora; propiedadb: valorb;... } --> </style> 26/09/2016 CSS: Hojas de Estilo en Cascada 17

18 Separar HTML de CSS (1) 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" /> 26/09/2016 CSS: Hojas de Estilo en Cascada 18

19 Separar HTML de CSS (2) 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 19

20 Estilo en función del contexto 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 20

21 Clases e identificadores Implementando CSS en HTML

22 Clases (1) 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: } 26/09/2016 CSS: Hojas de Estilo en Cascada 22

23 Clases (2) 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 23

24 Clases (3) 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 24

25 Identificadores (1) 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 25

26 Identificadores (2) 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 26

27 Combinación (1) 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... 26/09/2016 CSS: Hojas de Estilo en Cascada 27

28 Combinación (2) 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. 26/09/2016 CSS: Hojas de Estilo en Cascada 28

29 Selectores Elementos diferenciadores

30 Definición 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/09/2016 CSS: Hojas de Estilo en Cascada 30

31 Selectores simples 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 {... } h2.first{... } div#logo {... } a:visited {... } <body>... </body> <h2 class="first">... </h2> <div id="logo">... </div> <a href="link.html >... </a> 26/09/2016 CSS: Hojas de Estilo en Cascada 31

32 Selectores descendientes 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> 26/09/2016 CSS: Hojas de Estilo en Cascada 32

33 Selectores combinados 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 {... } div#logo {... } <h2 class="first"> <span> Texto </span> <div id="logo"></div><h3>texto</h3> 26/09/2016 CSS: Hojas de Estilo en Cascada 33

34 Selector universal 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; } 26/09/2016 CSS: Hojas de Estilo en Cascada 34

35 Y mucho más! Estudiemos los ejemplos prácticos

36 Página Oficial de CSS Guías y tutoriales de CSS Validador de CSS Referencias Para su consulta 26/09/2016 CSS: Hojas de Estilo en Cascada 36

37 PREGUNTAS? 26/09/2016 CSS: Hojas de Estilo en Cascada 37

38