Documente Academic
Documente Profesional
Documente Cultură
Computacin e Informtica
El cdigo usado es idntico para HTML y CSS. El ejemplo anterior muestra adems el modelo CSS fundamental:
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
El mtodo recomendado es enlazar con lo que se denomina hoja de estilo externa. Una hoja de estilo externa es sencillamente un fichero de texto con la extensin .css. Como cualquier otro fichero, puedes colocar 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 situacin se puede ilustrar de la siguiente manera: El truco consiste en crear un vnculo desde el documento HTML (por ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vnculo se puede crear con una sencilla lnea de cdigo HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" /> La etiqueta <LINK> le indica al navegador que debe buscar un documento situado fuera de la pgina HTML. El atributo rel="stylesheet" especifica que el documento en cuestin es una hoja de estilo externa. El atributo type="text/css" especifica el tipo de hoja de estilo. El atributo href=" URL " muestra la URL de la hoja de estilo (su ubicacin en Internet).
Observe cmo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo href. La lnea de cdigo debe insertarse en la seccin de encabezado del cdigo HTML, es decir, entre la etiqueta <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 vnculo indica al navegador que debe usar la presentacin del fichero CSS al mostrar el documento HTML. Lo realmente bueno de este mtodo es que se pueden vincular varios documentos HTML con la misma hoja de estilo. En otras palabras, se puede usar un nico fichero CSS para controlar la presentacin de muchos documentos HTML.
Docente: Mgr. David Caipa Mamani Separata CSS (2 de 26)
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Esta tcnica puede ahorrarle mucho trabajo. Si quisieras cambiar, por ejemplo, el color de fondo de un sitio web compuesto por 100 pginas, una hoja de estilo puede ahorrarle el tener que cambiar de forma manual los 100 documentos HTML. Con CSS, el cambio se puede llevar a cabo en unos segundos modificando parte del cdigo de la hoja de estilo principal.
Prubalo t mismo
Abre el Bloc de notas u otro editor de texto y crea dos archivos - uno HTML y otro CSS - con el siguiente contenido:
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>
Recuerda grabar los archivos en las carpetas correctas y con las extensiones correspondientes (".htm" y ".css", respectivamente). Abre el archivo ejemplocss.html y observa que la pgina tiene un color de fondo rojo.
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Colores y fondos
Color de primer plano: la propiedad 'color' La propiedad color describe el color de primer plano de un elemento. Por ejemplo, todos los ttulos <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-color' La 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 color de fondo de una pgina, la propiedad background-color debera aplicarse al elemento <body>. Tambin se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarn diferentes colores a los elementos <body> y <h1>.
body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }
Fjese cmo hemos aplicado dos propiedades a <h1> separndolas por medio de un punto y coma.
NOTA: Especificar la ubicacin de la imagen: url("butterfly.gif"), si est en la misma carpeta. Para referenciar a otra carpeta url("../imagenes/butterfly.gif") url("http://www.html.net/butterfly.gif").
Docente: Mgr. David Caipa Mamani
imgenes
de
internet
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Valor
Por ejemplo, para evitar que se repita una imagen de fondo, el cdigo que tendramos que usar sera el siguiente:
body { background-color: #FFCC66; background-image: url("../graficos/butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
El 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 automtica sta se establecer con su valor por defecto. Por ejemplo, si se omiten las propiedades background-attachment y background-position del ejemplo anterior, quedando el cdigo de la siguiente manera:
background: #FFCC66 url("butterfly.gif") no-repeat;
Estas dos propiedades que no se especifican se estableceran, sin ms, con sus valores por defecto, que, como ya sabes, son scroll y top left.
Fuentes
Familia de fuentes [font-family] La propiedad font-family se usa para establecer una lista ordenada de fuentes que se usarn para mostrar un elemento determinado o una pgina web. Si la primera fuente de la lista no est instalada en el ordenador desde el que se accede al sitio, se seguir probando con la siguiente fuente hasta encontrar una fuente apropiada. Para clasificar las fuentes se usan dos tipos de nombres: nombres de una familia y familias genricas. Estos dos trminos se explican a continuacin. La diferencia se puede ilustrar as:
Al listar fuentes para el sitio web, se empieza por la preferida, seguida de algunas fuentes alternativas. Se recomienda completar la lista con una familia de fuentes genrica. As, al menos, la pgina se mostrar usando una fuente de la misma familia si ninguna de las especificadas estn disponibles. Un ejemplo de lista de fuentes por orden de prioridad podra 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 mostrarn usando la fuente "Arial". Si esta fuente no
est instalada en el ordenador de usuario, se usar en su lugar la fuente "Verdana". Si ambas fuentes no estn disponibles, se usar una fuente de la familia sans-serif para mostrar los encabezados. Fjese cmo el nombre de fuente "Times New Roman" contiene espacios y, por lo tanto, se lista usando comillas.
Docente: Mgr. David Caipa Mamani Separata CSS (7 de 26)
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Estilo de la fuente [font-style] La propiedad font-style define la fuente elegida bien con el valor normal, el valor italic o el valor oblique. En el ejemplo que sigue, todos los encabezados marcados con <h2> aparecern 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 una fuente. La fuente a la que se aplica el valor small-caps es una fuente que usa letras en mayscula inicial ms pequeas, en vez de letras en minscula. Veamos los ejemplos siguientes:
Si la propiedad font-variant se establece con el valor small-caps y no hay disponible una fuente en versalita, el navegador probablemente mostrar el texto en mayscula.
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 debera tener la fuente. Toda fuente puede tener los valores normal o bold. Algunos navegadores soportan, incluso, el uso de nmeros entre 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;}
Tamao de la fuente [font-size] El tamao de la fuente se establece por medio de la propiedad font-size. A la hora de describir el tamao de las fuentes, existen muchas unidades diferentes (por ejemplo, pxeles y porcentajes) entre las que elegir. En este tutorial nos centraremos en las unidades ms 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 el tamao de la fuente de forma absoluta, mientras que '%' y 'cm' permiten al usuario ajustar el tamao de la misma segn considere oportuno. Muchos usuarios son discapacitados, mayores o sufren de disminucin visual, o disponen de un monitor de mala calidad. Para que tu sitio web sea accesible para todo el mundo, deberas usar unidades ajustables como, por ejemplo, '%' o 'cm'. Combinacin de propiedades [font] Si usamos la propiedad abreviada font es posible incluir todas las propiedades diferentes relativas a fuentes en una nica propiedad.
Docente: Mgr. David Caipa Mamani Separata CSS (8 de 26)
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Por ejemplo, estas cuatro lneas de cdigo que usamos para describir las propiedades de fuente para la etiqueta <p>:
p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; }
El orden de los valores para la propiedad font es: font-style | font-variant | font-weight | font-size | font-family
Texto
Sangra del texto [text-indent] La propiedad text-indent permite aadir un toque de elegancia a los prrafos de texto al aplicar sangra a la primera lnea de dicho prrafo. En el ejemplo siguiente se ha aplicado una sangra de 30px a todos los prrafos de texto marcados con la etiqueta <p>:
p { text-indent: 30px; }
Alineacin del texto [text-align] La propiedad CSS text-align es el equivalente al atributo align usado en versiones anteriores de HTML. Los valores posibles de esta propiedad son: left (texto alineado a la izquierda), right (texto alineado a la derecha) o center (texto con alineacin centrada). Adems, el valor justify (alineacin justificada) alargar cada lnea de forma que los mrgenes izquierdo y derecho estn justificados. En el ejemplo que sigue, el texto de los encabezados de la tabla, <th>, se ha alineado a la derecha, mientras que los datos de la tabla, <td>, aparecen centrados. Adems, los prrafos de texto normales estn justificados:
th { text-align: right; } td { text-align: center; } p { text-align: justify; }
Decoracin del texto [text-decoration] La propiedad text-decoration permite aadir diferentes "decoraciones" o "efectos" al texto. Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior. En el ejemplo siguiente, el
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
elemento <h1>aparecer subrayado, el elemento <h2> aparecer con un subrayado por encima del texto y el 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. El valor de esta propiedad corresponde, sencillamente, al ancho deseado. Por ejemplo, si queremos un espaciado de 3px entre los caracteres de un prrafo de texto <p> y 6px entre los caracteres de los encabezados <h1>, usaramos el siguiente cdigo:
h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }
Transformacin del texto [text-transform] La propiedad text-transform controla la escritura en maysculas de un texto. Puedes elegir entre los valores capitalize, uppercase olowercase, sin importar cmo aparece el texto original en el cdigo HTML. Un ejemplo podra ser la palabra "ttulo" que se puede presentar al usuario como "TTULO" o "Ttulo". A continuacin ofrecemos una explicacin de los valores de la propiedad text-transform mencionados en el prrafo anterior: capitalize Pone en mayscula la primera letra de cada palabra. Por ejemplo, "john doe" aparecer como "John Doe". uppercase Convierte todas las letras a mayscula. Por ejemplo, "john doe" aparecer como "JOHN DOE". lowercase Convierte todas las letras a minscula. Por ejemplo, "JOHN DOE" aparecer como "john doe". none No se realiza transformacin alguna; el texto se presenta tal como aparece en el cgido HTML. Como ejemplo, usaremos una lista de nombres. Todos los nombres estn marcados con la etiqueta <li> (de "list element", es decir, elemento de lista). Supongamos que queremos que las iniciales de los nombres aparezcan en mayscula y los ttulos con todos los caracteres en mayscula.
h1 { text-transform: uppercase; } li { text-transform: capitalize; }
Docente: Mgr. David Caipa Mamani Separata CSS (10 de 26)
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Enlaces
Qu es una pseudo-clase? Una pseudo-clase permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una 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-clase para 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 activos se 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 ms explicaciones.
Pseudo-clase a:link
La pseudo clase :link se usa para enlaces que dirigen a pginas que el usuario no ha visitado. En el ejemplo de cdigo que sigue, los enlaces no visitados tendrn un color azul claro.
a:link { color: #6699CC; }
Pseudo-clase a:visited
La pseudo clase :visited se usa para enlaces que dirigen a pginas que el usuario ya ha visitado. Por ejemplo, el cdigo siguiente har que todos los enlaces visitados sean de color prpura oscuro:
a:visited { color: #660099; }
Pseudo-clase a:active:
La pseudo clase :active se usa para enlaces que estn activos. El cdigo de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo:
a:active { background-color: #FFFF00; }
Pseudo-clase a:hover
La pseudo clase a:hover se usa cuando el puntero del ratn pasa por encima de un enlace. Esta pseudoclase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de
Docente: Mgr. David Caipa Mamani Separata CSS (11 de 26)
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
color naranja y estn en cursiva cuando el cursor pase sobre ellos, el cdigo CSS que utilizaremos ser el siguiente:
a:hover { color: orange; font-style: italic; }
El espaciado entre los caracteres se puede ajustar usando la propiedad letter-spacing. Esta propiedad se puede aplicar a los enlaces para crear un efecto especial:
a:hover { letter-spacing: 10px; font-weight:bold; color:red; }
MAYSCULAS y minsculas
La propiedad text-transform, sirve para intercambiar entre letras en mayscula y minscula. Esto se puede usar tambin para crear un determinado efecto en los enlaces:
a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }
Generalmente el subrayado es azul en los enlaces a pginas web e indican hacer clic en ellos. Si cambias el subrayado y el color de los enlace, existe una buena posibilidad de que los usuarios se confundan y, por lo 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. Para quitar 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 para las 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)
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El cdigo HTML sera 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 el vino tinto sean rojos, y el resto de enlaces de la pgina web sigan siendo azules. Para lograr esto, dividiremos los enlaces en dos categoras. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo class. Intentemos especificar algunas clases en el ejemplo anterior:
<p>Uvas para el vino <ul> <li><a href="ri.htm" <li><a href="ch.htm" <li><a href="pb.htm" </ul> <p>Uvas para el vino <ul> <li><a href="cs.htm" <li><a href="me.htm" <li><a href="pn.htm" </ul> blanco:</p> class="whitewine">Riesling</a></li> class="whitewine">Chardonnay</a></li> class="whitewine">Pinot Blanc</a></li> tinto:</p> class="redwine">Cabernet Sauvignon</a></li> class="redwine">Merlot</a></li> class="redwine">Pinot Noir</a></li>
A partir de aqu, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.
a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }
Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase usando nombredelaclase en la hoja de estilo del documento.
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
El cdigo anterior podra hacer referencia a encabezados de cualquier documento dividido en captulos y prrafos. Sera normal asignar un id a cada captulo de la siguiente manera:
<h1 ... <h2 ... <h2 ... <h1 ... <h2 ... <h3 ... id="c1">Captulo 1</h1> id="c1-1">Captulo 1.1</h2> id="c1-2">Captulo 1.2</h2> id="c2">Captulo 2</h1> id="c2-1">Captulo 2.1</h2> id="c2-1-2">Captulo 2.1.2</h3>
Digamos que el ttulo del captulo 1.2 tiene que estar en rojo. Usando el cdigo CSS necesario, se podra hacer as:
#c1-2 { color: red; }
Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento especfico usando #nombredelidentificador en la hoja de estilo del documento.
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Digamos que queremos que lo que el seor Franklin considera como las ventajas de no pasarse todo el da durmiendo, aparezca enfatizado en rojo. Para este fin, podemos marcar dichas ventajas con el elemento <span>. A cada elemento span se le aade el atributo class, que podemos definir as en nuestra hoja de estilo:
<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>
Por supuesto, se puede usar tambin el atributo id para aadir estilo a los elementos definidos con <span>. Pero recuerda que tendrs que aplicar siempre un atributo id nico para cada uno de los tres elementos <span>, tal como aprendimos en la leccin anterior.
En nuestra hoja de estilo podemos utilizar la agrupacin del mismo modo que antes:
#democrats { background:blue; } #republicans { background:red; }
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
El modelo de caja
El modelo de caja en CSS describe las cajas que se generan a partir de los elementos HTML. El modelo de caja tambin contiene opciones detalladas en lo referente al ajuste de mrgenes, bordes, relleno (padding) y contenido de cada elemento. La siguiente imagen muestra cmo se construye el modelo de caja: El modelo de caja en CSS A primera vista, la imagen anterior puede parecer muy terica, as que intentemos usar el modelo en un caso real con un encabezado y algo de texto. El cdigo HTML de nuestro ejemplo es el siguiente (extrado de la Declaracin Universal de los Derechos Humanos):
<h1>Artculo 1:</h1> <p>Todos los hombres nacen libres e iguales en dignidad y derechos. Estn dotados de razonamiento y consciencia y deberan de comportarse entre s con espritu de hermandad.</p>
Si aadimos algo de color e informacin sobre la fuente, el ejemplo se podra presentar as: El ejemplo contiene dos elementos: el elemento <h1> y el elemento <p>. El modelo de caja para los dos elementos se puede ilustrar como sigue:
Aunque puede parecer un poco complicado, la imagen muestra cmo cada elemento HTML est rodeado por cajas, cajas que se pueden ajustar usando CSS.
Docente: Mgr. David Caipa Mamani Separata CSS (16 de 26)
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
O podras elegir usar la versin combinada de margin, que queda como ms elegante:
body { margin: 100px 40px 10px 70px; }
Se puede establecer los mrgenes de casi todos los elementos del mismo modo. Por ejemplo, podemos elegir definir mrgenes para todos los prrafos de texto marcados con el elemento <p>:
body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }
Docente: Mgr. David Caipa Mamani Separata CSS (17 de 26)
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Al definir el padding para los ttulos, cambiamos la cantidad de "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; }
Bordes
Los bordes se pueden usar para muchas cosas, por ejemplo, como elemento decorativo o para subrayar la separacin entre dos cosas. CSS te ofrece opciones sin fin a la hora de usar bordes en tus pginas. Anchura del borde [border-width] La anchura del borde se define por medio de la propiedad border-width, que dispone de los valores thin, medium y thick, o de un valor numrico indicado en pxeles. La siguiente imagen ilustra cmo funciona el sistema:
La propiedad border-color define el color del borde. Los valores de esta propiedad son los valores de color normales, por ejemplo, "#123456" (en notacin hexadecimal), "rgb (123,123,123)" (en notacin RGB) o "yellow" (por nombre del color).
Docente: Mgr. David Caipa Mamani Separata CSS (18 de 26)
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Estilo de borde [border-style] Se puede elegir entre diferentes estilos de borde. Ms abajo se muestran 8 estilos de borde segn los interpreta Internet Explorer. Todos los ejemplos se muestran con el valor del color a "oro" y el valor de la anchura a "thick", pero se pueden mostrar, por supuesto, en otros colores y grosores. Si no queremos mostrar ningn borde, se puede usar los valores none o hidden.
Ejemplos de definicin de bordes Las tres propiedades descritas anteriormente se pueden unir para cada elemento y as producir diferentes bordes. Para ilustrar esto, veremos un documento en el que definimos diferentes bordes para los elementos <h1>, <h2>, <ul> y <p>. El resultado puede que no sea demasiado bonito pero ilustra grficamente 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; }
Tambin es posible declarar propiedades especiales para el borde superior (top), inferior (bottom), derecho (right) e izquierdo (left). En el siguiente ejemplo vemos cmo:
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)
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }
Combinacin de propiedades [border] Como ocurre con muchas otras propiedades, usando la propiedad border se pueden combinar otras muchas propiedades en una sola. Veamos un ejemplo:
p { border-width: 1px; border-style: solid; border-color: blue; }
Altura y anchura
Hasta ahora, no hemos prestado demasiada atencin a las dimensiones de los elementos con los que hemos estado trabajando. Examinaremos lo fcil que es definir la altura y anchura de un elemento. Estableciendo la propiedad width Con la propiedad width se puede definir la anchura concreta de un elemento. El sencillo ejemplo que sigue nos proporciona una caja en la que se puede introducir texto:
div.box { width: 200px; border: 1px solid black; background: orange; }
Estableciendo la propiedad height Fjese, en el ejemplo anterior la altura de la caja queda establecida por el contenido de la misma. Se puede influir en la altura de un elemento con la propiedad height. Por ejemplo, probemos a fijar la altura de la caja en 500px:
div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Por ejemplo, si quisiramos texto con ajuste de lnea alrededor de una imagen, el resultado sera el siguiente:
Para conseguir que la imagen flote a la izquierda y el texto se ajuste a su alrededor, slo hay que definir el ancho de la caja que rodea la imagen y, despus de eso, fijar la propiedad float con el valor left:
#picture { float:left; width: 100px; }
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Otro ejemplo: columnas La propiedad float tambin se puede usar para crear columnas en un documento. Para crear dichas columnas tendrs que estructurar las columnas deseadas en el cdigo HTML con la etiqueta <div>, como se muestra a continuacin:
<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 luego simplemente 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) o none (ninguna). La propiedad clear La propiedad clear se usa para controlar cmo se comportarn los elementos que siguen a los elementos flotados de un documento. Por defecto, los elementos siguientes se mueven hacia arriba para rellenar el espacio disponible que quedar libre al flotar una caja hacia un lado. En el ejemplo anterior el texto se desplaza de forma automtica 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, si clear, por ejemplo, se fija en both para una caja, el borde del margen superior de esta caja siempre estar 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>
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Para evitar que el texto flote hacia arriba junto a la imagen, podemos aadir lo siguiente al cdigo CSS:
#picture { float:left; width: 100px; } .floatstop { clear:both; }
Posicionamiento de elementos
Con posicionamiento CSS, se puede colocar un elemento en el lugar exacto que se quiera de la pgina. Junto con las flotaciones [propiedad float], el posicionamiento proporciona muchas posibilidades de crear presentaciones avanzadas y precisas. Principios que rigen el posicionamiento CSS Imagina 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 en cualquier lugar del sistema de coordenadas. Digamos que queremos posicionar un ttulo. Usando el modelo de caja el ttulo aparecer as:
Si queremos posicionar la cabecera a 100 px del borde superior y a 200px del borde izquierdo del documento, tendramos que escribir el siguiente cdigo CSS:
h1 { position:absolute; top: 100px; left: 200px; }
Docente: Mgr. David Caipa Mamani Separata CSS (23 de 26)
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Como puedes observar, el posicionamiento con CSS es una tcnica muy precisa a la hora de colocar elementos. Es mucho ms sencillo que intentar usar tablas, imgenes transparentes o cualquier otra cosa. Posicionamiento absoluto El elemento que se posiciona de forma absoluta no ocupa espacio alguno en el documento. Esto significa que no deja un espacio vaco despus 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; }
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
Posicionamiento relativo Para posicionar un elemento de forma relativa, la propiedad position se establece como relative. La diferencia entre posicionamiento absoluto y relativo consiste en cmo se calcula la posicin. La posicin para un elemento que se posiciona de forma relativa se calcula desde la posicin original en el documento. Esto significa que se mueve el elemento hacia la derecha, la izquierda, arriba o abajo. De este modo, el elemento sigue ocupando espacio en el documento despus de haberse posicionado. Como ejemplo de posicionamiento relativo, podemos intentar posicionar tres imgenes de forma relativa respecto a su posicin original en la pgina. Fjese cmo las imgenes dejan espacios vacos en sus posiciones 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; }
En este caso, los nmeros son consecutivos (del 1 al 5), aunque se puede lograr el mismo resultado usando cinco nmeros diferentes. Lo importante es la secuencia cronolgica de los nmeros (el orden).
Instituto de Educacin Superior Tecnolgico Pblico Francisco de Paula Gonzales Vigl - Tacna
Computacin e Informtica
El mtodo es relativamente sencillo pero las posibilidades que ofrece son mltiples. Es posible colocar imgenes sobre el texto, texto sobre imgenes, etc.