Curso CSS Avanzado

74
CSS: Hoja de Estilo en Cascada CSS AVANZADO

description

Transparencias Curso CSS Avanzado impartido por Eider Bilbao para EHU/UPV. Octubre 2009.

Transcript of Curso CSS Avanzado

Page 1: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

CSS AVANZADO

CSS Hoja de Esti lo en Cascada

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 formato predeterminado (que variacutea un poco dependiendo del agente de usuario o navegador - Internet Explorer Netscape Mozilla- o si usamos Windows Mac o Linux)

Ejemplo

CSS Hoja de Esti lo en Cascada

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 h3

lth3 align=rdquocenterrdquogtzwj 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 ser

geneacutericos para elementos tipos de elementos pueden ser reutilizados etc Por ejemplo

h3 font-family Arial Sans-serif 

 font-size 19pt color 0000FF text-align center 

Ejemplo

CSS Hoja de Esti lo en Cascada

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 disentildeadorndashSe centralizan los comandos para los efectos visuales en un mismo sitio y se pueden reutilizarincluir desde varios sitiosndashSe 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 es necesario 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 manera que 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 de estilos 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

CSS Hoja de Esti lo en Cascada

ldquoDESVENTAJASrdquo DEL CSS

El soporte irregular que tienen los navegadores del CSS ndashAlgunas propiedades no estaacuten implementadas correctamente en algunos navegadores por lo que no funcionan bienndashPueden existir diferencias en un mismo navegador seguacuten sea para Mac Windows o LinuxndashTambieacuten hay diferencias en la implementacioacuten dependiendo de las distintas versiones de un mismo navegador

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

CSS Hoja de Esti lo en Cascada

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 elementos img 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 Por ejemplo ltspangtiexclHolaltspangt

CSS Hoja de Esti lo en Cascada

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 Por ejemplo los elementos pdiv

Los elementos de listados son un caso especial de elementos en bloque puesto que ldquoadjuntardquo un ldquomarcadorrdquo al cuadro del elemento Excepto por este marcador son ideacutenticos al resto de elementos 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 elementos strong em span Los elementos en liacutenea no generan ldquosaltosrdquo o rupturas antes ni despues del cuadro del elementoNota 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

CSS Hoja de Esti lo en Cascada

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 denominan hojas de esti lo externas

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

Debe estar situado en la cabecera del documento HTML (entre las etiquetas ltheadgt y ltheadgt)

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 etiquetandashrel la relacioacuten en este caso hoja de estilos (stylesheet)ndashtype para el caso de CSS siempre seraacute textcss Describe el tipo de datos que se cargaraacuten usando este enlacendashhref la direccioacuten a la hoja de estilos que puede ser absoluta o relativandashmedia en este caso all que indica que la hoja de estilos se aplicaraacute en cualquier medio de presentacioacuten Tipos de medio para Web

all todos los medios

screen en pantalla

print en la impresioacuten del documento o en la ldquovista previardquo

CSS Hoja de Esti lo en Cascada

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 documento

Hojas 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 hojas de 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 agrupanndashSi no se les asigna el valor title se convierten en persistentes es decir se usaraacute siempre

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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=rdquotextcssrdquogtzwj reglas de estiloltstylegt

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

A los estilos entre las etiquetas ltstylegt y ltstylegt se les denomina hoja de esti los del documento hoja de estilos incrustas u hoja de estilos embebida

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 directiva import

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

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comandondashEl 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 funcionandashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

zwj otras reglas de estiloltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todas las 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) allimport url(hojaestilos2css) screenimport url(hojaestilos3css) screenprintimport url(httpejemploorglibreriaestiloscss) allotras reglas de estilo

ltstylegt

Nota Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglas Como el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 2: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 formato predeterminado (que variacutea un poco dependiendo del agente de usuario o navegador - Internet Explorer Netscape Mozilla- o si usamos Windows Mac o Linux)

Ejemplo

CSS Hoja de Esti lo en Cascada

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 h3

lth3 align=rdquocenterrdquogtzwj 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 ser

geneacutericos para elementos tipos de elementos pueden ser reutilizados etc Por ejemplo

h3 font-family Arial Sans-serif 

 font-size 19pt color 0000FF text-align center 

Ejemplo

CSS Hoja de Esti lo en Cascada

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 disentildeadorndashSe centralizan los comandos para los efectos visuales en un mismo sitio y se pueden reutilizarincluir desde varios sitiosndashSe 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 es necesario 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 manera que 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 de estilos 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

CSS Hoja de Esti lo en Cascada

ldquoDESVENTAJASrdquo DEL CSS

El soporte irregular que tienen los navegadores del CSS ndashAlgunas propiedades no estaacuten implementadas correctamente en algunos navegadores por lo que no funcionan bienndashPueden existir diferencias en un mismo navegador seguacuten sea para Mac Windows o LinuxndashTambieacuten hay diferencias en la implementacioacuten dependiendo de las distintas versiones de un mismo navegador

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

CSS Hoja de Esti lo en Cascada

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 elementos img 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 Por ejemplo ltspangtiexclHolaltspangt

CSS Hoja de Esti lo en Cascada

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 Por ejemplo los elementos pdiv

Los elementos de listados son un caso especial de elementos en bloque puesto que ldquoadjuntardquo un ldquomarcadorrdquo al cuadro del elemento Excepto por este marcador son ideacutenticos al resto de elementos 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 elementos strong em span Los elementos en liacutenea no generan ldquosaltosrdquo o rupturas antes ni despues del cuadro del elementoNota 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

CSS Hoja de Esti lo en Cascada

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 denominan hojas de esti lo externas

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

Debe estar situado en la cabecera del documento HTML (entre las etiquetas ltheadgt y ltheadgt)

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 etiquetandashrel la relacioacuten en este caso hoja de estilos (stylesheet)ndashtype para el caso de CSS siempre seraacute textcss Describe el tipo de datos que se cargaraacuten usando este enlacendashhref la direccioacuten a la hoja de estilos que puede ser absoluta o relativandashmedia en este caso all que indica que la hoja de estilos se aplicaraacute en cualquier medio de presentacioacuten Tipos de medio para Web

all todos los medios

screen en pantalla

print en la impresioacuten del documento o en la ldquovista previardquo

