Bloque2 CSS Hojas de Estilo en Cascada

8/2/2019 Bloque2 CSS Hojas de Estilo en Cascada

1/13

W3C, Gua Breve de CSS

CSS (hojas de estilo en cascada)

"Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple quedescribe cmo se va a mostrar un documento en la pantalla, o cmo se va aimprimir, o incluso cmo va a ser pronunciada la informacin presente en esedocumento a travs de un dispositivo de lectura. Esta forma de descripcin deestilos ofrece a los desarrolladores el control total sobre estilo y formato de susdocumentos."

Hasta ahora hemos visto que hay al menos dos capas bien definidas y separadas en laspginas web: contenido y apariencia. La estructura y el contenido se definen mediante lautilizacin de etiquetas HTML. Hemos aprendido tambin cmo es la sintaxis del lenguajeHTML y cules son sus principales etiquetas. Tambin hemos visto que podemos dar nombrea los elementos utilizando identificadores y clases.

La apar ienc ia (e l d i seo) f i na l se de f in i r m ed ian te CSS. Con CSS podemos decir (quelos prrafos sean de color gris oscuro, que los enlaces sean de color verde, excepto elenlace con el identificador help, que ser rojo o que todas las imgenes tengan un borde de

un pxel de color negro).

En realidad, toda la apariencia y el posicionamiento de nuestra pgina se definen medianteCSS. Una determinada capa aparecer a la derecha o a la izquierda de nuestro documentoporque as lo hemos especificado mediante CSS.

En este apartado, vamos a aprender cmo incluir definiciones CSS en nuestras pginas, cules la sintaxis de CSS y cules son las principales definiciones que podemos utilizar paradefinir la apariencia de nuestras pginas.

Tambin aprenderemos algunos trucos que nos servirn para sacar el mximo partido alAsisten t e CSS de EducaMadr id .

CS S ( h o j a s d e e s t i l o e n c a s c a d a )

1 . I n t r o d u c c i n

2 . M a n e r a s d e i n c l u i r l o s e s t i l o s CS S
http://www.w3c.es/divulgacion/guiasbreves/hojasestilohttp://www.w3c.es/divulgacion/guiasbreves/hojasestilo


2/13

Tenemos una pgina HTML con un prrafo:

Documento sin ttulo

Soy un prrafo de prueba

Hay v a r ias fo rm as de inc lu i r de f in i c iones CSS:

En lnea, utilizando el atributo style.En la cabecera de nuestro documento, definiendo estilos para toda la pgina.En un archivo externo, definiendo estilos para toda la pgina o todo un sitio web.Utilizando la etiqueta @import.

Podemos definir la apariencia de un determinado elemento directamente en el propioelemento. Por ejemplo: si queremos que el prrafo de nuestra pgina sea de color, rojo,podemos hacer:

Soy un prrafo de prueba.

El resultado sera:

Soy un prrafo de prueba.

Vamos a hacer que los prrafos de nuestra pgina sean de color rojo:

Documento sin ttulo

p{

color:red;}


Dentro de la etiqueta HEAD, en nuestra pgina, hemos incluido una etiqueta , y ah hemos incluido nuestras definiciones. De momento, no vamos apreocuparnos de la sintaxis; slo del funcionamiento (de la forma de incluir los CSS).

Si hemos dicho que los prrafos sean de color rojo, y lo hemos definido para toda la pgina(dentro de HEAD): todos los prrafos de la pgina seran de color rojo (salvo que

2 . 1 . CS S e n l n e a u t i l i z a n d o e l a t r i b u t o s t y l e

2 . 2 C S S e n l a c a b e c e r a d e n u e s t r o d o c u m e n t o


3/13

especificsemos lo contrario para algunos prrafos en concreto: que todos los prrafos seanrojos, excepto los que estn dentro de la capa con el identificador news, que sern de colorazul. Ya veremos cmo hacerlo).

Venta ja de hacer lo as : podemos definir la apariencia de todos los prrafos (o de cualquierotro elemento) de nuestra pgina sin necesidad de definir el color en cada uno de ellos.Hacemos una sola definicin, y esta afecta a todos los prrafos de la pgina.

Imaginemos que nuestro sitio web tiene ms de una pgina (lo ms habitual). Con el sistemaanterior, me vera obligado a decir que los prrafos son rojos en todas y cada una de mispginas. Si ms adelante quisiese que en lugar de ser rojos fuesen azules, tendra que editartodas mis pginas y cambiar el color en cada una de ellas.

