Lenguaje de Marcas - CSS

CSS Integrar CSS con html Las hojas de estilo nos permiten especificar atributos para los elementos de la página Web, dándonos mayor control sobre el aspecto de nuestros documentos Lo más importante es que podemos emplear hojas de estilo como patrones o páginas maestras de forma que múltiples páginas puedan tener el mismo aspecto Las hojas de estilo pueden crearse empleando dos tipos de sintaxis, CSS () y JavaScript BENEFICIOS 1. Separación entre contenidos (código html) y estructura 2. Control más preciso de la apariencia. CSS permite crear texto con exactamente 80 píxeles de alto, especificar márgenes de forma fácil, controlar el espacio entre líneas o palabras, etc. 3. Páginas más pequeñas y ágiles 4. Gestión de cambios más rápidos y fácil 5. Transparente para el usuario 6. El lenguaje es sencillo y fácil de aprender 7. Generan documentos más compactos 8. Reutilizan código INCONVENIENTES 1. El soporte irregular que tienen por parte de los navegadores. 2. Ciertas propiedades que funcionan en un navegador no funcionan en otros, o existen diferencias en un mismo navegador según sea para Windows, Mac u otros 3. También existen diferencias entre distintas versiones de un mismo navegador DEFINICIÓN DE REGLAS DE ESTILO Una regla de estilo es la declaración de los formatos que adoptará el elemento para el cual va destinada. Las reglas se componen de: - El selector: es el elemento sobre el que actuará la regla, es decir la etiqueta HTML que se verá afectada. - La declaración: que establece las propiedades y valores a aplicar sobre los elementos seleccionados.

UTILIZACIÓN DE CSS SINTAXIS Selector { propiedad1: valor1; propiedad2: valor2;….; propiedadN: valorN; } Ejemplo: 1. Define una regla de estilo para la etiqueta H1, en la que el color sea verde y la familia fuente sea impact. H1 { color: green; Font-family: impact; } 2. Define una regla de estilo para la etiqueta P, en la que el fondo sea amarillo y la familia fuente sea Courier. P { background: yellow; Font-family: Courier; } Actualmente hay 4 métodos para poder usar las Hojas de Estilo asociadas a las páginas Web, cada una con sus ventajas e inconvenientes: 1. Incrustar las Hojas de Estilo dentro de las páginas Web. 2. Enlazar con una Hoja de Estilo desde un documento HTML. 3. Importar a un documento HTML una Hoja de Estilo externa. 4. Añadir estilos en los elementos de los documentos HTML. Es posible usar más de uno de estos métodos.

INCRUSTAR HOJAS DE ESTILO EN UN DOCUMENTO WEB

Toda la información acerca del estilo de la página se sitúa en la sección del código HTML, separándolo de la sección . Este método debería ser usado cuando un único documento usa un único estilo.

SINTAXIS

-

-

-

… El atributo TYPE=”text/css” (se ponen los dos) permite que los navegadores que no soportan las Hojas de Estilo o CSS pueden ignorar el código que define el estilo. Se debe usar la especiación previa Las etiquetas de comentarios son muy importante algunos navegadores no pueden reconocer las etiquetas d estilo a pesar del atributo TYPE=”text/css” y visualizan el código de las etiquetas en la página web que ven los usuario Este es un efecto no deseado que se evita usando las etiquetas de comentarios Ejemplo:

Mi primera Hoja de Estilo el formato de esta cabecera la he definido yo de igual forma he definido yo este párrafo…………………….. Este texto esá escrito sin la etiqueta P Y se guarda como extensión: .html

ENLAZAR CON UNA HOJA DE ESTILO DESDE UN DOCUMENTO HTML Además de poder incluir código de este estilo en una página web, también se puede usar en múltiples documentos HTML una única declaración de hoja de estilo. Este estilo se aplicará a todas las páginas que le referencien y un cambio en este estilo se verá automáticamente reflejado en las páginas web afectadas. En este caso no hace falta usar las etiquetas de comentario Se pueden usar URLs relativos o absolutas en el atributo HREF

SINTAXIS Mi primera Hoja de Estilo



Este, también, puede ser un buen ejemplo de que en los estilos css, el último que se ponga es el que prevalece.

IMPORTAR A UN DOCUMENTO HTML UNA HOJA DE ESTILO EXTERNA Esta acción es muy similar a enlazarla La diferencia está en que no se permite combinar el uso de Hojas de Estilo enlazadas con otros métodos, mientras que sí que es posible hacerlo usando la importación de Hojas de Estilo externas. Si quieres utilizar el estilo que tienen todas las demás páginas pero solo quieres redefinir una etiqueta. SI se mezclan las dos formas anteriores en un archivo .html, el navegador hará caso al último código:

