css avanzado

5102018 CSS Avanzado - slidepdfcom

httpslidepdfcomreaderfullcss-avanzado-559dff6be1042 174

CSS Hoja de Esti lo en Cascada

CSS AVANZADO




INTRODUCCIOacuteN (I)

iquestQueacute son las hojas de estilo Hojas de Estilo o CSS por Cascading Stylesheet Trata de dar la separacioacuten definitiva de la loacutegica (estructura) y el fiacutesico (presentacioacuten coacutemo

mostrar ) del documento es decir el contenido de las paacuteginas de su apariencia

iquestCoacutemo funcionan En HTML las etiquetas (tags) indican al navegador cuaacuteles son los elementos que compondraacuten la

paacutegina y el navegador aplicaraacute a cada elemento su formato correspondiente Por ejemplolth3gtTiacutetulolth3gt

indica que el texto Tiacutetulo es un encabezado de nivel 3 y el navegador le aplicaraacute su formatopredeterminado (que variacutea un poco dependiendo del agente de usuario o navegador - Internet Explorer Netscape Mozilla- o si usamos Windows Mac o Linux)

Ejemplo




INTRODUCCIOacuteN (II)

Para cambiar por ejemplo la tipografiacutea de los h3 a Arial de 19 puntos en color azul y alineacioacuten

central se deberiacutea especificar asiacute para cada h3lth3 align=rdquocenterrdquogt ltfont face=rdquoArialrdquo color=rdquo0000FFrdquo size=rdquo5rdquogt Tiacutetulo ltfontgtlth3gt

Ejemplo

Las Hojas de Estilo en cambio usan reglas de estilo que determinan los formatos que pueden sergeneacutericos para elementos tipos de elementos pueden ser reutilizados etc Por ejemploh3

font-family Arial Sans-serif font-size 19pt color 0000FF text-align center

Ejemplo




VENTAJAS DEL CSS

Permite enriquecer la apariencia del documento como nunca los ha hecho HTML puesto que

ofrece herramientas de composicioacuten maacutes potentes que HTML Se puede alterar la presentacioacuten de cada elemento sin tocar el coacutedigo HTML ahorrando esfuerzo

y tiempo de edicioacuten Puede reducir draacutesticamente el trabajo del disentildeador

ndashSe centralizan los comandos para los efectos visuales en un mismo sitio y se puedenreutilizarincluir desde varios sitios ndashSe pueden aplicar las definiciones a varios elementos sin tener que reescribirlas en cada uno

Se evita tener que recurrir a trucos para conseguir algunos efectos Por ejemplo con CSS no esnecesario usar imaacutegenes invisibles para hacer una sangriacutea No soacutelo se puede centralizar toda la informacioacuten de estilos para una paacutegina en un solo sitio sino

que se puede crear una hoja de estilos independiente aplicable a muacuteltiples paacuteginas de maneraque se puede crear un disentildeo consistente para todo un sitio Web desde un solo lugar

Las Hojas de Estilo pueden aplicarse de varias maneras y combinarse formando una cascada deestilos con la informacioacuten de cada una

Ayuda a mantener los tamantildeos de los documentos tan pequentildeos como se pueda reduciendo asiacute los tiempos de carga




ldquoDESVENTAJASrdquo DEL CSS

El soporte irregular que tienen los navegadores del CSS

ndash Algunas propiedades no estaacuten implementadas correctamente en algunos navegadores por lo queno funcionan bien ndashPueden existir diferencias en un mismo navegador seguacuten sea para Mac Windows o Linux ndashTambieacuten hay diferencias en la implementacioacuten dependiendo de las distintas versiones de unmismo navegador

Esto puede provocar que las paacuteginas se visualicen por el lector de una forma no deseada por el

disentildeador




ELEMENTOS (I)

Son la base de la estructura del documento ( p table span a div ) En teacutermimos de CSS cada

elemento genera un cuadro que contiene el contendo del elemento

Elementos reemplazados y no-reemplazados No todos los elementos se crean de la misma manera en CSS toma dos formas elementos

reemplazados y no reemplazados

Elementos reemplazados Son aquellos en los que el contenido del elemento es reemplazado por alguna otra cosa que no

estaacute directamente representado en el contenido del documento como pueden ser los elementosimg input etc

Elementos no-reemplazados La mayoriacutea de los elementos html son no-reemplazados que son aquellos cuyo contenido se

representa ldquotal cualrdquo por el navegador en un ldquocuadrordquo generado por el mismo elemento Porejemplo ltspangtiexclHolaltspangt




ELEMENTOS (II)

Elementos seguacuten modo de visualizacioacuten Ademaacutes de los elementos reemplazados y no reemplazados CSS21 utiliza otros dos tipos baacutesicos

de elementos de bloque y en liacutenea

Elementos en bloque Generan un cuadro que llena el aacuterea de contenido del elemento padre y no puede tener otros

elementos a sus lados Es decir generan un ldquosaltordquo antes y despueacutes del cuadro del elemento Porejemplo los elementos pdiv

Los elementos de listados son un caso especial de elementos en bloque puesto que ldquoadjuntardquo unldquomarcadorrdquo al cuadro del elemento Excepto por este marcador son ideacutenticos al resto deelementos en bloque

Elementos en liacutenea Generan un cuadro de elemento en una liacutenea de texto y no rompen el flujo de dicha liacutenea Por

ejemplo los elementosstrong em span

Los elementos en liacutenea no generan ldquosaltosrdquo o rupturas antes ni despues del cuadro del elemento

N o t a Aunque las denominaciones de en bloque y en liacutenea tienen mucho en comuacuten con los conceptos de elementos de bloque y elementos de liacutenea en XHTML no se debe olvidar que XHTML los elementos en bloque no pueden descender de elementos en liacutenea En CSS no existe estaacute restriccioacuten ya que soacutelo hace referencia al rol de visualizacioacuten no modifica el tipo del objeto HTML




REUNIR HTML Y CSS (I)

La etiqueta link Permite asociar otros documentos con el documento HTML que contiene dicha etiqueta Estas

hojas de estilo que no son parte del documento HTML pero son usadas por eacutel se denominanh o j a s d e e s t i lo e x t e r n a s

Sintaxisltlink rel=rdquostylesheetrdquo type=rdquotextcssrdquo href=rdquosheet1cssrdquo media=rdquoallrdquo gt

Debe estar situado en la cabecera del documento HTML (entre las etiquetasltheadgt

yltheadgt) El formato de la hoja de estilos externa no es maacutes que un listado de reglas de estilo no se pueden

incluir otras marcas de XHTML u otros lenguajes Atributos de la etiqueta

ndashrel la relacioacuten en este caso hoja de estilos (stylesheet) ndash

type para el caso de CSS siempre seraacute textcss Describe el tipo de datos que se cargaraacuten usandoeste enlace ndashhref la direccioacuten a la hoja de estilos que puede ser absoluta o relativa

ndashmedia en este caso all que indica que la hoja de estilos se aplicaraacute en cualquier medio depresentacioacuten Tipos de medio para Web

all todos los medios

screen en pantalla

print en la impresioacuten del documento o en la ldquovista previardquo




REUNIR HTML Y CSS (II)

Puede haber varias hojas de estilo asociadas al documento pero soacutelo aquellas con el atributo

rel con valor ldquostylesheetrdquo seraacuten usados para la visualizacioacuten inicial del documentoHojas de estilo alternativas Se declaran asignando al atributo rel el valor ldquoarternate stylesheetrdquo Esto hace que las hojas de estilos declaradas como alternativas solo sean usadan en el formateo

del documento si el agente de usuario las selecciona (soacutelo si el navegador es capaz de usar hojasde estilo alternativas)