CSS Hoja de Esti lo en Cascada

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 documento

Hojas 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 hojas de 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 agrupanndashSi no se les asigna el valor title se convierten en persistentes es decir se usaraacute siempre

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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=rdquotextcssrdquogtzwj reglas de estiloltstylegt

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

A los estilos entre las etiquetas ltstylegt y ltstylegt se les denomina hoja de esti los del documento hoja de estilos incrustas u hoja de estilos embebida

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 directiva import

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

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comandondashEl 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 funcionandashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

zwj otras reglas de estiloltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todas las 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) allimport url(hojaestilos2css) screenimport url(hojaestilos3css) screenprintimport url(httpejemploorglibreriaestiloscss) allotras reglas de estilo

ltstylegt

Nota Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglas Como el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 3: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 h3

lth3 align=rdquocenterrdquogtzwj 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 ser

geneacutericos para elementos tipos de elementos pueden ser reutilizados etc Por ejemplo

h3 font-family Arial Sans-serif 

 font-size 19pt color 0000FF text-align center 

Ejemplo

CSS Hoja de Esti lo en Cascada

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 disentildeadorndashSe centralizan los comandos para los efectos visuales en un mismo sitio y se pueden reutilizarincluir desde varios sitiosndashSe 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 es necesario 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 manera que 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 de estilos 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

CSS Hoja de Esti lo en Cascada

ldquoDESVENTAJASrdquo DEL CSS

El soporte irregular que tienen los navegadores del CSS ndashAlgunas propiedades no estaacuten implementadas correctamente en algunos navegadores por lo que no funcionan bienndashPueden existir diferencias en un mismo navegador seguacuten sea para Mac Windows o LinuxndashTambieacuten hay diferencias en la implementacioacuten dependiendo de las distintas versiones de un mismo navegador

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

CSS Hoja de Esti lo en Cascada

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 elementos img 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 Por ejemplo ltspangtiexclHolaltspangt

CSS Hoja de Esti lo en Cascada

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 Por ejemplo los elementos pdiv

Los elementos de listados son un caso especial de elementos en bloque puesto que ldquoadjuntardquo un ldquomarcadorrdquo al cuadro del elemento Excepto por este marcador son ideacutenticos al resto de elementos 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 elementos strong em span Los elementos en liacutenea no generan ldquosaltosrdquo o rupturas antes ni despues del cuadro del elementoNota 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

CSS Hoja de Esti lo en Cascada

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 denominan hojas de esti lo externas

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

Debe estar situado en la cabecera del documento HTML (entre las etiquetas ltheadgt y ltheadgt)

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 etiquetandashrel la relacioacuten en este caso hoja de estilos (stylesheet)ndashtype para el caso de CSS siempre seraacute textcss Describe el tipo de datos que se cargaraacuten usando este enlacendashhref la direccioacuten a la hoja de estilos que puede ser absoluta o relativandashmedia en este caso all que indica que la hoja de estilos se aplicaraacute en cualquier medio de presentacioacuten Tipos de medio para Web

all todos los medios

screen en pantalla

print en la impresioacuten del documento o en la ldquovista previardquo

CSS Hoja de Esti lo en Cascada

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 documento

Hojas 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 hojas de 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 agrupanndashSi no se les asigna el valor title se convierten en persistentes es decir se usaraacute siempre

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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=rdquotextcssrdquogtzwj reglas de estiloltstylegt

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

A los estilos entre las etiquetas ltstylegt y ltstylegt se les denomina hoja de esti los del documento hoja de estilos incrustas u hoja de estilos embebida

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 directiva import

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

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comandondashEl 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 funcionandashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

zwj otras reglas de estiloltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todas las 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) allimport url(hojaestilos2css) screenimport url(hojaestilos3css) screenprintimport url(httpejemploorglibreriaestiloscss) allotras reglas de estilo

ltstylegt

Nota Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglas Como el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 4: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 disentildeadorndashSe centralizan los comandos para los efectos visuales en un mismo sitio y se pueden reutilizarincluir desde varios sitiosndashSe 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 es necesario 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 manera que 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 de estilos 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

CSS Hoja de Esti lo en Cascada

ldquoDESVENTAJASrdquo DEL CSS

El soporte irregular que tienen los navegadores del CSS ndashAlgunas propiedades no estaacuten implementadas correctamente en algunos navegadores por lo que no funcionan bienndashPueden existir diferencias en un mismo navegador seguacuten sea para Mac Windows o LinuxndashTambieacuten hay diferencias en la implementacioacuten dependiendo de las distintas versiones de un mismo navegador

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

CSS Hoja de Esti lo en Cascada

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 elementos img 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 Por ejemplo ltspangtiexclHolaltspangt

CSS Hoja de Esti lo en Cascada

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 Por ejemplo los elementos pdiv

Los elementos de listados son un caso especial de elementos en bloque puesto que ldquoadjuntardquo un ldquomarcadorrdquo al cuadro del elemento Excepto por este marcador son ideacutenticos al resto de elementos 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 elementos strong em span Los elementos en liacutenea no generan ldquosaltosrdquo o rupturas antes ni despues del cuadro del elementoNota 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

CSS Hoja de Esti lo en Cascada

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 denominan hojas de esti lo externas

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

Debe estar situado en la cabecera del documento HTML (entre las etiquetas ltheadgt y ltheadgt)

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 etiquetandashrel la relacioacuten en este caso hoja de estilos (stylesheet)ndashtype para el caso de CSS siempre seraacute textcss Describe el tipo de datos que se cargaraacuten usando este enlacendashhref la direccioacuten a la hoja de estilos que puede ser absoluta o relativandashmedia en este caso all que indica que la hoja de estilos se aplicaraacute en cualquier medio de presentacioacuten Tipos de medio para Web

all todos los medios

screen en pantalla

print en la impresioacuten del documento o en la ldquovista previardquo

CSS Hoja de Esti lo en Cascada

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 documento

Hojas 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 hojas de 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 agrupanndashSi no se les asigna el valor title se convierten en persistentes es decir se usaraacute siempre

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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=rdquotextcssrdquogtzwj reglas de estiloltstylegt

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

A los estilos entre las etiquetas ltstylegt y ltstylegt se les denomina hoja de esti los del documento hoja de estilos incrustas u hoja de estilos embebida

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 directiva import

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

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comandondashEl 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 funcionandashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