Parar evitar esto, podem os inc lu i r t odas las de f in i ciones de apar iencia en un a rch ivoCSS ext ern o . Queremos que los prrafos sean rojos en todas nuestras pginas, no slo enuna, de manera que creamos un documento CSS (vamos a llamarle, por ejemplo,styles.css) y lo guardamos. El contenido de nuestro archivo sera:

p{color:red;

}

Y en nuestro archivo HTML, dentro de la etiqueta HEAD, llamamos a ese archivo:

Documento sin ttulo


Como vemos, se ha utilizado la etiqueta linkpara hacer referencia al archivo CSS externo, yel valor del atributo HREFes la ruta hasta nuestro archivo CSS.

Venta j as de hacer lo as : imaginemos que nuestro sitio web tiene 25 pginas y que la

apariencia de todas ellas est definida por el mismo archivo CSS. Si queremos que losprrafos sean azules en lugar de rojos, no tendramos ms que editar el archivo styles.css.Haciendo un solo cambio ("red" por "blue"), habramos modificado el color de todos losprrafos de las 25 pginas. Y eso es slo un ejemplo, porque hemos dicho que en CSS sedefine todo (desde dnde estn los elementos -arriba, abajo, derecha... - hasta sus tamaosy colores), de manera que modificando un nico archivo CSS podramos cambiar todo eldiseo de nuestro sitio web.

Una ven ta ja ad iciona l : el navegador cachea (memoriza) estos archivos, y hacindolo as,slo cargamos el archivo styles.css una vez. Despus, el navegador se da cuenta de que yatiene su contenido, y no vuelve a descargrselo. As nuestras pginas cargan ms rpido yconsumimos menos ancho de banda.

2 . 3 . CS S e n u n a r c h i v o e x t e r n o

2 . 4 . CS S u t i l i z a n d o l a e t i q u e t a @i m p o r t


4/13

@import url ("ruta_hasta_nuestro_archivo/styles.css");

es equivalente a:

Podemos incluir la importacin dentro del HEADde nuestro documento. Sin embargo, esta

tcnica tiene sus desventajas (no las trataremos en este curso, pero si alguien tienecuriosidad, puede conocerlas en esta pgina: www.anieto2k.com/2009/04/09/no-uses-import). Mencionamos esta tcnica nicamente para que no os extrae si en algn momentoos encontris con una importacin hecha de esa manera.

Tamb in se puede u t i l i za r l a e t ique ta @im por t en un CSS ex te rno .

Ejemplo:

Tengo un CSS general, que se llama styles.css, pero es muy grande, y he decidido dividirloen varios documentos para que actualizarlo sea ms sencillo. El resultado son tres archivos:colors.css, fonts.cssy general.css

Mi archivo styles.css podra ser as:

@import url ("general.css");@import url ("fonts.css");@import url ("colors.css");

De momento no vamos a profundizar en este punto. Comprenderemos mejor quimplicaciones tienen las lneas anteriores (el hecho de que haya unas definiciones CSSdespus de otras) ms adelante.

La sintaxis es siempre igual:

se lec tor {a t r i b u t o : va l o r ;

}

Escribimos el elemento cuya apariencia queremos modificar (e l se lecto r : "prrafo", porejemplo), abrimos llaves, escribimos la propiedad que queremos modificar (e l at r i b u t o :"color", por ejemplo) seguida de dos puntos, y escribimos el va lo r que queremos que tenga("red" rojo -, por ejemplo), despus escribimos punto y coma, para separar una definicin

de otra, y cerramos llaves.

Ejemp lo :

p{color:red;

}

Eso significa que los prrafos (" p") sern de color r ojo.

En algunos casos, los valores irn acompaados de unidades.

p{

font-size:15px;}

Eso significa que los prrafos tendrn un tam ao de letr a de 15 pxeles.

Y, por supuesto, las definiciones se pueden combinar:

3 . S i n t a x i s CS S
http://www.anieto2k.com/2009/04/09/no-uses-import/http://www.anieto2k.com/2009/04/09/no-uses-import/http://www.anieto2k.com/2009/04/09/no-uses-import/http://www.anieto2k.com/2009/04/09/no-uses-import/


5/13

p{font-size:15px;color:red;

}

Los prrafos tendrn un t amao de letra de 15 pxeles y sern de color r ojo. Como vemos,hemos separado am bas definiciones m ediante punt o y coma ( el ltimo punto y coma esprescindible, porque no hay una definicin posterior, pero no pasa nada si lo dejam os).

