Ingeniero de Sistemas – Universidad de Los Andes Sesión 2: CSS y HTML fase 2 Presenta: José Miguel Gómez Ingeniero de Sistemas – Universidad de Los Andes
Plan de trabajo Introducción a CSS Ejemplos de trabajo CSS
Que es CSS? Cascading Styles Sheet: Una de las muchas maneras de estilizar y presentar documentos HTML. HTML define el contenido, CSS define la presentación del contenido La manera de “programar” estilos no es igual a HTML, pero es bastante sencillo. Facilita la unificación de estilos entre muchas paginas.
Que es CSS? CSS resuelve varios problemas implícitos en el diseño de paginas web en HTML. En vez de tener que definir tipo de texto, colores, fondos y otros ítems para cada uno de los párrafos, CSS me ahorra el trabajo y me permite definir esta clase de cosas para grupos implícitos en HTML.
Que es CSS? Puedo aplicar CSS directamente en los elementos dentro del HTML Por ejemplo, para cambiar el color de la letra de un párrafo, aplico CSS a la etiqueta P <p style=“color: red”>este es mi párrafo rojo</p> Esto solamente vuelve ESE párrafo en especifico de color rojo. QUE PASA SI YO QUIERO QUE TODOS LOS PARRAFOS DE MI PAGINA SEAN ROJOS?
Que es CSS? <head> <title>Titulo de mi pagina</title> <style> p {color: red;} a {color: green;} </style> … Que ocurre? Todos mis párrafos (P) rojos, todos mis vínculos (A) verdes. OJO: note LOS CORCHETES {} y los PUNTO Y COMA ; Que pasa si yo tengo muchas paginas y quiero que TODAS tengan sus párrafos rojos sin tener que volver a escribir lo mismo en cada una de mis paginas?
Que es CSS? Creo un archivo separado llamado xxxxx.css p {color: red;} a {color: green;} … y luego en la pagina HTML donde quiero aplicar el estilo, hago lo siguiente <head> <title>Titulo de mi pagina</title> <link rel=“stylesheet” href=“xxxxx.css”> Que ocurre? Todos mis párrafos (P) rojos, todos mis vínculos (A) verdes en todas las paginas donde yo aplique ese vinculo.
Que es CSS? Sintaxis para CSS selector {parametro1: valor1; parametro2: valor2; …} y al igual que en HTML, también puedo incluir comentarios /* esto es un comentario */
Que es CSS? Quien tiene la prioridad? Ej. Si yo tengo un archivo CSS que define un estilo para P, y en mi pagina defino otro valor para P, quien “gana” en esa batalla? LA PRIORIDAD SIEMPRE LA TIENE EL CSS INTERNO De manera que puedo hacer cambios breves o cambios rapidos a una parte en especifico, sin necesidad de redefinir el CSS externo.
Ejemplos de trabajo CSS TIPO DE VALOR (DOS PUNTOS) VALOR (PUNTO Y COMA) body { color: red; font-size: 14px; }
Ejemplos de trabajo CSS Note la estructura básica de CSS: Defino la propiedad (ej: P para párrafo) Los valores de estilo para la propiedad dentro de corchetes {} TIPO DE VALOR (DOS PUNTOS) VALOR (PUNTO Y COMA) body { color: red; font-size: 14px; } Quien puede decirme que hace la regla CSS en el ejemplo anterior?
Ejemplos de trabajo CSS Tamaños y porcentajes: -Px PIXELES (12px) = 12 pixeles -em MULTIPLICADOR (2em) = 2 veces el tamaño actual -pt PUNTOS (12pt) = 12 puntos -% PORCENTAJE (12%) = 12 por ciento OJO: hay tamaños que no resultan muy obvios. Por ejemplo, 12% de tamaño a una letra no da resultados muy consistentes (aunque claro, funciona) En donde resulta util usar un porcentaje? Un buen ejemplo es una tabla. Tratar de hacer una tabla con ancho en pixeles y con ancho en porcentaje
Ejemplos de trabajo CSS Colores: todos los siguientes colores son el mismo -color: red; -color: rgb(255,0,0); -color: rgb(100%,0%,0%); -color: #ff0000; Puedo usarlos con el tipo de valor COLOR y BACKGROUND-COLOR h1 { font-size: 14px; color: red; background-color: blue; } QUE HACE EL EJEMPLO ANTERIOR? EN QUE CASOS ES MEJOR USAR COLORES HEX Y EN CUALES USAR COLORES TEXTUALES?
Ejemplos de trabajo CSS
Ejemplos de trabajo CSS Texto y tipo de texto -font-family: “Times New Roman”; -font-size: 12px; -font-weight: bold; (bolder, normal, 800, 1000) -font-style: italic; -text-transform: capitalize; (uppercase, lowercase) h1 { font-size: 14px; font-family: “arial”; text-transform: uppercase; } Que hace el ejemplo anterior? http://www.colorpicker.com/
Ejemplos de trabajo CSS
Ejemplos de trabajo CSS Texto, tipo de texto y color aplicado a vínculos. Aplicamos el CSS a la etiqueta a, pero a tiene varios elementos particulares que definen: vinculo nuevo, vinculo visitado, resaltar vinculo, vinculo activo a:link, a:visited, a:hover, a:active a:hover { color:red; } a:link { color:white } Que hace el ejemplo anterior? Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS
Ejemplos de trabajo CSS Margenes y PADDING (relleno) h1 { font-size: 14px; font-family: “arial”; text-transform: uppercase; margin: 20px padding: 40px } Que hace el ejemplo anterior? Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Un padding para cada celda de datos Cellspacing = 5 para toda la tabla
Ejemplos de trabajo CSS Margenes y PADDING (relleno) h1 { font-size: 14px; font-family: “arial”; text-transform: uppercase; margin-top: 20px padding-left: 40px } Note que si yo defino padding solamente, el elemento aplica para todas las esquinas. Si yo pongo padding-left, solo aplica para la esquina izquierda. Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Padding de 10 en todas las celdas, pero en cada uno de los ejemplos se ilustra padding-left, padding-right, padding-top y padding-bottom
Ejemplos de trabajo CSS Bordes border-style: dashed; (double, solid, dotted, groove, ridge…) border-width: 1px border-color: blue; h1 { font-size: 14px; font-family: “arial”; text-transform: uppercase; margin-top: 20px padding-left: 40px border-style: solid; border-width: 3px; } Al igual que las margenes, yo puedo aplicar solo bordes derechos, izquierdos, arriba, abajo o la combinacion de los anteriores (border-style-left)… Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Mas Bordes Puede probar cualquiera de los siguientes para border-style dotted, dashed, solid, double, groove, ridge, inset, outset Al igual que las margenes, yo puedo aplicar solo bordes derechos, izquierdos, arriba, abajo o la combinacion de los anteriores (border-style-left)… Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Tabla con border-style: dashed Parrafo con border-style: double Note que la tabla tiene borde pero solo EXTERNO. Como hago para que los bordes tomen todas las celdas (bordes interiores?)
Ejemplos de trabajo CSS Fondos background-color: black; background-image: url(“mifoto.jpg”); background-repeat:repeat-x; (no-repeat) background-size: 100% (cover por ejemplo permite una foto que cubra todo el fondo) Y va dentro de Body o HTML en CSS body { background-image: url(“mifoto.jpg”); } html { background-image: url(“mifoto.jpg”); background-size: cover; } Con la combinación de los anteriores, es posible lograr muy buenos o MUY MALOS fondos de pagina o de pantalla. http://www.w3schools.com/css/css_background.asp
Ejemplos de trabajo CSS Hay alguna forma de probar todo lo anterior? USE W3C SCHOOLS http://www.w3schools.com/css/tryit.asp?filename=trycss_ padding_sides
Ejemplos de trabajo CSS Aplicando CSS a ítems en especifico p{..} -> Aplica a todos los párrafos P (ELEMENTO) p.mielemento {…} -> Aplica a todos los parrafos P con estilo “mielemento” (CLASE) En html lo defino de la siguiente manera <p class=“mielemento”>Texto de mi parrafo </p>
Ejemplos de trabajo CSS Aplicando CSS a ítems en especifico Puedo agrupar elementos P, h1, h2{..} -> Aplica a todos los párrafos P , h1 y h2 (ELEMENTO) Tambien puedo aplicar reglas a etiquetas HTML con un ID #miid {..} -> Aplica a todos los elementos con ID miid <p id=“miid”>Texto de mi parrafo</p>
Ejemplos de trabajo CSS Listas. En HTML trabajamos en listas básicas, puedo cambiar la viñeta de la lista con mucha facilidad Aplicamos CSS a la etiqueta UL.clase ul.a {list-style-type:circle} ul.b {list-style-type:square} y en el HTML <ul class=“a”> … Que hace el ejemplo anterior? Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Tablas. CSS permite embellecer las tablas de manera dramatica Aplicamos CSS a la etiqueta table, th y td table, tr, td { border: 1px solid black; } Cada celda quedo con un borde de 1 pixel. Note sin embargo que como cada celda tiene borde, entre celdas los bordes quedan dobles Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Tablas. CSS permite embellecer las tablas de manera dramatica Aplicamos CSS a la etiqueta table, th y td table, tr, td { border: 1px solid black; border-collapse: collapse; } Que hace el ejemplo anterior? Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Tablas. CSS permite embellecer las tablas de manera dramatica Aplicamos CSS a la etiqueta table, th y td td { padding: 15px; } Que hace el ejemplo anterior? Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Tablas. CSS permite embellecer las tablas de manera dramática Aplicamos CSS a la etiqueta table, th y td table, td, th { border: 1px red; } th { background-color: blue; color: white; } Que hace el ejemplo anterior? Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Posicionamiento: puedo mover elementos libremente en una pagina y puedo especificar su posición relativa o absoluta con respecto a otros elementos. p.izquierdo { position: relative; left:-20px; } p.derecho { position: relative; left:20px; } Que hace el ejemplo anterior? Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Posicionamiento: puedo mover elementos libremente en una pagina y puedo especificar su posición relativa o absoluta con respecto a otros elementos. p.absoluto { position: absolute; left:100px; top:150px; } Que hace el ejemplo anterior? Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS En el ejemplo anterior vimos que unos elementos pueden quedar sobre otros elementos. Como defino que elemento va encima del otro? p.absoluto { … z-index:1 } p.absoluto2 { … z-index:2 } Que hace el ejemplo anterior? Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Elementos flotantes Que sucede si yo agrego una imagen a mi pagina y quiero que el texto “fluya” alrededor de la misma? Ponerlos a escribir un texto y poner una imagen a ver que pasa. Como hago para que el texto quede al lado de la imagen y no en una sola linea? Una tabla me sirve.
Ejemplos de trabajo CSS Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Elementos flotantes. Puedo posicionar un elemento flotante y todos los otros elementos van a “fluir” alrededor de el img { float:left; } Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Elementos flotantes. Puedo posicionar un elemento flotante y todos los otros elementos van a “fluir” alrededor de el img { float:right; } Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Hay muchos mas ejemplos. Vale la pena que cada uno lo busque en google
Ejemplos de trabajo CSS Poniendo todo junto: -Trate de usar siempre un archivo html externo -No olvide los corchetes {} y los punto y coma ; -Recuerde que en html los elementos se definen con =, en CSS con : -Haga un cambio a la vez y pruebe el resultado recargando la pagina.
HTML Fase 2 SPAN Como hago para agrupar pedazos pequenos de codigo HTML? (digamos, tengo una frase que quiero aplicarle un estilo) <p>Este es mi parrafo <span class=“miclase”> y esto va con estilo </span></p> Y en mi CSS tengo span.miclase {…} Solo elementos span .miclase {…} Se podria aplicar a cualquier elemento Ojo con los ejemplos de cómo aplicar elementos a cualquier parte!
HTML Fase 2 SPAN Recuerdan las tablas? Si yo no respeto las columnas, las celdas se pintan “corridas”. Puedo usar SPAN para evitar esto. <tr> <td>1</td> <td>2</td> </tr> <td>3</td> En el anterior ejemplo, tengo dos filas, dos columnas en la primera fila, una columna en la segunda. Ojo con los ejemplos de cómo aplicar elementos a cualquier parte!
HTML Fase 2 SPAN Recuerdan las tablas? Si yo no respeto las columnas, las celdas se pintan “corridas”. Puedo usar SPAN para evitar esto. <tr> <td>1</td> <td>2</td> </tr> <td colspan=“2”>3</td> He “amarrado” correctamente la columna de la segunda fila. Ojo con los ejemplos de cómo aplicar elementos a cualquier parte!
HTML Fase 2 TABINDEX Cuando yo no tengo un mouse en mi computador, me desplazo usando la tecla TAB. Puedo “forzar” el orden en el que funciona el TAB <ul> <li><a href=”a.html" tabindex="1”>Primero</a></li> <li><a href=”b.html" tabindex="3”>Segundo</a></li> <li><a href=”c.html" tabindex="2”>Tercero</a></li> </ul> Si uso la tecla TAB, pasa primero por PRIMERO, segundo por TERCERO y tercero por SEGUNDO http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
HTML Fase 2 ANCLAS Puedo hacer vínculos para que las personas vayan directamente a un ítem dentro de la misma pagina. Es muy útil para paginas web de mucho contenido y con un índice. <a href=“#item1”>Item 1</a> … <p id=“item1”> … Al hacer click en el primer vinculo, va a ir directamente al párrafo llamado item1 http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
HTML Fase 2 ANCLAS Puedo hacer vínculos para que las personas vayan directamente a un ítem dentro de la misma pagina. Es muy útil para paginas web de mucho contenido y con un índice. <a href=“#item1”>Item 1</a> … <p id=“item1”> … Al hacer click en el primer vinculo, va a ir directamente al párrafo llamado item1 http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
HTML Fase 2 Taller 1: INCLUIR UN VIDEO DE YOUTUBE EN LA PAGINA QUE ESTOY TRABAJANDO ACTUALMENTE
HTML Fase 2 Taller 2: INCLUIR UN MAPA DE GOOGLE MAPS EN LA PAGINA QUE ESTOY TRABAJANDO ACTUALMENTE. EL MAPA DEBE TENER UNA UBICACIÓN CONOCIDA Deben ir a google maps: maps.google.com Hago el mapa como yo quiera Voy a la ruedita con pinones, busco embed Copio y pego el codigo
HTML Fase 2 IFRAME Puedo desplegar paginas web en recuadros dentro de otra pagina web. <iframe src=“otrapagina.html></iframe> Al igual que muchas otras etiquetas, puedo usar parámetros como posición relativa o absoluta, ancho, alto o incluso aplicar CSS. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic