CSSIntegrar CSS con htmlLas hojas de estilo nos permiten especificar atributos para los elementos de la pgina Web, dndonos mayor control sobre el aspecto de nuestros documentos Lo ms importante es que podemos emplear hojas de estilo como patrones o pginas maestras de forma que mltiples pginas puedan tener el mismo aspecto Las hojas de estilo pueden crearse empleando dos tipos de sintaxis, CSS () y JavaScript BENEFICIOS 1. Separacin entre contenidos (cdigo html) y estructura 2. Control ms preciso de la apariencia. CSS permite crear texto con exactamente 80 pxeles de alto, especificar mrgenes de forma fcil, controlar el espacio entre lneas o palabras, etc. 3. Pginas ms pequeas y giles 4. Gestin de cambios ms rpidos y fcil 5. Transparente para el usuario 6. El lenguaje es sencillo y fcil de aprender 7. Generan documentos ms compactos 8. Reutilizan cdigo 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 segn sea para Windows, Mac u otros 3. Tambin existen diferencias entre distintas versiones de un mismo navegador DEFINICIN DE REGLAS DE ESTILO Una regla de estilo es la declaracin 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 declaracin: que establece las propiedades y valores a aplicar sobre los elementos seleccionados.

UTILIZACIN DE CSS SINTAXISSelector { 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 mtodos para poder usar las Hojas de Estilo asociadas a las pginas Web, cada una con sus ventajas e inconvenientes: 1. Incrustar las Hojas de Estilo dentro de las pginas Web. 2. Enlazar con una Hoja de Estilo desde un documento HTML. 3. Importar a un documento HTML una Hoja de Estilo externa. 4. Aadir estilos en los elementos de los documentos HTML. Es posible usar ms de uno de estos mtodos.

INCRUSTAR HOJAS DE ESTILO EN UN DOCUMENTO WEB

Toda la informacin acerca del estilo de la pgina se sita en la seccin del cdigo HTML, separndolo de la seccin . Este mtodo debera 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 cdigo que define el estilo. Se debe usar la especiacin 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 cdigo de las etiquetas en la pgina 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 prrafo.. Este texto es escrito sin la etiqueta P Y se guarda como extensin: .html

-

-

ENLAZAR CON UNA HOJA DE ESTILO DESDE UN DOCUMENTO HTMLAdems de poder incluir cdigo de este estilo en una pgina web, tambin se puede usar en mltiples documentos HTML una nica declaracin de hoja de estilo. Este estilo se aplicar a todas las pginas que le referencien y un cambio en este estilo se ver automticamente reflejado en las pginas 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, tambin, 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 EXTERNAEsta accin es muy similar a enlazarla La diferencia est en que no se permite combinar el uso de Hojas de Estilo enlazadas con otros mtodos, mientras que s que es posible hacerlo usando la importacin de Hojas de Estilo externas. Si quieres utilizar el estilo que tienen todas las dems pginas pero solo quieres redefinir una etiqueta. SI se mezclan las dos formas anteriores en un archivo .html, el navegador har caso al ltimo cdigo:

Mi primera Hoja de Estilo

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

AADIR ESTILOS EN LOS ELEMENTOS DE LOS DOCUMENTOS HTMLPor ltimo, se puede definir estilos directamente dentro de los elementos HTML. Esto implica mezclar las reglas de estilo de nuestro cdigo HTML. Mi primera Hoja de Estilo el formato de esta cabecera la he definido yo de igual forma he definido yo este prrafo.. Este texto es escrito sin la etiqueta P

Comando DIV 1El comando DIV Instruccin 1 Instruccin 2 Instruccin n Las instrucciones 1, 2N, se vern 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.

AGRUPAMIENTOPara reducir el tamao de las hojas de estilo, se pueden agrupar selectores en listas separndoles con una coma:

1 archivo: .cssH1, H2, H3 { color: red; font-family: helvetica; text-align: center; }

2 archivo: .html Ttulo Esta es la Cabecera h1 Esta es la Cabecera h2 Esta es la Cabecera h3 Esta es la Cabecera h4

DEFINIR ESTILOS UTILIZANDO CLASESLas 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 pgina. 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, ponindole como valor el nombre de la clase, de esta forma: Ejemplo de la utilizacin de clases

Anlogamente, las declaraciones tambin pueden agruparse: H1 { Font-wight: bold; Font-size: 12pt; Line-height: 14pt; Font-family: Helvetica; Font-variant: normal; Font-style: normal; } Adems, algunas propiedades tienen su propia agrupacin. Pudindolo transformar en: H1 { font: bold 12pt/14pt helvtica } Supongamos que al selector H1 le damos el color azul en una hoja de estilos: H1 { color: blue; } El ttulo es importante! Si no se ha asignado ningn color al elemento EM (PODRA SER CUALQUIER OTRA ETIQUETA), la palabra es enfatizada heredar el color del elemento padre, es decir, tambin 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 aadido un nuevo elemento HTML: el atributo CLASS. La forma de usarlo es la siguiente: Cuando se defina el estilo del selector se pondra: 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 CONTEXTUALESSupongamos que queremos que los elementos EM (enfatizar) contenidos en un H1 salgan en un color diferente, para esto se podra especificar lo siguiente: En la hojas de estilos: H1 { color: blue; } EM { color: red; } Todas las secciones enfatizadas saldrn en rojo, estn dentro o fuera de un H1. Pero es probable que solo quisiramos 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 PRRAFO EN NEGRITA SIN OTRO ATRIBUTO

TAMBIN SE PUEDE HACER CON CAPAS:

Archivo .css/* Todos los parrafos de la pagina */ p { color: "red"; } /* Todos los prrafos 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, demostrars que entiendes CSS, pero tendrs que seguir trabajando.

LOS COMENTARIOS EN CSSSon similares a los del lenguaje C: /* Esta enfatizacin va en rojo */

PSEUDO-CLASES Y PSEUDO-ELEMENTOSPSEUDO-CLASES DE VNCULOLos navegadores suelen representar los vnculos no visitados de manera distinta a los visitados. En CSS, se puede actuar sobre esto a travs de pseudo-clases del elemento A: PRIMEROS COMANDOS: otro atributo es text-decoration: (underline, strike); A:link { color: valor} /* vnculo no visitados */ A:visited { color: valor} /* vnculos visitados */ A:hover { color: valor} /* vnculos sobre los que est el cursor del ratn, cambia de color */ A:active { color: valor} /* vnculo activos, un vnculo 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 vnculo se trata como si la clase se hubiera insertado manualmente Las pseudo-clases de vnculo no tendrn ningn 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 tambin 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,
estn definidos por clases
Opciones 1 Enlace clase1 Otro de clase1 Ms enlaces Todava ms

PSEUDO ELEMENTOS TIPOGRFICOSPermiten aplicar algunos efectos tipogrficos al formato del documento en el lienzo. Principalmente son dos: los que afectan a la primera lnea de un elemento, y los que afectan a la primera letra.

Pseudo-elemento first-lineEl pseudo-elemento first-line se utiliza para aplicar estilos especiales a la primera lnea 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-letterEl pseudo-elemento first-letter se utilice para letras capitales, que es un efecto tipogrfico muy comn 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 Prrafo de 20pt Primera lnea del prrafo vardena, naranja, letra large, color de fondo verde.
esto es el prrafo normal.esto es el prrafo normal.esto es el prrafo normal.esto es el prrafo normal. () Primera lnea de cada prrafo se caracteriza por texto arial, tamao xx-large, rojo y de fondo azul.
esto es el prrafo normal.esto es el prrafo normal.esto es el prrafo normal.esto es el prrafo normal. () Primera lnea del prrafo vardena, naranja, letra large, color de fondo verde.
esto es el prrafo normal.esto es el prrafo normal.esto es el prrafo normal.esto es el prrafo normal.() Primera lnea de cada prrafo se caracteriza por texto arial, tamao xx-large, rojo y de fondo azul.
esto es el prrafo normal.esto es el prrafo normal.esto es el prrafo normal.esto es el prrafo normal. ()

CAPASPara poner la capa en un documento es necesario utilizar la etiqueta DIV dentro de body: Las capas se pueden definir como pginas que se pueden incrustar dentro de otras. Los atributos de una capa (posicin, 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 pgina. La definicin de una capa sigue la misma estructura que la que utilizamos para definir las caractersticas de los distintos estilos, pero precedida por el carcter #, 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 aadir: NOTA: SI EN TOP PONEMOS 0px se subira arriba de la pantalla Esto colocara a la capa que hemos denominado micapa a 20 pixeles de la izquierda de la pgina 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 caractersticas 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 CAPASWidth y height: Determinan la anchura y la altura de la capa Los valores que toman son en pixeles. EJEMPLO: PARA QUE ESTN 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 nia que quera 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 ms grandes tienes! dijo Caperucita. Para verte mejor! dijo el Lobo. Qu orejas ms grandes tienes! exclam Caperucita. Para orte mejor! aull el Lobo. Y qu dientes ms grandes tienes! se sorprendi Caperu. Para comerte mejor! se relami el Lobo. CLIPRecortar 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 direccin de las agujas del reloj] es una propiedad ms 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 geomtrica 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 ttulo de la Capa1 Aqu es donde ira el texto asd fasdfasdf asdfasdf adsfasdfas dfasdf asdfs dfasdf asas dsdf afdasd fafdafafdqafdqqafdqqafdafdafdjl lj lj lj lj l jlj lj lkjlkjlkjlkjlkjlkj lk j puedo meter cualquier etiqueta de HTML. como: listas tablas imgenes este prrafo pertenece a la segunda pgina puedo poner muchas cosas
tantas como necesite Z-INDEXDefine un grado de prioridad. Las capas con un mayor z-index se colocarn ms arriba (se dibujarn encima de las otras). Debe ser un valor positivo y nico: dos capas no pueden tener el mismo zindex. Valor que toman: nmero positivo, por defecto las capas definidas en el cdigo HTML ms tarde estn ms arriba.La modificacin 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; }VISIBILITYEspecifican 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 estn dentro de la pgina 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 padrePROPIEDADES DE IMAGEN:Background-image - Grfico de fondo de la capa - Valor que toma: una direccin donde se almacena la imagen - Background-image: url(direccin) 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 imgenes de fondo de los elementos. Por defecto, si la imagen de fondo se establece es ms pequea 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 slo en direccin horizontal) - Repeat-y (repite slo en direccin vertical) Background-position Controla la posicin de las imgenes 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: IFRAMESSirve para crear un espacio dentro de la pgina donde se puede incrustar otra web. Es un cuadrado cuyas dimensiones debe especificar el desarrollador en la propia etiqueta iframe, que tiene asociada una pgina web que se carga en dicho espacio. Esta pgina web tendr sus propios contenidos y estilos, independientes del contexto donde se est mostrando. Adems ser perfectamente funcional: si tiene enlaces se mostrarn en ese mismo espacio y si tiene scripts o aplicaciones dentro de se ejecutarn tambin en el espacio reservado al iframe. La etiqueta est dentro del body. tu navegador no soporta frames!! Src: para indicar la pgina 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 pgina que se va dentro del iframe, con respecto al borde. Este margen va en pixels, pero prevalecer el margen que pueda tener asignada la pgina web que mostremos en el frame flotante. Marginheight: similar al anterior, para el tamao del margen por la parte de arriba y abajo.MODELO DE CAJATarde o temprano, todo libro o taller prctico de CSS queda bajo la influencia del Modelo de Caja. Es uno de los elementos bsicos de las Hojas de Estilo en Cascada y por lo tanto su correcta interpretacin resulta fundamental a la hora de lograr los resultados deseados en un diseo, por ms 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 disposicin tridimensional que nos ayudar a comprenderlo. Supongamos el siguiente cdigo (lo mostramos fuera de su contexto, restringindonos 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 prrafo*/ padding: 0; } El cdigo 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 representacin tridimensional en que la capa superior del apilamiento no es el borde, como podra suponerse intuitivamente. La capa situada encima de todas las dems es la de Contenido. Aunque el caso especfico sea materia de otro artculo, comentaremos que esta disposicin fue utilizada por el diseador Douglas Bowman de Stopdesign para el rediseo del sitio de Blogger, logrando las armoniosas lneas curvas de sus pginas mediante CSS, ubicando imgenes en la capa de Contenidos de modo que oculten el borde anguloso de las cajas.reas y propiedades Cada caja posee, adems 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 segn su posicin: izquierdo (left), derecho (right), superior (top) e inferior (bottom). El tamao 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 homogneo de 20 pxeles 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 numricos siguiendo el orden top - right - bottom - left. El siguiente ejemplo asigna 10 pxeles arriba, 5 a la derecha, 20 abajo y nada a la izquierda: div { margin: 10px 5px 20px 0 } Pueden especificarse valores tambin con la siguiente notacin, 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 especficos 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 aproximacin al modelo de caja resta analizar qu es lo que se ver en cada rea cuando la pgina 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, segn 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 CSSFUENTES - 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 estndar, 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 tamao de las fuentes de manera ms rgida 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 genricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema.Tambin se pueden definir con tipografas normales, como ocurra 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, itlica u oblicua. El estilo oblicue es similar al italic. PRRAFOS - TEXT Line-height normal y unidades CSS line-height: 12px; line-height: normal; El alto de una lnea, y por tanto, el espaciado entre lneas. Es una de esas caractersticas que no se podan modificar utilizando HTML. Text-decoration none | [ underline || overline || line-through ] text-decoration: none; text-decoration: underline; Para establecer la decoracin 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 alineacin 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 mrgenes en las pginas. 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 maysculas de todas las palabras, todo en maysculas o minsculas. 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 pgina. Background-image El nombre de la imagen con su camino relativo o absolutobackground-image: url(mrmol.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 especificacin de estilos CSS es muy amplia, seguro que se queda en el tintero algn atributo de estilo, pero creo que la inmensa mayora estn, y por supuesto la seleccin de los ms importantes.Trucos avanzados con CSSLas hojas de estilos son un tema largo del que se han escrito libros enteros. Nosotros nos centramos en los temas prcticos y por ello vamos a acabar ya con este captulo, 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 tamao del margen a la izquierda Margin-right margin-right: 5%; margin-right: 1in; Se utiliza para definir el tamao del margen a la derecha Margin-top margin-top: 0px; margin-top: 10px; Indicamos con este atributo el tamao del margen arriba de la pgina Margin-bottom margin-bottom: 0pt; margin-top: 1px; Con l se indica el tamao del margen en la parte de abajo de la pgina 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-colorcolor RGB y nombre de color border-color: red; border-color: #ffccff; Para indicar el color del borde del elemento de la pgina 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 tamao 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 imgenes en sus valores right y left. Clear none | right | left clear: right; Si este elemento tiene a su altura imgenes 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 EJERCICIOSARCHIVO .CSS /* Todos los elementos de la pagina */ * { font: 1em/1.3 Arial, Helvetica, sans-serif; } /* Todos los prrafos de la pagina */ p { color: #555; } /* Solo los prrafos 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 queris podis aadir el de imgenes el ejercicio en el que se repetan y dems , si lo tenis; el ejercicio de capas del otro da tambin podis ponerlo GRACIAS)ARCHIVO .CSS/* El cuerpo de la pgina 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 prrafos marcados con ese selector, tendrn un color de fondo amarillo, el texto en negro con la fuente Comic Sans Ms y un borde slido 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