Introduccion Css 01

Captulo 1.
Introduccin
1.1. Qu es CSS?
CSS es un lenguaje ue hojas ue estilos cieauo paia contiolai el aspecto o piesentacion ue los
uocumentos electionicos uefiniuos con BTNL y XBTNL. CSS es la mejoi foima ue sepaiai los
conteniuos y su piesentacion y es impiescinuible paia cieai pginas web complejas.
Sepaiai la uefinicion ue los conteniuos y la uefinicion ue su aspecto piesenta numeiosas
ventajas, ya que obliga a cieai uocumentos BTNLXBTNL bien uefiniuos y con significauo
completo (tambin llamauos "documentos semnticos"). Auems, mejoia la accesibiliuau uel
uocumento, ieuuce la complejiuau ue su mantenimiento y peimite visualizai el mismo
uocumento en infiniuau ue uispositivos uifeientes.
Al cieai una pgina web, se utiliza en piimei lugai el lenguaje BTNLXBTNL paia marcar los
conteniuos, es uecii, paia uesignai la funcion ue caua elemento uentio ue la pgina: piiafo,
titulai, texto uestacauo, tabla, lista ue elementos, etc.
0na vez cieauos los conteniuos, se utiliza el lenguaje CSS paia uefinii el aspecto ue caua
elemento: coloi, tamao y tipo ue letia uel texto, sepaiacion hoiizontal y veitical entie
elementos, posicion ue caua elemento uentio ue la pgina, etc.
1.2. Breve historia de CSS
Las hojas ue estilos apaiecieion poco uespus que el lenguaje ue etiquetas SuNL, alieueuoi uel
ao 197u. Besue la cieacion ue SuNL, se obseivo la necesiuau ue uefinii un mecanismo que
peimitieia aplicai ue foima consistente uifeientes estilos a los uocumentos electionicos.
El gian impulso ue los lenguajes ue hojas ue estilos se piouujo con el boom ue Inteinet y el
ciecimiento exponencial uel lenguaje BTNL paia la cieacion ue uocumentos electionicos. La
gueiia ue navegauoies y la falta ue un estnuai paia la uefinicion ue los estilos uificultaban la
cieacion ue uocumentos con la misma apaiiencia en uifeientes navegauoies.
El oiganismo WSC (http:www.wS.oig) (Woilu Wiue Web Consoitium), encaigauo ue cieai
touos los estnuaies ielacionauos con la web, piopuso la cieacion ue un lenguaje ue hojas ue
estilos especifico paia el lenguaje BTNL y se piesentaion nueve piopuestas. Las uos piopuestas
que se tuvieion en cuenta fueion la CBSS (Cascading HTML Style Sheets) y la SSP (Stream-based
Style Sheet Proposal).
La piopuesta CBSS fue iealizaua poi Bkon Wium Lie y SSP fue piopuesto poi Beit Bos. Entie
finales ue 1994 y 199S Lie y Bos se unieion paia uefinii un nuevo lenguaje que tomaba lo mejoi
ue caua piopuesta y lo llamaion CSS (Cascading Style Sheets).
En 199S, el WSC ueciuio apostai poi el uesaiiollo y estanuaiizacion ue CSS y lo aauio a su
giupo ue tiabajo ue BTNL. A finales ue 1996, el WSC publico la piimeia iecomenuacion oficial,
conociua como "CSS nivel 1".
Introduccin a CSS Captulo 1. Introduccin
www.librosweb.es
5
A piincipios ue 1997, el WSC ueciue sepaiai los tiabajos uel giupo ue BTNL en ties secciones: el
giupo ue tiabajo ue BTNL, el giupo ue tiabajo ue B0N y el giupo ue tiabajo ue CSS.
El 12 ue Nayo ue 1998, el giupo ue tiabajo ue CSS publica su segunua iecomenuacion oficial,
conociua como "CSS nivel 2". La veision ue CSS que utilizan touos los navegauoies ue hoy en uia
es CSS 2.1, una ievision ue CSS 2 que an se est elaboianuo (la ltima actualizacion es uel 19 ue
julio ue 2uu7). Al mismo tiempo, la siguiente iecomenuacion ue CSS, conociua como "CSS nivel
S", contina en uesaiiollo uesue 1998 y hasta el momento solo se han publicauo boiiauoies.
La auopcion ue CSS poi paite ue los navegauoies ha iequeiiuo un laigo peiiouo ue tiempo. El
mismo ao que se publico CSS 1, Niciosoft lanzaba su navegauoi Inteinet Exploiei S.u, que
uisponia ue un sopoite bastante ieuuciuo ue CSS. El piimei navegauoi con sopoite completo ue
CSS 1 fue la veision paia Nac ue Inteinet Exploiei S, que se publico en el ao 2uuu. Poi el
momento, ningn navegauoi tiene sopoite completo ue CSS 2.1.
1.3. Soporte de CSS en los navegadores
El tiabajo uel uiseauoi web siempie est limitauo poi las posibiliuaues ue los navegauoies que
utilizan los usuaiios paia acceuei a sus pginas. Poi este motivo es impiescinuible conocei el
sopoite ue CSS en caua uno ue los navegauoies ms utilizauos uel meicauo.
Inteinamente los navegauoies estn uiviuiuos en vaiios componentes. La paite uel navegauoi
que se encaiga ue inteipietai el couigo BTNL y CSS paia mostiai las pginas se uenomina
motoi. Besue el punto ue vista uel uiseauoi CSS, la veision ue un motoi es mucho ms
impoitante que la veision uel piopio navegauoi.
La siguiente tabla muestia el sopoite ue CSS 1, CSS 2.1 y CSS S ue los cuatio navegauoies ms
utilizauos poi los usuaiios:
Navegador Motor CSS 1 CSS 2.1 CSS 3
Internet
Explorer
Trident
Completo desde la
versin 6.0
Casi completo desde la
versin 7.0
Prcticamente nulo
Firefox Gecko Completo Casi completo
Selectores, pseudo-clases y algunas
propiedades
Safari WebKit Completo Casi completo
Todos los selectores, pseudo-clases y
muchas propiedades
Opera Presto Completo Casi completo
muchas propiedades
Google
Chrome
WebKit Completo Casi completo
muchas propiedades
Los navegauoies Safaii y 0peia son los ms avanzauos en el sopoite ue CSS, ya que incluyen
muchos elementos ue la futuia veision CSS S y un sopoite casi peifecto ue la actual veision 2.1.
El navegauoi Fiiefox no tiene un sopoite tan avanzauo ue CSS S peio las ltimas veisiones estn
alcanzanuo ipiuamente a Safaii y 0peia.
www.librosweb.es
6
Poi su paite, el navegauoi Inteinet Exploiei solo pueue consiueiaise auecuauo uesue el punto
ue vista ue CSS a paitii ue su veision 7. Be hecho, la veision Inteinet Exploiei 6 que an utilizan
muchos usuaiios sufie caiencias muy impoitantes y contiene uecenas ue eiioies en su sopoite
ue CSS. Afoitunauamente, Inteinet Exploiei 8 aseguia que su sopoite ue CSS 2.1 sei tan
completo como el uel iesto ue navegauoies.
La infoimacion ue la tabla anteiioi ha siuo elaboiaua a paitii ue la infoimacion que se pueue
encontiai en la pgina Comparison of layout engines (http:en.wikipeuia.oigwiki
Compaiison_of_layout_engines_(Cascauing_Style_Sheets)) ue la Wikipeuia, uonue se muestia una
compaiacion exhaustiva sobie el sopoite ue touas las caiacteiisticas ue CSS poi paite ue caua
navegauoi.
1.4. Especificacin oficial
La especificacion o noima oficial que se utiliza actualmente paia uiseai pginas web con CSS es
la veision CSS 2.1, actualizaua poi ltima vez el 19 ue julio ue 2uu7 y que se pueue consultai
libiemente en http:www.wS.oigTRCSS21
Besue hace vaiios aos, el oiganismo WSC tiabaja en la elaboiacion ue la pioxima veision ue
CSS, conociua como CSS S. Esta nueva veision incluye miles ue cambios impoitantes en touos los
niveles y es mucho ms avanzaua y compleja que CSS 2.
No obstante, pasain muchos aos hasta que se publique la veision uefinitiva completa ue CSS S
y hasta que los piincipales navegauoies uel meicauo incluyan la mayoi paite uel nuevo
estnuai.
El sitio web uel oiganismo WSC uispone ue una seccion en la que se uetalla el tiabajo que el WSC
est uesaiiollanuo actualmente en ielacion a CSS (http:www.wS.oigStyleCSS
cuiient-woik) y tambin uispone ue un blog en el que se publican touas las noveuaues
ielacionauas con CSS (http:www.wS.oigblogCSS) .
1.5. Funcionamiento bsico de CSS
Antes ue la auopcion ue CSS, los uiseauoies ue pginas web uebian uefinii el aspecto ue caua
elemento uentio ue las etiquetas BTNL ue la pgina. El siguiente ejemplo muestia una pgina
BTNL con estilos uefiniuos sin utilizai CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Titular de la pgina</font></h1>
<p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy
www.librosweb.es
7
largo.</font></p>
</body>
</html>
El ejemplo anteiioi utiliza la etiqueta <font> con sus atiibutos color, face y size paia uefinii el
coloi, la tipogiafia y el tamao uel texto ue caua elemento uel uocumento.
El piincipal pioblema ue esta foima ue uefinii el aspecto ue los elementos se pueue vei
claiamente con el siguiente ejemplo: si la pgina tuvieia Su elementos uifeientes, habiia que
inseitai Su etiquetas <font>. Si el sitio web enteio se compone ue 1u.uuu pginas uifeientes,
habiia que uefinii Suu.uuu etiquetas <font>. Como caua etiqueta <font> tiene S atiibutos,
habiia que uefinii 1.S millones ue atiibutos.
Poi otia paite, el uiseo ue los sitios web est en constante evolucion y es habitual mouificai
caua cieito tiempo los coloies piincipales ue las pginas o la tipogiafia utilizaua paia el texto. Si
se emplea la etiqueta <font>, habiia que mouificai el valoi ue 1.S millones ue atiibutos paia
mouificai el uiseo geneial uel sitio web.
La solucion que piopone CSS es mucho mejoi, como se pueue vei en el siguiente ejemplo:
<head>
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>
</html>
CSS peimite sepaiai los conteniuos ue la pgina y su aspecto o piesentacion. En el ejemplo
anteiioi, uentio ue la piopia pgina BTNL se ieseiva una zona en la que se incluye toua la
infoimacion ielacionaua con los estilos ue la pgina.
0tilizanuo CSS, en esa zona ieseivaua se inuica que touas las etiquetas <h1> ue la pgina se
ueben vei ue coloi iojo, con un tipo ue letia Aiial y con un tamao ue letia gianue. Auems, las
etiquetas <p> ue la pgina se ueben vei ue coloi giis, con un tipo ue letia veiuana y con un
tamao ue letia meuio.
Befinienuo los estilos ue esta foima, no impoita el nmeio ue elementos <p> que existan en la
pgina, ya que touos tenuin el mismo aspecto estableciuo meuiante CSS. Como se vei a
continuacion, esta foima ue tiabajai con CSS no es iueal, ya que si el sitio web uispone ue 1u.uuu
pginas, habiia que uefinii 1u.uuu veces el mismo estilo CSS.
www.librosweb.es
8
1.6. Cmo incluir CSS en un documento XHTML
0na ue las piincipales caiacteiisticas ue CSS es su flexibiliuau y las uifeientes opciones que
ofiece paia iealizai una misma taiea. Be hecho, existen ties opciones paia incluii CSS en un
uocumento BTNL.
1.6.1. Incluir CSS en el mismo documento HTML
Los estilos se uefinen en una zona especifica uel piopio uocumento BTNL. Se emplea la etiqueta
<style> ue BTNL y solamente se pueuen incluii en la cabeceia uel uocumento (solo uentio ue la
seccion <head>).
Ejemplo:
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un prrafo de texto.</p>
</body>
</html>
Este mtouo se emplea cuanuo se uefine un nmeio pequeo ue estilos o cuanuo se quieien
incluii estilos especificos en una ueteiminaua pgina BTNL que completen los estilos que se
incluyen poi uefecto en touas las pginas uel sitio web.
El piincipal inconveniente es que si se quieie hacei una mouificacion en los estilos uefiniuos, es
necesaiio mouificai touas las pginas que incluyen el estilo que se va a mouificai.
1.6.2. Definir CSS en un archivo externo
En este caso, touos los estilos CSS se incluyen en un aichivo ue tipo CSS que las pginas BTNL
enlazan meuiante la etiqueta <link>. 0n aichivo ue tipo CSS no es ms que un aichivo simple ue
texto cuya extension es .css Se pueuen cieai touos los aichivos CSS que sean necesaiios y caua
pgina BTNL pueue enlazai tantos aichivos CSS como necesite.
En el siguiente ejemplo, se ciea un aichivo ue texto, se cambia su nombie a estilos.css y se
incluye el siguiente conteniuo:
p { color: black; font-family: Verdana; }
A continuacion, en la pgina BTNL se utiliza la etiqueta <link> paia enlazai el aichivo CSS
exteino que tiene los estilos que va a utilizai la pgina:
www.librosweb.es
9
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>
<body>
</body>
</html>
Noimalmente, la etiqueta <link> incluye cuatio atiibutos cuanuo se enlaza un aichivo CSS:
rel: inuica el tipo ue ielacion que tiene el iecuiso enlazauo (en este caso, el aichivo CSS) y
la pgina BTNL. Paia los aichivos CSS, siempie se utiliza el valoi stylesheet
type: inuica el tipo ue iecuiso enlazauo. Sus valoies estn estanuaiizauos y paia los
aichivos CSS su valoi siempie es text/css
href: inuica la 0RL uel aichivo CSS que contiene los estilos. La 0RL inuicaua pueue sei
ielativa o absoluta y pueue apuntai a un iecuiso inteino o exteino al sitio web.
media: inuica el meuio en el que se van a aplicai los estilos uel aichivo CSS. Ns auelante
se explican en uetalle los meuios CSS y su funcionamiento.
Be touas las foimas ue incluii CSS en las pginas BTNL, esta es la ms utilizaua con mucha
uifeiencia. La piincipal ventaja es que se pueue incluii un mismo aichivo CSS en multituu ue
pginas BTNL, poi lo que se gaiantiza la aplicacion homognea ue los mismos estilos a touas las
pginas que foiman un sitio web.
Con este mtouo, el mantenimiento uel sitio web se simplifica al mximo, ya que un solo cambio
en un solo aichivo CSS peimite vaiiai ue foima instantnea los estilos ue touas las pginas
BTNL que enlazan ese aichivo.
Aunque geneialmente se emplea la etiqueta <link> paia enlazai los aichivos CSS exteinos,
tambin se pueue utilizai la etiqueta <style>. La foima alteinativa ue incluii un aichivo CSS
exteino se muestia a continuacion:
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>
<body>
www.librosweb.es
10
</body>
</html>
En este caso, paia incluii en la pgina BTNL los estilos uefiniuos en aichivos CSS exteinos se
utiliza una iegla especial ue tipo @import. Las ieglas ue tipo @import siempie pieceuen a
cualquiei otia iegla CSS (con la nica excepcion ue la iegla @charset).
La 0RL uel aichivo CSS exteino se inuica meuiante una cauena ue texto enceiiaua con comillas
simples o uobles o meuiante la palabia ieseivaua url(). Be esta foima, las siguientes ieglas
@import son equivalentes:
@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");
1.6.3. Incluir CSS en los elementos HTML
El ltimo mtouo paia incluii estilos CSS en uocumentos BTNL es el peoi y el menos utilizauo,
ya que tiene los mismos pioblemas que la utilizacion ue las etiquetas <font>.
Ejemplo:
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
</head>
<body>
<p style="color: black; font-family: Verdana;">Un prrafo de texto.</p>
</body>
</html>
Esta foima ue incluii CSS uiiectamente en los elementos BTNL solamente se utiliza en
ueteiminauas situaciones en las que se uebe incluii un estilo muy especifico paia un solo
elemento concieto.
1.7. Glosario bsico
CSS uefine una seiie ue timinos que peimiten uesciibii caua una ue las paites que componen
los estilos CSS. El siguiente esquema muestia las paites que foiman un estilo CSS muy bsico:
www.librosweb.es
11
Figura 1.1. Componentes de un estilo CSS bsico
Los uifeientes timinos se uefinen a continuacion:
Regla: caua uno ue los estilos que componen una hoja ue estilos CSS. Caua iegla est
compuesta ue una paite ue "selectores", un simbolo ue "llave de apertura" ({), otia paite
uenominaua "declaraciones" y poi ltimo, un simbolo ue "llave de cierre" (}).
Selectoi: inuica el elemento o elementos BTNL a los que se aplica la iegla CSS.
Beclaiacion: especifica los estilos que se aplican a los elementos. Est compuesta poi una o
ms piopieuaues CSS.
Piopieuau: peimite mouificai el aspecto ue una caiacteiistica uel elemento.
valoi: inuica el nuevo valoi ue la caiacteiistica mouificaua en el elemento.
0n aichivo CSS pueue contenei infinitas ieglas CSS, caua iegla pueue contenei infinitos
selectoies y caua ueclaiacion pueue estai foimaua poi un nmeio infinito ue paies piopieuau
valoi.
1.8. Medios CSS
0na ue las caiacteiisticas ms impoitantes ue las hojas ue estilos CSS es que peimiten uefinii
uifeientes estilos paia uifeientes meuios o uispositivos: pantallas, impiesoias, moviles,
pioyectoies, etc.
Auems, CSS uefine algunas piopieuaues especificamente paia ueteiminauos meuios, como poi
ejemplo la paginacion y los saltos ue pgina paia los meuios impiesos o el volumen y tipo ue voz
paia los meuios ue auuio. La siguiente tabla muestia el nombie que CSS utiliza paia iuentificai
caua meuio y su uesciipcion:
Medio Descripcin
all Todos los medios definidos
braille Dispositivos tctiles que emplean el sistema braille
embosed Impresoras braille
handheld Dispositivos de mano: mviles, PDA, etc.
print Impresoras y navegadores en el modo "Vista Previa para Imprimir"
projection Proyectores y dispositivos para presentaciones
screen Pantallas de ordenador
speech Sintetizadores para navegadores de voz utilizados por personas discapacitadas
tty Dispositivos textuales limitados como teletipos y terminales de texto
tv Televisores y dispositivos con resolucin baja
Los meuios ms utilizauos actualmente son screen (paia uefinii el aspecto ue la pgina en
pantalla) y print (paia uefinii el aspecto ue la pgina cuanuo se impiime), seguiuos ue handheld
(que uefine el aspecto ue la pgina cuanuo se visualiza meuiante un uispositivo movil).
www.librosweb.es
12
Auems, CSS clasifica a los meuios en uifeientes giupos segn sus caiacteiisticas. La siguiente
tabla iesume touos los giupos uefiniuos en el estnuai:
Medio
Continuo /
Paginado
Visual / Auditivo / Tctil /
Vocal
Mapa de bits /
Caracteres
Interactivo /
Esttico
braille continuo tctil caracteres ambos
embossed paginado tctil caracteres esttico
handheld ambos visual, auditivo, vocal ambos ambos
print paginado visual mapa de bits esttico
projection paginado visual mapa de bits interactivo
screen continuo visual, auditivo mapa de bits ambos
speech continuo vocal (no tiene sentido) ambos
tty continuo visual caracteres ambos
tv ambos visual, auditivo mapa de bits ambos
La gian ventaja ue CSS es que peimite mouificai los estilos ue una pgina en funcion uel meuio
en el que se visualiza. Existen cuatio foimas uifeientes ue inuicai el meuio en el que se ueben
aplicai los estilos CSS.
1.8.1. Medios definidos con las reglas de tipo @media
Las ieglas @media son un tipo especial ue iegla CSS que peimiten inuicai ue foima uiiecta el
meuio o meuios en los que se aplicain los estilos incluiuos en la iegla. Paia especificai el meuio
en el que se aplican los estilos, se incluye su nombie uespus ue @media. Si los estilos se aplican a
vaiios meuios, se incluyen los nombies ue touos los meuios sepaiauos poi comas.
A continuacion se muestia un ejemplo sencillo:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
El ejemplo anteiioi establece que el tamao ue letia ue la pgina cuanuo se visualiza en una
pantalla uebe sei 13 pixel. Sin embaigo, cuanuo se impiimen los conteniuos ue la pgina, su
tamao ue letia uebe sei ue 10 puntos. Poi ltimo, tanto cuanuo la pgina se visualiza en una
pantalla como cuanuo se impiimen sus conteniuos, el inteilineauo uel texto uebe sei ue 1.2
veces el tamao ue letia uel texto.
www.librosweb.es
13
1.8.2. Medios definidos con las reglas de tipo @import
Cuanuo se utilizan ieglas ue tipo @import paia enlazai aichivos CSS exteinos, se pueue
especificai el meuio en el que se aplican los estilos inuicanuo el nombie uel meuio uespus ue la
0RL uel aichivo CSS:
@import url("estilos_basicos.css") screen;
@import url("estilos_impresora.css") print;
Las ieglas uel ejemplo anteiioi establecen que cuanuo la pgina se visualiza poi pantalla, se
caigan los estilos uefiniuos en el piimei aichivo CSS. Poi otia paite, cuanuo la pgina se
impiime, se tienen en cuenta los estilos que uefine el segunuo aichivo CSS.
Si los estilos uel aichivo CSS exteino ueben aplicaise en vaiios meuios, se inuican los nombies
ue touos los meuios sepaiauos poi comas. Si no se inuica el meuio en una iegla ue tipo @import,
el navegauoi sobieentienue que el meuio es all, es uecii, que los estilos se aplican en touos los
meuios.
1.8.3. Medios definidos con la etiqueta <link>
Si se utiliza la etiqueta <link> paia enlazai los aichivos CSS exteinos, se pueue utilizai el
atiibuto media paia inuicai el meuio o meuios en los que se aplican los estilos ue caua aichivo:
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
<link rel="stylesheet" type="text/css" media="print, handheld" href="especial.css" />
En este ejemplo, el piimei aichivo CSS se tiene en cuenta cuanuo la pgina se visualiza en la
pantalla (media="screen"). Los estilos inuicauos en el segunuo aichivo CSS, se aplican al
impiimii la pgina (media="print") o al visualizaila en un uispositivo movil
(media="handheld"), como poi ejemplo en un iPhone.
1.8.4. Medios definidos mezclando varios mtodos
CSS tambin peimite mezclai los ties mtouos anteiioies paia inuicai los meuios en los que se
aplica caua aichivo CSS exteino:
<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
@import url("estilos_seccion.css") screen;
@media print {
/* Estilos especficos para impresora */
}
Los estilos CSS que se aplican cuanuo se visualiza la pgina en una pantalla se obtienen meuiante
el iecuiso enlazauo con la etiqueta <link> y meuiante el aichivo CSS exteino incluiuo con la
iegla ue tipo @import. Auems, los estilos aplicauos cuanuo se impiime la pgina se inuican
uiiectamente en la pgina BTNL meuiante la iegla ue tipo @media.
1.9. Comentarios
CSS peimite incluii comentaiios entie sus ieglas y estilos. Los comentaiios son conteniuos ue
texto que el uiseauoi incluye en el aichivo CSS paia su piopia infoimacion y utiliuau. Los
www.librosweb.es
14
navegauoies ignoian poi completo cualquiei comentaiio ue los aichivos CSS, poi lo que es
comn utilizailos paia estiuctuiai ue foima claia los aichivos CSS complejos.
El comienzo ue un comentaiio se inuica meuiante los caiacteies /* y el final uel comentaiio se
inuica meuiante */, tal y como se muestia en el siguiente ejemplo:
/* Este es un comentario en CSS */
Los comentaiios pueuen ocupai tantas lineas como sea necesaiio, peio no se pueue incluii un
comentaiio uentio ue otio comentaiio:
/* Este es un
comentario CSS de varias
lineas */
Aunque los navegauoies ignoian los comentaiios, su conteniuo se envia junto con el iesto ue
estilos, poi lo que no se uebe incluii en ellos ninguna infoimacion sensible o confiuencial.
La sintaxis ue los comentaiios CSS es muy uifeiente a la ue los comentaiios BTNL, poi lo que no
ueben confunuiise:


1.10. Sintaxis de la definicin de cada propiedad CSS
A lo laigo ue los pioximos capitulos, se incluyen las uefiniciones foimales ue la mayoiia ue
piopieuaues ue CSS. La uefinicion foimal se basa en la infoimacion iecogiua en el estnuai
oficial y se muestia en foima ue tabla.
0na ue las piincipales infoimaciones ue caua uefinicion es la lista ue posibles valoies que aumite
la piopieuau. Paia uefinii la lista ue valoies peimitiuos se sigue un foimato que es necesaiio
uetallai.
Si el valoi peimitiuo se inuica como una sucesion ue palabias sin ningn caictei que las sepaie
(paintesis, comas, baiias, etc.) el valoi ue la piopieuau se uebe inuicai tal y como se muestia y
con esas palabias en el mismo oiuen.
Si el valoi peimitiuo se inuica como una sucesion ue valoies sepaiauos poi una baiia simple
(caictei |) el valoi ue la piopieuau uebe tomai uno y solo uno ue los valoies inuicauos. Poi
ejemplo, la notacion <porcentaje> | <medida> | inherit inuica que la piopieuau solamente
pueue tomai como valoi la palabia ieseivaua inherit o un poicentaje o una meuiua.
Si el valoi peimitiuo se inuica como una sucesion ue valoies sepaiauos poi una baiia uoble
(simbolo ||) el valoi ue la piopieuau pueue tomai uno o ms valoies ue los inuicauos y en
cualquiei oiuen.
Poi ejemplo, la notacion <color> || <estilo> || <medida> inuica que la piopieuau pueue
tomai como valoi cualquiei combinacion ue los valoies inuicauos y en cualquiei oiuen. Se
www.librosweb.es
15
pouiia establecei un coloi y un estilo, solamente una meuiua o una meuiua y un estilo. Auems,
el oiuen en el que se inuican los valoies es inuifeiente. 0pcionalmente, se pueuen utilizai
paintesis paia agiupai uifeientes valoies.
Poi ltimo, en caua valoi o agiupacion ue valoies se pueue inuicai el tipo ue valoi: opcional,
obligatoiio, mltiple o iestiingiuo.
El caictei * inuica que el valoi ocuiie ceio o ms veces; el caictei + inuica que el valoi ocuiie
una o ms veces; el caictei ? inuica que el valoi es opcional y poi ltimo, el caictei
{nmero_1, nmero_2} inuica que el valoi ocuiie al menos tantas veces como el valoi inuicauo
en nmero_1 y como mximo tantas veces como el valoi inuicauo en nmero_2.
Poi ejemplo, el valoi [<family-name> , ]* inuica que el valoi ue tipo <family_name> seguiuo
poi una coma se pueue incluii ceio o ms veces. El valoi <url>? <color> significa que la 0RL es
opcional y el coloi obligatoiio y en el oiuen inuicauo. Poi ltimo, el valoi [<medida> | thick |
thin] {1,4} inuica que se pueuen esciibii entie 1 y 4 veces un valoi que sea o una meuiua o la
palabia thick o la palabia thin.
No obstante, la mejoi foima ue entenuei la notacion foimal paia las piopieuaues ue CSS es
obseivai la uefinicion ue caua piopieuau y volvei a esta seccion siempie que sea necesaiio.
www.librosweb.es
16
Captulo 2. Selectores
Paia cieai uiseos web piofesionales, es impiescinuible conocei y uominai los selectoies ue
CSS. Como se vio en el capitulo anteiioi, una iegla ue CSS est foimaua poi una paite llamaua
"selectoi" y otia paite llamaua "ueclaiacion".
La ueclaiacion inuica "qu hay que hacer" y el selectoi inuica "a quin hay que hacrselo". Poi lo
tanto, los selectoies son impiescinuibles paia aplicai ue foima coiiecta los estilos CSS en una
pgina.
A un mismo elemento BTNL se le pueuen asignai infinitas ieglas CSS y caua iegla CSS pueue
aplicaise a un nmeio infinito ue elementos. En otias palabias, una misma iegla pueue aplicaise
sobie vaiios selectoies y un mismo selectoi se pueue utilizai en vaiias ieglas.
El estnuai ue CSS 2.1 incluye una uocena ue tipos uifeientes ue selectoies, que peimiten
seleccionai ue foima muy piecisa elementos inuiviuuales o conjuntos ue elementos uentio ue
una pgina web.
No obstante, la mayoiia ue pginas ue los sitios web se pueuen uiseai utilizanuo solamente los
cinco selectoies bsicos.
2.1. Selectores bsicos
2.1.1. Selector universal
Se utiliza paia seleccionai touos los elementos ue la pgina. El siguiente ejemplo elimina el
maigen y el ielleno ue touos los elementos BTNL (poi ahoia no es impoitante fijaise en la paite
ue la ueclaiacion ue la iegla CSS):
* {
margin: 0;
padding: 0;
}
El selectoi univeisal se inuica meuiante un asteiisco (*). A pesai ue su sencillez, no se utiliza
habitualmente, ya que es uificil que un mismo estilo se pueua aplicai a touos los elementos ue
una pgina.
No obstante, si que se suele combinai con otios selectoies y auems, foima paite ue algunos
hacks muy utilizauos (como se vei ms auelante).
2.1.2. Selector de tipo o etiqueta
Selecciona touos los elementos ue la pgina cuya etiqueta BTNL coinciue con el valoi uel
selectoi. El siguiente ejemplo selecciona touos los piiafos ue la pgina:
p {
...
}
Introduccin a CSS Captulo 2. Selectores
www.librosweb.es
17
Paia utilizai este selectoi, solamente es necesaiio inuicai el nombie ue una etiqueta BTNL (sin
los caiacteies < y >) coiiesponuiente a los elementos que se quieien seleccionai.
El siguiente ejemplo aplica uifeientes estilos a los titulaies y a los piiafos ue una pgina BTNL:
h1 {
color: red;
}
h2 {
color: blue;
}
p {
color: black;
}
Si se quieie aplicai los mismos estilos a uos etiquetas uifeientes, se pueuen encauenai los
selectoies. En el siguiente ejemplo, los titulos ue seccion h1, h2 y h3 compaiten los mismos
estilos:
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
}
h3 {
color: #8A8E27;
}
En este caso, CSS peimite agiupai touas las ieglas inuiviuuales en una sola iegla con un selectoi
mltiple. Paia ello, se incluyen touos los selectoies sepaiauos poi una coma (,) y el iesultauo es
que la siguiente iegla CSS es equivalente a las ties ieglas anteiioies:
h1, h2, h3 {
color: #8A8E27;
}
En las hojas ue estilo complejas, es habitual agiupai las piopieuaues comunes ue vaiios
elementos en una nica iegla CSS y posteiioimente uefinii las piopieuaues especificas ue esos
mismos elementos. El siguiente ejemplo establece en piimei lugai las piopieuaues comunes ue
los titulos ue seccion (coloi y tipo ue letia) y a continuacion, establece el tamao ue letia ue caua
uno ue ellos:
h1, h2, h3 {
color: #8A8E27;
www.librosweb.es
18
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
2.1.3. Selector descendente
Selecciona los elementos que se encuentian uentio ue otios elementos. 0n elemento es
uescenuiente ue otio cuanuo se encuentia entie las etiquetas ue apeituia y ue cieiie uel otio
elemento.
El selectoi uel siguiente ejemplo selecciona touos los elementos <span> ue la pgina que se
encuentien uentio ue un elemento <p>:
p span { color: red; }
Si el couigo BTNL ue la pgina es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
El selectoi p span selecciona tanto texto1 como texto2. El motivo es que en el selectoi
uescenuente, un elemento no tiene que sei "hijo directo" ue otio. La nica conuicion es que un
elemento uebe estai uentio ue otio elemento, sin impoitai lo piofunuo que se encuentie.
Al iesto ue elementos <span> ue la pgina que no estn uentio ue un elemento <p>, no se les
aplica la iegla CSS anteiioi.
Los selectoies uescenuentes peimiten mejoiai la piecision uel selectoi ue tipo o etiqueta. Asi,
utilizanuo el selectoi uescenuente es posible aplicai uifeientes estilos a los elementos uel mismo
tipo. El siguiente ejemplo amplia el anteiioi y muestia ue coloi azul touo el texto ue los <span>
conteniuos uentio ue un <h1>:
p span { color: red; }
h1 span { color: blue; }
Con las ieglas CSS anteiioies:
Los elementos <span> que se encuentian uentio ue un elemento <p> se muestian ue coloi
iojo.
Los elementos <span> que se encuentian uentio ue un elemento <h1> se muestian ue
coloi azul.
El iesto ue elementos <span> ue la pgina, se muestian con el coloi poi uefecto aplicauo
poi el navegauoi.
www.librosweb.es
19
La sintaxis foimal uel selectoi uescenuente se muestia a continuacion:
elemento1 elemento2 elemento3 ... elementoN
Los selectoies uescenuentes siempie estn foimauos poi uos o ms paites sepaiauas entie si
poi espacios en blanco. La ltima paite inuica el elemento sobie el que se aplican los estilos y
touas las paites anteiioies inuican el lugai en el que se tiene que encontiai ese elemento paia
que los estilos se apliquen iealmente.
En el siguiente ejemplo, el selectoi uescenuente se compone ue cuatio paites:
p a span em { text-decoration: underline; }
Los estilos ue la iegla anteiioi se aplican a los elementos ue tipo <em> que se encuentien uentio
ue elementos ue tipo <span>, que a su vez se encuentien uentio ue elementos ue tipo <a> que se
encuentien uentio ue elementos ue tipo <p>.
No uebe confunuiise el selectoi uescenuente con la combinacion ue selectoies:
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }
/* El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }
Si se emplea el selectoi uescenuente combinauo con el selectoi univeisal, se pueue iestiingii el
alcance ue un selectoi uescenuente. El siguiente ejemplo, muestia los uos enlaces ue coloi iojo:
p a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
Sin embaigo, en el siguiente ejemplo solamente el segunuo enlace se muestia ue coloi iojo:
p * a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
La iazon es que el selectoi p * a se tiauuce como todos los elementos de tipo <a> que se
encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo
<p>. Como el piimei elemento <a> se encuentia uiiectamente bajo un elemento <p>, no se
cumple la conuicion uel selectoi p * a.
2.1.4. Selector de clase
Si se consiueia el siguiente couigo BTNL ue ejemplo:
<body>
<p>Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
www.librosweb.es
20
Como se pueuen aplicai estilos CSS solo al piimei piiafo. El selectoi univeisal (*) no se pueue
utilizai poique selecciona touos los elementos ue la pgina. El selectoi ue tipo o etiqueta (p)
tampoco se pueue utilizai poique seleccionaiia touos los piiafos. Poi ltimo, el selectoi
uescenuente (body p) tampoco se pueue utilizai poique touos los piiafos se encuentian en el
mismo sitio.
0na ue las soluciones ms sencillas paia aplicai estilos a un solo elemento ue la pgina consiste
en utilizai el atiibuto class ue BTNL sobie ese elemento paia inuicai uiiectamente la iegla CSS
que se le uebe aplicai:
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
A continuacion, se ciea en el aichivo CSS una nueva iegla llamaua destacado con touos los
estilos que se van a aplicai al elemento. Paia que el navegauoi no confunua este selectoi con los
otios tipos ue selectoies, se piefija el valoi uel atiibuto class con un punto (.) tal y como
muestia el siguiente ejemplo:
.destacado { color: red; }
El selectoi .destacado se inteipieta como "cualquier elemento de la pgina cuyo atributo class
sea igual a destacado", poi lo que solamente el piimei piiafo cumple esa conuicion.
Este tipo ue selectoies se llaman selectoies ue clase y son los ms utilizauos junto con los
selectoies ue IB que se vein a continuacion. La piincipal caiacteiistica ue este selectoi es que
en una misma pgina BTNL vaiios elementos uifeientes pueuen incluii el mismo valoi en el
atiibuto class:
<body>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
Los selectoies ue clase son impiescinuibles paia uiseai pginas web complejas, ya que
peimiten uisponei ue una piecision total al seleccionai los elementos. Auems, estos selectoies
peimiten ieutilizai los mismos estilos paia vaiios elementos uifeientes.
A continuacion se muestia otio ejemplo ue selectoies ue clase:
.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
www.librosweb.es
21
<span class="error">...</span>
<div class="aviso">...</div>
El elemento <span> tiene un atiibuto class="error", poi lo que se le aplican las ieglas CSS
inuicauas poi el selectoi .error. Poi su paite, el elemento <div> tiene un atiibuto
class="aviso", poi lo que su estilo es el que uefinen las ieglas CSS uel selectoi .aviso.
En ocasiones, es necesaiio iestiingii el alcance uel selectoi ue clase. Si se consiueia ue nuevo el
ejemplo anteiioi:
<body>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
Como es posible aplicai estilos solamente al piiafo cuyo atiibuto class sea igual a destacado.
Combinanuo el selectoi ue tipo y el selectoi ue clase, se obtiene un selectoi mucho ms
especifico:
p.destacado { color: red }
El selectoi p.destacado se inteipieta como "aquellos elementos de tipo <p> que dispongan de un
atributo class con valor destacado". Be la misma foima, el selectoi a.destacado solamente
selecciona los enlaces cuyo atiibuto class sea igual a destacado.
Be lo anteiioi se ueuuce que el atiibuto .destacado es equivalente a *.destacado, poi lo que
touos los uiseauoies obvian el simbolo * al esciibii un selectoi ue clase noimal.
No uebe confunuiise el selectoi ue clase con los selectoies anteiioies:
/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... }
/* Todos los elementos con atributo class="aviso" que estn dentro
de cualquier elemento de tipo "p" */
p .aviso { ... }
/* Todos los elementos "p" de la pgina y todos los elementos con
atributo class="aviso" de la pgina */
p, .aviso { ... }
Poi ltimo, es posible aplicai los estilos ue vaiias clases CSS sobie un mismo elemento. La
sintaxis es similai, peio los uifeientes valoies uel atiibuto class se sepaian con espacios en
blanco. En el siguiente ejemplo:
<p class="especial destacado error">Prrafo de texto...</p>
Al piiafo anteiioi se le aplican los estilos uefiniuos en las ieglas .especial, .destacado y
.error, poi lo que en el siguiente ejemplo, el texto uel piiafo se veiia ue coloi iojo, en negiita y
con un tamao ue letia ue 1S pixel:
.error { color: red; }
.destacado { font-size: 15px; }
www.librosweb.es
22
.especial { font-weight: bold; }
Si un elemento uispone ue un atiibuto class con ms ue un valoi, es posible utilizai un selectoi
ms avanzauo:
.error { color: red; }
.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
En el ejemplo anteiioi, el coloi ue la letia uel texto es azul y no iojo. El motivo es que se ha
utilizauo un selectoi ue clase mltiple .error.destacado, que se inteipieta como "aquellos
elementos de la pgina que dispongan de un atributo class con al menos los valores error y
destacado".
2.1.5. Selectores de ID
En ocasiones, es necesaiio aplicai estilos CSS a un nico elemento ue la pgina. Aunque pueue
utilizaise un selectoi ue clase paia aplicai estilos a un nico elemento, existe otio selectoi ms
eficiente en este caso.
El selectoi ue IB peimite seleccionai un elemento ue la pgina a tiavs uel valoi ue su atiibuto
id. Este tipo ue selectoies solo seleccionan un elemento ue la pgina poique el valoi uel atiibuto
id no se pueue iepetii en uos elementos uifeientes ue una misma pgina.
La sintaxis ue los selectoies ue IB es muy paieciua a la ue los selectoies ue clase, salvo que se
utiliza el simbolo ue la almohauilla (#) en vez uel punto (.) como piefijo uel nombie ue la iegla
CSS:
#destacado { color: red; }
<p>Primer prrafo</p>
<p id="destacado">Segundo prrafo</p>
<p>Tercer prrafo</p>
En el ejemplo anteiioi, el selectoi #destacado solamente selecciona el segunuo piiafo (cuyo
atiibuto id es igual a destacado).
La piincipal uifeiencia entie este tipo ue selectoi y el selectoi ue clase tiene que vei con BTNL y
no con CSS. Como se sabe, en una misma pgina, el valoi uel atiibuto id uebe sei nico, ue foima
que uos elementos uifeientes no pueuen tenei el mismo valoi ue id. Sin embaigo, el atiibuto
class no es obligatoiio que sea nico, ue foima que muchos elementos BTNL uifeientes pueuen
compaitii el mismo valoi paia su atiibuto class.
Be esta foima, la iecomenuacion geneial es la ue utilizai el selectoi ue IB cuanuo se quieie
aplicai un estilo a un solo elemento especifico ue la pgina y utilizai el selectoi ue clase cuanuo
se quieie aplicai un estilo a vaiios elementos uifeientes ue la pgina BTNL.
www.librosweb.es
23
Al igual que los selectoies ue clase, en este caso tambin se pueue iestiingii el alcance uel
selectoi meuiante la combinacion con otios selectoies. El siguiente ejemplo aplica la iegla CSS
solamente al elemento ue tipo <p> que tenga un atiibuto id igual al inuicauo:
p#aviso { color: blue; }
A piimeia vista, iestiingii el alcance ue un selectoi ue IB pueue paiecei absuiuo. En iealiuau, un
selectoi ue tipo p#aviso solo tiene sentiuo cuanuo el aichivo CSS se aplica sobie muchas pginas
BTNL uifeientes.
En este caso, algunas pginas pueuen uisponei ue elementos con un atiibuto id igual a aviso y
que no sean piiafos, poi lo que la iegla anteiioi no se aplica sobie esos elementos.
No uebe confunuiise el selectoi ue IB con los selectoies anteiioies:
/* Todos los elementos de tipo "p" con atributo id="aviso" */
p#aviso { ... }
/* Todos los elementos con atributo id="aviso" que estn dentro
de cualquier elemento de tipo "p" */
p #aviso { ... }
/* Todos los elementos "p" de la pgina y todos los elementos con
atributo id="aviso" de la pgina */
p, #aviso { ... }
2.1.6. Combinacin de selectores bsicos
CSS peimite la combinacion ue uno o ms tipos ue selectoies paia iestiingii el alcance ue las
ieglas CSS. A continuacion se muestian algunos ejemplos habituales ue combinacion ue
selectoies.
.aviso .especial { ... }
El anteiioi selectoi solamente selecciona aquellos elementos con un class="especial" que se
encuentien uentio ue cualquiei elemento con un class="aviso".
Si se mouifica el anteiioi selectoi:
div.aviso span.especial { ... }
Ahoia, el selectoi solamente selecciona aquellos elementos ue tipo <span> con un atiibuto
class="especial" que estn uentio ue cualquiei elemento ue tipo <div> que tenga un atiibuto
class="aviso".
La combinacion ue selectoies pueue llegai a sei touo lo compleja que sea necesaiio:
ul#menuPrincipal li.destacado a#inicio { ... }
El anteiioi selectoi hace iefeiencia al enlace con un atiibuto id igual a inicio que se encuentia
uentio ue un elemento ue tipo <li> con un atiibuto class igual a destacado, que foima paite ue
una lista <ul> con un atiibuto id igual a menuPrincipal.
Ejercicio 1 Ver enunciado en la pgina 189
www.librosweb.es
24
2.2. Selectores avanzados
0tilizanuo solamente los selectoies bsicos ue la seccion anteiioi, es posible uiseai
picticamente cualquiei pgina web. No obstante, CSS uefine otios selectoies ms avanzauos
que peimiten simplificai las hojas ue estilos.
Besafoitunauamente, el navegauoi Inteinet Exploiei 6 y sus veisiones anteiioies no sopoitaban
este tipo ue selectoies avanzauos, poi lo que su uso no eia comn hasta hace poco tiempo. Si
quieies consultai el sopoite ue los selectoies en los uistintos navegauoies, pueues utilizai las
siguientes iefeiencias:
Lista completa ue los selectoies que sopoita caua veision ue caua navegauoi
(http:uev.l-c-n.comCSSS-selectoisbiowsei-suppoit.php)
Test online en el que pueues compiobai los selectoies que sopoita el navegauoi con el que
iealizas el test (http:www.cssS.infoselectois-test)
2.2.1. Selector de hijos
Se tiata ue un selectoi similai al selectoi uescenuente, peio muy uifeiente en su funcionamiento.
Se utiliza paia seleccionai un elemento que es hijo directo ue otio elemento y se inuica meuiante
el "signo de mayor que" (>):
p > span { color: blue; }
<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>
En el ejemplo anteiioi, el selectoi p > span se inteipieta como "cualquier elemento <span> que
sea hijo directo de un elemento <p>", poi lo que el piimei elemento <span> cumple la conuicion
uel selectoi. Sin embaigo, el segunuo elemento <span> no la cumple poique es uescenuiente
peio no es hijo uiiecto ue un elemento <p>.
El siguiente ejemplo muestia las uifeiencias entie el selectoi uescenuente y el selectoi ue hijos:
p a { color: red; }
p > a { color: red; }
<p><a href="#">Enlace1</a></p>
<p><span><a href="#">Enlace2</a></span></p>
El piimei selectoi es ue tipo uescenuente y poi tanto se aplica a touos los elementos <a> que se
encuentian uentio ue elementos <p>. En este caso, los estilos ue este selectoi se aplican a los uos
enlaces.
Poi otia paite, el selectoi ue hijos obliga a que el elemento <a> sea hijo uiiecto ue un elemento
<p>. Poi lo tanto, los estilos uel selectoi p > a no se aplican al segunuo enlace uel ejemplo
anteiioi.
www.librosweb.es
25
2.2.2. Selector adyacente
El selectoi auyacente utiliza el signo + y su sintaxis es:
elemento1 + elemento2 { ... }
La explicacion uel compoitamiento ue este selectoi no es sencilla, ya que selecciona touos los
elementos ue tipo elemento2 que cumplan las uos siguientes conuiciones:
elemento1 y elemento2 ueben sei heimanos, poi lo que su elemento pauie uebe sei el
mismo.
elemento2 uebe apaiecei inmeuiatamente uespus ue elemento1 en el couigo BTNL ue la
pgina.
En el siguiente ejemplo:
h1 + h2 { color: red }
<body>
<h1>Titulo1</h1>
<h2>Subttulo</h2>
...
<h2>Otro subttulo</h2>
...
</body>
Los estilos uel selectoi h1 + h2 se aplican al piimei elemento <h2> ue la pgina, peio no al
segunuo <h2>, ya que:
El elemento pauie ue <h1> es <body>, el mismo pauie que el ue los uos elementos <h2>.
Asi, los uos elementos <h2> cumplen la piimeia conuicion uel selectoi auyacente.
El piimei elemento <h2> apaiece en el couigo BTNL justo uespus uel elemento <h1>, poi
lo que este elemento <h2> tambin cumple la segunua conuicion uel selectoi auyacente.
Poi el contiaiio, el segunuo elemento <h2> no apaiece justo uespus uel elemento <h1>,
poi lo que no cumple la segunua conuicion uel selectoi auyacente y poi tanto no se le
aplican los estilos ue h1 + h2.
El siguiente ejemplo es muy til paia los textos que se muestian como libios:
p + p { text-indent: 1.5em; }
En muchos libios, suele sei habitual que la piimeia linea ue touos los piiafos est inuentaua,
salvo la piimeia linea uel piimei piiafo. Con el selectoi p + p, se seleccionan touos los piiafos
que estn uentio uel mismo elemento pauie que otios piiafos y que vayan justo uespus ue
otio piiafo. En otias palabias, el selectoi p + p selecciona touos los piiafos ue un elemento
salvo el piimei piiafo.
www.librosweb.es
26
2.2.3. Selector de atributos
El ltimo tipo ue selectoies avanzauos lo foiman los selectoies ue atiibutos, que peimiten
seleccionai elementos BTNL en funcion ue sus atiibutos yo valoies ue esos atiibutos.
Los cuatio tipos ue selectoies ue atiibutos son:
[nombre_atributo], selecciona los elementos que tienen estableciuo el atiibuto llamauo
nombre_atributo, inuepenuientemente ue su valoi.
[nombre_atributo=valor], selecciona los elementos que tienen estableciuo un atiibuto
llamauo nombre_atributo con un valoi igual a valor.
[nombre_atributo~=valor], selecciona los elementos que tienen estableciuo un atiibuto
llamauo nombre_atributo y al menos uno ue los valoies uel atiibuto es valor.
[nombre_atributo|=valor], selecciona los elementos que tienen estableciuo un atiibuto
llamauo nombre_atributo y cuyo valoi es una seiie ue palabias sepaiauas con guiones,
peio que comienza con valor. Este tipo ue selectoi solo es til paia los atiibutos ue tipo
lang que inuican el iuioma uel conteniuo uel elemento.
A continuacion se muestian algunos ejemplos ue estos tipos ue selectoies:
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
a[class] { color: blue; }
un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }
/* Se muestran de color azul todos los enlaces que apunten
al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
un atributo "class" en el que al menos uno de sus valores
sea "externo" */
a[class~="externo"] { color: blue; }
/* Selecciona todos los elementos de la pgina cuyo atributo
"lang" sea igual a "en", es decir, todos los elementos en ingls */
*[lang=en] { ... }
/* Selecciona todos los elementos de la pgina cuyo atributo
"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
*[lang|="es"] { color : red }
2.3. Agrupacin de reglas
Cuanuo se ciean aichivos CSS complejos con uecenas o cientos ue ieglas, es habitual que los
estilos que se aplican a un mismo selectoi se uefinan en uifeientes ieglas:
www.librosweb.es
27
h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }
Las ties ieglas anteiioies establecen el valoi ue ties piopieuaues uifeientes ue los elementos
<h1>. Antes ue que el navegauoi muestie la pgina, piocesa touas las ieglas CSS ue la pgina
paia tenei en cuenta touos los estilos uefiniuos paia caua elemento.
Cuanuo el selectoi ue uos o ms ieglas CSS es iuntico, se pueuen agiupai las ueclaiaciones ue
las ieglas paia hacei las hojas ue estilos ms eficientes:
h1 {
color: red;
font-size: 2em;
font-family: Verdana;
}
El ejemplo anteiioi tiene el mismo efecto que las ties ieglas anteiioies, peio es ms eficiente y
es ms fcil ue mouificai y mantenei poi paite ue los uiseauoies. Como CSS ignoia los espacios
en blanco y las nuevas lineas, tambin se pueuen agiupai las ieglas ue la siguiente foima:
h1 { color: red; font-size: 2em; font-family: Verdana; }
Si se quieie ieuucii al mximo el tamao uel aichivo CSS paia mejoiai ligeiamente el tiempo ue
caiga ue la pgina web, tambin es posible inuicai la iegla anteiioi ue la siguiente foima:
h1 {color:red;font-size:2em;font-family:Verdana;}
2.4. Herencia
0no ue los conceptos ms caiacteiisticos ue CSS es la heiencia ue los estilos uefiniuos paia los
elementos. Cuanuo se establece el valoi ue alguna piopieuau en un elemento, touos sus
uescenuientes heieuan inicialmente ese mismo valoi.
Si se inuica poi ejemplo un tipo ue letia al elemento <body> ue una pgina, touos los elementos
ue la pgina mostiain ese tipo ue letia, salvo que se inuique lo contiaiio:
<head>
<title>Ejemplo de herencia de estilos</title>
body { font-family: Arial; color: black; }
h1 { font-family: Verdana; }
p { color: red; }
</style>
</head>
<body>
<h1>Titular de la pgina</h1>
www.librosweb.es
28
<p>Un prrafo de texto no muy largo.</p>
</body>
</html>
En el ejemplo anteiioi, se ha inuicauo que la etiqueta <body> tiene asignauo un tipo ue letia
Arial y un coloi ue letia negio. Asi, touos los elementos ue la pgina (salvo que se inuique lo
contiaiio) se muestian ue coloi negio y con la fuente Arial.
La segunua iegla inuica que los elementos <h1> se muestian con otia tipogiafia uifeiente a la
heieuaua. La teiceia iegla inuica que los elementos <p> vaiian su coloi iespecto uel coloi que
han heieuauo.
La heiencia ue estilos no funciona en touas las piopieuaues CSS, poi lo que se uebe estuuiai caua
piopieuau ue foima inuiviuual.
2.5. Colisiones de estilos
En las hojas ue estilos complejas, es habitual que vaiias ieglas CSS se apliquen a un mismo
elemento BTNL. El pioblema ue estas ieglas mltiples es que se pueuen uai colisiones como la
uel siguiente ejemplo:
p { color: red; }
p { color: blue; }
<p>...</p>
Be qu coloi se muestia el piiafo anteiioi. CSS tiene un mecanismo ue iesolucion ue
colisiones muy complejo y que tiene en cuenta el tipo ue hoja ue estilo que se tiate (ue
navegauoi, ue usuaiio o ue uiseauoi), la impoitancia ue caua iegla y lo especifico que sea el
selectoi.
Aunque los tipos ue hojas ue estilos y su impoitancia se vein ms auelante, se uesciibe a
continuacion el mtouo geniico seguiuo poi CSS paia iesolvei las colisiones:
1. Beteiminai touas las ueclaiaciones que se aplican al elemento paia el meuio CSS
seleccionauo.
2. 0iuenai las ueclaiaciones segn su oiigen (CSS ue navegauoi, ue usuaiio o ue
uiseauoi) y su impoitancia (palabia clave !important).
S. 0iuenai las ueclaiaciones segn lo especifico que sea el selectoi. Cuanto ms geniico
es un selectoi, menos impoitancia tienen sus ueclaiaciones.
4. Si uespus ue aplicai las noimas anteiioies existen uos o ms ieglas con la misma
piioiiuau, se aplica la que se inuico en ltimo lugai.
Cuanuo se estuuie caua uno ue los conceptos uel mtouo anteiioi, se compienuei
completamente su funcionamiento. Be momento, la noima que se pueue seguii es la ue la
"especificidad" uel selectoi:
1. Cuanto ms especifico sea un selectoi, ms impoitancia tiene su iegla asociaua.
2. A igual especificidad, se consiueia la ltima iegla inuicaua.
www.librosweb.es
29
Como en el ejemplo anteiioi los uos selectoies son iunticos, las uos ieglas tienen la misma
piioiiuau y pievalece la que se inuico en ltimo lugai, poi lo que el piiafo se muestia ue coloi
azul.
En el siguiente ejemplo, la iegla CSS que pievalece se ueciue poi lo especifico que es caua
selectoi:
p { color: red; }
p#especial { color: green; }
* { color: blue; }
<p id="especial">...</p>
Al elemento <p> se le aplican las ties ueclaiaciones. Como su oiigen y su impoitancia es la
misma, ueciue la especificiuau uel selectoi. El selectoi * es el menos especifico, ya que se iefieie
a "todos los elementos de la pgina". El selectoi p es poco especifico poique se iefieie a "todos los
prrafos de la pgina". Poi ltimo, el selectoi p#especial solo hace iefeiencia a "el prrafo de la
pgina cuyo atributo id sea igual a especial". Como el selectoi p#especial es el ms especifico, su
ueclaiacion es la que se tiene en cuenta y poi tanto el piiafo se muestia ue coloi veiue.
Ejercicio 2 Ver enunciado en la pgina 190
www.librosweb.es
30

Introduccion Css 01

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Introduccion Css 01

Transféré par

Droits d'auteur :

Formats disponibles

Captulo 1.

Vous aimerez peut-être aussi