El atributo title se usa para generar la lista de estilos alternativos ndashSi a varias hojas de estilo externas se les da el mismo valor title se agrupan ndashSi no se les asigna el valor title se convierten en persistentes es decir se usaraacute siempre

Ejemplo

N o t a Las hojas de estilo alternativas son soportadas por la mayoriacutea de los navegadores basados en Gecko como Mozilla y Netscape 6+ y en Opera 7 En Internet Explorer no se soportan de forma nativa pero se puede simular usando javascript




REUNIR HTML Y CSS (III)

El elemento style Es otra manera de incluir estilso y aparece en el mismo documento La etiqueta style siempre deberiacutea tener el atributo type con valor ldquotextcssrdquo Sintaxisltstyle type=rdquotextcssrdquogt reglas de estiloltstylegt

Tambieacuten es posibe en este caso utilizar el atributo media con los mismos posibles valores quepara el caso link

A los estilos entre las etiquetas ltstylegt y ltstylegt se les denomina hoja de e s t i l o s de l

d o c u m e n t o ho j a de e s t i l o s i nc r u s t a s u h o j a d e e s t i l o s e m b e b i d a Mediante este meacutetodo se definiraacuten muchos estilos que se aplicaraacuten al documento pero tambieacuten

es posible que contengan muacuteltiples enlaces a hojas de estilos externas mediante la directivaimport

La directiva import Es similar a link puesto que se puede usar para cargar en el navegador Web hojas de estilo

externas y usar sus estilos




REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comando

ndashEl comando se situacutea en el contenedor style (que a su vez estaacute en el contenedor head) ndashSe debe poner antes de cualquier otra regla CSS sino no funciona ndashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

otras reglas de estilo

ltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todaslas hojas de estilo incluidas asiacute seraacuten cargadas y usadas

En este caso tambieacuten se pueden restringir a uno o maacutes mediosltstyle type=rdquotextcssrdquogt

import url(hojaestilos1css) all

import url(hojaestilos2css) screen

import url(hojaestilos3css) screenprint

import url(httpejemploorglibreriaestiloscss) all


ltstylegt

N o t a Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglasComo el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores




REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes

Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por loque si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute comotexto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--

las reglas de estilo

--gtltstylegt

Estilos en liacutenea Para casos en los que se quiere asignar una serie de estilos a un elemento individual sin la

necesidad de hojas de estilo externas o estilos embebidos

Se utiliza el atributo style de los propios elementos HTMLltp style=rdquoreglasDeEstilordquogt

Esto es un paacuterrafo que tiene unas reglas de estilo directamente

aplicadas a eacutel y a nadie maacutes

ltpgt

El atributo style se le puede asignar a cualquier elemento HTML excepto a aquellos que estaacutendeclarados fuera del body

No es la manera maacutes recomendable de utilizar los estilos




SINTAXIS DE CSS

Estructura de reglas Una hoja de estilos estaacute construiacutedo por una serie de reglas Cada regla tiene dos partes fundamentales

ndashSelector identifica o selecciona un elemento o conjunto de elementos ndashBloque de declaracioacuten Que comienza con y termina con

El bloque de declaracioacuten estaacute compuesto por una o maacutes declaraciones que son las que indican al

navegador el estilo definido Siempre acaban con Cada declaracioacuten estaacute compuesta por

ndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguaje ndashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptaralguno de esos valores ndashLa propiedad y su correspondiente valor se separan por

Con la regla de la imagen se especifica que los

elementos p (paacuterrafos) del documento se

construiraacuten con fuente roja y en negrita (dos pares

atributo-valor es decir dos declaraciones)




SINTAXIS DE CSS

Se pude definir un mismo bloque de declaraciones para varios selectores es decir se pueden

agrupar los selectores siempre y cuando compartan el estilo que se va a definir Se agrupanseparando los selectores con comas ()p h1 h2 font-weight bold color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y

Esto es un comentario en CSS

Esto es otro comentario en CSS

que adem aacutes ocupa m aacutes de una liacuteneay todas ellas estaacuten comentadas




SELECTORES (I)

Identifican a un elemento o conjunto de elementos dentro de la paacutegina para luego poder definir suspropiedades

Selectores de tipos Son los que identifican a un tipo de elemento dentro de los que conforman el coacutedigo HTMLp h1 h2 font-weight bold color red

Con los selectores de tipo con un simple cambio en la Hoja de Estilo podemos modificar elaspecto de todos los elementos de ese tipo

Limitacioacuten su utilidad se limita al caso en que todos los elementos de un tipo tengan la mismaapariencia en cada una de nuestras paacuteginas La solucioacuten a esto son los selectores que se explican

a continuacioacutenSelector Univeral Se representa con un asterisco () y concuerda con cualquier elemento es como un comodiacuten color grey Todo elemento del documento HTML tendraacute el

color de fuente en gris




SELECTORES (II)

Selectores de clase Para utilizar el selector de clase hay que asignar valores a los atributos de clase de los elementos

que queremos formatearltp class=rdquoclase1rdquogtEste es un paacuterrafo con una clase asignadaltpgtltpgtEste es otro paacuterrafo sin clase asignada ltspan class=rdquoclase2rdquogt perocontiene un spanltspangt que si la tieneltpgt

Para asociar los estilos con un elemento el selector es el nombre de la clase precedido por un

punto () (el selector universal se puede omitir)clase1

font-weight bold

clase2

font-style italic

El selector de clase trabaja directamente referenciando el valor de los atributos class En estecaso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

N o t a En versiones anteriores a IE7 Internet Explorer para ambas plataformas tiene problemas manejando selectores de clases muacuteltiples En estas versiones anteriores la declaracioacuten pclase1clase2 aplicaraacute soacutelo clase2 por venir en uacuteltimo lugar y pclase2clase1 aplicaraacute soacutelo clase1

clase1 font-weight bold

clase2

font-style italic




SELECTORES (III)

Selectores de ID Los selectores de ID van precedidos por

identificador1 font-weight bold

identificador2

font-style italic

Hacen referencia a los valores de los atributos id (identificadores de elementos)

Ejemplo

En un documento HTML el id debe ser uacutenico por lo que no pueden combinarse diferentesselectores de ID dado que son uacutenicos y cada elemento soacutelo puede tener un ID asignado

Tanto los selectores de clase como los de id son sensibles a mayuacutesculas y a minuacutesculas


identificador2

font-style italic




SELECTORES (IV)

Selectores de atributo Permiten seleccionar elementos de la paacutegina seguacuten sus propiedades o el valor asignado a estas

propiedades Se pueden seleccionar basaacutendose en la presencia de uno o maacutes atributos

Por presencia de atributo Selecciona elemento que tengan un determinado atributo indiferentemente a de su valor

[class] font-weight bold

p[id]

color red

Por valor exacto

Selecciona elemento que tengan un determinado atributo y con un valor determinado(exactamente igual)[class=rdquoclase1rdquo]

font-weight bold

p[id=rdquoidentificador1rdquo]

color red




SELECTORES (V)

Por valor parcial

Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementosbasaacutendose en la presencia de alguna de esas palabras (~=)

[class~=rdquoclase1rdquo] font-weight bold

Para seleccionar elementos con un atributo concreto y cuyo valor comience con un patroacuten (^=)

[class^=rdquoclasrdquo]

font-weight bold

Para seleccionar elementos con un atributo concreto y cuyo valor acabe con un patroacuten ($=)

[class$=rdquose1rdquo] font-weight bold

Para seleccionar elementos con un atributo concreto y cuyo valor contenga un patroacuten (=)

[class=rdquoaserdquo] font-weight bold

Para seleccionar elementos con un atributo concreto y cuyo valor sea exactamente igual a un patroacuten ocomience por dicho patroacuten seguido de un guioacuten (|=)

[lang|=rdquoenrdquo] font-weight bold

