...

Introduccion css

by eurobest

on

Report

Category:

Education

Download: 0

Comment: 0

485

views

Comentarios

Descripción

Af-finaL
Download Introduccion css

Transcript

  • 1. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos Web CSS Conceptos Básicos¿Qué es CSS?Las hojas de estilo en cascada (CSS, acrónimo de Cascading Style Sheets) son unaherramienta para mejorar la presentación de los documentos HTML. Por ejemplo, CSSabarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes defondo, posicionamiento avanzado y muchos otros temas.Es posible usar HTML, o incluso abusar del mismo, para añadir formato a los sitios web.Sin embargo, CSS ofrece más opciones, es más preciso y sofisticado, además es soportadopor todos los navegadores actuales.HTML se usa para estructurar el contenido; mientras que CSS se usa para formatear elcontenido previamente estructurado.¿Qué beneficios me ofrece CSS?CSS fue toda una revolución en el mundo del diseño web. Entre los beneficios concretos de CSSencontramos: Control de la presentación de muchos documentos desde una única hoja de estilo; Control más preciso de la presentación; Aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.); Numerosas técnicas avanzadas y sofisticadas.Sintaxis básica de CSSDigamos que queremos un bonito color rojo como fondo de nuestra página web:Usando HTML podríamos haberlo conseguido así:<body bgcolor="#FF0000">Con CSS el mismo resultado puede lograrse así:body {background-color: #FF0000;}El código usado es idéntico para HTML y CSS. El ejemplo anterior muestra además el modelo CSSfundamental:Docente: Mgr. David Caipa Mamani Separata CSS (1 de 26)
  • 2. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebAplicando CSS a un documento HTMLPodemos aplicar CSS a un documento HTML de tres maneras diferentes.Método 1: En línea (el atributo style)Un modo de aplicar CSS a HTML es usando el atributo de HTML style. <html> <head> <title>Ejemplo</title> </head> <body style="background-color: #FF0000;"> <p>Esta es una página con fondo rojo</p> </body> </html>Método 2: Interno (la etiqueta style)Otra forma es incluir el código CSS usando la etiqueta HTML <style>. <html> <head> <title>Ejemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Esta es una página con fondo rojo</p> </body> </html>Método 3: Externo (enlace a una hoja de estilo)El método recomendado es enlazar con lo que se denomina hoja de estilo externa. Una hoja de estiloexterna es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedescolocar la hoja de estilo en el servidor web o en el disco duro.Por ejemplo, digamos que tu hoja de estilo se llama style.css y estálocalizada en una carpeta que se llama style. Esta situación se puedeilustrar de la siguiente manera:El truco consiste en crear un vínculo desde el documento HTML (porejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo sepuede crear con una sencilla línea de código HTML: <link rel="stylesheet" type="text/css" href="style/style.css" />Observe cómo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo href.La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre laetiqueta <head> y </head>. De ésta manera: <html> <head> <title>Mi documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...Este vínculo indica al navegador que debe usar la presentación del fichero CSS al mostrar el documentoHTML. Lo realmente bueno de este método es que se pueden vincular varios documentos HTML con lamisma hoja de estilo. En otras palabras, se puede usar un único fichero CSS para controlar la presentaciónde muchos documentos HTML.Docente: Mgr. David Caipa Mamani Separata CSS (2 de 26)
  • 3. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebEsta técnica puede ahorrarle mucho trabajo. Si quisieras cambiar, por ejemplo, el color de fondo de unsitio web compuesto por 100 páginas, una hoja de estilo puede ahorrarle el tener que cambiar de formamanual los 100 documentos HTML. Con CSS, el cambio se puede llevar a cabo en unos segundosmodificando parte del código de la hoja de estilo principal.Pruébalo tú mismoAbre el Bloc de notas u otro editor de texto y crea dos archivos - uno HTML y otro CSS - con el siguientecontenido:Archivo: ejemplocss.html <html> <head> <title>Mi documento </title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> <h1>Mi primera hoja de estilo</h1> </body> </html>Archivo: style.css  Guardar en la carpeta style, del sitio Web body { background-color: #FF0000; }Recuerda grabar los archivos en las carpetas correctas y con las extensiones correspondientes (".htm" y".css", respectivamente).Abre el archivo ejemplocss.html y observa quela página tiene un color de fondo rojo.Docente: Mgr. David Caipa Mamani Separata CSS (3 de 26)
  • 4. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebColores y fondosColor de primer plano: la propiedad colorLa propiedad color describe el color de primer plano de un elemento.Por ejemplo, todos los títulos <h1> de un documento en color rojo oscuro. h1 { color: #ff0000; }Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: #ff0000;pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).La propiedad background-colorLa propiedad background-color describe el color de fondo de los elementos.El elemento <body> contiene todo el contenido de un documento HTML. Así pues, para cambiar el colorde fondo de una página, la propiedad background-color debería aplicarse al elemento <body>.También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto.En el ejemplo que sigue se aplicarán diferentes colores a los elementos <body> y <h1>. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }Fíjese cómo hemos aplicado dos propiedades a <h1> separándolas por medio de un punto y coma.Imágenes de fondo [background-image]La propiedad CSS background-image se usa para insertar una imagen de fondo.Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves, o bien puedesusar cualquier otra imagen.Para insertar la imagen de la mariposa como imagen de fondo de una página web, aplica sencillamente lapropiedad background-image al elemento <body> y especifica la localización de la imagen. body { background-color: #FFCC66; background-image: url("../graficos/butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }NOTA: Especificar la ubicación de la imagen: url("butterfly.gif"), siestá en la misma carpeta.Para referenciar a otra carpeta url("../imagenes/butterfly.gif") o imágenes de interneturl("http://www.html.net/butterfly.gif").Docente: Mgr. David Caipa Mamani Separata CSS (4 de 26)
  • 5. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebRepetir la imagen de fondo [background-repeat]En el ejemplo anterior, por defecto, la mariposa se repite tanto en el eje horizontal como en el verticalpara ocupar toda la pantalla. La propiedad background-repeat controla este comportamiento.La tabla siguiente resume los cuatro valores diferentes para la propiedad background-repeat. Valor Descripción Background-repeat: repeat-x La imagen se repite en el eje horizontal background-repeat: repeat-y La imagen se repite en el eje vertical background-repeat: repeat La imagen se repite en el eje horizontal y vertical background-repeat: no-repeat La imagen no se repitePor ejemplo, para evitar que se repita una imagen de fondo, el código quetendríamos que usar sería el siguiente: body { background-color: #FFCC66; background-image: url("../graficos/butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }Fijar la imagen de fondo [background-attachment]La propiedad background-attachment especifica si una imagen está fija o se desplaza con el elementocontenedor.Una imagen de fondo fija no se moverá con el texto cuando el lector se desplace por la página, mientrasque una imagen de fondo no fija se desplazará con el texto de la página web.La tabla siguiente resume los dos valores posibles para la propiedad background-attachment. Valor Descripción Background-attachment: scroll La imagen se desplaza con la página - no está fija Background-attachment: fixed La imagen está fijaPor ejemplo, el siguiente código fijará la imagen de fondo. body { background-color: #FFCC66; background-image: url("../graficos/butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }Docente: Mgr. David Caipa Mamani Separata CSS (5 de 26)
  • 6. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebUbicación de la imagen de fondo [background-position]Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. Lapropiedad background-position te permitirá cambiar este valor por defecto y posicionar la imagen defondo en cualquier lugar de la pantalla que quieras.Hay muchas formas diferentes de establecer losvalores de la propiedad background-position.Sin embargo, todas ellas se formatean como unconjunto de coordenadas. Por ejemplo, el valor100px 200px posiciona la imagen de fondo a 100píxeles del margen izquierdo y a 200 píxeles delmargen superior del la ventana del navegador.Las coordenadas se pueden indicar comoporcentajes del ancho de la pantalla, comounidades fijas (píxeles, centímetros, etc.) o puedesusar las palabras "top" (superior), "bottom"(inferior), "center" (centro), "left" (izquierda) y"right" (derecha). El modelo siguiente ilustra cómofunciona el sistema:La tabla siguiente proporciona varios ejemplos. Valor Descripciónbackground-position: 2cm 2cm La imagen se posiciona a 2 cm del margen izquierdo y a 2 cm del margen superior de la páginabackground-position: 50% 25% La imagen se posiciona en el centro de la página y un 25 % del margen superior de la mismabackground-position: top right La imagen se posiciona en la esquina superior derecha de la páginaEl ejemplo de código siguiente posiciona la imagen de fondo en la esquina inferior derecha: body { background-color: #FFCC66; background-image: url("../graficos/butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }Combinación de propiedades [background]La propiedad background es una forma abreviada de todas las propiedades de fondo. Con la propiedadbackground se pueden comprimir varias propiedades, y así escribir una hoja de estilo de forma másabreviada, lo que facilitará su lectura.Por ejemplo, observa estas cinco líneas de código: background-color: #FFCC66; background-image: url("../graficos/butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;Usando background se puede lograr el mismo resultado con una única línea de código:background: #FFCC66 url("../graficos/butterfly.gif") no-repeat fixed right bottom;Docente: Mgr. David Caipa Mamani Separata CSS (6 de 26)
  • 7. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebEl orden en que deben aparecer las propiedades individuales es el siguiente:[background-color] | [background-image] | [background-repeat]| [background-attachment] |[background-position]Si se omite alguna propiedad, de forma automática ésta se establecerá con su valor por defecto. Porejemplo, si se omiten las propiedades background-attachment y background-position del ejemploanterior, quedando el código de la siguiente manera: background: #FFCC66 url("butterfly.gif") no-repeat;Estas dos propiedades que no se especifican se establecerían, sin más, con sus valores por defecto, que,como ya sabes, son scroll y top left.FuentesFamilia de fuentes [font-family]La propiedad font-family se usa para establecer una lista ordenada de fuentes que se usarán paramostrar un elemento determinado o una página web. Si la primera fuente de la lista no está instalada en elordenador desde el que se accede al sitio, se seguirá probando con la siguiente fuente hasta encontrar unafuente apropiada.Para clasificar las fuentes se usan dos tipos de nombres: nombres de una familia y familias genéricas.Estos dos términos se explican a continuación. La diferencia se puede ilustrar así:Al listar fuentes para el sitio web, se empieza por la preferida, seguida de algunas fuentes alternativas. Serecomienda completar la lista con una familia de fuentes genérica. Así, al menos, la página se mostraráusando una fuente de la misma familia si ninguna de las especificadas están disponibles.Un ejemplo de lista de fuentes por orden de prioridad podría tener este aspecto: h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}Los encabezados marcados con la etiqueta <h1> se mostrarán usando la fuente "Arial". Si esta fuente noestá instalada en el ordenador de usuario, se usará en su lugar la fuente "Verdana". Si ambas fuentes noestán disponibles, se usará una fuente de la familia sans-serif para mostrar los encabezados.Fíjese cómo el nombre de fuente "Times New Roman" contiene espacios y, por lo tanto, se lista usandocomillas.Docente: Mgr. David Caipa Mamani Separata CSS (7 de 26)
  • 8. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebEstilo de la fuente [font-style]La propiedad font-style define la fuente elegida bien con el valor normal, el valor italic o el valoroblique. En el ejemplo que sigue, todos los encabezados marcados con <h2> aparecerán en cursiva. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;}Variante de fuente [font-variant]La propiedad font-variant se usa para elegir entre las variantes normal o small-caps (versalita) de unafuente. La fuente a la que se aplica el valor small-caps es una fuente que usa letras en mayúscula inicialmás pequeñas, en vez de letras en minúscula. Veamos los ejemplos siguientes:Si la propiedad font-variant se establece con el valor small-caps y no hay disponible una fuente enversalita, el navegador probablemente mostrará el texto en mayúscula. h1 {font-variant: small-caps;} h2 {font-variant: normal;}Peso de la fuente [font-weight]La propiedad font-weight describe qué intensidad o "peso" en negrita debería tener la fuente. Todafuente puede tener los valores normal o bold. Algunos navegadores soportan, incluso, el uso de númerosentre 100 y 900 (de cien en cien) para describir el peso de dicha fuente. p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif; font-weight: bold;}Tamaño de la fuente [font-size]El tamaño de la fuente se establece por medio de la propiedad font-size. A la hora de describir eltamaño de las fuentes, existen muchas unidades diferentes (por ejemplo, píxeles y porcentajes) entre lasque elegir. En este tutorial nos centraremos en las unidades más comunes y adecuadas. Como ejemplo,podemos incluir: h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1cm;}Existe una diferencia clave entre las cuatro unidades anteriores. Las unidades px y pt establecen eltamaño de la fuente de forma absoluta, mientras que % y cm permiten al usuario ajustar el tamaño de lamisma según considere oportuno. Muchos usuarios son discapacitados, mayores o sufren de disminuciónvisual, o disponen de un monitor de mala calidad. Para que tu sitio web sea accesible para todo elmundo, deberías usar unidades ajustables como, por ejemplo, % o cm.Combinación de propiedades [font]Si usamos la propiedad abreviada font es posible incluir todas las propiedades diferentes relativas afuentes en una única propiedad.Docente: Mgr. David Caipa Mamani Separata CSS (8 de 26)
  • 9. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebPor ejemplo, estas cuatro líneas de código que usamos para describir las propiedades de fuente para laetiqueta <p>: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }Usando la propiedad abreviada, el código se puede simplificar así: p { font: italic bold 30px arial, sans-serif; }El orden de los valores para la propiedad font es:font-style | font-variant | font-weight | font-size | font-familyTextoSangría del texto [text-indent]La propiedad text-indent permite añadir un toque de elegancia alos párrafos de texto al aplicar sangría a la primera línea de dichopárrafo. En el ejemplo siguiente se ha aplicado una sangría de 30pxa todos los párrafos de texto marcados con la etiqueta <p>: p { text-indent: 30px; }Alineación del texto [text-align]La propiedad CSS text-align es el equivalente al atributo align usado en versiones anteriores deHTML. Los valores posibles de esta propiedad son: left (texto alineado a la izquierda), right (textoalineado a la derecha) o center (texto con alineación centrada). Además, el valor justify (alineaciónjustificada) alargará cada línea de forma que los márgenes izquierdo y derecho estén justificados.En el ejemplo que sigue, el texto de los encabezados de latabla, <th>, se ha alineado a la derecha, mientras que losdatos de la tabla, <td>, aparecen centrados. Además, lospárrafos de texto normales están justificados: th { text-align: right; } td { text-align: center; } p { text-align: justify; }Decoración del texto [text-decoration]La propiedad text-decoration permite añadir diferentes "decoraciones" o "efectos" al texto. Porejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior. En el ejemplo siguiente, elDocente: Mgr. David Caipa Mamani Separata CSS (9 de 26)
  • 10. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos Webelemento <h1>aparecerá subrayado, el elemento <h2> aparecerá con un subrayado por encima del texto yel elemento <h3> tendrá el texto tachado. h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }Espaciado entre caracteres [letter-spacing]El espaciado entre los caracteres de texto se puede especificar usando la propiedad letter-spacing. Elvalor de esta propiedad corresponde, sencillamente, al ancho deseado. Por ejemplo, si queremos unespaciado de 3px entre los caracteres de un párrafo de texto <p> y 6px entre los caracteres de losencabezados <h1>, usaríamos el siguiente código: h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }Transformación del texto [text-transform]La propiedad text-transform controla la escritura en mayúsculas de un texto. Puedes elegir entre losvalores capitalize, uppercase olowercase, sin importar cómo aparece el texto original en el códigoHTML.Un ejemplo podría ser la palabra "título" que se puede presentar al usuario como "TÍTULO" o "Título". Acontinuación ofrecemos una explicación de los valores de la propiedad text-transform mencionados enel párrafo anterior:capitalize Pone en mayúscula la primera letra de cada palabra. Por ejemplo, "john doe" aparecerá como "John Doe".uppercase Convierte todas las letras a mayúscula. Por ejemplo, "john doe" aparecerá como "JOHN DOE".lowercase Convierte todas las letras a minúscula. Por ejemplo, "JOHN DOE" aparecerá como "john doe".none No se realiza transformación alguna; el texto se presenta tal como aparece en el cógido HTML.Como ejemplo, usaremos una lista de nombres. Todos los nombres están marcados con la etiqueta <li>(de "list element", es decir, elemento de lista). Supongamos que queremos que las iniciales de losnombres aparezcan en mayúscula y los títulos con todos los caracteres en mayúscula. h1 { text-transform: uppercase; } li { text-transform: capitalize; }Docente: Mgr. David Caipa Mamani Separata CSS (10 de 26)
  • 11. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebEnlaces¿Qué es una pseudo-clase?Una pseudo-clase permite tener en cuenta diferentes condiciones o eventos al definir una propiedad parauna etiqueta HTML.Veamos un ejemplo. Sabemos que los enlaces se especifican en HTML con la etiqueta <a>. Por tanto,podemos usar a como selector en CSS: a { color: blue; }Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado. Puedes usar una pseudo-clasepara asignar diferentes estilos a los enlaces visitados y no visitados. a:link { color: blue; } a:visited { color: red; }Usar a:link y a:visited para enlaces visitados y no visitados, respectivamente. A los enlaces activosse les aplica la pseudo-clase a:active, y a:hover cuando el cursor se coloca o pasa sobre el enlace.Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y más explicaciones.Pseudo-clase a:linkLa pseudo clase :link se usa para enlaces que dirigen a páginas que el usuario no ha visitado.En el ejemplo de código que sigue, los enlaces no visitados tendrán un color azul claro. a:link { color: #6699CC; }Pseudo-clase a:visitedLa pseudo clase :visited se usa para enlaces que dirigen a páginas que el usuario ya ha visitado. Porejemplo, el código siguiente hará que todos los enlaces visitados sean de color púrpura oscuro: a:visited { color: #660099; }Pseudo-clase a:active:La pseudo clase :active se usa para enlaces que están activos. El código de este ejemplo hace que elcolor de fondo para los enlaces activos sea amarillo: a:active { background-color: #FFFF00; }Pseudo-clase a:hoverLa pseudo clase a:hover se usa cuando el puntero del ratón pasa por encima de un enlace. Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean deDocente: Mgr. David Caipa Mamani Separata CSS (11 de 26)
  • 12. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos Webcolor naranja y estén en cursiva cuando el cursor pase sobre ellos, el código CSS que utilizaremos será elsiguiente: a:hover { color: orange; font-style: italic; }Efecto de espaciado entre letrasEl espaciado entre los caracteres se puede ajustar usando la propiedad letter-spacing. Esta propiedadse puede aplicar a los enlaces para crear un efecto especial: a:hover { letter-spacing: 10px; font-weight:bold; color:red; }MAYÚSCULAS y minúsculasLa propiedad text-transform, sirve para intercambiar entre letras en mayúscula y minúscula. Esto sepuede usar también para crear un determinado efecto en los enlaces: a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }Quitar el subrayado de los enlacesGeneralmente el subrayado es azul en los enlaces a páginas web e indican hacer clic en ellos. Si cambiasel subrayado y el color de los enlace, existe una buena posibilidad de que los usuarios se confundan y, porlo tanto, no saquen todo el provecho al contenido de tu sitio web.La propiedad text-decoration se puede usar para determinar si el texto aparece subrayado o no. Paraquitar el subrayado, establece el valor de text-decoration a none. a { text-decoration:none; }De forma alternativa, puedes establecer la propiedad text-decoration junto con otras propiedades paralas cuatro pseudo clases. a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; }Docente: Mgr. David Caipa Mamani Separata CSS (12 de 26)
  • 13. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebIdentificación y agrupación de elementos (class e id)Agrupación de elementos con el atributo classDigamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y elblanco. El código HTML sería el siguiente: <p>Uvas para el vino blanco:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Uvas para el vino tinto:</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul>Si necesitamos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con elvino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una clase para cadatipo de enlace, usando el atributo class. Intentemos especificar algunas clases en el ejemplo anterior: <p>Uvas para el vino blanco:</p> <ul> <li><a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Uvas para el vino tinto:</p> <ul> <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li> <li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul>A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vinotinto y al vino blanco, respectivamente. a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }Como se muestra en el ejemplo, sepueden definir las propiedades paralos elementos que pertenecen a unaclase unsando nombredelaclase en lahoja de estilo del documento.Docente: Mgr. David Caipa Mamani Separata CSS (13 de 26)
  • 14. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebIdentificación de un elemento usando el atributo idAdemás de agrupar elementos, podrías necesitar identificar un elemento único. Esto se hace con elatributo id.Lo que hace especial al atributo id es que no pueden existir dos elementos dentro del mismo documentocon el mismo id. Cada id tiene que ser único. En cualquier otro caso, se debería usar el atributo class ensu lugar. Ahora, examinemos un ejemplo de un posible uso del atributo id: <h1>Capítulo 1</h1> ... <h2>Capítulo 1.1</h2> ... <h2>Capítulo 1.2</h2> ... <h1>Capítulo 2</h1> ... <h2>Capítulo 2.1</h2> ... <h3>Capítulo 2.1.2</h3> ...El código anterior podría hacer referencia a encabezados de cualquier documento dividido en capítulos ypárrafos. Sería normal asignar un id a cada capítulo de la siguiente manera: <h1 id="c1">Capítulo 1</h1> ... <h2 id="c1-1">Capítulo 1.1</h2> ... <h2 id="c1-2">Capítulo 1.2</h2> ... <h1 id="c2">Capítulo 2</h1> ... <h2 id="c2-1">Capítulo 2.1</h2> ... <h3 id="c2-1-2">Capítulo 2.1.2</h3> ...Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando elcódigo CSS necesario, se podría hacer así: #c1-2 { color: red; }Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento específicousando #nombredelidentificador en la hoja de estilo del documento.Agrupación de elementos (span y div)Agrupación con <span>El elemento <span> es lo que se podría denominar un elemento neutro que no añade nada al documentoen sí. Pero con CSS <span> se puede usar para añadir características visuales distintivas a partesespecíficas de texto en los documentos.Un ejemplo de esto podría ser esta cita de Benjamin Franklin: <p>El que pronto se acuesta y pronto se levanta, es hombre saludable, rico y sabio.</p>Docente: Mgr. David Caipa Mamani Separata CSS (14 de 26)
  • 15. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebDigamos que queremos que lo que el señor Franklin considera como las ventajas de no pasarse todo el díadurmiendo, aparezca enfatizado en rojo. Para este fin, podemos marcar dichas ventajas con el elemento<span>. A cada elemento span se le añade el atributo class, que podemos definir así en nuestra hoja deestilo: <p>El que pronto se acuesta y pronto se levanta, es hombre <span class="benefit">saludable</span>, <span class="benefit">rico</span> y <span class="benefit">sabio</span>.</p>El código CSS necesario para producir este efecto es el siguiente: span.benefit { color:red; }Por supuesto, se puede usar también el atributo id para añadir estilo a los elementos definidos con<span>. Pero recuerda que tendrás que aplicar siempre un atributo id único para cada uno de los treselementos <span>, tal como aprendimos en la lección anterior.Agrupación con el elemento <div>Mientras que <span> se usa dentro de un elemento a nivel de bloque como vimos en el ejemplo anterior,<div> se usa para agrupar uno o más elementos a nivel de bloque.Aparte de esta diferencia, la agrupación con <div> funciona más o menos igual. Veamos un ejemplo condos listas de presidentes de los EE.UU., divididas según su filiación política. <div id="democrats"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> </div>En nuestra hoja de estilo podemos utilizar la agrupación del mismo modo que antes: #democrats { background:blue; } #republicans { background:red; }Docente: Mgr. David Caipa Mamani Separata CSS (15 de 26)
  • 16. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebEl modelo de cajaEl modelo de caja en CSS describe lascajas que se generan a partir de loselementos HTML. El modelo de cajatambién contiene opciones detalladas enlo referente al ajuste de márgenes,bordes, relleno (padding) y contenido decada elemento. La siguiente imagenmuestra cómo se construye el modelo decaja:El modelo de caja en CSSA primera vista, la imagen anterior puedeparecer muy teórica, así que intentemosusar el modelo en un caso real con unencabezado y algo de texto. El código HTML de nuestro ejemplo es el siguiente (extraído de laDeclaración Universal de los Derechos Humanos): <h1>Artículo 1:</h1> <p>Todos los hombres nacen libres e iguales en dignidad y derechos. Están dotados de razonamiento y consciencia y deberían de comportarse entre sí con espíritu de hermandad.</p>Si añadimos algo de color e información sobrela fuente, el ejemplo se podría presentar así:El ejemplo contiene dos elementos: el elemento<h1> y el elemento <p>. El modelo de caja paralos dos elementos se puede ilustrar como sigue:Aunque puede parecer un poco complicado, la imagen muestra cómo cada elemento HTML está rodeadopor cajas, cajas que se pueden ajustar usando CSS.Docente: Mgr. David Caipa Mamani Separata CSS (16 de 26)
  • 17. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebMargen y relleno (padding)Establecer el margen de un elementoTodo elemento tiene cuatro lados: derecho, izquierdo, superior e inferior. La propiedad margin hacereferencia a la distancia desde cada lado respecto al elemento colindante (o respecto a los bordes deldocumento). Véase el diagrama con la imagen ilustrativa.En un primer ejemplo, veremos cómo definir los márgenes del documento en sí, es decir, del elemento<body>. La imagen siguiente muestra cómo queremos que sean los márgenes de nuestras páginas.El código CSS necesario para esto es el siguiente: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }O podrías elegir usar la versión combinada de margin, quequeda como más elegante: body { margin: 100px 40px 10px 70px; }Se puede establecer los márgenes de casi todos los elementosdel mismo modo. Por ejemplo, podemos elegir definirmárgenes para todos los párrafos de texto marcados con elelemento <p>: body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }Docente: Mgr. David Caipa Mamani Separata CSS (17 de 26)
  • 18. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebEstablecer el relleno de un elementoLa propiedad padding puede entenderse como "relleno". Esto tiene sentido puesto que el relleno(padding) no afecta a la distancia de un elemento respecto a otros elementos, sino que sólo define ladistancia interior entre el borde y el contenido del elemento.El uso de la propiedad padding se puede ilustrar viendo unsencillo ejemplo en el que todos los títulos tienen diferentescolores de fondo: h1 { background: yellow; } h2 { background: orange; }Al definir el padding para los títulos, cambiamos la cantidadde "relleno" que habrá alrededor del texto en cada uno de ellos: h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; }BordesLos bordes se pueden usar para muchas cosas, por ejemplo, como elemento decorativo o para subrayar laseparación entre dos cosas. CSS te ofrece opciones sin fin a la hora de usar bordes en tus páginas.Anchura del borde [border-width]La anchura del borde se define por medio de la propiedad border-width, que dispone de los valoresthin, medium y thick, o de un valor numérico indicado en píxeles. La siguiente imagen ilustra cómofunciona el sistema:Color del borde [border-color]La propiedad border-color define el color del borde. Los valores de esta propiedad son los valores decolor normales, por ejemplo, "#123456" (en notación hexadecimal), "rgb (123,123,123)" (en notaciónRGB) o "yellow" (por nombre del color).Docente: Mgr. David Caipa Mamani Separata CSS (18 de 26)
  • 19. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebEstilo de borde [border-style]Se puede elegir entre diferentes estilos de borde. Más abajo se muestran8 estilos de borde según los interpreta Internet Explorer. Todos losejemplos se muestran con el valor del color a "oro" y el valor de laanchura a "thick", pero se pueden mostrar, por supuesto, en otroscolores y grosores.Si no queremos mostrar ningún borde, se puede usar los valores none ohidden.Ejemplos de definición de bordesLas tres propiedades descritas anteriormente se pueden unir para cadaelemento y así producir diferentes bordes. Para ilustrar esto, veremosun documento en el que definimos diferentes bordes para los elementos<h1>, <h2>, <ul> y <p>. El resultado puede que no sea demasiadobonito pero ilustra gráficamente algunas de las muchas posibilidades: h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; } ul { border-width: thin; border-style: solid; border-color: orange; }También es posible declarar propiedades especiales para el borde superior (top), inferior (bottom),derecho (right) e izquierdo (left). En el siguiente ejemplo vemos cómo: h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick;Docente: Mgr. David Caipa Mamani Separata CSS (19 de 26)
  • 20. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos Web border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }Combinación de propiedades [border]Como ocurre con muchas otras propiedades, usando la propiedad border se pueden combinar otrasmuchas propiedades en una sola. Veamos un ejemplo: p { border-width: 1px; border-style: solid; border-color: blue; }La declaración anterior se puede combinar así: p { border: 1px solid blue; }Altura y anchuraHasta ahora, no hemos prestado demasiada atención a las dimensiones de los elementos con los quehemos estado trabajando. Examinaremos lo fácil que es definir la altura y anchura de un elemento.Estableciendo la propiedad widthCon la propiedad width se puede definir la anchuraconcreta de un elemento. El sencillo ejemplo quesigue nos proporciona una caja en la que se puedeintroducir texto: div.box { width: 200px; border: 1px solid black; background: orange; }Estableciendo la propiedad heightFíjese, en el ejemplo anterior la altura de la cajaqueda establecida por el contenido de la misma. Sepuede influir en la altura de un elemento con lapropiedad height. Por ejemplo, probemos a fijar laaltura de la caja en 500px: div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }Docente: Mgr. David Caipa Mamani Separata CSS (20 de 26)
  • 21. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebElementos flotantes (la propiedad float)Los elementos se pueden hacer flotar a la derecha o a la izquierda usando la propiedad float. Es decir,que la caja con su contenido flota bien a la derecha o la izquierda de un documento (o de la cajacontenedora). La siguiente imagen muestra este principio:Por ejemplo, si quisiéramos texto con ajuste de línea alrededor de una imagen, el resultado sería elsiguiente:El código HTML del ejemplo anterior es el siguiente: <div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>Para conseguir que la imagen flote a la izquierda y el texto seajuste a su alrededor, sólo hay que definir el ancho de la cajaque rodea la imagen y, después de eso, fijar la propiedadfloat con el valor left: #picture { float:left; width: 100px; }Docente: Mgr. David Caipa Mamani Separata CSS (21 de 26)
  • 22. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebOtro ejemplo: columnasLa propiedad float también se puede usar para crear columnas en un documento. Para crear dichascolumnas tendrás que estructurar las columnas deseadas en el código HTML con la etiqueta <div>, comose muestra a continuación: <div id="column1"> <p>Haec disserens qua de re agatur et in quo causa consistat non videt...</p> </div> <div id="column2"> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> </div> <div id="column3"> <p>nam nihil esset in nostra potestate si res ita se haberet...</p> </div>Ahora, el ancho deseado de las columnas se fija, en un porcentaje equivalente a un 33%, y luegosimplemente se flota cada columna a la izquierda definiendo la propiedad float: #column1 { float:left; width: 33%; } #column2 { float:left; width: 33%; } #column3 { float:left; width: 33%; }La propiedad float se puede establecer con los siguientes valores: left (izquierda), right (derecha) onone (ninguna).La propiedad clearLa propiedad clear se usa para controlar cómo se comportarán los elementos que siguen a los elementosflotados de un documento.Por defecto, los elementos siguientes se mueven hacia arriba para rellenar el espacio disponible quequedará libre al flotar una caja hacia un lado. En el ejemplo anterior el texto se desplaza de formaautomática hacia arriba junto a la imagen de Bill Gates.La propiedad clear puede tomar los valores: left, right, both o none. El principio consiste en que, siclear, por ejemplo, se fija en both para una caja, el borde del margen superior de esta caja siempreestará debajo del borde del margen inferior para las posibles cajas flotantes que vengan de arriba. <div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div> <h1>Bill Gates</h1> <p class="floatstop">causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p>Docente: Mgr. David Caipa Mamani Separata CSS (22 de 26)
  • 23. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebPara evitar que el texto flote hacia arriba junto a la imagen,podemos añadir lo siguiente al código CSS: #picture { float:left; width: 100px; } .floatstop { clear:both; }Posicionamiento de elementosCon posicionamiento CSS, se puede colocar un elemento en el lugar exacto que se quiera de la página.Junto con las flotaciones [propiedad float], el posicionamiento proporciona muchas posibilidades decrear presentaciones avanzadas y precisas.Principios que rigen el posicionamiento CSSImagina la ventana de un navegador como un sistema de coordenadas:Los principios que rigen el posicionamiento CSS consisten en que se puede colocar cualquier caja encualquier lugar del sistema de coordenadas.Digamos que queremos posicionar un título. Usando el modelo de caja el título aparecerá así:Si queremos posicionar la cabecera a 100 px del borde superior y a 200px del borde izquierdo deldocumento, tendríamos que escribir el siguiente código CSS: h1 { position:absolute; top: 100px; left: 200px; }Docente: Mgr. David Caipa Mamani Separata CSS (23 de 26)
  • 24. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebEl resultado será el siguiente:Como puedes observar, el posicionamiento con CSS es una técnica muy precisa a la hora de colocarelementos. Es mucho más sencillo que intentar usar tablas, imágenes transparentes o cualquier otra cosa.Posicionamiento absolutoEl elemento que se posiciona de forma absoluta no ocupa espacio alguno en el documento. Esto significaque no deja un espacio vacío después de ser posicionado.Para posicionar un elemento de forma absoluta, la propiedad position se establece como absolute.Posteriormente puedes usar las propiedades left, right, top, y bottom para colocar la caja.Como ejemplo de posicionamiento absoluto, vamos a colocar 4 cajas en cada esquina del documento: #box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px; } #box3 { position:absolute; bottom: 50px; right: 50px; } #box4 { position:absolute; bottom: 50px; left: 50px; }Docente: Mgr. David Caipa Mamani Separata CSS (24 de 26)
  • 25. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebPosicionamiento relativoPara posicionar un elemento de forma relativa, la propiedad position se establece como relative. Ladiferencia entre posicionamiento absoluto y relativo consiste en cómo se calcula la posición.La posición para un elemento que se posiciona de forma relativa se calcula desde la posición original enel documento. Esto significa que se mueve el elemento hacia la derecha, la izquierda, arriba o abajo. Deeste modo, el elemento sigue ocupando espacio en el documento después de haberse posicionado.Como ejemplo de posicionamiento relativo, podemos intentar posicionar tres imágenes de forma relativarespecto a su posición original en la página. Fíjesecómo las imágenes dejan espacios vacíos en susposiciones originales en el documento: #dog1 { position:relative; left: 350px; bottom: 150px; } #dog2 { position:relative; left: 150px; bottom: 500px; } #dog3 { position:relative; left: 50px; bottom: 700px; }Capa sobre capa con z-index (Capas)CSS funciona sobre tres dimensiones: altura, anchura y profundidad. Anteriormente examinamos las dosprimeras dimensiones. Ahora, aprenderemos cómo hacer que diferentes elementos se conviertan en capas.En pocas palabras, esto hace referencia al orden en que los elementos se superponen unos con respecto aotros.Para tal propósito, se puede asignar a cada elemento un número por medio de la propiedad z-index. Elsistema consiste en que el elemento con un número mayor se superpone al elemento con un númeromenor.Supongamos que estamos jugando al póquer y tenemos una escalera de color. La mano se puede presentarde tal manera que cada carta tiene un número asignado por medio de z-index:En este caso, los números son consecutivos (del 1 al 5), aunque se puede lograr el mismo resultadousando cinco números diferentes. Lo importante es la secuencia cronológica de los números (el orden).Docente: Mgr. David Caipa Mamani Separata CSS (25 de 26)
  • 26. Instituto de Educación Superior Tecnológico Público“Francisco de Paula Gonzales Vigíl” - TacnaComputación e Informática Unidad Didáctica: Proyectos WebEl código del ejemplo de las cartas quedaría así: #diez_de_diamantes { position: absolute; left: 100px; top: 100px; z-index: 1; } #sota_de_diamantes { position: absolute; left: 115px; top: 115px; z-index: 2; } #reina_de_diamantes { position: absolute; left: 130px; top: 130px; z-index: 3; } #rey_de_diamantes { position: absolute; left: 145px; top: 145px; z-index: 4; } #as_de_diamantes { position: absolute; left: 160px; top: 160px; z-index: 5; }El método es relativamente sencillo pero las posibilidades que ofrece son múltiples. Es posible colocarimágenes sobre el texto, texto sobre imágenes, etc.Docente: Mgr. David Caipa Mamani Separata CSS (26 de 26)
Volar