zwj otras reglas de estiloltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todas las 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) allimport url(hojaestilos2css) screenimport url(hojaestilos3css) screenprintimport url(httpejemploorglibreriaestiloscss) allotras reglas de estilo

ltstylegt

Nota Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglas Como el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 5: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

ldquoDESVENTAJASrdquo DEL CSS

El soporte irregular que tienen los navegadores del CSS ndashAlgunas propiedades no estaacuten implementadas correctamente en algunos navegadores por lo que no funcionan bienndashPueden existir diferencias en un mismo navegador seguacuten sea para Mac Windows o LinuxndashTambieacuten hay diferencias en la implementacioacuten dependiendo de las distintas versiones de un mismo navegador

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

CSS Hoja de Esti lo en Cascada

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 elementos img 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 Por ejemplo ltspangtiexclHolaltspangt

CSS Hoja de Esti lo en Cascada

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 Por ejemplo los elementos pdiv

Los elementos de listados son un caso especial de elementos en bloque puesto que ldquoadjuntardquo un ldquomarcadorrdquo al cuadro del elemento Excepto por este marcador son ideacutenticos al resto de elementos 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 elementos strong em span Los elementos en liacutenea no generan ldquosaltosrdquo o rupturas antes ni despues del cuadro del elementoNota 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

CSS Hoja de Esti lo en Cascada

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 denominan hojas de esti lo externas

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

Debe estar situado en la cabecera del documento HTML (entre las etiquetas ltheadgt y ltheadgt)

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 etiquetandashrel la relacioacuten en este caso hoja de estilos (stylesheet)ndashtype para el caso de CSS siempre seraacute textcss Describe el tipo de datos que se cargaraacuten usando este enlacendashhref la direccioacuten a la hoja de estilos que puede ser absoluta o relativandashmedia en este caso all que indica que la hoja de estilos se aplicaraacute en cualquier medio de presentacioacuten Tipos de medio para Web

all todos los medios

screen en pantalla

print en la impresioacuten del documento o en la ldquovista previardquo

CSS Hoja de Esti lo en Cascada

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 documento

Hojas 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 hojas de 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 agrupanndashSi no se les asigna el valor title se convierten en persistentes es decir se usaraacute siempre

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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=rdquotextcssrdquogtzwj reglas de estiloltstylegt

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

A los estilos entre las etiquetas ltstylegt y ltstylegt se les denomina hoja de esti los del documento hoja de estilos incrustas u hoja de estilos embebida

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 directiva import

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

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comandondashEl 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 funcionandashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

zwj otras reglas de estiloltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todas las 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) allimport url(hojaestilos2css) screenimport url(hojaestilos3css) screenprintimport url(httpejemploorglibreriaestiloscss) allotras reglas de estilo

ltstylegt

Nota Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglas Como el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 6: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 elementos img 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 Por ejemplo ltspangtiexclHolaltspangt

CSS Hoja de Esti lo en Cascada

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 Por ejemplo los elementos pdiv

Los elementos de listados son un caso especial de elementos en bloque puesto que ldquoadjuntardquo un ldquomarcadorrdquo al cuadro del elemento Excepto por este marcador son ideacutenticos al resto de elementos 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 elementos strong em span Los elementos en liacutenea no generan ldquosaltosrdquo o rupturas antes ni despues del cuadro del elementoNota 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

CSS Hoja de Esti lo en Cascada

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 denominan hojas de esti lo externas

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

Debe estar situado en la cabecera del documento HTML (entre las etiquetas ltheadgt y ltheadgt)

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 etiquetandashrel la relacioacuten en este caso hoja de estilos (stylesheet)ndashtype para el caso de CSS siempre seraacute textcss Describe el tipo de datos que se cargaraacuten usando este enlacendashhref la direccioacuten a la hoja de estilos que puede ser absoluta o relativandashmedia en este caso all que indica que la hoja de estilos se aplicaraacute en cualquier medio de presentacioacuten Tipos de medio para Web

all todos los medios

screen en pantalla

print en la impresioacuten del documento o en la ldquovista previardquo

CSS Hoja de Esti lo en Cascada

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 documento

Hojas 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 hojas de 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 agrupanndashSi no se les asigna el valor title se convierten en persistentes es decir se usaraacute siempre

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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=rdquotextcssrdquogtzwj reglas de estiloltstylegt

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

A los estilos entre las etiquetas ltstylegt y ltstylegt se les denomina hoja de esti los del documento hoja de estilos incrustas u hoja de estilos embebida

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 directiva import

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

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comandondashEl 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 funcionandashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

zwj otras reglas de estiloltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todas las 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) allimport url(hojaestilos2css) screenimport url(hojaestilos3css) screenprintimport url(httpejemploorglibreriaestiloscss) allotras reglas de estilo

ltstylegt

Nota Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglas Como el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 7: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 Por ejemplo los elementos pdiv

Los elementos de listados son un caso especial de elementos en bloque puesto que ldquoadjuntardquo un ldquomarcadorrdquo al cuadro del elemento Excepto por este marcador son ideacutenticos al resto de elementos 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 elementos strong em span Los elementos en liacutenea no generan ldquosaltosrdquo o rupturas antes ni despues del cuadro del elementoNota 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

CSS Hoja de Esti lo en Cascada

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 denominan hojas de esti lo externas

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

Debe estar situado en la cabecera del documento HTML (entre las etiquetas ltheadgt y ltheadgt)

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 etiquetandashrel la relacioacuten en este caso hoja de estilos (stylesheet)ndashtype para el caso de CSS siempre seraacute textcss Describe el tipo de datos que se cargaraacuten usando este enlacendashhref la direccioacuten a la hoja de estilos que puede ser absoluta o relativandashmedia en este caso all que indica que la hoja de estilos se aplicaraacute en cualquier medio de presentacioacuten Tipos de medio para Web

all todos los medios

screen en pantalla

print en la impresioacuten del documento o en la ldquovista previardquo

CSS Hoja de Esti lo en Cascada

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 documento

Hojas 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 hojas de 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 agrupanndashSi no se les asigna el valor title se convierten en persistentes es decir se usaraacute siempre

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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=rdquotextcssrdquogtzwj reglas de estiloltstylegt

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