Adems, varios elementos pueden compartir definiciones (separamos los elementos porcomas):

p, ul{color:green;

}

Los prrafos y las listas no ordenadas ( ul, no las ordenadas: ol ) tendrn color verde.

Los coment ar ios en CSS se hacen as :

/* Contenido del comentario */

Podemos incluir comentarios entre nuestras reglas CSS para saber mejor a qu elementos

hacen referencia. Los coment a r ios no tendrn n ingn e fecto sobre la apar ienc ia .

Podem os u t i l i za r e t ique tas HTML: p, por ejemplo hace referencia a todos los prrafos;h1 hara referencia a los ttulos de primer nivel; im g a las imgenes.

Ejemplo:

h3{color:green;

}

El selector h3 hace referencia a los ttulos de t ercer nivel, que, en este caso, seran de colorverde.

Podemos u t i l i zar c lases (hemos hablado antes de los identificadores y las clases). Parahacer re fe renc ia a una c lase esc r ib imos un pun t o an tes de su nom bre :

.noticia{color:#999999;

}

Los elem entos con la clase noticia tendrn color # 999999 ( atencin: definimos el colorutil izando un cdigo hexadecim al. No es la n ica form a de hacerlo, pero s la m s habitual. Loiremos viendo en prxim os ejem plos).

Podem os u t i l i za r i den t i f i cadores (si para la clase utilizbamos un punto, para losidentificadores utilizamos una almohadilla: #):

#advertencia{color:#ff0000;

}

Ojo: recordamos que nunca debe haber dos iden t i f i cadores igua les en una m ismapg ina . No tendra sentido (y el HTML sera incorrecto).

Y podemos h acer todo t i po de comb inac iones:

# nav l i Los elementos li (elementos de un listado) que hay dentro del elemento con elidentificador nav.

4 . S e l e c t o r e s CS S


6/13

.noticia str ong Las negritas que hay dentro de cada noticia (no las que estn fuera de lasnoticias).p.noticia Los prrafos con la clase noticia (puede haber tambin capas con las clasenoticia, por ejemplo, pero con p.noticianos referimos slo a los prrafos, no a otroselementos). Atencin: en este caso, no habra espacio entre el elemento y la clase.(div.novedad son las capas con la clase novedad; mientras que div .novedad son loselementos con la clase novedad y que estn dentro de una capa).l i l i Los elementos de listas de segundo nivel (li hara referencia a los de primer nivel).

Mencionado el ejemplo de las listas (selector li li), vamos a ver cmo trabajan los CSS.

Esta parte es importante para comprender cmo funcionan las definiciones CSS y

poder controlar mejor la apariencia de vuestras pginas, tanto en EducaMadridcomo fuera del portal.

Fragmento de "CSS: Specificity Wars" (CSS: guerras de especificidad) , por Andy Clarke

La l t im a de f in i c in es la que p reva lece .

li{color:red;}

li{color:green;}

Los elementos de las listas sern verdes, no rojos.

A m ayor n i ve l de especi f i c idad , m ayor peso (las definiciones ms especficas son las queprevalecen).

ol li{color:green}

li{color:red}

En este caso, si yo tengo una lista ordenada y una lista desordenada, los elementos de la listaordenada ( ol) sern verdes, no roj os, aunque haya dicho que los li son rojos despus. El

m otivo: la prim era definicin tiene m s peso porque es ms especfica.Las clases prev a lecen sobre los e lem ent os HTML:

Si tengo dos prrafos, uno sin clase y el otro con ella:

5 . R e g l a s d e i m p o r t a n c i a e n CS S

Atencin
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.htmlhttp://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html


7/13

Normal

Menuda novedad!

Y tengo estas definiciones CSS:

.novedad{color:red;}

p{color:green}

El prrafo con la novedad aparecera en roj o, porque la definicin ( .novedad) tiene m speso que la general ( la que se aplica a todos los prrafos), aunque est escrita ant es.

El iden t i f i cador pr eva lece sobr e las c lases (y sobre los elementos HTML tambin, porsupuesto):

#ultima-novedad{color:red}

