Post on 18-Nov-2014
description
transcript
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)