img[title~=rdquofigurardquo] border 1px solid gray

img[title^=rdquofigrdquo] border 1px solid gray

img[title$=rdquourardquo] border 1px solid gray

img[title=rdquoigurrdquo] border 1px solid gray

img[title|=rdquofigurardquo]

border 1px solid gray




SELECTORES CONTEXTUALES (I)

Se pueden combinar los selectores vistos hasta ahora de maneras concretas para identificar elementosno solo por tipo id clase o atributos sino tambieacuten pos su posicioacuten respecto a otros elementos orelacioacuten entre ellos

Para ir viendo los diferentes tipos supongamos la siguiente estructura DOM de un documentoHTML




SELECTORES CONTEXTUALES (II)

Selectores descendientes Permiten especificar elementos que estaacute contenido dentro de otro elemento es decir que son

parte de otro elemento El indicador de descendencia es el espacio de manera que dos selectores separadas por un

espacio indica que se quieren seleccionar los elementos del segundo tipo de selector que seencuentra dentro de un elemento del primer tipo de selector

h1 em

font-size 14px

En el ejemplo de la imaacutegen de la estructura HTML por ejemplo

ndash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo laliacutenea del aacuterbol hacia arriba li ndash ul - li ndash ul ndash body ndash html (liacutenea roja) ndashEl elemento strong es descendiente de p ndash body ndash html (liacutenea verde)

Esta definicioacuten se traduciriacutea como ldquocualquier elemento em que esteacute contenido

dentro de un h1 tendraacute un tamantildeo de fuente de 14 pxrdquo




SELECTORES CONTEXTUALES (III)

Selectores de hijos Permiten especificar elementos que son hijos de otro elemento (descendientes directos) El indicador de seleccioacuten de hijos es el gt (con espacios o no alrededor)

h1 gt em font-size 14px

En el ejemplo de la imagen de la estructura HTML por ejemplo

ndash El elemento ol hijo del li inmediatamente superior pero no de los restantes ascendientes(ul li ul body html) ndashEl elemento strong es hijo de p pero no de body y html

Esta definicioacuten se traduciriacutea como ldquocualquier elemento em que esteacute sea hijo de un

h1 tendraacute un tamantildeo de fuente de 14 pxrdquo




SELECTORES CONTEXTUALES (IV)

Selectores de hermanos adyacentes El indicador de seleccioacuten de hermanos adyacentes es el + (con espacios o no alrededor) Permiten especificar elementos que se encuentran inmediatamente despueacutes de otro (adyacente)

y que tengan el mismo padre (hermano)

padvertencia + p font-size 14px


ndash El elemento ol no tiene hermanos adyacentes ndashEl elemento strong es hermano adyacente del elemento em

N o t a Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentesIE7 soporta ambos

Esta definicioacuten se traduciriacutea como ldquocualquier elemento p que venga

inmediatamente despueacutes de un paacuterrafo con ID ldquoadvertenciardquo y que tengan el

mismo padre tendraacute un tamantildeo de fuente de 14 pxrdquo




PSEUDO-CLASES (I)

Todos los selectores vistos hasta el momento se refieren a elementos que podemos encontrar dentrodel coacutedigo HTML

Las pseudo-clases (y los pseudo-elementos) por el contrario no pueden deducirse simplementeobservando la estructura del documento Puede decirse que son abstracciones que permitenreferirse a elementos que de otro modo resultariacutean inaccesibles

Las pseudo-clases se pueden dividir en Pseudo-clases de enlaces

ndashlink ndashvisited

Pseudo-clases dinaacutemicas

ndashfocus ndashhover

ndashactive Pseudo-clase de ldquoprimer hijordquo

ndashfirst-child Pseudo-clase de idioma

ndashlang

Como se obseva el indicador de selector de pseudo-clases son los dos puntos ()




PSEUDO-CLASES (II)

link y visited link Se refiere a cualquier link (a) que apunta a una direccioacuten que no ha sido visitada visited Se refiere a cualquier link (a) que ya ha sido visitadoalink color blue avisited color red

focus hover y active

focus Se refiere a cualquier elemento que recibe el foco hover Se refiere a cualquier elemento sobre el cual estaacute el cursor del mouse active cuando el elemento es activado (por ejemplo cuando el usuario presiona el botoacuten del

mouse)alink color blue avisited color red ahover font size 15em aactive font size 09em

El orden de declaracioacuten de estas pseudo-clases es importante se recomienda utilizar el ordenlink-visited-focus-hover-active

N o t a Internet Explorer para Windows hasta IE6 no soporta las pseudo-clases dinaacutemicas (focus hover y active ) para ninguacuten otro elemento que no fuera un link IE7 antildeadioacute soporte para hover sobre cualquier elementopero no focus para elementos de formulario




PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elementopfirst child color blue selecciona los p aacuterrafos que son el primerhijo de otro cualquier elemento

N o t a Internet Explorer para Windows hasta IE6 no soporta las first-child IE7 antildeadioacute el soporte

lang En HTML es posible especificar el idioma que se usa en un elemento mediante el atributo langltp langesgtUn paacuterrafo al que se le ha especificado que estaacute encastellanoltpgt

Mediante lang se pueden seleccionar elementos en base a su idiomaplang(es) color red




PSEUDO-ELEMENTOS (I)

Primer caraacutecter first-letter da formato al primer caraacutecter y soacutelo a ese caraacutecter de un elemento de

bloquepfirst letter font size 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elemento

pfirst line text decoration underline

Restricciones para first-letter y first-line Soacutelo se pueden aplicar a elementos de bloque tales como cabeceras paacuterrafos No a los

elementos en liacutenea como enlaces Limitaciones en las propiedades que se pueden usar en la declaracioacuten de estilos

ndashPara first-letter propiedades de la fuente propiedades del color propiedades delfondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de losbordes float text-shadow y clear ndashPara first-line propiedades de la fuente propiedades del color propiedades del fondoword-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear




PSEUDO-ELEMENTOS (II)

Insertar antes y despueacutes Con los pseudo-elementos before (antes) y after (despueacutes) se puede insertar un contenido

antes o despueacutes de un elemento determinado y definir el estilo del contenido insertado La propiedad content junto con estos pseudo-elementos especifican lo que se inserta

La siguiente definicioacuten insertaraacute dos corchetes de cierre con fuenteplateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquo

color silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo deldocumento HTMLbodyafter content ldquoFiacutenrdquo




ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTML

h2morado color purple viene de una hoja de estilos externah2 colorsilver viene de otra hoja de estilos externa

Si en nuestro documento tuvieramos una cabecera de segundo niver con la clase asignada a moradocoacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especificacioacuten de cada selector Para cada regla el agente de usuario (navegador) evalua la especificacioacuten del selector y lo adjunta

a cada declaracioacuten de la regla La especificacioacuten de un selector estaacute determinada por los componentes del mismo selector y se

expresa en cuatro partes asiacute 0000 La actual especificacioacuten de un selector se determina de la siguiente manera

ndashPara cada valor de atributo ID dado en el selector antildeadir 0100 ndashPara cada valor del atributo class dado en el selector antildeadir 0010 ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001 ndashEl selector universal () tiene una especificacioacuten de 0000 ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener0000)




ESPECIFICACIOacuteN (II)

La especificacioacuten se aplicaraacute por separado a cada declaracioacuten y a cada selector de la definicioacuten dela regla

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobrecualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 laespecificacioacuten para un estilo en liacutenea era 0100 es decir igual que los selectores de ID

Importancia Hay ocasiones en las que una declaracioacuten es tan importante que supera el resto CSS los llama

declaraciones importantes y se marcan poniendo important justo antes del punto y comafinal de la declaracioacuten

poscuro color 333 important

background white