Mi primera Hoja de Estilo

el formato de esta cabecera la he definido yo de igual forma he definido yo este párrafo…………………….. Este texto esá escrito sin la etiqueta P

AÑADIR ESTILOS EN LOS ELEMENTOS DE LOS DOCUMENTOS HTML Por último, se puede definir estilos directamente dentro de los elementos HTML. Esto implica mezclar las reglas de estilo de nuestro código HTML. Mi primera Hoja de Estilo el formato de esta cabecera la he definido yo de igual forma he definido yo este párrafo…………………….. Este texto esá escrito sin la etiqueta P

Comando DIV 1 El comando DIV Instrucción 1 Instrucción 2 … Instrucción n Las instrucciones 1, 2…N, se verán afectadas por las propiedades definidads en la etiqueta DIV.

Comando DIV 2 Esta es la Cabecera h3 y esto un texto sin etiqueta

Con estos ejemplos se puede explicar que al poner en otro H3 en el 2º archivo los atributos que ya estaban escritos en el 1º archivo se redefinen; es decir, prevalece los atributos de la última etiqueta, lo que no quiere decir que si la primera etiqueta tiene atributos que la segunda no, no se pongan, lo contrario. Ambas se complementan.

AGRUPAMIENTO Para reducir el tamaño de las hojas de estilo, se pueden agrupar selectores en listas separándoles con una coma:

1º archivo: “.css” H1, H2, H3 { color: red; font-family: helvetica; text-align: center; }

2º archivo: “.html” Título Esta es la Cabecera h1 Esta es la Cabecera h2 Esta es la Cabecera h3 Esta es la Cabecera h4

DEFINIR ESTILOS UTILIZANDO CLASES Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces. Una clase se puede definir entre las etiquetas (en la cabecera del documento), o en un archivo externo a la página. Para definirlas utilizamos la siguiente sintaxis, un punto seguido del nombre de la clase y entre llaves los atributos de estilos deseados. De esta manera: .nombredelaclase {atributo: valor;atributo2:valor2; ...} Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello utilizaremos el atributo class, poniéndole como valor el nombre de la clase, de esta forma: Ejemplo de la utilización de clases

Análogamente, las declaraciones también pueden agruparse: H1 { Font-wight: bold; Font-size: 12pt; Line-height: 14pt; Font-family: Helvetica; Font-variant: normal; Font-style: normal; } Además, “algunas propiedades” tienen su propia agrupación. Pudiéndolo transformar en: H1 { font: bold 12pt/14pt helvética } Supongamos que al selector H1 le damos el color azul en una hoja de estilos: H1 { color: blue; } ¡El título es importante! Si no se ha asignado ningún color al elemento “EM” (PODRÍA SER CUALQUIER OTRA ETIQUETA), la palabra “es” enfatizada heredará el color del elemento padre, es decir, también aparecerá en azul. Otras propiedades de estilo se heredan de la misma manera. Por ejemplo: “Font-family” y “Font-size” Para incrementar el grado de control sobre los elementos, se ha añadido un nuevo elemento HTML: el atributo “CLASS”. La forma de usarlo es la siguiente:  Cuando se defina el estilo del selector se pondría: SELECTOR.nombre_clase { propiedades }  Cuando se utilice el selector dentro del documento html: …  Si no especificamos la clase del selector, adoptará la declarada por el defecto del navegador.

SELECTORES CONTEXTUALES Supongamos que queremos que los elementos “EM” (enfatizar) contenidos en un H1 salgan en un color diferente, para esto se podría especificar lo siguiente: En la hojas de estilos: H1 { color: blue; } EM { color: red; } Todas las secciones enfatizadas saldrán en rojo, estén dentro o fuera de un “H1”. Pero es probable que solo quisiéramos que salieran en rojo los elementos “EM” contenidos en un “H1”, y eso se consigue de la siguiente manera: H1 EM { color: red; } EJEMPLO:

selectores contextuales H1 { color: blue; } H2 { color: red; } H3 { color: green; } H4 { color: yellow; } H5 { color: orange; } H6 { color: aqua; } H1 H2 H3 H4 H5 H6

S S S S S S

{ { { { { {

color: color: color: color: color: color:

aqua; } orange; } yellow; } green; } red; } blue; }

