Técnicas de visualización Hojas de estilo CSS Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez
Introducción al CSS» CSS (Cascading StyleSheets ) Hojas de estilo en cascada. Lenguaje de estilo que define la presentación de los documentos HTML. Con CSS se puede modificar fuentes, colores, márgenes, anchuras, alturas,... HTML CSS Estructura el contenido Formatea el contenido http://www.w3schools.com/css/
Sintáxis básica de CSS A qué elemento(s) se aplica la propiedad selector { propiedad : valor; } La propiedad que se quiere modificar El valor que recibirá la propiedad» Ejemplo: En HTML En CSS <body bgcolor="#ff0000"> body {background-color: #FF0000;}
Aplicar CSS a un documento HTML 1 - En la misma etiqueta usando el atributo style: <html> <head>...</head> <body style="background-color: #FF0000;"> </body> </html> 2 - En la cabecera del documento usando la etiqueta style: <html> <head> <title>ejemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body>... </body> </html>
Aplicar CSS a un documento HTML 3 - Externa, usando un enlace a una hoja de estilos (documento de texto con extensión css): <html> <head> <title>ejemplo</title> <link rel= stylesheet type= text/css href= hojaestilo.css media= all > </head> <body>... </body> </html> hojaestilo.css: body { background-color: black; /* esto es un comentario */ }
Aplicar CSS a un documento HTML 3 - Externa, usando un enlace a una hoja de estilos (documento de texto con extensión css): <html> <head> <title>ejemplo</title> <link rel= stylesheet href= hojaestilo.css > </head> <body>... </body> </html> HTML5 hojaestilo.css: body { background-color: black; /* fondo de la página en color negro */ }
Tipos de selectores Selector de tipo: CSS p { color: red } CSS p, h1 { color: red } HTML <body> <h1>título</h1> HTML <body> <h1>título</h1> </body> <p>en en un lugar </p> </body> <p>en en un lugar </p> NAVEGADOR Título En en un lugar NAVEGADOR Título En en un lugar
Tipos de selectores Selector descendente: CSS div p { color: red } Selector de hijos: CSS div > p { color: red } HTML <body> <div><p>título</p></div> <p>en en un lugar </p> </body> NAVEGADOR Título En en un lugar HTML <div><span><p>título</p> </span></div> <div><p>en en un lugar </p></div> NAVEGADOR Título En en un lugar
Tipos de selectores Selector de classe: class CSS.cita {color: red; font-weight: bold} Selector de identificador: id CSS #first-p {color: grey; font-weight: bold} HTML <body> <p>título</p> <p class="cita">en en un lugar </p> </body> NAVEGADOR Título En en un lugar HTML <body> <p id="first-p">en un lugar </p> <p>y en otro lugar</p> </body> NAVEGADOR En en un lugar Y en otro lugar Más de un elemento pueden tener el mismo atributo class en la misma página. Cada id debe ser único por página.
Tipos de selectores Selector de elemento específico CSS p.cita {color: red; font-weight: bold;} Selector adyacente CSS h1 + h2 {color: red} h1~h2 {color: red} HTML <body> <h1 class= cita >Título</h1> <p class="cita">en en un lugar </p> </body> NAVEGADOR Título En en un lugar HTML NAVEGADOR Título Subtítulo Otro subtítulo <h1>título</h1> <h2>subtítulo</h2> <h2>otro subtítulo</h2> Título Subtítulo Otro subtítulo
Tipos de selectores Selector de atributos CSS p[class] {color: red} Selector adyacente CSS a[href= www.url.com ] {color: red} HTML <body> <p class= main >Título</h1> <p class= cont">en en un lugar </p> </body> NAVEGADOR Título En en un lugar HTML <a href= www.url.com >URL</a> <a href= www.otraurl.com>url 2</a> NAVEGADOR URL URL2
Tipos de selectores Pseudo-classes CSS a:link {color: red} a:visited {color: grey} a:hover {color: black Pseudo-classe nth-child CSS ul li:nth-child (1) {color:grey} ul li:nth-child (even) { background-color:grey} HTML <a href= www.url.com >URL</a> NAVEGADOR URL (link no visitado) URL (link visitado) URL (con el ratón encima) HTML <ul><li>item 1</li><li>Item 2</li> <li>item 3</li><li>Item 4</li></ul> NAVEGADOR 1. Item 1 2. Item 2 3. Item 3 4. Item 4
Tipos de selectores Selector universal CSS * {margin: 0; padding: 0} HTML <body> <header> <h1>título</h1> </header> <main> <p>párrafo</p> <p>otro párrafo</p> <ul> <li>item1</li> <li>item2</li> </ul> </main> </body> NAVEGADOR TÍTULO Párrafo Otro párrafo. Item 1. Item 2 TÍTULO Párrafo Otro párrafo Item 1 Item 2 Sin aplicar el CSS Aplicando el CSS
El modelo de cajas Casi cualquier elemento en html funciona como una caja con un margen (margin), un borde (border), un relleno (padding) y un contenido (content). Margin - Área entorno al borde. El margen no tiene color de fondo, es completamente transparente. top Border - Borde entorno al padding y el content. left right Padding - Área entorno al content. El padding es afectado por el color de fondo de la caja. bottom Content - El área de contenido de la caja, dónde aparecen el texto, imágenes,...
El modelo de cajas <p>texto EN PÁRRAFO UNO</p> <p class= dos >TEXTO EN PÁRRAFO DOS</p> p.dos { p.dos { background-color: #9ACD32; } background-color: #1E90FF; margin: 0.5em; } TEXTO EN PÁRRAFO UNO TEXTO EN PÁRRAFO DOS TEXTO EN PÁRRAFO UNO TEXTO EN PÁRRAFO DOS p.dos { p.dos { background-color: #1E90FF; margin: 0.5em; border-width: 2px; border-style: solid; border-color: black; } background-color: #1E90FF; margin: 0.5em; border: 2px dashed black; padding: 1em; } = TEXTO EN PÁRRAFO UNO TEXTO EN PÁRRAFO DOS TEXTO EN PÁRRAFO UNO TEXTO EN PÁRRAFO DOS
El modelo de cajas Los valores del padding, margin y border de las cajas: -1 valor (10px) afecta cada lado por igual - 2 valores (10px 5px) especifica el valor del top/bottom (primer valor) y el right/left (segundo valor) -3 valores (10px 5px 2px) especifica el top (primer valor), el right/left (segundo valor) y el bottom (tercer valor) -4 valores (10px 5px 2px 1px) especifica el valor del top, el right, el bottom y el left respectivamente. Ejemplo con el ancho de borde (válido también para margin y padding): p.dos { border-width: 10px; } p.dos { border-width: 10px 5px; } TEXTO EN PÁRRAFO DOS TEXTO EN PÁRRAFO DOS p.dos { p.dos { border-width: 10px 5px 2px; } border-width: 10px 5px 2px 1px; } TEXTO EN PÁRRAFO DOS TEXTO EN PÁRRAFO DOS
Posicionamiento STATIC: es el posicionamiento normal de todos los elementos. Significa que cada elemento se posiciona donde le corresponde según el flujo normal de la página. div.tres { position: static;} <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3 RELATIVE: el elemento se posicionará a la distancia indicada respecto de dónde debería estar según el flujo normal de la página. La distancia se especifica mediante top, left, bottom, right. I puede indicarse con unidades o porcentajes. div.tres { position: relative; top: 20px; left: 20px } <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3
Posicionamiento ABSOLUTE: el elemento se muestra exactamente donde se indica en las propiedades top, bottom, left o right, respecto a la página). div.tres { position: absolute; top: 0px; left: 3px } <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 3 div 1 div 2 RELATIVE + ABSOLUTE: si especificamos un elemento con posicionamiento relativo, todos los elementos que tenga dentro se posicionaran de forma relativa a él. div.2 { div.3 { position: relative; position: absolute; top: 0px; right: 0px } <div class= 1 >div 1</div> <div class= 2 >div 2 </div> <div class= 3 >div 3</div> div 1 div 2 div 3
Posicionamiento FLOAT: Con la propiedad float se puede posicionar un elemento a la derecha o a la izquierda de otro, dejando que el resto de elementos fluyan a su alrededor. div.dos { float: left; } <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3 div 1 div 2 Si añadimos contenido en el div 3, este va fluyendo alrededor del div 2 div.dos { float: left; width: 100px;} <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3
Posicionamiento FLOAT: Con la propiedad float se puede posicionar un elemento a la derecha o a la izquierda de otro, dejando que el resto de elementos fluyan a su alrededor. div.dos { float: left; } <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3 div 1 div 2 Si añadimos contenido en el div 3, este va fluyendo alrededor del div 2 div.dos { float: left; width: 100px;} <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3
Posicionamiento FLOAT: Con la propiedad float se puede posicionar un elemento a la derecha o a la izquierda de otro, dejando que el resto de elementos fluyan a su alrededor. div.uno { float: left; width: 100px;} div.dos { float: left; width: 100px; } div.tres { clear: both; } div 1 div 2 div 3 <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div>
Centrado de elementos CENTRADO HORIZONTAL p { text-align: center } h1 { text-align: center } img { display: block; margin-left: auto; margin-right: auto } div.dos { margin: auto; width: 200px } div.tres { margin: 10px auto; width: 200px } <div class= uno > <h1>título</h1> <p>texto del párrafo</p> <img href= imagen alt= imagen > </div> <div class= dos >div 2</div> <div class= tres >div 3</div> text-align: center - centrado de textos margin: auto - centrado de elementos TÍTULO Texto del párrafo imagen div 2 div 3
Centrado de elementos CENTRADO VERTICAL OPCIÓN A: p { height: 200px; display: table-cel; vertical-align: middle } Texto del párrafo OPCIÓN B (CSS3): p { margin: 0; position: absolute; top: 50%; transform: translate (0, -50%)} div.uno {position: relative; } <div class= uno > <h1>título</h1> <p>texto del párrafo</p> <img href= imagen alt= imagen > </div> Texto del párrafo
Centrado de elementos CENTRADO VERTICAL Y HORIZONTAL DE TODA LA PÁGINA.pagina {margin: 0; position: absolute; width: 60%; height: 60%; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);} p { text-align: center } h1 { text-align: center } TÍTULO Texto del párrafo <body> <div class= pagina > <header> <h1>título</h1> </header> <main> <p>texto del párrafo</p> </main> <footer></footer> </div> </body>
Colores en HTML: los 16 colores básicos
Colores en HTML: los colores hexadecimales 1 - Cada código de 6 dígitos se compone de 3 grupos de valores: #XXxxxx R (valor del color rojo) #xxxxxx G (valor del color verde) #xxxxxx B (valor del color azul) 2 Cada grupo es un valor entre 0 i F en el sistema hexadecimal, que cuenta 0 1 2 3 4 5 6 7 8 9 A B C D E F, siendo 0 el valor nulo i F el valor más alto. #FF0000 = ROJO #00FF00 = VERDE #0000FF = AZUL
Colores en HTML: la paleta de 216 colores hexadecimales
Colores en HTML: la paleta de 216 colores hexadecimales
Colores en HTML: la paleta de 216 colores hexadecimales CSS3 permite añadir un canal alfa al sistema de color RGB. background-color: rgba(72, 61, 139, 0.5); color: #4b0082; Texto en color índigo color: #00FF00; = color: #0F0; Texto en color verde Texto Algunas herramientas online para trabajar el color en páginas web: - http://www.colorsontheweb.com/colorwizard.asp - http://www.colorsontheweb.com/colorwheel.asp - http://www.cssdrive.com/imagepalette/
Tipos de letra en CSS 1 - Usar tipografías seguras: helvetica, arial, verdana, times new roman, body { font-family: Arial, Helvetica, sans-serif ; } H1 { font-family: "Courier New", Courier, monospace ; } Nota: Especificar el tamaño de fuente global en el elemento body o en el html body { font-size: 12px; }
Tipos de letra en CSS 2 - Incrustar fuentes con CSS usando la regla @font-face: @font-face { font-family: FFF tusj'; /* nombre con el que llamamos la fuente */ src: url('fonts/fff_tusj.eot '); } /* si hemos subido la fuente a nuestro servidor */ @font-face { font-family: Gentium; src: url(http://example.com/fonts/gentium.woff); } /* si la fuente està en internet */ @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* Modo compatible con IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Navegadores modernos */ url('webfont.ttf') format('truetype'), /* Safari, Android, ios */ url('webfont.svg#svgfontname') format('svg'); /* Legacy ios */ } Página online para descargar kits de tipografías en distintos formatos: http://www.fontsquirrel.com
Normas básicas de las hojas de estilos 1. Primero se definen los estilos para ETIQUETAS html (header, footer, div, a, p, etc.) 2. Después se definen los estilos para IDENTIFICADORES (id). 3. Al final se definen los estilos para las CLASES (class). 4. Los estilos se ordenan conforme van apareciendo en la disposición del html, teniendo en cuenta la prioridad anterior. 5. Los atributos se declaran de la siguiente forma: { atributo1: valor1; atributo2: atributo2; atributon: valorn; } 6. Los atributos se ordenan alfabéticamente: display, color, width, 7. Declaramos el tamaño de fuente global en el body o en el html, que será el tamaño estándar por el que se regirán las fuentes de las etiquetas. 8. Si tenemos estilos para el comodín *, html y/o body, son los primeros en definirse. 9. Si tenemos estilos para resetear elementos html, estos irán antes de cualquier estilo.