Las declaraciones marcadas asiacute no tienen una especificacioacuten especial pero se consideran apartede las demaacutes junto con las marcadas como important




ESPECIFICACIOacuteN (III)

P r o p u e s t a d e e j e r c ic i o

Calcula la especificacioacuten de las siguientes declaracionesh1 color red 0001

body h1 color green 0002

h2grape color purple 0011

h2 colorsilver 0001

htmlgtbody table tr[id=rdquototalsrdquo] td ul gt li

color maroon 0017

lianswer color navy 0101

div p color black 0002

color gray 0000

body strong color yellow 0002

p em color purple 0002

grape color purple 0010

bright color orange 0010

pbright emdark color dark 0022

id212 color blue 0100

divsidebar [href] color red 0101




HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sinotambieacuten a sus descencientes Cada paacutegina HTML estaacute compuesta por una serie de elementos

estructurados de tal forma que cada elemento estaacute contenido por otro elemento que a su vezpuede estar contenido por otro

En esta estructura existe un elemento raiacutez que es el que actuacutea de contenedor de todos losdemaacutes elemento es el elemento ltHTMLgt

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que siespecificamos body color red todo elemento de la paacutegina heredaraacute esta

caracteriacutestica y no seraacute necesario volver a especificarlo Aquiacute es necesario hacer algunas precisiones

ndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda ono ndashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puedeusarse para reforzar expliacutecitamente la herencia de una propiedad o para lograr que un elemento

herede de su padre una propiedad que de otro modo no seriacutea heredada ndashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valorheredado ndashLos elementos heredan los valores computados del padre no los valores especificados (en elsiguiente punto esto se explica maacutes detalladamente)

Los valores heredados no tiene especificacioacuten alguna ni siquiera 0000 Por esto se debe

tener cuidado con lo que cuidado con la utilizacioacuten del selector universal () Ejemplo




LA CASCADA (I)

La cascada es el meacutetodo por el cual se resuelven los conflictos de aplicacioacuten de estilos cuando haymaacutes de una declaracioacuten posible para un elemento y todas tienen la misma especificacioacuten

Supongamos por ejemploh1 color red h1 color blue

Las reglas de la cascada son Encontrar todas las reglas que contengan un selector que coincidan con un elemento dado Ordenar por peso expliacutecito todas las declaraciones aplicadas al elemento Los pesos de mayor a

menor son ndashLas declaraciones del usuario marcadas como important ndashLas declaraciones del autor marcadas como important

ndashLas declaraciones normales del autor ndashLas declaraciones normales del usuario ndash

Las declaraciones del agente de usuario (navegador) Ordenar por la especificacioacuten todos los estilos aplicables al elemento Los elementos con mayor

especificacioacuten tiene maacutes peso que los demaacutes




LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elemento

ndashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes peso ndashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al restode declaraciones de la hoja de estilos que las importa

Es posible que en un documento aparezcan formateadores que no son CSS tales como font Enestos casos se les asigna una especificacioacuten de 0 y se supone aparecen al comienzo de la hoja deestilos del autor Por lo que estos estilos seraacuten sobreescritos por cualquier declaracioacuten deldisentildeador o lector pero no por los del agente de usuario




VALORES Y UNIDADES EN CSS (I)

Nuacutemeros Hay dos tipos de nuacutemeros en CSS enteros y reales Dependiendo del rango de valores que acepte la propiedad pueden ser negativos y positivos Ejemplos de posibles valores vaacutelidos 155 -2700004 5 05 etc

Porcentajes Un nuacutemero real seguido del signo del porcentaje () Siempre son relativos a otro valor que puede ser el valor de otra propiedad del mismo

elemento el valor heredado del padre el valor heredado de un antecesor Las mismas propiedades que aceptan valores porcentuales definen las restricciones del rango de

valores permitido

ColoresExisten diferentes maneras para dar valores a las propiedades referentes a coloresNombres de colores La especificacioacuten CSS define 17 nombres de colores (16 de HTML 401 maacutes el naranja)

ndashaqua black blue fuchsia gray green lime maroon navy olive orange purplered silver tealwhite yellow


VALORES Y UNIDADES EN CSS (II)




Colores por RGB

Colores funcionales La sintaxis geneacuterica para este tipo de valores es rgb(color) donde color se expresa con un

trio de porcentajes o enteros rojo-verde-azul respectivamente Si se utilizan enteros el rango de valores de cada uno es 0-255 Si se utilizan porcentajes el

rango es de 0-100 Blanco m aacuteximo en todosrgb(100100100) | rgb(255255255)

Negro m iacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al m aacuteximo los dem aacutes al m iacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los dem aacutes al m iacutenimorgb(5000) | rgb(12800)

Colores hexadecimales El valor del color se expresa en valor hexadecimal de 6 diacutegitos un par de diacutegitos referidos a cada

color y se precede por el siacutembolo El rango de valores para cada color seraacute 00-FF por lo que para el conjunto seraacute 000000-FFFFFFh1 color FF0000 establecer los H1 a rojoh2 color 903BC0 establecer los H2 a morado oscuro

h3 color 000000 establecer los H3 a negro


VALORES Y UNIDADES EN CSS (III)




Equivalencia de valores de color

Color Porcentaje Nuacutemero Hexadecimal Hexcortored rgb(10000) rgb(25500) FF0000 F00

orange rgb(100400) rgb(2551020) FF6600 F60

yellow rgb(10010000) rgb(2552550) FFFF00 FF0

green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F

aqua rgb(0100100) rgb(0255255) 00FFFF 0FFblack rgb(000) rgb(000) 00000 000

fuchsia rgb(1000100) rgb(2550255) FF00FF F0F

gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000

navy rgb(0050) rgb(00128) 000080olive rgb(50500) rgb(1281280) 808000

purple rgb(50050) rgb(1280128) 800080

silver rgb(757575) rgb(192192192) C0C0C0

teal rgb(05050) rgb(0128128) 008080

white rgb(100100100) rgb(255255255) FFFFFF FFF


VALORES Y UNIDADES EN CSS (IV)




Valores de longitud

Se pueden expresar tanto en nuacutemero positivos como en negativos seguidos por una etiqueta(aunque algunas propiedades soacutelo aceptan valores positivos)

Las etiquetas son abreviaturas de dos letras que representan la medida de longitud Estas medidas de longitud se dividen en dos tipos absolutas y relativas

Unidades de longitud absolutas

Pulgadas (in) Cada pulgada equivale a 254 cm Centiacutemetros (cm) Miliacutemetros (mm) Puntos (pt) cada punto es un 172 de una pulgada (0035 de un centiacutemetro) Picas (pc ) otro teacutermino tipograacutefico equivale a 12 puntos (16 de una pulgada) Pixeles (px) cada punto de color en la pantalla y no tiene equivalencia con otras unidades

puesto que el tamantildeo de cada pixel depende de la resolucioacuten de pantalla Todas estas definiciones son equivalentes p font size 1in p font size 254cm p font size 254mm p font size 72pt p font size 6pc


VALORES Y UNIDADES EN CSS (V)




Unidades de longitud relativas

Son relativas a la medida de otras cosas em se llama asiacute por que se refiere al tamantildeo de una M mayuacutescula de una fuente dada pero en

la praacutectica es igual al tamantildeo de fuente de la fuente actual

p font size 09em Indica que el tama ntildeo de fuente del paacuterrafoseraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 vecesuna M mayuacutescula del tamantildeo heredado

ex se llama asiacute por que se refiere al tamantildeo de una x minuacutescula de la fuente a utilizar porcentaje de otro valor

p font size 120 Indica que el tama ntildeo de fuente del paacuterrafoseraacute el 120 mayor de tamantildeo heredado

div width 50 Indica que la anchura del div seraacute de la mitadde su contenedor

URLs Los valores de las propiedades que aceptan urls pueden ser