cabecera uno en azul cabecera dos en rojo cabeceratres en verde cabecera cuatro en amarillo cabeceracinco en naranja cabecera seis en color agua MI PÁRRAFO EN NEGRITA SIN OTRO ATRIBUTO

TAMBIÉN SE PUEDE HACER CON CAPAS:

Archivo .css /* Todos los parrafos de la pagina */ p { color: "red"; } /* Todos los párrafos contenidos en #primero */ #primero p { color: "blue"; } /* Los elementos "b" contenidos en #normal */ #normal b { background: "gray";}

Archivo .html Este texto es muy interesante enlace a google. Si haces bien este ejercicio, demostrarás que entiendes CSS, pero tendrás que seguir trabajando.

LOS COMENTARIOS EN CSS Son similares a los del lenguaje C: /* Esta enfatización va en rojo */

PSEUDO-CLASES Y PSEUDO-ELEMENTOS PSEUDO-CLASES DE VÍNCULO Los navegadores suelen representar los vínculos no visitados de manera distinta a los visitados. En CSS, se puede actuar sobre esto a través de pseudo-clases del elemento “A”: PRIMEROS COMANDOS: otro atributo es “ text-decoration: (underline, strike…); ” A:link { color: valor} /* vínculo no visitados */ A:visited { color: valor} /* vínculos visitados */ A:hover { color: valor} /* vínculos sobre los que está el cursor del ratón, cambia de color */ A:active { color: valor} /* vínculo activos, un vínculo “active” es uno que está siendo seleccionado en el momento por el lector */ Si nos referimos a una etiqueta en concreto, como por ejemplo IMG, debemos poner: A:link IMG {} A:visited IMG {} A:hover IMG {} ….. Una pseudo-clase de vínculo se trata como si la clase se hubiera insertado manualmente Las pseudo-clases de vínculo no tendrán ningún efecto en elementos que no sean “A” por lo que el tipo de elemento puede omitirse del selector: A:LINK { color:red } = :link { color:red } Estos dos selectores so similares Las pseudo-clases pueden utilizarse en selectores contextuales y también pueden combinarse con las clases normales: A.nombre_clase_elemento˽{ propiedad1: valor } EJEMPLO: A.nombre_clase:visited { color: green }