A los estilos entre las etiquetas ltstylegt y ltstylegt se les denomina hoja de esti los del documento hoja de estilos incrustas u hoja de estilos embebida

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 directiva import

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

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comandondashEl 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 funcionandashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

zwj otras reglas de estiloltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todas las 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) allimport url(hojaestilos2css) screenimport url(hojaestilos3css) screenprintimport url(httpejemploorglibreriaestiloscss) allotras reglas de estilo

ltstylegt

Nota Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglas Como el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 8: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 denominan hojas de esti lo externas

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

Debe estar situado en la cabecera del documento HTML (entre las etiquetas ltheadgt y ltheadgt)

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 etiquetandashrel la relacioacuten en este caso hoja de estilos (stylesheet)ndashtype para el caso de CSS siempre seraacute textcss Describe el tipo de datos que se cargaraacuten usando este enlacendashhref la direccioacuten a la hoja de estilos que puede ser absoluta o relativandashmedia en este caso all que indica que la hoja de estilos se aplicaraacute en cualquier medio de presentacioacuten Tipos de medio para Web

all todos los medios

screen en pantalla

print en la impresioacuten del documento o en la ldquovista previardquo

CSS Hoja de Esti lo en Cascada

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 documento

Hojas 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 hojas de 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 agrupanndashSi no se les asigna el valor title se convierten en persistentes es decir se usaraacute siempre

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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=rdquotextcssrdquogtzwj reglas de estiloltstylegt

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

A los estilos entre las etiquetas ltstylegt y ltstylegt se les denomina hoja de esti los del documento hoja de estilos incrustas u hoja de estilos embebida

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 directiva import

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

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comandondashEl 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 funcionandashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

zwj otras reglas de estiloltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todas las 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) allimport url(hojaestilos2css) screenimport url(hojaestilos3css) screenprintimport url(httpejemploorglibreriaestiloscss) allotras reglas de estilo

ltstylegt

Nota Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglas Como el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 9: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 documento

Hojas 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 hojas de 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 agrupanndashSi no se les asigna el valor title se convierten en persistentes es decir se usaraacute siempre

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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=rdquotextcssrdquogtzwj reglas de estiloltstylegt

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

A los estilos entre las etiquetas ltstylegt y ltstylegt se les denomina hoja de esti los del documento hoja de estilos incrustas u hoja de estilos embebida

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 directiva import

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

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comandondashEl 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 funcionandashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

zwj otras reglas de estiloltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todas las 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) allimport url(hojaestilos2css) screenimport url(hojaestilos3css) screenprintimport url(httpejemploorglibreriaestiloscss) allotras reglas de estilo

ltstylegt

Nota Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglas Como el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 10: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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=rdquotextcssrdquogtzwj reglas de estiloltstylegt

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

A los estilos entre las etiquetas ltstylegt y ltstylegt se les denomina hoja de esti los del documento hoja de estilos incrustas u hoja de estilos embebida

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 directiva import

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

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comandondashEl 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 funcionandashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

zwj otras reglas de estiloltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todas las 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) allimport url(hojaestilos2css) screenimport url(hojaestilos3css) screenprintimport url(httpejemploorglibreriaestiloscss) allotras reglas de estilo

ltstylegt

Nota Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglas Como el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 11: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (IV)

La mayor diferencia es la sintaxis y el emplazamiento del comandondashEl 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 funcionandashSintaxis

ltstyle type=rdquotextcssrdquogtimport url(hojaestiloscss)

zwj otras reglas de estiloltstylegt

Como con link puede haber maacutes de una sentencia import pero a diferencia de link todas las 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) allimport url(hojaestilos2css) screenimport url(hojaestilos3css) screenprintimport url(httpejemploorglibreriaestiloscss) allotras reglas de estilo

ltstylegt

Nota Internet Explorer para Windows no ignora las directivas import aunque vengan despueacutes de otras reglas Como el resto de navegadores si lo hacen es una fuente comuacuten de errores Lo mejor es acostumbrarse al estaacutendar para evitar errores

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 12: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

REUNIR HTML Y CSS (V)

Compatibilidad hacia atraacutes Los navegadores antiguos ignoran las etiquetas que no reconocen pero no su contenido Por lo

que si no reconoce la etiqueta style la ignoraraacute pero no su contenido que se mostraraacute como texto ordinario

Solucioacuten encerrar las declaraciones entre comentarios HTMLltstyle type=rdquotextcssrdquogt

lt--las reglas de estilo--gt

ltstylegt

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 maacutesltpgt

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

No es la manera maacutes recomendable de utilizar los estilos

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 13: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 elementosndashBloque 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 porndashUna propiedad CSS que consiste en alguna palabra clave definida por el lenguajendashUn valor para dicha propiedad Existen diferentes valores y cada propiedad puede aceptar alguno de esos valoresndashLa 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)

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 14: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 agrupan separando los selectores con comas ()

p h1 h2 zwj font-weight boldzwj color red

Comentarios en CSS Los comentarios de CSS estaacuten rodeados por y Esto es un comentario en CSS

Esto es otro comentario en CSSque ademaacutes ocupa maacutes de una liacuteneay todas ellas estaacuten comentadas

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 15: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

SELECTORES (I)

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

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

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

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

Selector 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

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 16: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 pero contiene 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 este caso todo elemento que tenga una clase con valor clase1 estaraacute en negrita el que tenga clase2 en cursiva y el que tenga ambas en negrita y cursiva

Ejemplo

Nota 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

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 17: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 diferentes

selectores 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

identificador1 font-weight bold

identificador2

font-style italic

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 18: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 boldp[id]

color red

Por valor exacto Selecciona elemento que tengan un determinado atributo y con un valor determinado

(exactamente igual)[class=rdquoclase1rdquo]

font-weight boldp[id=rdquoidentificador1rdquo]

color red

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 19: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

SELECTORES (V)

Por valor parcial Para cualquier atributo que acepte una lista de valores separados por espacios se puede seleccionar elementos

basaacutendose 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 o

comience 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

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 20: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

SELECTORES CONTEXTUALES (I)

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

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

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 21: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 se encuentra 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 ejemplondash El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la liacutenea 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

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 22: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 ejemplondash 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

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 23: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 