ndashURL absolutas Que van a funcionar independientemente de doacutende se encuentre la definicioacutendado que define el valor absoluto del destino ndashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento

que les llama


VALORES Y UNIDADES EN CSS (VI)




Palabras Clave

Cuando el valor de una propiedad viene dada por una palabra de alguacuten tipo Un ejemplo muy comuacuten es la palabra clave none el cual es distinto de 0 (cero) Por ejemplo

para eliminar el subrayado de un link en un documento HTML

alink avisited text decoration none

Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelopara el aacutembito de dicha propiedad o dicho de otro modo cada propiedad tiene un listado de

palabras clave que admite como valor Cada palabra clave dependiendo de la propiedad a la que se le haya asignado puede indicar

diferentes cosas

Inherit

Esta palabra clave la pueden utilizar todas las propiedades de CSS Hace que el valor de una propiedad sea igual a la de su padre Es decir fuerza la herencia En la mayoriacutea de los casos no hace falta especificarlo ya que es por defecto pero con algunas

propiedades si este es el comportamiento deseado si que hay que ponerlo (como con losbordes por ejemplo)


FUENTES (I)



FUENTES (I)

Familias de Fuentes

Lo que consideramos como una fuente en realidad puede estar compuesta por muchasvariaciones para definir la negrita la cursiva etc

Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegularTimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estasvariantes de Times es un tipo de fuente (font face ) y Times es una combinacioacuten de todas ellas esdecir Times es una familia de fuentes no un solo tipo de fuente

CSS define 5 familias geneacutericas ndashSerif (Times Georgia New Century Schoolbook) ndashSans-serif (Helvetica Geneva Verdana Arial Universe) ndashMonospace (Courier Courier New Andale Mono) ndashCursivas (Zapf Chancery Author Comic Sans) ndashFantasia (Western Woodblock Klingon)

Utilizando familias de fuentes geneacutericas Si se quiere que en un documento se utilice una fuente Sans-serif pero ninguna en particular se

pude declarar lo siguiente

body font family sans serif


FUENTES (II)



FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body font family Georgia

Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegadorno podraacute satisfacer la regla y utilizaraacute la fuente por defecto del navegador

Esto se puede intentar evitar combinando las fuentes especiacuteficas con las geneacutericas de forma queel documento resultante aunque no tenga exactamente la fuente deseada tenga una que se leparezca

body font family Georgia serif

Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body font family Georgia Times New Century Schoolbook serif

Peso de las Fuentes

Con la propiedadfont-weight

se puede controlar el peso de la fuente a utilizar Los posibles valores son normal (valor por defecto) bold bolder lighter 100

200 300 400 (equivalente a normal) 500 600 700 800 900 e inherit


FUENTES (III)



FUENTES (III)

Tamantildeo de las Fuentes

Con la propiedad font-size se puede controlar el tamantildeo de la fuente a utilizar Los posibles valores son

ndashValores absolutos xx-small x-small small medium large x-large xx-large ltlongitudgt

De acuerdo a la especificacioacuten de CSS la diferencia entre uno y otro valor es de 15 hacia

arriba en tamantildeo y 066 hacia abajo ndashValores relativos smaller larger ltlongitudgtltporcentajegt ndashValor heredado inherit

body font family sans serif p font size small La fuente ser aacute 066 veces el tamantildeo por

defecto de la fuente

p font size 14px La fuente ser aacute de 14px p font size 90 La fuente ser aacute 90 veces el tamantildeo

heredado de la fuentep font size 12em La fuente ser aacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p font size larger La fuente ser aacute 15 veces el tamantildeo

heredado de la fuente


FUENTES (IV)



FUENTES (IV)

Estilos y variantesFuentes con estilo Con la propiedad font-style se puede seleccionar entre texto normal cursiva y oblicuo Los posibles valores son italic oblique normal inherit La diferencia entre oblicuo y cursiva es que mientras cursiva es baacutesicamente un tipo de fuente

diferente en las que se les han aplicado pequentildeos cambios a los caracteres para ajustarse a loscambios de apariencia (por ejemplo en los serif) el texto en oblicuo no es maacutes que una

inclinacioacuten de los caracteres desde su versioacuten normal En realidad en la gran mayoriacutea de los casos como no suele existir una de las variantes las dos se

visualizan igual

Ejemplo

Variaciones de fuentes

Ademaacutes de estilos las fuentes pueden tener pequentildeas variaciones La propiedad para esto esfont-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cadapalabra son maacutes grandes que el resto ndashnormal texto ordinario (valor por defecto) ndash

inherit forzar la herencia


FUENTES (V)



FUENTES (V)

La propiedad font

Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una solapropiedad font

El valor seriacutea

[ltfont stylegt || ltfont variantgt || ltfont weightgt] ltfont sizegt[ltline heightgt] ltfont familygt

Los tres primeros valores (estilo variante y peso) se pueden colocar en cualquier orden estilo-

variante-peso estilo-peso-variante peso-estilo-variante peso-variante-estilo variante-estilo-pesoo variante-peso-estilo Tambieacuten se puede omitir cualquiera de ellas El tamantildeo la altura (si se define) y la familia en cambio deben ir en esa posicioacuten

Antildeadiendo altura de liacutenea En la propiedad font se puede antildeadir tambieacuten la altura de liacutenea aunque en realidad es una

propiedad del texto no de la fuente Se pone como una adicioacuten del tamantildeo de fuente separaacutendolo por una barra body font size 12px

h2 font bold italic 20012 Verdana Helvetica Arial sans serif

Esto hace que la fuente de las cabeceras H2 sean en negritacursiva con un tamantildeo del 200 del heredado (24px respecto albody) y la altura de liacutenea de 288 (12 de 24px)


TEXTO (I)



TEXTO (I)

Sangriacutea

Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutesdemandados Gracias a CSS esto se puede hacer con una simple propiedad text-indent

Posibles valores ltlongitudgt | ltporcentajegt | inherit

Los valores computados

ndashPara longitudes el valor absoluto indicado ndashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p text indent 3em el p aacuterrafo tendraacute una sangriacutea de 3em a laizquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a loselementos reemplazados

Puede tomar valores negativos

Alineacioacuten horizontal Hace referencia a coacutemo se alinean las liacuteneas de texto de un elemento La propiedad es text-align Posibles valores left | center | right | justify | inherit

Se aplica a los elementos en bloque


TEXTO (II)



( )

Alineacioacuten vertical

Altura de liacuteneas La propiedad line-height controla la distancia entre las liacuteneas de base de las liacuteneas de texto y

determina la cantidad por la cual la altura de cada cuadro de elemento aumenta o disminuye En realidad controla la separacioacuten entre liacuteneas es decir la separacioacuten entre liacuteneas de base del

texto Posibles valores ltlongitudgt|ltporcentajegt|ltnuacute merogt|normal|inherit

Valores computados ndashPara longitudes el valor absoluto indicado ndashPara porcentajes respecto al tamantildeo de fuente de elemento

Puede tener valores negativos

Alineacioacuten

La propiedad vertical-align se aplica soacutelo a elementos inline celdas de tablas y elementosreemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|text top|middle|bottom|texto

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo


TEXTO (III)



( )

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padre ndashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemiteinferior del elemento con la liacutenea de base del padre

vertical-align sub (subiacutendice)

ndashCausa que un elemento sea un subiacutendice ndashSu liacutenea de base se baja respecto a la liacutenea de base del padre ndashEl tamantildeo de letra no se modifica

vertical-align super (superiacutendice)

ndashCausa que un elemento sea un superiacutendice ndashSu liacutenea de base se eleva respecto a la liacutenea de base del padre ndashEl tamantildeo de letra no se modifica

vertical-align bottom

ndash Alinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de laliacutenea de cuadro

vertical-align top