… A:link {color:#0000cc;} A:visited {color:#0000cc;} A:active {color:#0000cc;} A:hover {color:#0000ff;} A.clase1:visited {color:#ffff00;} A.clase1:active {color:#ffff00;} A.clase1:link {color:#ffff00} A.clase1:hover {color:#00ff00}

A.clase2:visited {font-size:12;color:#ffffff;} A.clase2:active {font-size:12;color:#ffffff;} A.clase2:link {font-size:12;color:#ffffff;} A.clase2:hover {font-size:12;color:#ffff33;} body {font-family:arial;font-size:11;font-weight:bold} td {font-family:arial;font-size:11;font-weight:bold} Este enlace es normal Los enlaces de esta barra son especiales, están definidos por clases Opciones 1 Enlace clase1 Otro de clase1 Más enlaces Todavía más

PSEUDO ELEMENTOS TIPOGRÁFICOS Permiten aplicar algunos efectos tipográficos al formato del documento en el lienzo. Principalmente son dos: los que afectan a la primera línea de un elemento, y los que afectan a la primera letra.

Pseudo-elemento “first-line” El pseudo-elemento “first-line” se utiliza para aplicar estilos especiales a la primera línea de un elemento una vez que se ha dado formato a éste en el lienzo: Comando 1 P:first-line { propiedad: valor; } Solamente las siguientes propiedades se aplican al elemento “first-line”: - Propiedades de fuente

-

Propiedades de color y fondo Propiedades de texto (excepto text-align)

Pseudo-elemento “first-letter” El pseudo-elemento “first-letter” se utilice para letras capitales, que es un efecto tipográfico muy común Las propiedades que se aplican a un pseudo-elemento “first-letter” son: - Propiedades de fuente - Propiedades de color y fondo - Propiedades de texto “text-decoration”, “vertical-align”, “text-transform”, “line-height” - Propiedades de margen - Propiedades de relleno - Propiedades de borde - Float y clear Ejemplo de Ambos:

P: { font-size: 20pt; } P.sololetter:first-letter { font-family: arial; color: red; font-size: xx-large; Background-color: blue; } P.sololine:first-line { font-family: verdana; color: orange; font-size: large; Background-color: green; } P.dos:first-letter { font-family: arial; color: red; font-size: xx-large; Background-color: blue; } P.dos:first-line { font-family: verdana; color: orange; font-size: large; Background-color: green; } Archivo .Html

Primer Párrafo de 20pt Primera línea del párrafo vardena, naranja, letra large, color de fondo verde. esto es el párrafo normal.esto es el párrafo normal.esto es el párrafo normal.esto es el párrafo normal. (…) Primera línea de cada párrafo se caracteriza por texto arial, tamaño xx-large, rojo y de fondo azul. esto es el párrafo normal.esto es el párrafo normal.esto es el párrafo normal.esto es el párrafo normal. (…) Primera línea del párrafo vardena, naranja, letra large, color de fondo verde. esto es el párrafo normal.esto es el párrafo normal.esto es el párrafo normal.esto es el párrafo normal.(…) Primera línea de cada párrafo se caracteriza por texto arial, tamaño xx-large, rojo y de fondo azul. esto es el párrafo normal.esto es el párrafo normal.esto es el párrafo normal.esto es el párrafo normal. (…)

CAPAS Para poner la capa en un documento es necesario utilizar la etiqueta DIV dentro de body: Las capas se pueden definir como páginas que se pueden incrustar dentro de otras. Los atributos de una capa (posición, visibilidad, etc.) como los de cualquier otro elemento HTML, puede definirse dentro de una hoja de estilo Su contenido, como siempre, deberá ser especificado dentro de la parte principal de la página. La definición de una capa sigue la misma estructura que la que utilizamos para definir las características de los distintos estilos, pero precedida por el carácter #, ya sea en una hoja interna o externa. Ejemplo: en un archivo .css #micapa { position: absolute; top: 100px; left: 20px; } Dentro del archivo .html se añadirá: NOTA: SI EN TOP PONEMOS 0px se subiría arriba de la pantalla Esto colocaría a la capa que hemos denominado “micapa” a 20 pixeles de la izquierda de la página y a 100 del comienzo de la misma. Si ponemos un DIV y dentro de él otro DIV2 y primero cerramos DIV2 y luego DIV, la capa de DIV2 realizará sus características de los atributos con respecto a DIV. Archivo .CSS

esta es una capa amarilla que será el punto de partida para la roja asdfasdfasdfasdfadfsdfasdfasdfasdfasdfasdfssss(…) esta parte se colocará con respecto a la capa amarilla asdfasdfa(…) SI NO ESTUVIESE ASÍ:

esta es una capa amarilla que será el punto de partida para la roja (…) esta parte se colocará con respecto a la capa amarilla (…)

PROPIEDADES DE CAPAS Width y height: Determinan la anchura y la altura de la capa Los valores que toman son en pixeles. EJEMPLO: PARA QUE ESTÉN A LA MISMA ALTURA LAS CAPAS, UNA AL LADO DE OTRA. #capaamarilla { position: absolute; top: 100px; left: 20px; background-color: yellow; width: 350px; height:400px; } #caparoja { position: absolute; top: 100px; left: 360px; right: 20; background-color: red; width: 350px; height:400px; } #caparoja2 { position: absolute; top: 400px; left: 25px; background-color: red; }

Caperucita era una niña que quería mucho a su abuelita, (…). La madre le advirtió que mientras estuviera en el bosque (…). Cuando ya estaba en el bosque, se encontró con el lobo, (…). Entonces el lobo retó a Caperucita a correr una carrera hacia la anciana. (…) ¡Qué ojos más grandes tienes! dijo Caperucita. ¡Para verte mejor! dijo el Lobo. ¡Qué orejas más grandes tienes! exclamó Caperucita. ¡Para oírte mejor! aulló el Lobo. ¡Y qué dientes más grandes tienes! se sorprendió Caperu. ¡Para comerte mejor! se relamió el Lobo.

CLIP Recortará la capa creando un cuadro visible. Nos permite definir el área que se podrá ver dentro de la capa. Clip:rect(top, right, bottom, left) [va en la dirección de las agujas del reloj] es una propiedad más de la capa que definimos en un .css /* comentario: Clip:rect(top, right, bottom, left) El valor inicial de la propiedad clip es auto, que muestra la caja tal y como es originalmente, sin recortar sus contenidos. El otro valor que se puede utilizar en la propiedad clip es una forma geométrica rectangular que se define mediante la palabra reservada rect.

Por ejemplo: Clip:rect(20px 30px 40px 10px) La esquina superior izquierda está a 20 pixeles de la parte superior, 30 hasta el margen de la derecha, 40 pixeles hasta la parte inferior y 10 pixeles desde la izquierda. EJEMPLO: en un archivo .css #CAJA1 { Position: absolute; Top: 10px; Left: 50%; Width: 300px; Height: 300px; Background-color: aqua; Clip:rect(75px, 175px, 245px, 40px); } #CAJA2 { Position: absolute; Top: 8px; Left: 8px ; Width: 400px; Height: 400px; Background-color: purple; Clip:rect(25px, 85px, 116px, 15px); }

HOLA MUNDO El título de la Capa1 Aquí es donde iría el texto asd fasdfasdf asdfasdf adsfasdfas dfasdf asdfs dfasdf asas dsdf afdasd fafdafafdqafdqqafdqqafdafdafdjñl lj lñj lj lj l jñlj ñlj ñlkjñlkjñlkjñlkjñlkjñlkj ñlk j

puedo meter cualquier etiqueta de HTML. como: listas tablas imágenes este párrafo pertenece a la segunda página puedo poner muchas cosas tantas como necesite

Z-INDEX Define un grado de prioridad. Las capas con un mayor z-index se colocarán más arriba (se dibujarán encima de las otras). Debe ser un valor positivo y único: dos capas no pueden tener el mismo zindex. Valor que toman: número positivo, por defecto las capas definidas en el código HTML más tarde están más arriba.

La modificación se realiza en el archivo .css o en la parte de estilos: #capaamarilla { position: absolute; top: 40px; left: 150px; background-color: yellow; z-index:1; } #caparoja { position: absolute; top: 30px; left: 40px; background-color: red; z-index:2; } #caparoja2 { position: absolute; top: 40px; left: 10px; background-color: purple; z-index:3; }

VISIBILITY Especifican si la capa debe verse o estar oculta. Valores que toman: visible; hidden (oculta) o inherit (hereda la visibilidad de la capa padre). En aquellas capas que simplemente estén dentro de la página principal, este valor es equivalente a visible. Solo se modifica los estilos o el archivo .css: 1- Que se vean todas las capas #capaamarilla { position: absolute; top: 40px; left: 2px; background-color: yellow; z-index:1; height: 150px; width: 150px; visibility: visible; } #caparoja { position: absolute; top: 40px; left: 163px; background-color: red; z-index:2; height: 150px; width: 150px; visibility: visible; } #capamorada { position: absolute; top: 40px; left: 324px; background-color: purple; z-index:3; height: 150px; width: 150px; visibility: visible; }

2- Que no se vea la última capa

#capaamarilla { position: absolute; top: 40px; left: 2px; background-color: yellow; z-index:1; height: 150px; width: 150px; visibility: visible; } #caparoja { position: absolute; top: 40px; left: 163px; background-color: red; z-index:2; height: 150px; width: 150px; visibility: visible; } #capamorada { position: absolute; top: 40px; left: 324px; background-color: purple; z-index:3; height: 150px; width: 150px; visibility: hidden; }

3- Que no se vea la capa del medio #capaamarilla { position: absolute; top: 40px; left: 2px; background-color: yellow; z-index:1; height: 150px; width: 150px; visibility: visible; } #caparoja { position: absolute; top: 40px; left: 163px; background-color: red; z-index:2; height: 150px; width: 150px; visibility: hidden; } #capamorada { position: absolute; top: 40px; left: 324px; background-color: purple; z-index:3; height: 150px; width: 150px; visibility: visible; }

4- Que una capa herede la visibilidad del padre

PROPIEDADES DE IMAGEN: Background-image - Gráfico de fondo de la capa - Valor que toma: una dirección donde se almacena la imagen - Background-image: url(dirección) Background-color - Color de fondo de la capa - Valor que toman: un color Background-repeat Las propiedades Background-repeat controla la forma en la que se repiten las imágenes de fondo de los elementos. Por defecto, si la imagen de fondo se establece es más pequeña que el sitio disponible, el navegador repite la imagen en todas las direcciones hasta cubrir completamente la superficie del elemento Valores: - Repeat. - No-repeat - Repeat-x (repite sólo en dirección horizontal) - Repeat-y (repite sólo en dirección vertical) Background-position Controla la posición de las imágenes de fondo Tres opciones de valor: - Left – center – right - Top – center – bottom - Marca distancia respecto el origen, por ejemplo: Background-position: 10px 30px Mantiene la imagen a 10px de la izquierda y a 30px de la parte superior EJEMPLO:





IFRAMES Sirve para crear un espacio dentro de la página donde se puede incrustar otra web. Es un cuadrado cuyas dimensiones debe especificar el desarrollador en la propia etiqueta iframe, que tiene asociada una página web que se carga en dicho espacio. Esta página web tendrá sus propios contenidos y estilos, independientes del contexto donde se está mostrando. Además será perfectamente funcional: si tiene enlaces se mostrarán en ese mismo espacio y si tiene scripts o aplicaciones dentro de se ejecutarán también en el espacio reservado al iframe. La etiqueta está dentro del body.

tu navegador no soporta frames!! Src: para indicar la página web que se mostrará en el espacio del frame flotante Width: para definir la anchura del recuadro del iframe Height: para definir la altura del iframe Name: para especificar el nombre del frame que podeos utilizar luego para referirnos a él con el target de los links, o mediante javascript. Frameborder: para definir si queremos o no que haya un borde en el frame. Los valore sposibles son 0|1. Frameborder=”0” indicarí que no queremos borde y frameborder=”1” sí lo tendremos. Scrolling: indica si se quiere que aparezcan barras de desplazamiento del contenido de iframe completo. Los valores posibles son: yes|no|auto Marginwidth: para definir el margen a la izquierda y derecha que debe tener la página que se va dentro del iframe, con respecto al borde. Este margen va en pixels, pero prevalecerá el margen que pueda tener asignada la página web que mostremos en el frame flotante. Marginheight: similar al anterior, para el tamaño del margen por la parte de arriba y abajo.

MODELO DE CAJA Tarde o temprano, todo libro o taller práctico de CSS queda bajo la influencia del Modelo de Caja. Es uno de los elementos básicos de las Hojas de Estilo en Cascada y por lo tanto su correcta interpretación resulta fundamental a la hora de lograr los resultados deseados en un diseño, por más simple que éste resulte. Para entrar en tema, vamos a construir un sencillo ejemplo utilizando un único elemento al que aplicaremos un estilo. El resultado producido será analizado con la ayuda de una figura en la que hemos modelado el orden de apilado de los elementos del en una disposición tridimensional que nos ayudará a comprenderlo. Supongamos el siguiente código (lo mostramos fuera de su contexto, restringiéndonos a lo significativo para el ejemplo): El elemento Este es el contenido de nuestra caja. Este es el contenido de nuestra caja. Este es el contenido de nuestra caja. Este es el contenido de nuestra caja. El estilo div { background-color: #be4061; /*color bordó para el fondo*/ background-image: url('cabeza.jpg'); border: 10px solid #e7a219; /*color naranja para el borde*/ margin: 10px; padding: 20px; } p{ margin: 0 0 20px 0; /*margen inferior de 20 px para el párrafo*/ padding: 0; } El código anterior generará una caja como la que muestra la figura siguiente, en la que adicionalmente se ha dado color a los elementos transparentes (margen y relleno) solo para hacerlos visibles.

Un detalle interesante que puede apreciarse en la representación tridimensional en que la capa superior del apilamiento no es el borde, como podría suponerse intuitivamente. La capa situada encima de todas las demás es la de Contenido. Aunque el caso específico sea materia de otro artículo, comentaremos que esta disposición fue utilizada por el diseñador Douglas Bowman de Stopdesign para el rediseño del sitio de Blogger, logrando las armoniosas líneas curvas de sus páginas mediante CSS, ubicando imágenes en la capa de Contenidos de modo que oculten el borde anguloso de las cajas.

Áreas y propiedades Cada caja posee, además de su área de Contenido, otras tres áreas opcionales: * Área de Margen - Margin * Área de Relleno - Padding * Área de Borde - Border Cada área, a su vez, puede dividirse en cuatro segmentos según su posición: izquierdo (left), derecho (right), superior (top) e inferior (bottom). El tamaño de cada área o de sus segmentos está dado por el valor de las respectivas propiedades, definidas en forma global o discriminadas por segmento. Por ejemplo, la siguiente sentencia asignará un margen homogéneo de 20 píxeles alrededor de la caja: div { margin: 20px } Si en cambio se desea asignar valores distintos a cada uno de los segmentos, pueden reflejarse los cuatro valores numéricos siguiendo el orden top - right - bottom - left. El siguiente ejemplo asigna 10 píxeles arriba, 5 a la derecha, 20 abajo y nada a la izquierda: div { margin: 10px 5px 20px 0 } Pueden especificarse valores también con la siguiente notación, en la que ya no es necesario mantener el orden: div { margin-top: 10px ; margin-right: 5px ; margin-bottom: 20px ; }

En cualquier caso puede obviarse el valor 0 ya que es el valor que toman las propiedades por defecto. La lista completa de propiedades es la siguiente: Propiedades del Margen "margin-top", "margin-right", "margin-bottom", "margin-left" y "margin" Propiedades del Relleno "padding-top", "padding-right", "padding-bottom", "padding-left" y "padding" Propiedades del Borde 1) Ancho (width) "border-top-width", "border-right-width", "border-bottom-width", "border-left-width" y "borderwidth". Pueden ser valores específicos o los valores "thin" (fino), "medium" (medio) y "thick" (grueso) 2) Color (color) "border-top-color", "border-right-color", "border-bottom-color", "border-left-color" y "bordercolor" 3) Estilo (style) "border-top-style", "border-right-style", "border-bottom-style", "border-left-style" and "borderstyle". Toma una serie de posibles valores, tales como: none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset. Es una propiedad algo conflictiva ya que no todos los navegadores interpretan sus valores de la misma manera. Como corolario de esta aproximación al modelo de caja resta analizar qué es lo que se verá en cada área cuando la página se muestre en un navegador:  En el área de Contenido y en la de Relleno se verá aquello que se determine en la propiedad "background" del elemento (un color o una imagen, según el orden de apilado).  En el área de Borde se verá aquello que se determine en las propiedades del Borde (ancho, color y estilo).  El área de Margen es siempre transparente.