En el ejemplo de la imagen de la estructura HTML por ejemplondash El elemento ol no tiene hermanos adyacentesndashEl elemento strong es hermano adyacente del elemento em

Nota Internet Explorer para Windows hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes IE7 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

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 24: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (I)

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

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

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

ndashlinkndashvisited

Pseudo-clases dinaacutemicasndashfocusndashhoverndashactive

Pseudo-clase de ldquoprimer hijordquondashfirst-child

Pseudo-clase de idiomandashlang

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

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 25: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 fontshysize 15em aactive fontshysize 09em

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

Nota 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 elemento pero no focus para elementos de formulario

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 26: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

PSEUDO-CLASES (III)

first-child Selecciona un elemento cuando es el primer hijo de otro elemento pfirstshychild color blue selecciona los paacuterrafos que son el primer hijo de otro cualquier elemento

Nota 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 en castellanoltpgt

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

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 27: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

PSEUDO-ELEMENTOS (I)

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

bloquepfirstshyletter fontshysize 200

Primera liacutenea first-line da formato a la primera liacutenea del texto de un elementopfirstshyline textshydecoration 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 del fondo text-decoration vertical-align (soacutelo si float es none) text-transform line-height propiedades de los maacutergenes propiedades del relleno propiedades de los bordes float text-shadow y clearndashPara first-line propiedades de la fuente propiedades del color propiedades del fondo word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-shadow y clear

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

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

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

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

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

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

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

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

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

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

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

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

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

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

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

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

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

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

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

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

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

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

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 28: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 fuente plateada antes de cada cabecera de segundo nivelh2before

content ldquo]]rdquocolor silver

La siguiente definicioacuten insertaraacute el texto ldquoFiacutenrdquo al acabar el cuerpo del documento HTMLbodyafter

 content ldquoFiacutenrdquo

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

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

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

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

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

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

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

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

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

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

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 29: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (I)

Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTMLh2morado 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 morado coacutemo se formateariacutea la cabecera iquesten morado o el plateado

La solucioacuten es la especif icacioacuten 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 0100ndashPara cada valor del atributo class dado en el selector antildeadir 0010ndashPara cada elemento y pseudo-elemento dado en el selector antildeadir 0001ndashEl selector universal () tiene una especificacioacuten de 0000ndashLos elementos de combinacioacuten no contribuyen a la especificacioacuten (que es diferente a tener 0000)

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

La especificacioacuten se aplicaraacute por separado a cada declaracioacuten y a cada selector de la definicioacuten de la regla

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

Las declaraciones marcadas asiacute no tienen una especificacioacuten especial pero se consideran aparte de las demaacutes junto con las marcadas como important

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

En esta estructura existe un elemento raiacutez que es el que actuacutea de contenedor de todos los demaacutes elemento es el elemento ltHTMLgt

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

La cascada es el meacutetodo por el cual se resuelven los conflictos de aplicacioacuten de estilos cuando hay maacutes de una declaracioacuten posible para un elemento y todas tienen la misma especificacioacuten Supongamos por ejemplo

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

Es posible que en un documento aparezcan formateadores que no son CSS tales como font En estos casos se les asigna una especificacioacuten de 0 y se supone aparecen al comienzo de la hoja de estilos del autor Por lo que estos estilos seraacuten sobreescritos por cualquier declaracioacuten del disentildeador o lector pero no por los del agente de usuario

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 30: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (II)

La especificacioacuten se aplicaraacute por separado a cada declaracioacuten y a cada selector de la definicioacuten de la regla

A partir de CSS21 el primer cero estaacute reservado para los estilos en liacutenea que gana sobre cualquier otra especificacioacuten de declaracioacuten por lo que su valor seraacute 1000 En CSS2 la especificacioacuten 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 coma final de la declaracioacuten

poscuro color 333 importantbackground white

Las declaraciones marcadas asiacute no tienen una especificacioacuten especial pero se consideran aparte de las demaacutes junto con las marcadas como important

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

En esta estructura existe un elemento raiacutez que es el que actuacutea de contenedor de todos los demaacutes elemento es el elemento ltHTMLgt

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

La cascada es el meacutetodo por el cual se resuelven los conflictos de aplicacioacuten de estilos cuando hay maacutes de una declaracioacuten posible para un elemento y todas tienen la misma especificacioacuten Supongamos por ejemplo

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

Es posible que en un documento aparezcan formateadores que no son CSS tales como font En estos casos se les asigna una especificacioacuten de 0 y se supone aparecen al comienzo de la hoja de estilos del autor Por lo que estos estilos seraacuten sobreescritos por cualquier declaracioacuten del disentildeador o lector pero no por los del agente de usuario

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 31: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

ESPECIFICACIOacuteN (III)

Propuesta de ejercicio 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

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

En esta estructura existe un elemento raiacutez que es el que actuacutea de contenedor de todos los demaacutes elemento es el elemento ltHTMLgt

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

La cascada es el meacutetodo por el cual se resuelven los conflictos de aplicacioacuten de estilos cuando hay maacutes de una declaracioacuten posible para un elemento y todas tienen la misma especificacioacuten Supongamos por ejemplo

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

Es posible que en un documento aparezcan formateadores que no son CSS tales como font En estos casos se les asigna una especificacioacuten de 0 y se supone aparecen al comienzo de la hoja de estilos del autor Por lo que estos estilos seraacuten sobreescritos por cualquier declaracioacuten del disentildeador o lector pero no por los del agente de usuario

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 32: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

HERENCIA (I)

Es el mecanismo por el que los estilos no soacutelo se aplican al elemento al que se le declaran sino tambieacuten 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 vez puede estar contenido por otro

En esta estructura existe un elemento raiacutez que es el que actuacutea de contenedor de todos los demaacutes elemento es el elemento ltHTMLgt

Asiacute cada elemento hereda las propiedades de su contenedor (elemento padre) Es decir que si especificamos body color red todo elemento de la paacutegina heredaraacute esta caracteriacutestica y no seraacute necesario volver a especificarlo