ndashLo contrario que bottom Causa que un elemento sea un subiacutendice ndashSu liacutenea de base se baja respecto a la liacutenea de base del padre ndashEl tamantildeo de letra no se modifica


TEXTO (IV)



Espaciado de palabras y de caracteresEspaciado de palabras La propiedad word-spacing acepta valores positivos y negativos y dicho valor se le suma al

valor por defecto del inter-espaciado de palablas Posibles valores ltlongitudgt|normal|inherit

Espaciado de caracteres

La propiedadletter-spacing

modifica el espacio entre letras y tambieacuten acepta valores positivosy negativos Posibles valores ltlongitudgt|normal|inherit

Espaciado y alineacioacuten El valor de word-spacing puede estar influenciado por el valor de la propiedad text-align

Si un elemento estaacute justificado el espaciado entre palabras se modificaraacute automaacuteticamente para

que la liacutenea de texto ocupe toda la anchura puediendo no coincidir con el espaciado declaradopor el disentildeador El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino

aunque se justifique el texto no se cambiaraacute


TEXTO (V)



Transformacioacuten del texto

Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-transform Posibles valores uppercase|lowecase|capitalize|none|inherit

El valor por defecto es none (ninguno) uppercase y lowecase transforman el texto a mayuacutesculas o a minuacutesculas respectivamente capitalize transforma a mayuacutesculas soacutelo la primera letra de cada palabra

inherit fuerza la herenciaDecorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration

Valores none|underline|overline|line through|blink|inherit

Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredadoEjemplo


TEXTO (VI)



Manejando el espacio

La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lsoespacios los saltos de liacutenea y tabulaciones Posibles valores normal|nowrap|pre|inherit

El valor por defecto es normal es decir colapsar cualquier secuencia de espacios a un uacutenicoespacio y transformar los retornos de carro en espacios

pre mostrar tal cual con los espacios extra y los retornos de carro como saltos de liacutenea (como la

etiqueta pre en HTML) nowrap previene el texto de un elemento de ser ldquopartidordquo excepto si lo marca un ltbrgt (similar

al campo nowrap de las celdas de tabla en HTML) mostrar tal cual con los espacios extra y losretornos de carro como saltos de liacutenea (como la etiqueta pre en HTML)

Ejemplo

Direccioacuten del texto No todos los idiomas se escriben de izquierda a derecha y de arriba a abajo Para esto existe la propiedad direction Valores ltr|rtl|inherit

Que significan de izquierda a derecha (por defecto) de derecha a izquierda y heredado


MODELO DE CAJAS DE CSS (I)



Desde el punto de vista de las hojas de estilo todo lo que se muestra por HTML se pude entendercomo si estuviera contenido en una caja o cuadro

El modelo de cajas baacutesico de CSS seriacutea

El centro del modelo de cajas de CSS es el contenido en siacute entendiendo el contenido comocualquier cosa contenida en el aacuterea de la caja

La anchura visible de la caja estaacute determinada poranchura del contenido + paddings laterales + bordes lateralesLos maacutergenes determinan la distancia de cada lado entre la caja visible y los elementosadyacentes


MODELO DE CAJAS DE CSS (II)



De forma similar la altura visible del cuadro estaacute determinado poraltura del contenido + margenes sup e inf + bordes sup e inf

El margen en este caso tambieacuten indica la distancia con los objetos superiores e inferiores El valor de cada uno de estos tres elementos (margen borde y padding) se puede establecer

mediante propiedades CSS La suma de todas la propiedades horizontales (margin-left border-left padding-left width

padding-roght border-right margin-right) tiene que resultar la anchura del contenedor Sino esasiacute el propio navegador se suele encargar de modificar los valores para que encaje

Par ver esto en maacutes profundidad vamos a partir de un modelo baacutesico sin maacutergenes bordes nipadding

p

margin 0

padding 0

border 0

background color c0c0c0 Para ver mejor los efectos

Ejemplo


MODELO DE CAJAS DE CSS (III)



La propiedad width

Establece la anchura del contenido del elemento Sus valores son unidades positivas o auto

ndashauto indica que la anchura se calcula automaacuteticamente en funcioacuten del resto de paraacutemetroshorizontales para cubrir la anchura del elemento contenedor ndashLas unidades por ejemplo pueden ser 5px 100px 50 15em etc

Probemos a asignar anchuras en el ejemplo anterior

La propiedad height El valor por defecto de esta propiedad viene determinada por su contenido los cuadros se

forman tan altos como para visualizar todo su contenido Sus valores son unidades positivas o auto

ndashauto indica que la altura se calcula automaacuteticamente en funcioacuten de la altura de sus contenidos

(comportamiento por defecto) ndashLas unidades por ejemplo pueden ser 5px 100px 50 15em etc En estos casos si la alturaasignada es menor que el contenido a mostrar el comportamiento resultante puede serinesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

E


MODELO DE CAJAS DE CSS (IV)



Las propiedades de padding

Hay cuatro propiedades que definen el padding padding left padding rightpadding top y padding bottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puedetomar distintos nuacutemeros de valores

ndash1 valor Los 4 paddings tendraacuten el valor indicado ndash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y

derecho ndash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo parael izquierdo y el derecho) y el uacuteltimo para el inferior ndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior


MODELO DE CAJAS DE CSS (V)



Las propiedades de margin

Tambieacuten hay cuatro propiedades que definen el margin margin leftmargin right margin top y margin bottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puedetomar distintos nuacutemeros de valores

ndash1 valor Los 4 maacutergenes tendraacuten el valor indicado ndash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo

y derecho ndash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para elizquierdo y el derecho) y el uacuteltimo para el inferior ndash4 valores Un valor para cada uno en el orden top-right-bottom-left

En el caso de margin se puede asignar a las propiedades el valor auto Probemos a cambiar ahora los valores de los maacutergenes en el ejemplo anterior Tambieacuten

combinemos con cambios en los padding


MODELO DE CAJAS DE CSS (VI)



Las propiedades de border

Son maacutes complejas que las otras dado que no soacutelo afectan al espacio entre objetos sino tambieacutenal formato de dicho espacio Los bordes tienen tres propiedades

ndash Anchura (border style o border top style border right style border bottom style y border left style )

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (border color o border top color border right color border bottom color y border left color )

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (border style o border top style border right style border bottom style y border left style )

Puede tener el valor de cualquiera de las siguientes palabras claves double grooveinset none outset ridge solid dashed dotted hidden


MODELO DE CAJAS DE CSS (VII)



Las propiedades de display

Determina coacutemo va a mostrar el navegador un elemento si lo va a mostrar como un elemento enbloque en liacutenea elemento de lista etc Soacutelo hacer referencia a la visualizacioacuten no a la naturaleza del elemento Por mucho que

visualicemos un paacuterrafo como ldquoel liacuteneardquo desde el punto de vista HTML seguiraacute siendo unelemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elementoinline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los quevamos a ver ndashblock lo visualiza como un elemento en bloque ndashinline lo muestra como un elemento el liacutenea ndashlist-item como un elemento de listado ndashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa


MODELO DE CAJAS DE CSS (VIII)



Posicionando en CSS

La propiedad position Permite definir exactamente doacutende se va a colocar el cuadro del elemento en relacioacuten a doacutende

deberiacutean aparecer en realidad (o en relacioacuten al elemento padre a otro elemento o incluso a laventana del navegador en siacute)

Valores posibles static|relative|absolute|fixed|inherit

ndashstatic El cuadro del elemento se genera de forma normal como viene definido por la naturaleza

del elemento ndashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacuteginaCuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubieradesplazado

ndashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con laspropiedades left right top y bottom (especifican los desplazamientos con respecto al bloque decontencioacuten de la caja) Los elementos posicionados absolutamente no tienen influencia sobre la