ATRIBUTOS DE CSS FUENTES - FONT Color valor RGB o nombre de color color: #009900; color: red; Sirve para indicar el color del texto. Lo admiten casi todas las etiquetas de HTML. No todos los nombres de colores son admitidos en el estándar, es aconsejable entonces utilizar el valor RGB. Font-size xx-small | x-small | small | medium | large | x-large | xx-large Unidades de CSS font-size:12pt; font-size: x-large; Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud. Font-family serif | sans-serif | cursive | fantasy | monospace Todas las fuentes habituales font-family:arial,helvetica; font-family: fantasy; Con este atributo indicamos la familia de tipografia del texto. Los primeros valores son genéricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema.

También se pueden definir con tipografías normales, como ocurría en html. Si el nombre de una fuente tiene espacios se utilizan comillas para que se entienda bien. font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 font-weight:bold; font-weight: 200; Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad. Normal y 400 son el mismo valor, así como bold y 700. Font-style normal | italic | oblique font-style: normal; font-style: italic; Es el estilo de la fuente, que puede ser normal, itálica u oblicua. El estilo oblicue es similar al italic. PÁRRAFOS - TEXT Line-height normal y unidades CSS line-height: 12px; line-height: normal; El alto de una línea, y por tanto, el espaciado entre líneas. Es una de esas características que no se podían modificar utilizando HTML. Text-decoration none | [ underline || overline || line-through ] text-decoration: none; text-decoration: underline; Para establecer la decoración de un texto, es decir, si está subrayado, sobrerayado o tachado. Text-align left | right | center | justify text-align: right; text-align: center; Sirve para indicar la alineación del texto. Es interesante destacar que las hojas de estilo permiten el justificado de texto, aunque recuerda que no tiene por qué funcionar en todos los sistemas. Text-indent Unidades CSS text-indent: 10px; text-indent: 2in; Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa. Text-transform capitalize | uppercase | lowercase | none text-transform: none; text-transform: capitalize; Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabras, todo en mayúsculas o minúsculas. FONDO - BACKGROUND Background-color Un color, con su nombre o su valor RGB background-color: green; background-color: #000055; Sirve para indicar el color de fondo de un elemento de la página. Background-image El nombre de la imagen con su camino relativo o absoluto

