Lenguaje de Marcas - CSS
-
Upload
patrycia-fernandez-cardero -
Category
Documents
-
view
299 -
download
1
description
Transcript of Lenguaje de Marcas - CSS
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