posicioacuten de las cajas siguientes El bloque de contencioacuten para una caja posicionada es establecido por elantepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquinasuperior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la cajaposicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla delmonitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll enla paacutegina mantienen su posicioacuten en la pantalla)


MODELO DE CAJAS DE CSS (IX)



Desplazamientos top right bottom y left Los posibles valores para cada propiedad son ltlongitudgt|ltporcentajegt|auto|

inherit Propiedad top Especifica la distancia que se desplaza el elemento por debajo del borde superior

del bloque de contencioacuten de la caja

Propiedad right Especifica la distancia que se desplaza el elemento hacia la izquierda del bordederecho del bloque de contencioacuten de la caja

Propiedad bottom Especifica la distancia que se desplaza el elemento sobre de borde inferior del

bloque de contencioacuten de la caja Propiedad left Especifica la distancia que se desplaza el elemento hacia la derecha del borde

izquierdo del bloque de contencioacuten de la caja


MODELO DE CAJAS DE CSS (X)



Elementos flotantes

La propiedad float Un flotante es una caja que es desplazada a la izquierda o a la derecha en la liacutenea actual Esta

propiedad especifica si una caja debe flotar a la izquierda derecha o no debe flotar en absoluto Los valores de esta propiedad tienen los siguientes significados

ndashleft El elemento genera una caja de bloque que flota a la izquierda El contenido fluye sobre elcostado derecho de la caja comenzando en la parte superior

ndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzandoen la parte superior

ndashnone La caja no es flotante


MODELO DE CAJAS DE CSS (XI)



La propiedad clear

Indica cuaacutel de los lados de la caja de un elemento no puede quedar adyacente a una caja flotante

anterior Esta propiedad soacutelo puede especificarse para elementos a nivel de bloque (incluyendotambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significados ndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superiorquede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en eldocumento fuente

ndashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superiorquede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en eldocumento fuente

ndash both La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en eldocumento fuente

ndashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes


BACKGROUND (I)



El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementoses decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elementomaacutes al padding

Los bordes son el extremo externo del fondo

Color de fondo La propiedad background-color es muy similar a cualquier otro color y colorea el fondo del

elemento del color indicado Valores posibles ltcolorgt|transparent|inherit Los maacutergenes de elemento no forman parte del fondo de hecho son transparentes por lo que si

el elemento contenedor tuviera un color de fondo los maacutergenes mostrariacutean ese color dando lassensacioacuten de que dichos maacutergenes tiene alguacuten color asignado

Imaacutegenes de fondo Es posible asignar como fondo de un elemento una imagen mediante la propiedad background-image

Valores posibles lturigt|none|inherit El valor por defecto es none Por defecto no se heredan Si se quiere establecer una imagen de fondo se debe dar una ruta a la imagen deseada (absoluta

o relativa)


BACKGROUND (II)



Repeticioacuten con direccioacuten Indica que la imagen de fondo se va a repetir como se indica en el valor de la propiedad

background-repeat Valores posibles

ndashrepeat Hace que la imagen de fondo se repita tanto en horizontal como en vertical (como lasbaldosas en una pared)

ndashrepeat-x Hace que la imagen de fondo se repita soacutelo en horizontal ndashrepeat-y Hace que la imagen de fondo se repita soacutelo en vertical

ndashno-repeat Hace que la imagen de fondo no se repita ndashInherit Forzar herencia

Posicionando la imagen de fondo Para indicar en queacute posicioacuten se colocaraacute la imagen de fondo estaacute la propiedad background- position

Valores posibles ndash ltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde losbordes izquierdo y superior respectivamente

ndash ltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde losbordes izquierdo y superior respectivamente

ndashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0


BACKGROUND (III)



ndashtop right y right top Igual a 100 0

ndashleft left center y center left Igual a 0 50

ndashcenter y center center Igual a 50 50 ndashright right center y center right Igual a 100 50

ndashbottom left y left bottom Igual a 0 100

ndashbottom bottom center y center bottom Igual a 50 100

ndashbottom right y right bottom Igual a 100 1000

Adjunto La propiedad background-attachment indica que si se especifica una imagen de fondo si

permanece fija con respecto a la pantalla o se desplaza junto con el documento Valores posibles fixed (permanece fija)|scroll (se deplaza)|inherit

(forzar herencia)


BACKGROUND (IV)



Todo en uno La propiedad background es una propiedad resumida para fijar la propiedades individuales

del fondo en un solo paso Si se especifican solamente algunas de las propiedades individualespara las ausentes se usa su valor inicial

Valores posibles[background-color]||[background-image]||[background-repeat]||[background-position]|inherit

Por ejemplo

body background red

div

background url(ldquoimggifrdquo) ffffff 50 repeat fixed


LISTADOS (I)



En CSS los elementos de una lista no son maacutes que cuadros en bloque pero con una parte extra(ldquoantildeadidordquo) que en realidad no participa en el coacutedigo en siacute el marcador

En una lista ordenadas (ol) el ldquoantildeadidordquo es una serie creciente de nuacutemeros o letrasEl listas no ordenadas (ul) el antildeadido es una ldquoimagenrdquo o ldquofigurardquo De alguacuten modo casi todo lo que no es texto en narrativa se puede considerar una lista el censo

de un municipio un aacuterbol genealoacutegico un menuacute del diacutea el sistema solar Los listados de pueden anidar de forma que se pueden crear listados de listados pudiendo crear

asiacute estructuras complejas

Las maneras en las que se puede modificar la apariencia de un listado o elemento de un listado(ademaacutes de las vistas hasta ahora para fuentes textos elementos en bloque etc) son bastantelimitadas


LISTADOS (II)



Tipos de lista

Para modificar el marcador de los listados la propiedad es list-style-type Los posibles valores para esta propiedad son disc circle square decimal

decimal leading zero upper alpha upper latin lower alpha lower latin upper roman lower roman lower greek armenian georgiannone

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo tratecomo un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listadosoacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSSdistingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p list style type none pero esta declaracioacuten no interrumpe la cuenta en las listas ordenadas

En principio es una propiedad que se hereda por lo si se quiere tener diferentes marcadorespara listados anidados habriacutea que declararlo

Ejemplo


LISTADOS (III)



Imaacutegenes en marcadores de lista

Para los casos en los que se desea que el marcador de los listados sea una imagen existe lapropiedad es list-style-image Los posibles valores para esta propiedad son lturlgt|none|inherit

Se debe tener cuidado con la imagen que se utiliza dado que si es demasiado grande para elelemento de listado al que acompantildea el resultado puede ser desastroso

En los casos en los que se ha especificado una imagen como marcador suele ser una buena

praacutectica proveer un respaldo para cuando la carga de la imagen falla por ejemplo Esto se puedehacer definiendo un valor para la propiedad list-style-type En los casos de listas anidadas tambieacuten suele ser una buena praacutectica asignar el valor none (que es

el valor por defecto) al list-style-image si no se desea utilizar dado que por defecto sehereda

Ejemplo


LISTADOS (IV)



Posicioacuten en marcadores de lista

La propiedad list-style-position indica si el marcador aparece fuera o dentro delcontenido del elemento de lista Los posibles valores para esta propiedad son inside|outside|inherit

Con el valor outside (por defecto) hace que el marcador aparezca como normalmente lo haceen la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento delista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlist style typegt]||[ltlist style imagegt]||[ltlist style

positiongt]|inherit

Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesarioque todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square


LISTADOS (V)



Disentildeo de listas

La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSSCada agente de usuario los disentildea a su manera Los marcadores definidos como outside no afectan a la visualizacioacuten de otros elementos Pero

cuando el marcador se define como inside actuacutea como un elemento en liacutenea al comienzo delelemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elementodel lista sino tambieacuten aacuterea de contenido del listado en siacute La mayoriacutea de navegadores antildeaden una