.novedad{color:#000000}

En este caso, si tengo varios elementos, todos ellos con la clase novedad, y uno de elloscon la clase novedad y el identif icador ult ima- novedad ( < div class= novedad id= ult im a-novedad> Soy lo l t imo de lo l t imo!< / div> ), este sera rojo; los dems # 000000 (negros).

Las de f in i c iones en l nea sobre e l p r op io e lem en to p reva lecen sobre las demsdef in ic iones.

Por ejemplo: da igual que yo diga que #ultima-novedad es de color rojo. Si yo hago esto:

Soy loltimo de lo ltimo!

ltim a novedad ser azul, no roja.

Sa l vo q u e u t i l ice l a e xp r e si n ! im p o r t a n t . ..

Un ejemplo:

Tengo este HTML:

Soy loltimo de lo ltimo!

Si quiero que mi ltima novedad sea roja, y no azul, y no puedo modificar el HTML, pero s elCSS (en un archivo externo o dentro de la etiqueta HEAD de mi pgina), tengo que forzarlo, yeso se hara as:

#ultima-novedad{color:red !important;}

Y, bsicamente, eso es todo.

La expresin ! importantsirve para forzar la apariencia. No hay que abusar deella. Intentaremos recurrir a selectores y utilizar ! importantslo cuando no hayaotras opciones. Si la usamos sin medida, nos encontraremos con un montn de! important, y al final no sabremos cmo acceder a los elementos para modificarsu apariencia.

Importante: no debemos abusar de !important


8/13

Por qu es im por t an te en t ender t odo esto pa ra m od i f i car l a apar iencia de vues t raspg inas de EducaMadr id ?

Porque en EducaMadrid hay un montn de CSS ya definidos, y si los que han definido suapariencia han decidido que el elemento con el identificador #nav tiene fondo azul, y yo loquiero rojo, tengo que saber cmo escribir las reglas CSS para pisar su definicin.

Esa es la c lave pa ra m od i f i car l a apar ienc ia de los tem as p rede f in idos deEducaMadr id : saber identificar qu elemento es el que quiero modificar (elegir el selectoradecuado) y saber que tal vez haya reglas definidas para ese elemento con anterioridad, yque si quiero modificar su apariencia cuento con:

1. El orden en el que se hayan definido las reglas.2. El nivel de especificidad (el peso) de cada regla.

Ejemp los :

Ellos tienen una definicin bsica para el elemento #nav

#nav{background:blue;}

El element o con el ident ificador nav t iene fondo azul.

Y tambin tienen gamas de colores para cada tema (azul, verde, naranja, etc.), y han dicho:

.green #nav{background:green;

}

El elemento con el identificador nav de la gam a de color verde t iene fondo verde.

Si yo he seleccionado la gama de color verde, pero quiero cambiar el color de fondo de eseelemento, tengo que saber que si lo defino despus, podr pisar su definicin.

Es decir:

Te n g o q u e sa b er q u e d e b o d e f i n ir u n a r e g l a d e i g u a l o m a yo r im p o r t a n c ia q u e l asuya y qu e s i no es de mayor im por t anc ia, debo co loca r la despus .

Todas las definiciones CSS que nosotros introduzcamos desde el portal educativoEducaMadrid irn despus de las propias definiciones del portal. De manera queslo tendr que definir una regla de igual importancia, y as podr "pisar" lo queellos han definido. Por ejemplo:

.green #nav{background:yellow;

}

El elemento con el ident ificador nav de la gam a de color "gr een" tendr fondoamarillo, no verde.

5 . 1 . L a s r e g l a s d e i m p o r t a n c i a y Ed u c a M a d r i d

Los valores que introducimos en la pestaa CSS


9/13

En este curso no vamos a analizar detalladamente cada uno de los atributos CSS. Enrealidad, llegados a este punto, ya sabemos cmo hacer definiciones CSS para definir laapariencia de los elementos de nuestras pginas. Lo m e jo r es tener una v i s in genera lsob re los a t r i bu tos , va lo res y un idades , y con ta r con una buena t ab la de re fe renc ia:una chuleta a la cual recurrir cuando no recordemos cmo modificar un determinado atributo.

Cmo se haca para cambiar la posicin de la imagen de fondo de un elemento? A lachuleta background-position.

Gua de Referencia CSS 2.1 del W3CCSS Cheat Sheet (chuleta CSS)Especificidad CSS: cosas que debes saber (en ingls)

CSS specificity calculator

En las t res pg inas s igu ien tes ob tendr emos u na v i s in genera l sobre los posiblesatributos, valores y unidades en CSS.

Encontramos atributos que hacen referencia a:

Las f u e n t e s: color, familia, tamao, peso (si es negrita o no...), estilo (cursiva...).Al con ten ido de los elementos (su texto, etc.): altura de lnea, alineacin...Al f o n d o de los elementos: color de fondo, imagen de fondo, si esta se repite o no,posicin de la imagen de fondo...A la pos ic in de los elementos: si quedan alineados a la izquierda o a la derecha conrespecto a otros elementos (como cuando colocamos una imagen alineada a la izquierda deun texto en Word), si tienen una posicin fija con respecto al total de la pgina o a unelemento en concreto, etc.

A las l i s tas: si tienen o no estilo de lista (vietas), etc.A los m r g e n e s y el b o r d e de los elementos: los elementos pueden tener un borde, tenermrgenes externos, mrgenes internos (de su borde a su contenido)...Al co m p o r t a m ie n t o del elemento: si se debe comportar como un bloque o como unelemento a mostrar a continuacin de otro (en lnea)...

Una nota importante que os ayudar a comprender el funcionamiento de losmrgenes.

Si tenemos una capa con margen exterior de 20 pxeles y margen interior(padding) de 15 pxeles y un ancho definido de 150 pxeles, el ancho final quetendr en pantalla no ser de 150 pxeles, como uno pudiese esperar, sino de

6 . A t r i b u t o s , v a l o r e s y u n i d a d e s

Recursos de inters

6 . 1 . A t r i b u t o s

El modelo de caja
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/http://www.suzyit.com/tools/specificity.phphttp://www.suzyit.com/tools/specificity.phphttp://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/


10/13

180, porque al ancho que definamos se suma el margen interior o padding. Elconocido como modelo de caja es el que define este comportamiento.

En la chuleta CSS Cheat Sheet encontramos un esquema que lo reflejaperfectamente:

Imagen del modelo de cajade CSS Cheat Sheet

No todos los atributos (altura de lnea, color, familia de fuente...) pueden tener los mismosvalores. No tendra sentido decir que queremos un color de 12 pxeles.

Hay a t r i bu tos que t i enen va lo res ce r rados . Por ejemplo: el atributo background-repeat(que hace referencia a cmo se repite la imagen de fondo de un elemento) slo puede tener

estos valores:

repeat: se repite.repeat-x: se repite slo horizontalmente.repeat-y: se repite slo verticalmente.no-repeat: no se repite.

Cualquier otr o valor estara mal y no sera interp retado por el navegador.

Hay o t r o s a t r i b u t o s q u e p e r m i t e n va l or e s a b ie r t o s ; por ejemplo, el color:

color:#666666;

Podramos especificar el color que quisisem os. En este caso, lo hem os hecho en cdigohexadecimal, que, com o ya hem os comentado, es lo m s habitual.

Otros , neces i tan un va lo r segu ido de una un idad ; por ejemplo, el tamao de una fuente(del texto):

font-size:15px;

El valor es 15; la unidad, pxeles. El tamao de fuent e ser de 15 pxeles.

Hay un idades abso lu tas y r e la t i vas.

6 . 2 . V a l o r e s

6 . 3 . U n i d a d e s
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/


11/13

Unidades abso lu t as

De f i n en e l t a m a o e n t r m in o s g e n er a l es: esta capa m ide 500 pxeles de ancho(500px) o este texto t iene un tamao de 15 puntos (15pt) .

La unidad absoluta ms habitual son los pxeles (px), aunque tambin existen otras (in, pt...)con las que tal vez os encontris en alguna ocasin.

Unidades r e lat i vasUsamos unidades relativas para definir el t a m a o d e u n e l e m e n t o e n f u n c i n d el t a m a ode l que lo con t iene .

Por ejemplo: si todo el contenido de mi pgina en una capa que tiene un ancho del 50%, esacapa ocupar la mitad de la pgina. Si dentro de esa capa tengo otra capa que tiene unancho del 50%, esa capa ocupar la mitad de la primera (es decir: el 25% de mi pgina). Sutamao depende del tamao de la anterior.

Las un idades re la t i vas se u t i l i zan pa ra hacer d i seos f l ex ib les (una web que ocupa,por ejemplo, el 100% de la pantalla, con independencia de la resolucin de pantalla que

tenga el usuario).

Ta m b i n se u t i l i za n m u y a m e n u d o e n l o s t e x t o s : se define un tamao de texto paratodo el documento, y a continuacin, se especifica el tamao cada elemento. Por ejemplo: losttulos de primer nivel son un 150% ms grandes que el t exto norm al:

h1{font-size:150%;

}

Las dos un idades re la t i vas m s hab i tua les son % (ya la hemos comentado) y em (hacereferencia al tamao de la letra M: mide veinte emes de ancho. Depende, por tanto, deltamao de letra del documento: si amplo el tamao de letra desde el navegador, el tamaodel elemento aumentar).

Hay que tener cuidado a la hora de utilizar unidades relativas, porque unoselementos afectan a otros, pero es recom endab le u t i l i za r las; sobre todo en lostextos, para facilitar al usuario su ampliacin.

Como ya habris imaginado, las posibilidades de CSS son enormes. En este curso no podemosver todo lo que se puede hacer con CSS, pero s queremos destacar, por su importancia a lahora de mantener el control de la apariencia de nuestras pginas, dos caractersticas oapartados:

1. Las pseudoclases2. El posicionamiento

Buenas prcticas

7 . T r u c o s a v a n z a d o s

7 . 1 . P s e u d o c l a s e s


12/13

Las pseudoc lases hacen r e fe rencia a l estado de u n e lem en to en u n m om entod e t e r m in a d o .

Por ejemplo: sabemos hacer que los enlaces de nuestra pgina sean de color azul:

a{color:blue;

}

Pero sabramos hacer que al pasar por encima fuesen de otro color? Podemos hacerlo gracias

a las pseudoclases.

Las ms habituales, y las nicas que mencionaremos en este curso, son las que hacenreferencia a los enlaces:

a:link {atributos} Enlaces.a:visited {atributos} Enlaces visitados.a:active {atributos} Enlaces activos (lo estn en el preciso momento en que se pinchasobre ellos).a:hover {atributos} Los enlaces al pasar sobre ellos.a:focus {atributos} Los enlaces cuando el foco est sobre ellos (navegando utilizando elteclado podemos tener el foco en un enlace aunque el ratn no est sobre l).

Si quisisemos que los enlaces de nuestra web fuesen rojos y que se subrayasen slo alpasar sobre ellos podramos hacer:

a{color:red;text-decoration:none;

}

a:hover{text-decoration:underline;

}

El resultado:

Enlace a EducaMadrid

Entender cmo se posicionan los elementos en CSS puede resultar complicado. Estudiar todoslos casos sera inabarcable. Vamos a ver un ejemplo bsico que nos permita sentar las basespara poder profundizar en caso de necesidad.

El a t r i b u t o f l o a t n o s p e r m i t e d e ci r s i u n e l em e n t o q u e d a r a l i n ea d o a l a d e r e ch a o a

la i zqu ie rda con respec to a o t ro . Se usa constantemente para generar estructuras envarias columnas. Puede servirnos para crear contenidos a medida en nuestras pginas deEducaMadrid y maquetarlos con dos o ms columnas, o para crear un contenido con unaimagen en un lateral y el texto en el otro, por ejemplo.

Vea m o s u n e j e m p lo . Partiremos de un cdigo HTML sencillo y algunas definiciones CSS.

Vamos a c rea r un document o con este cd igo y a hacer camb ios en lasp rop iedades f l oat , y en e l ancho d e las capas.

Daremos a la capa # ejemploun ancho determinado (en unidades relativasprimero y luego en absolutas) y jugaremos con el ancho de cada una de las

7 . 2 . P o s i c i o n a m i e n t o

Posicionamiento de elementos
http://www.educa.madrid.org/http://www.educa.madrid.org/


13/13

columnas: primero en unidades relativas y luego en absolutas.

As comprenderemos mejor cmo se comportan los elementos.

HTML:

CSS:

#columna-1{height:200px;width:300px;background:red;float:left;

}

#columna-2{height:200px;

width:500px;background:green;float:left;

}

Layout Gala (una gran coleccin de plantillas con diferentes formatos)Herramienta para la generacin automtica de plantillas

Este artculo est licenciado bajo Creative Commons Attribution Non-commercial Share Alike 3.0License

Ignacio Gros Aymerich

Esta obra est bajo una licencia de Creative Commons.Departamento de TICCRI F " Las Acacias"

Recursos avanzados
http://blog.html.it/layoutgala/http://csscreator.com/version2/pagelayout.phphttp://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/es/http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/http://csscreator.com/version2/pagelayout.phphttp://blog.html.it/layoutgala/

Bloque2 CSS Hojas de Estilo en Cascada

Documents

Transcript of Bloque2 CSS Hojas de Estilo en Cascada