Aquiacute es necesario hacer algunas precisionesndashNo todas las propiedades son hereditables y para cada propiedad se define si eacutesta se hereda o nondashEl valor inherit puede aplicarse a cualquier propiedad de los elementos Este valor puede usarse 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 heredadandashCuando se asigna una propiedad a un elemento el valor especificado reemplaza al valor heredadondashLos elementos heredan los valores computados del padre no los valores especificados (en el siguiente 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

La cascada es el meacutetodo por el cual se resuelven los conflictos de aplicacioacuten de estilos cuando hay maacutes de una declaracioacuten posible para un elemento y todas tienen la misma especificacioacuten Supongamos por ejemplo

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

Es posible que en un documento aparezcan formateadores que no son CSS tales como font En estos casos se les asigna una especificacioacuten de 0 y se supone aparecen al comienzo de la hoja de estilos del autor Por lo que estos estilos seraacuten sobreescritos por cualquier declaracioacuten del disentildeador o lector pero no por los del agente de usuario

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 33: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

LA CASCADA (I)

La cascada es el meacutetodo por el cual se resuelven los conflictos de aplicacioacuten de estilos cuando hay maacutes de una declaracioacuten posible para un elemento y todas tienen la misma especificacioacuten Supongamos por ejemplo

h1 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 sonndashLas declaraciones del usuario marcadas como importantndashLas declaraciones del autor marcadas como importantndashLas declaraciones normales del autorndashLas declaraciones normales del usuariondashLas 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

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

Es posible que en un documento aparezcan formateadores que no son CSS tales como font En estos casos se les asigna una especificacioacuten de 0 y se supone aparecen al comienzo de la hoja de estilos del autor Por lo que estos estilos seraacuten sobreescritos por cualquier declaracioacuten del disentildeador o lector pero no por los del agente de usuario

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 34: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

LA CASCADA (II)

Ordenar por orden de declaracioacuten los estilos aplicables al elementondashLos estilos declarados maacutes tarde (o maacutes abajo seguacuten coacutemo se quiera ver) tienen maacutes pesondashLas declaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa

Es posible que en un documento aparezcan formateadores que no son CSS tales como font En estos casos se les asigna una especificacioacuten de 0 y se supone aparecen al comienzo de la hoja de estilos del autor Por lo que estos estilos seraacuten sobreescritos por cualquier declaracioacuten del disentildeador o lector pero no por los del agente de usuario

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 35: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 colores

Nombres 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 teal white yellow

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 36: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (II)

Colores por RGBColores 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 maacuteximo en todosrgb(100100100) | rgb(255255255) Negro miacutenimo en todosrgb(000) | rgb(000) Rojo soacutelo el primer valor al maacuteximo los demaacutes al miacutenimorgb(10000) | rgb(25500) Marroacuten el primer valor a la mitad los demaacutes al miacutenimorgb(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 oscuroh3 color 000000 establecer los H3 a negro

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 37: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (III)

Equivalencia de valores de colorColor Porcentaje Nuacutemero Hexadecimal Hexcorto red 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 0FF

black 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) 000080

olive 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

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 38: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 fontshysize 1in p fontshysize 254cm p fontshysize 254mm p fontshysize 72pt p fontshysize 6pc

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 39: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

VALORES Y UNIDADES EN CSS (V)

Unidades de longitud relativasSon 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 fontshysize 09em Indica que el tamantildeo de fuente del paacuterrafo seraacute el 09 del tamantildeo heredado

div width 20em Indica que la anchura del div seraacute de 20 veces una 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 fontshysize 120 Indica que el tamantildeo de fuente del paacuterrafo seraacute 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 definicioacuten dado que define el valor absoluto del destinondashURL relativas Especifican una ubicacioacuten del destino en relacioacuten a la ubicacioacuten del documento que les llama

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 40: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 textshydecoration none Si una propiedad acepta palabras clave entonces del listado de palabras clave habraacute algunas soacutelo

para 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 los bordes por ejemplo)

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 41: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

FUENTES (I)

Familias de Fuentes Lo que consideramos como una fuente en realidad puede estar compuesta por muchas

variaciones para definir la negrita la cursiva etc Por ejemplo la fuente Times en realidad es una combinacioacuten de muchas variantes TimesRegular

TimesBold timesItalic TimesOblique TimesBoldItalic TimesBoldOblique etc Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinacioacuten de todas ellas es decir 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 fontshyfamily sansshyserif

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 42: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

FUENTES (II)

Especificando una familias de fuentes Pero si se tienen preferencias maacutes especiacuteficas se puede declarar asiacute

body fontshyfamily Georgia Esta regla asume que el navegador tiene disponible la fuente Georgia Si no la tiene el navegador

no 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 que

el documento resultante aunque no tenga exactamente la fuente deseada tenga una que se le parezca

body fontshyfamily Georgia serif Maacutes auacuten se puede indicar una lista de fuentes a ir descartando body fontshyfamily Georgia Times New Century Schoolbook serif

Peso de las Fuentes Con la propiedad font-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

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 43: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 ltlongitudgtltporcentajegtndashValor heredado inherit

body fontshyfamily sansshyserif p fontshysize small La fuente seraacute 066 veces el tamantildeo por

defecto de la fuentep fontshysize 14px La fuente seraacute de 14px p fontshysize 90 La fuente seraacute 90 veces el tamantildeo

heredado de la fuentep fontshysize 12em La fuente seraacute 12 veces el tamantildeo

heredado de una M mayuacutescula de lafuente

p fontshysize larger La fuente seraacute 15 veces el tamantildeoheredado de la fuente

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 44: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 los cambios 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 es

font-variant Los valores son

ndashsmall-caps Hace que todo el texto esteacute en mayuacutesculas pero las letras iniciales de cada palabra son maacutes grandes que el restondashnormal texto ordinario (valor por defecto)ndashinherit forzar la herencia

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 45: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

FUENTES (V)

La propiedad font Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola

propiedad font El valor seriacutea

[ltfontshystylegt || ltfontshyvariantgt || ltfontshyweightgt] ltfontshysizegt[ltlineshyheightgt] ltfontshyfamilygt

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-peso o 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 fontshysize 12px

h2 font bold italic 20012 Verdana Helvetica Arial sansshyserif

Esto hace que la fuente de las cabeceras H2 sean en negrita cursiva con un tamantildeo del 200 del heredado (24px respecto al body) y la altura de liacutenea de 288 (12 de 24px)

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 46: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

TEXTO (I)

Sangriacutea Poder antildeadir sangriacuteas a las primeras liacuteneas de un paacuterrafo es una de los efectos de formato maacutes