sangriacutea a los elementos de lista de manera que se muevan un poco a la derecha Lo hacenutilizando las propiedades padding o margin algo asiacute

ul ol margin left 40px Usada por Internet Explorer y Opera

ul lo padding left 40px Navegadores basados en Gecko

Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margincomo el padding para que funcione correctamente en todos los navegadores

ul margin left 0 padding left 1em

ul margin left 1em padding left 0


FUENTES DE INFORMACIOacuteN Y ENLACES



CSS The Definitive Guide de Eric A Meyer (OReilly 3ordf edicioacuten 2006) HTML Utopia Designing without tables (using CSS) de Dan Shafer (Sitepoint 2004)

Recursos en la web de hojas de estilo en cascada ndashhttpwwwsidarorgrecurdesdimcssindexphp ndashhttpwwww3orgStyleLieBos2eenter ndashhttpwwww3orgMarkUpGuideStyle ndashhttpeshtmlnettutorialscss ndash

httpwwww3orgStyleExamples011firstcsseshtml ndashhttpwwwtejedoresdelwebcomwCSS


Licencia Copyleft



Copyright


Licencia Copyleft



Este documento estaacute protegido bajo la licencia

Reconocimiento-SinObraDerivada 21 Espantildea de CreativeCommon (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccom gt

Irontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten uso

comercial y realizacioacuten de la obra siempre y cuando se

reconozca la autoriacutea de la misma a no sea ser que se

obtenga permiso expreso del autor El autor no permite

distribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sino

una traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)




INTRODUCCIOacuteN (I)

iquestQueacute son las hojas de estilo Hojas de Estilo o CSS por Cascading Stylesheet Trata de dar la separacioacuten definitiva de la loacutegica (estructura) y el fiacutesico (presentacioacuten coacutemo

mostrar ) del documento es decir el contenido de las paacuteginas de su apariencia

iquestCoacutemo funcionan En HTML las etiquetas (tags) indican al navegador cuaacuteles son los elementos que compondraacuten la

paacutegina y el navegador aplicaraacute a cada elemento su formato correspondiente Por ejemplolth3gtTiacutetulolth3gt

indica que el texto Tiacutetulo es un encabezado de nivel 3 y el navegador le aplicaraacute su formatopredeterminado (que variacutea un poco dependiendo del agente de usuario o navegador - Internet Explorer Netscape Mozilla- o si usamos Windows Mac o Linux)

Ejemplo







Ejemplo



Ejemplo




VENTAJAS DEL CSS
















disentildeador




ELEMENTOS (I)












ELEMENTOS (II)
























screen en pantalla










Ejemplo





















ltstylegt








ltstylegt









lt--


--gtltstylegt






ltpgt






SINTAXIS DE CSS













SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft




















Ejemplo



Ejemplo




VENTAJAS DEL CSS
















disentildeador




ELEMENTOS (I)












ELEMENTOS (II)
























screen en pantalla










Ejemplo





















ltstylegt








ltstylegt









lt--


--gtltstylegt






ltpgt






SINTAXIS DE CSS













SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















VENTAJAS DEL CSS
















disentildeador




ELEMENTOS (I)












ELEMENTOS (II)
























screen en pantalla










Ejemplo





















ltstylegt








ltstylegt









lt--


--gtltstylegt






ltpgt






SINTAXIS DE CSS













SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft





















disentildeador




ELEMENTOS (I)












ELEMENTOS (II)
























screen en pantalla










Ejemplo





















ltstylegt








ltstylegt









lt--


--gtltstylegt






ltpgt






SINTAXIS DE CSS













SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















ELEMENTOS (I)












ELEMENTOS (II)
























screen en pantalla










Ejemplo





















ltstylegt








ltstylegt









lt--


--gtltstylegt






ltpgt






SINTAXIS DE CSS













SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















ELEMENTOS (II)
























screen en pantalla










Ejemplo





















ltstylegt








ltstylegt









lt--


--gtltstylegt






ltpgt






SINTAXIS DE CSS













SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft




























screen en pantalla










Ejemplo





















ltstylegt








ltstylegt









lt--


--gtltstylegt






ltpgt






SINTAXIS DE CSS













SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft






















Ejemplo





















ltstylegt








ltstylegt









lt--


--gtltstylegt






ltpgt






SINTAXIS DE CSS













SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

































ltstylegt








ltstylegt









lt--


--gtltstylegt






ltpgt






SINTAXIS DE CSS













SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft





















lt--


--gtltstylegt






ltpgt






SINTAXIS DE CSS













SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















SINTAXIS DE CSS













SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















SINTAXIS DE CSS










SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















SELECTORES (I)










SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















SELECTORES (II)





font-weight bold

clase2

font-style italic


Ejemplo



clase2

font-style italic




SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















SELECTORES (III)



identificador2

font-style italic


Ejemplo




identificador2

font-style italic




SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















SELECTORES (IV)





p[id]

color red

Por valor exacto


font-weight bold


color red




SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















SELECTORES (V)

Por valor parcial





font-weight bold


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft


























h1 em

font-size 14px































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft







































PSEUDO-CLASES (I)









ndashlang





PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















PSEUDO-CLASES (II)










PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















PSEUDO-CLASES (III)
























color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
































color silver






















background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

































background white










h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft





















h2 colorsilver 0001


color maroon 0017



color gray 0000











HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















HERENCIA (I)













LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















LA CASCADA (I)











LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















LA CASCADA (II)











valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft




















valores permitido








Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















Colores por RGB

















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft





















green rgb(0500) rgb(01280) 008000

blue rgb(00100) rgb(00255) 0000FF 00F



gray rgb(505050) rgb(128128128) 808080

lime rgb(01000) rgb(02550) 00FF00 0F0

maroon rgb(5000) rgb(12800) 800000


purple rgb(50050) rgb(1280128) 800080


teal rgb(05050) rgb(0128128) 008080







Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















Valores de longitud





















que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft



























que les llama






Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

















Palabras Clave






diferentes cosas

Inherit




FUENTES (I)



FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















FUENTES (I)

Familias de Fuentes








FUENTES (II)



FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















FUENTES (II)







Peso de las Fuentes





FUENTES (III)



FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















FUENTES (III)














FUENTES (IV)



FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















FUENTES (IV)




visualizan igual

Ejemplo






FUENTES (V)



FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















FUENTES (V)

La propiedad font


El valor seriacutea









TEXTO (I)



TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















TEXTO (I)

Sangriacutea





El valor seriacutea







TEXTO (II)



( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















( )







Alineacioacuten



Ejemplo


TEXTO (III)



( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















( )









vertical-align top



TEXTO (IV)













TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft


























TEXTO (V)









heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft






















heredadoEjemplo


TEXTO (VI)









Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft






















Ejemplo




















p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft





























p

margin 0

padding 0

border 0


Ejemplo





La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















La propiedad width










E














































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft

























































Posicionando en CSS
























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft



























Elementos flotantes










La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















La propiedad clear








BACKGROUND (I)











o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
























o relativa)


BACKGROUND (II)














BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft



























BACKGROUND (III)











(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
























(forzar herencia)


BACKGROUND (IV)






Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft



















Por ejemplo

body background red

div



LISTADOS (I)









LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft






















LISTADOS (II)



Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft
















Tipos de lista








Ejemplo


LISTADOS (III)









Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft






















Ejemplo


LISTADOS (IV)






Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft



















Ejemplo



positiongt]|inherit



ul list outside




LISTADOS (V)





















Licencia Copyleft



Copyright


Licencia Copyleft


































Licencia Copyleft



Copyright


Licencia Copyleft
















Copyright


Licencia Copyleft














css avanzado

Documents