Sesión 2: CSS y HTML fase 2

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? • CascadingStylesSheet: 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 este es mi párrafo rojo 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 cientoOJO: 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?

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?

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?

Ejemplos de trabajo CSS Margenes y PADDING (relleno) h1 {font-size: 14px;font-family: “arial”;text-transform: uppercase;margin: 20pxpadding: 40px} Que hace el ejemplo anterior?

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: 20pxpadding-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.

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 Bordesborder-style: dashed; (double, solid, dotted, groove, ridge…)border-width: 1pxborder-color: blue; h1 {font-size: 14px;font-family: “arial”;text-transform: uppercase;margin-top: 20pxpadding-left: 40pxborder-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)…

Ejemplos de trabajo CSS Mas BordesPuede 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)…

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.

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 maneraTexto de mi parrafo

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 Texto de mi parrafo

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<ulclass=“a”> …Que hace el ejemplo anterior?

Ejemplos de trabajo CSS Tablas. CSS permite embellecer las tablas de manera dramatica Aplicamos CSS a la etiqueta table, thy td table, tr, td{border: 1px solidblack;}Cada celda quedo con un borde de 1 pixel. Note sin embargo que como cada celda tiene borde, entre celdas los bordes quedan dobles

Ejemplos de trabajo CSS Tablas. CSS permite embellecer las tablas de manera dramatica Aplicamos CSS a la etiqueta table, thy td table, tr, td{border: 1px solidblack;border-collapse: collapse;}Que hace el ejemplo anterior?

Ejemplos de trabajo CSS Tablas. CSS permite embellecer las tablas de manera dramatica Aplicamos CSS a la etiqueta table, thy td td{padding: 15px;}Que hace el ejemplo anterior?

Ejemplos de trabajo CSS Tablas. CSS permite embellecer las tablas de manera dramática Aplicamos CSS a la etiqueta table, thy td table, td, th{border: 1px red;}th{background-color: blue;color: white;}Que hace el ejemplo anterior?

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?

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?

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?

Ejemplos de trabajo CSS Elementos flotantesQue sucede si yo agrego una imagen a mi pagina y quiero que el texto “fluya” alrededor de la misma?

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;}

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;}

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) Este es mi parrafo<spanclass=“miclase”>y esto va con estilo Y en mi CSS tengo span.miclase {…} Solo elementos span .miclase {…}Se podria aplicar a cualquier elemento

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.

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><tdcolspan=“2”>3</td> He “amarrado” correctamente la columna de la segunda fila.

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

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> … … Al hacer click en el primer vinculo, va a ir directamente al párrafo llamado item1

Sesión 2: CSS y HTML fase 2