demandados 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 indicadondashPara porcentajes respecto a la anchura del contenedor

El valor seriacutea

p textshyindent 3em el paacuterrafo tendraacute una sangriacutea de 3em a la izquierda de la primera liacutenea de texto

Esta propiedad soacutelo es aplicable a los elementos en bloque no a los elementos inline ni a los elementos 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

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 47: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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|ltnuacutemerogt|normal|inherit Valores computados

ndashPara longitudes el valor absoluto indicadondashPara 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 elementos

reemplazados (imaacutegenes input de formularios) No es una propiedad hereditaria por defecto Posibles valores baseline|sub|super|top|textshytop|middle|bottom|textoshy

bottom|ltporcentajegt|ltlongitudgt|inherit

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 48: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

TEXTO (III)

vertical-align baseline

ndashFuerza a que la liacutenea de base del elemento se alinee con la liacutenea de base del elemento padrendashSi el elemento no tiene liacutenea de base (imaacutegenes input de formulario) se alinea el liacutemite inferior 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 padrendashEl 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 padrendashEl tamantildeo de letra no se modifica

vertical-align bottom

ndashAlinea el liacutemite inferior del aacuterea de contenido de un elemento con con el liacutemite inferior de la liacutenea 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 padrendashEl tamantildeo de letra no se modifica

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 49: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 caracteresLa propiedad letter-spacing modifica el espacio entre letras y tambieacuten acepta valores positivos

y 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 declarado por el disentildeador

El espaciado entre caracteres solo se puede modificar si estaacute declarado como normal sino aunque se justifique el texto no se cambiaraacute

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 50: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 herencia

Decorando el texto Para transformar la capitalizacioacuten del texto se utiliza la propiedad text-decoration Valores none|underline|overline|lineshythrough|blink|inherit Que siginifican ninguno subrayado superrayado (aacutenalogo a subrayado) tachado parpadeo

heredado

Ejemplo

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 51: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

TEXTO (VI)

Manejando el espacio La propiedad white-space afecta coacutemo manejaraacute el agente de usuario o navegador lso

espacios 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 uacutenico

espacio 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 los retornos 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

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 52: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 entender como 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 como cualquier 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 elementos adyacentes

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 53: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 infEl 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 es asiacute 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 ni padding

p

margin 0

padding 0

border 0

backgroundshycolor c0c0c0 Para ver mejor los efectos

Ejemplo

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 54: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 paraacutemetros horizontales para cubrir la anchura del elemento contenedorndashLas 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 altura asignada es menor que el contenido a mostrar el comportamiento resultante puede ser inesperado

Puede aparecer una barra de scroll

Puede omitirse la declaracioacuten de altura

Etc

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 55: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (IV)

Las propiedades de padding Hay cuatro propiedades que definen el padding paddingshyleft paddingshyright

paddingshytop y paddingshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad padding que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 paddings tendraacuten el valor indicadondash2 valores El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el padding superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 valores Un valor para cada uno en el orden top-right-bottom-left

Probemos a cambiar los valores de padding en el ejemplo anterior

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 56: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (V)

Las propiedades de margin Tambieacuten hay cuatro propiedades que definen el margin marginshyleftmarginshyright

marginshytop y marginshybottom

Se pueden declarar de una en una o todas a la vez con la propiedad margin que puede tomar distintos nuacutemeros de valoresndash1 valor Los 4 maacutergenes tendraacuten el valor indicadondash2 valores El primer valor se refiere a los maacutergenes superior e inferior y los otros dos al izquierdo y derechondash3 valores el primero seraacute para el margen superior el segundo para los laterales (el mismo para el izquierdo y el derecho) y el uacuteltimo para el inferiorndash4 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

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 57: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 tambieacuten

al formato de dicho espacio Los bordes tienen tres propiedades

ndashAnchura (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Grosor de la liacutenea y puede ser un valor positivo absoluto o relativo

ndashColor (bordershycolor o bordershytopshycolor bordershyrightshycolor bordershybottomshycolor y bordershyleftshycolor)

El color del borde indicado en cualquiera de las notaciones de colores ya mencionados

ndashEstilo (bordershystyle o bordershytopshystyle bordershyrightshystyle bordershybottomshystyle y bordershyleftshystyle)

Puede tener el valor de cualquiera de las siguientes palabras claves double groove inset none outset ridge solid dashed dotted hidden

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 58: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 en

bloque 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 un elemento en bloque y mantendraacute sus normas (que no puede estar contenido en un elemento inline por ejemplo)

Aunque esta propiedad admite hasta 17 valores los maacutes utilizados son soacutelo 4 que son los que vamos a verndashblock lo visualiza como un elemento en bloquendashinline lo muestra como un elemento el liacuteneandashlist-item como un elemento de listadondashnone no se muestra (se ldquoesconderdquo) y el espacio que ocupariacutea el elemento se colapsa

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 59: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (VIII)

Posicionando en CSSLa 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 la ventana 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 elementondashrelative La posicioacuten de la caja se ajusta en relacioacuten a su posicioacuten normal dentro de la paacutegina Cuando una caja X se posiciona relativamente la caja siguiente se situacutea como si X no se hubiera desplazadondashabsolute Las cajas son quitadas del flujo normal de la paacutegina y su posicioacuten se especifica con las propiedades left right top y bottom (especifican los desplazamientos con respecto al bloque de contencioacuten 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 el antepasado posicionado maacutes cercano o si no existe por el bloque de contencioacuten inicial (la esquina superior izquierda de la paacutegina en el modelo visual)

fixed El cuadro del elemento se comporta como si hubiera sido declarado absoluto pero en la caja posicionada de modo fijo el bloque de contencioacuten es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la paacutegina mantienen su posicioacuten en la pantalla)

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 60: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 borde

derecho 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

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 61: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

MODELO DE CAJAS DE CSS (X)

Elementos flotantesLa 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 el costado derecho de la caja comenzando en la parte superiorndashright Igual que left pero el contenido fluye sobre el costado izquierdo de la caja comenzando en la parte superiorndashnone La caja no es flotante

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 62: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 (incluyendo tambieacuten a los elementos flotantes)

Los valores de esta propiedad tienen los siguientes significadosndashleft El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuentendashright El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuentendashboth La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuentendashnone No existe ninguna restriccioacuten a la posicioacuten de la caja con respecto a los flotantes

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 63: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

BACKGROUND (I)

El aacuterea de fondo de un elemento consiste en el espacio entre los bordes externos del elementos es decir el aacuterea visible

Es decir para dar formato al background se le da formato al fondo de la anchura del elemento maacutes 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 las sensacioacuten 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)

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 64: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 las baldosas 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 ndashltporcentajesgt Un par de porcentajes (0 0 por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashltlongitudesgt Un par de valores (1px 1px por ejemplo) indicando la distancia desde los bordes izquierdo y superior respectivamentendashtop left y left top Igual a 0 0

ndashtop top center y center top Igual a 50 0

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 65: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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)

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 66: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 individuales para 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

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 67: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 bastante limitadas

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 68: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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