background-image: url(mármol.gif) ; background-image: url(http://www.x.com/fondo.gif) BOX - CAJA Margin-left Unidades CSS margin-left: 1cm; margin-left: 0,5in; Padding-right= anchura de relleno. Valor en pixels La especificación de estilos CSS es muy amplia, seguro que se queda en el tintero algún atributo de estilo, pero creo que la inmensa mayoría están, y por supuesto la selección de los más importantes.

Trucos avanzados con CSS Las hojas de estilos son un tema largo del que se han escrito libros enteros. Nosotros nos centramos en los temas prácticos y por ello vamos a acabar ya con este capítulo, en unos cuantos puntos Definir estilos utilizando clases Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces. Indicamos con este atributo el tamaño del margen a la izquierda Margin-right margin-right: 5%; margin-right: 1in; Se utiliza para definir el tamaño del margen a la derecha Margin-top margin-top: 0px; margin-top: 10px; Indicamos con este atributo el tamaño del margen arriba de la página Margin-bottom margin-bottom: 0pt; margin-top: 1px; Con él se indica el tamaño del margen en la parte de abajo de la página Padding-left padding-left: 0.5in; padding-left: 1px; Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas. El espacio insertado tiene el mismo fondo que el fondo del elemento-continente. Padding-right padding-right: 0.5cm; padding-right: 1pt; Indica el espacio insertado, en este caso por la derecha, entre el borde del Elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas. El espacio insertado tiene el mismo fondo que el fondo del elemento-continente. Padding-top padding-top: 10pt; padding-top: 5px; Indica el espacio insertado, por arriba, entre el borde del elemento-continente y el contenido de este. Padding-bottom padding-right: 0.5cm; padding-right: 1pt; Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-continente y el contenido de este. Border-color

color RGB y nombre de color border-color: red; border-color: #ffccff; Para indicar el color del borde del elemento de la página al que se lo aplicamos. Se puede poner colores por separado con los atributos border-top-color, border-right-color, border-bottom-color, borderleft-color. Border-style none | dotted | solid | double | groove | ridge| inset | outset border-style: solid; border-style: double; El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece funcionar), solid=solido, double=doble borde, y desde groove hasta outset son bordes con varios efectos 3D. border-width border-width: 10px; border-width: 0.5in; El tamaño del borde del elemento al que lo aplicamos. Float none | left | right float: right; Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho elemento. Igual que el atributo align en imágenes en sus valores right y left. Clear none | right | left clear: right; Si este elemento tiene a su altura imágenes u otros elementos alineados a la derecha o la izquierda, con el atributo clear hacemos que se coloque en un lugar donde ya no tenga esos elementos al lado que indiquemos.

EJEMPLOS EJERCICIOS

ARCHIVO .CSS /* Todos los elementos de la pagina */ * { font: 1em/1.3 Arial, Helvetica, sans-serif; } /* Todos los párrafos de la pagina */ p { color: #555; } /* Solo los párrafos contenidos en #primero */ #primero p { color: #336699; } /* Todos los enlaces la pagina */ a { color: #CC3300; } /* Los elementos em contenidos en #primero */ #primero em { background: #FFFFCC; padding: .1em; } /* Todos los elementos em de tipo especial en toda la pagina */

em.especial { background: #FFCC99; border: 1px solid #FF9900; padding: .1em; } /* Elementos span contenidos en .normal */ .normal span { font-weight: bold; } ARCHIVO .HTML Ejercicio de selectores Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit nibh at felis. Sed nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non facilisis molestie, lorem sem aliquam nulla, id lacinia velit mi vestibulum enim. Phasellus eu velit sed lorem sodales egestas. Ut feugiat. Donec porttitor, magna eu varius luctus, metus massa tristique massa, in imperdiet est velit vel magna. Phasellus erat. Duis risus. Maecenas dictum, nibh vitae pellentesque auctor, tellus velit consectetuer tellus, tempor pretium felis tellus at metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin aliquam convallis ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc aliquet. Sed eu metus. Duis justo. Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, enim id iaculis congue, orci justo ultrices tortor, quis lacinia eros libero in eros. Sed malesuada dui vel quam. Integer at eros. (Si queréis podéis añadir el de imágenes – el ejercicio en el que se repetían y demás –, si lo tenéis; el ejercicio de capas del otro día también podéis ponerlo GRACIAS)

ARCHIVO .CSS

/* El cuerpo de la página tiene un margen izquierdo de 11em, color de fuente rojo, color de fondo “#d8da3d” y utilizará como tipo de fuente “Times New Roman” y si no existiera, fuente “Serif” */ body { padding-left: 11em; color: red; background-color: #d8da3d; font-family: "Times New Roman", "Serif"; } /* La cabecera H1 utilizará las siguientes fuentes (en este orden): “Helvetica", "Geneva", "Arial" y "Sansserif" */ h1 { font-family: “Helvetica", "Geneva", "Arial", "Sans-serif"; }

/* Los párrafos marcados con ese selector, tendrán un color de fondo amarillo, el texto en negro con la fuente “Comic Sans Ms” y un borde sólido azul de un ancho de 0.5in */ p{ background-color: yellow; color: black; font-family: Comic Sans Ms; border: solid blue; border-width: 0.5in; } ARCHIVO .HTML ARCHIVO .CSS ARCHIVO .HTML ARCHIVO .CSS ARCHIVO .HTML