decimalshyleadingshyzero uppershyalpha uppershylatin lowershyalpha lowershylatin uppershyroman lowershyroman lowershygreek armenian georgian none

Si el agente de usuario no reconoce el valor asignado para el tipo de lista es posible que lo trate como un decimal

Esta propiedad al igual que el resto de propiedades relacionadas con los elementos de listado soacutelo puede ser aplicada a elementos que tengan un display de list-item pero CSS distingue entre elementos de listas ordenadas y no ordenadas

Si se quisiera suprimir la visualizacioacuten de los marcadores bastariacutea con asignarles el valor none

p listshystyleshytype 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 marcadores para listados anidados habriacutea que declararlo

Ejemplo

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 69: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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 la

propiedad 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 el

elemento 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 puede hacer 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 se hereda

Ejemplo

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 70: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

LISTADOS (IV)

Posicioacuten en marcadores de lista La propiedad list-style-position indica si el marcador aparece fuera o dentro del

contenido 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 hace

en la Web con el valor inside el marcador se ldquoempujardquo dentro del contenido del elemento de lista

Ejemplo

Todo en uno Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola la propiedad

list-style Valores [ltlistshystyleshytypegt]||[ltlistshystyleshyimagegt]||[ltlistshystyleshy

positiongt]|inherit Es la secuencia de los valores de las otras propiedades vistas en cualquier orden No es necesario

que todas tengan valor por ejemplo

ul list disc url(imgsimggif) outside

ul list outside

ul list disc outside url(imgsimggif)

ul list inside square

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 71: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

LISTADOS (V)

Disentildeo de listas La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS

Cada 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 del elemento del listado

Los marcadores en su posicioacuten normal (outside) no soacutelo se encuentran fuera de del elemento del 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 hacen utilizando las propiedades padding o margin algo asiacute

ul ol marginshyleft 40px Usada por Internet Explorer y Opera

ul lo paddingshyleft 40px Navegadores basados en Gecko Por lo que si el autor desea cambiar esa sangriacutea es conveniente que manipule tanto el margin

como el padding para que funcione correctamente en todos los navegadores

ul marginshyleft 0 paddingshyleft 1em

ul marginshyleft 1em paddingshyleft 0

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 72: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

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

ndashhttpwwwsidarorgrecurdesdimcssindexphpndashhttpwwww3orgStyleLieBos2eenterndashhttpwwww3orgMarkUpGuideStylendashhttpeshtmlnettutorialscssndashhttpwwww3orgStyleExamples011firstcsseshtmlndashhttpwwwtejedoresdelwebcomwCSS

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 73: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Copyright

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia
Page 74: Curso CSS Avanzado

CSS Hoja de Esti lo en Cascada

Licencia Copyleft

Este documento estaacute protegido bajo la licencia Reconocimiento-SinObraDerivada 21 Espantildea de Creative Common (httpcreativecommonsorglicensesby-nd21es)

Copyright copy 2009 Eider Bilbao lteiderironteccomgtIrontec ltcontactoironteccomgt

Se permite la copia modificacioacuten distribucioacuten usocomercial y realizacioacuten de la obra siempre y cuando sereconozca la autoriacutea de la misma a no sea ser que seobtenga permiso expreso del autor El autor no permitedistribuir obras derivadas a esta

Esta nota no es la licencia completa de la obra sinouna traduccioacuten de la nota orientativa de la licenciaoriginal completa (juriacutedicamente vaacutelida)

  • Portada
  • Paacutegina 2
  • Paacutegina 3
  • Paacutegina 4
  • Paacutegina 5
  • Paacutegina 6
  • Paacutegina 7
  • Paacutegina 8
  • Paacutegina 9
  • Paacutegina 10
  • Paacutegina 11
  • Paacutegina 12
  • Paacutegina 13
  • Paacutegina 14
  • Paacutegina 15
  • Paacutegina 16
  • Paacutegina 17
  • Paacutegina 18
  • Paacutegina 19
  • Paacutegina 20
  • Paacutegina 21
  • Paacutegina 22
  • Paacutegina 23
  • Paacutegina 24
  • Paacutegina 25
  • Paacutegina 26
  • Paacutegina 27
  • Paacutegina 28
  • Paacutegina 29
  • Paacutegina 30
  • Paacutegina 31
  • Paacutegina 32
  • Paacutegina 33
  • Paacutegina 34
  • Paacutegina 35
  • Paacutegina 36
  • Paacutegina 37
  • Paacutegina 38
  • Paacutegina 39
  • Paacutegina 40
  • Paacutegina 41
  • Paacutegina 42
  • Paacutegina 43
  • Paacutegina 44
  • Paacutegina 45
  • Paacutegina 46
  • Paacutegina 47
  • Paacutegina 48
  • Paacutegina 49
  • Paacutegina 50
  • Paacutegina 51
  • Paacutegina 52
  • Paacutegina 53
  • Paacutegina 54
  • Paacutegina 55
  • Paacutegina 56
  • Paacutegina 57
  • Paacutegina 58
  • Paacutegina 59
  • Paacutegina 60
  • Paacutegina 61
  • Paacutegina 62
  • Paacutegina 63
  • Paacutegina 64
  • Paacutegina 65
  • Paacutegina 66
  • Paacutegina 67
  • Paacutegina 68
  • Paacutegina 69
  • Paacutegina 70
  • Paacutegina 71
  • Paacutegina 72
  • Copyright
  • CopyrightLicencia