Lenguaje de Programacion HTML 2

CSS1
LenguajesdeprogramacinHTMLyCSS
Parte2.FormatoconCSS
AplicacindeCSS
Despus de haber terminado la primera parte, exclusivamente en HTML, ahora nos
encontramos con CSS. CSS no es ms complicado que HTML, es el complemento para
ayudarteadarformatoatupginaweb.
En esta primera parte sobre CSS, veremos la teora CSS: qu es? qu aspecto tiene?
cundo se escribe el cdigo CSS? Estos aspectos tericos no son muy complicados, pero
hay que entenderlos, porque es la base de CSS. Esto es lo nico que se debe recordar de
memoriaenCSS.
HistoriadeCSS
Haba informado previamente que aprenderemos dos lenguajes.Ya hemosempezadonuestro
descubrimiento de HTML, aunque hay muchas ms cosas que aprender (volveremos al HTML
msadelante).Sinembargo,ahoraestiempoparaocuparnosdeCSS.
CSS (Cascading Style Sheets), es otro lenguaje que complementa HTML. Recordars su
papel?Consisteengestionareldiseodetusitio.
ParaqusirveCSS?
Permiteelegirelcolordetutexto.
Permiteseleccionareltipodeletrautilizadoentusitio.
Estableceeltamao,bordes,fondo...
Adems, puede hacer el diseo de tu sitio. Se le puede decir: quiero que mi men est a la
izquierdayocupeunaanchuratalquelacabecerademisitiosiempreseavisible,etc.
CSS:comienzodifcil
DebessaberquealprincipiodelaWeb,CSSnoexista.Dehecho,solohabaHTML.
ElcdigoHTMLnacien1991yCSSen1996.Porlotanto,puedespensarsinduda:cmose
dabaformatodesde1991hasta1996?PuessloenHTML.Enefecto,hayetiquetasparadar
________________________________________________________________________________________
DesarrolloAplicacionesWeb.RafaelMenndezBarzanallanaAsensio.DIS.UMU
CSS2
formatoenHTML.Porejemplo<fontcolor="#aab1c3">permitefijarelcolordeltextoenHTML.
Sin embargo, las pginas HTML llegaron a ser muy complejas. Haba ms y ms etiquetas y
eran una mezclaanrquica de contenido y formato, lo que hizo laactualizacin de las pginas
web un proceso ms complejo Es por eso que se cre CSS. Sin embargo, CSS no fue
inmediatamente adoptado por los diseadores, ni mucho menos. Tenan que deshacerse de
algunos maloshbitos y esollev tiempo. Incluso hoy en da,esfrecuenteencontrarsitiosweb
conformatoHTML,viejoyobsoleto,comoelusodelaetiqueta<font>.
CSS:soportedelosnavegadores
AligualqueHTML,CSShaevolucionado.HahabidocuatroversionesprincipalesdeCSS:
CSS1
CSS2.0
CSS2.1
CSS3
Son los navegadoresweb los que hacen el trabajo ms complejo, deben leer el cdigo CSS y
entendercmomostrarloenlapgina.
En la dcada del 2000, el navegador Internet Explorer (Microsoft Windows) era el ms comn,
pero su gestin de CSS ha sido durante mucho tiempo mediocre (por no decir mala). Era el
apogeo de la versin 6 (IE6), por desgracia, todava se utiliza por una pequea parte de los
usuariosdeInternet(porsuerte,estaproporcintiendeadisminuir).
Desde entonces, muchos navegadores se crearon y abuchearon a Internet Explorer: Mozilla
Firefox, por supuesto, pero tambin Google Chrome y Opera. Y no estoy hablando del xito de
Mac y el iPhone con el navegador Safari. Esto llev a Microsoft a responder, public(despus
deunlargoperododeinactividad)IE7eIE8yelIE9.YasehabladeIE11.
La leccin de historia, tal vez sea muy bonita, pero cmo me afecta hoy en da? Qu
podemos aprender de esto? Que los navegadores no saben todas las propiedades CSS que
existen.Cuantoelnavegadoresmsantiguo,menossabedelascaractersticasdeCSS.
Mostrar en esta documentacin una serie de caractersticas de CSS que no funcionan
necesariamente en los navegadores ms antiguos. No puedo evitarlo, es as: no hay ningn
navegador que lo sepa todo. En el peor de los casos, siel navegador no sabe una propiedad
CSS,loignoraynodaformato,peronosecuelgalapgina:siempreserlegible.
Recomiendo www.caniuse.comqueofrecetablasde caractersticasdecompatibilidaddeHTML
yCSSendistintosnavegadores(ysusdiferentesversiones).
________________________________________________________________________________________
CSS3
DndeseescribeelcdigoCSS?
Tienes que elegir una opcin porque se puede escribir cdigo en CSS en tres lugares
diferentes:
enunarchivoconextensincss(elmtodomsrecomendado).
enlacabecera<head>delarchivoHTML
directamente en las etiquetas del archivo HTML a travs de un atributo de estilo (el
mtodomenosrecomendable).
Voyapresentarestostresmtodos,peroyasabemosqueelprimeroeselmejor.Enunarchivo
.css
Como indico, lo ms habitual es escribir el cdigo CSSen unarchivoespecialconlaextensin
css (a diferencia de los archivos HTML que tienen la extensin html). Esta es la forma ms
prctica y ms flexible. Esto nos impide mezclar todo en un solo archivo. Voy a utilizar esta
tcnicaentodoelrestodelcurso.
Comienzaapracticarahora.VamosapartirelarchivoHTMLdelasiguientemanera:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf8"/>
<linkrel="stylesheet"href="estilo.css"/>
<title>PrimerapruebadeCSS</title>
</head>
<body>
________________________________________________________________________________________
CSS4
<h1>Misupersitio</h1>
<p>Bienvenidos!</p>
<p>Porelmomentoestcasi<em>vaco</em>.Ten
paciencia!</p>
</body>
</html>
Te dars cuenta de los contenidos de la lnea 5, <link rel="stylesheet" href="estilo.css" />, que
indica que el archivo HTML estasociadoconunarchivollamadoestilo.cssyeselresponsable
delformato.
Guardar este archivo como se desee (por ejemplo, pagina.html). Por ahora, nada especial,
exceptoparalanuevaetiquetaquehemosaadido.
A continuacin, crea un nuevo archivo vaco en tu editor de textos (por ejemplo, Aptana o
Notepad++)ycopiaesetrozodecdigoCSS(notepreocupes,voyadecirloquesignifica):
p
{
color:blue
}
Guarda el archivo asignndole un nombre que terminecon .css,como por ejemplo estilo.css.
Colocaestearchivo.cssenlamismacarpetadelos.html.
Ahora abre tu pgina con el archivo .html en un navegador para probarlo como lo haces
normalmente.Observa,losprrafosestnescritosenazul,comosemuestraseguidamente.
Misupersitio
Bienvenidos!
Porelmomentoestcasivaco.Tenpaciencia!
OtraformadeasignarformatoesenelencabezadodelarchivoHTML<head>.
HayotromtodoparaelusodeCSSenarchivosHTML:setratadeinsertarelcdigoCSS
<style>directamenteenunaetiquetaenelinteriordelacabecera<head>.
Cmo obtener exactamente el mismo resultado con un nico archivo HTML que contiene el
cdigoCSS(lneas510):
<!DOCTYPEhtml>
________________________________________________________________________________________
CSS5
<html>
<head>
<style>
p
{
color:blue
}
</style>
<title>PruebadeCSS</title>
</head>
<body>
<p>Bienvenidos!</p>
paciencia!</p>
</body>
</html>
Ylaterceraposibilidadesinsertndolodirectamenteenlasetiquetas(norecomendada).
Este ltimo mtodo, se ha de manejar con cuidado, puedes agregar un atributo de estilo a
cualquieretiqueta.InsertaelcdigoCSSdirectamenteenesteatributo:
<!DOCTYPEhtml>
<html>
<head>
<title>PrruebadeCSS</title>
</head>
<body>
</p>
<pstyle="color:blue">Bienvenidos!
paciencia!</p>
</body>
</html>
Estavez,sloeltextodelprrafo(lnea10),cuyaetiquetacontieneelCSS,serdecolorazul.
Qumtodoelegir?
________________________________________________________________________________________
CSS6
El primer mtodo que se recomiendaparecesermscomplicadoquelosotrosdos.Porqu?

Porqumeaconsejascreardosarchivos,enlugardeun soloarchivo.html.Terecomiendoque
adquieras elhbito de trabajar conelprimermtodo, yaqueeselutilizadoporlamayoradelos
diseadores.
Por qu? Por el momento, realizas las pruebas en un nico archivo HTML. Sin embargo, el
sitio ms tarde se compone de varias pginas HTML,estamosdeacuerdo.Imaginasiponesel
cdigo CSS directamente en el archivo HTML, has de copiar el cdigo en todos los archivos
HTML del sitio. Y si cambias de opininenelfuturo,porejemplo,si quieresquelosprrafos,en
vezdeazulaparezcanenrojo,hayquemodificarcadaficheroHTML.
Aplicacindeunestilo,medianteunaetiqueta
CdigoCSS:
p
{color:blue}
EnelcdigoCSSdeestamanera,haytreselementosdiferentes:
Nombres de las etiquetas: escribe los nombres de etiquetas a las que deseas
cambiar la apariencia. Por ejemplo, si quiero cambiar la aparicin detodos losprrafos
<p>,tengoqueescribirp(sinlosgalonesdeHTML).
Propiedades de CSS: "efectos de estilo" enlapginasealmacenanlaspropiedades.
Existe por ejemplo la propiedad color que se utiliza para especificar el color del texto,
tamao de fuente que te permite especificar el tamao del texto, etc. Hay muchas
propiedadesCSSy,comotehedicho,noesnecesarioconocerlastodasdememoria.
Valores: para cada propiedad CSS, debes especificar un valor. Por ejemplo, la
propiedad de color, indica el nombre del color. Por tamao defuente, indica el tamao
quesedesea,etc.
Esquemticamente,unahojadeestiloCSS,severaas:
etiqueta1
{
propriedad1:valor1
propriedad2:valor2
propriedad3:valor3
}
etiqueta2
________________________________________________________________________________________
CSS7
{
propriedad1:valor1
propriedad2:valor2
propriedad3:valor3
propriedad4:valor4
}
etiqueta3
{
propriedad1:valor1
}
En este fragmento de etiquetas se ven, los atributos y valoresqueacabodemencionar.Como

puedes ver, se escribe el nombre de la etiqueta (por ejemplo, h1) y llaves de apertura, en el
interior, pones las propiedades y los valores quedesees.Sepuedenindicartantaspropiedades
como se desee dentro delas llaves. Cada propiedad est seguida del smbolode"dos puntos"
(:)yelvalorcorrespondiente.Porltimo,cadalneaterminaconunpuntoycoma().
Vers muchas propiedades en los captulos siguientes. Por el momento,en los ejemplos, solo
tendremosquecambiarelcolor.
ElcdigoCSSquehemosutilizadohastaahora,es:
p
{
color:navy
}
estosignifica:"Quieroquetodosmisprrafosestnescritosenazulmarino".
Prueba a cambiar el nombrede la etiqueta asignada por CSS. Por ejemplo, si escriboh1en el
ttuloqueseescribeenazul.Editatuarchivoestilo.cssdeestamanera:
h1
{
color:navy
}
Ahora, vuelve a abrir la pgina HTML (recuerda, esta es la pgina HTML que se abre en el
navegador, no el archivo con extensin css): debes ver el ttulo, que aparece en azul como se
muestraseguidamente.
________________________________________________________________________________________
CSS8
Misupersitio
Bienvenidos!
Aplicarunestiloavariasetiquetas
TomemoselsiguientecdigoCSS
h1
{
color:navy
}
em
{
color:navy
}
Significa que nuestros ttulos y nuestros textos con las etiquetas <h1> y <em> deben
mostrarse de color azul marino. Por contra,es un poco repetitiva, no?. Afortunadamente,hay
una manera enCSS para irmsrpidosiambasetiquetas debentenerlamismapresentacin.
Essuficienteconcombinarlasdeclaracionesseparndolasconunacoma,
h1,em
{color:navy}
Elresultadoeselsiguiente
Misupersitio
Bienvenidos!
ComentariosenCSS
Al igual queHTML,esposibleponercomentarios.Loscomentariosnosemostrarn,slosirven
paraespecificarlainformacinparati,porejemplo,enunarchivoCSSmuylargo.
Por otra parte, te dars cuenta, que en general, el archivo HTML es muy corto y el CSS
________________________________________________________________________________________
CSS9
suficientemente extenso (contiene todos los elementos de estilo del sitio, es normal). Ten en
cuenta que es posible crear varios archivos de CSS para tu sitio si sientes la necesidad de
separarelCSSunpoco(deacuerdoalasdiferentesseccionesdetusitio,porejemplo).
As que para hacer uncomentario,esmuyfcilescribe /* seguidoportucomentario,yluego*/
para poner fin al comentario. Los comentarios se pueden escribir en una o ms lneas. Por
ejemplo:
/*
estilo.css
PorEscpticoantimagufos
*/
p
{
color:red/*Losprrafosestnenrojo*/
}
Aplicarunestilo:classeid
Lo que seha mostrado hasta el momento todava tiene un defecto: esto implica, por ejemplo,
que todos los prrafos tienen la misma presentacin (en estecaso, porlotantoseescribiren
azul). Cmo conseguir que slo algunos prrafos estn escritos de una manera diferente?
Podramos poner elcdigo CSSen un atributo estilo en la etiquetaqueestsdiseado (quees
la tcnica que he descritoantes),perocomohedicho,estonoesrecomendable(esmejorusar
unarchivocssexterno).
Pararesolverelproblema,podemosutilizarestosatributosespecialesquetrabajanentodaslas
etiquetas:
elatributodeclase
elatributoid.
Losatributosclaseeidsoncasiidnticos.Hayslounapequeadiferenciaquevoyarevelara
continuacin.Porelmomento,yenpocaspalabras,novamosamirarelatributodeclase.
Esunatributoquesepuedeponerencualquieretiqueta,ascomoprrafo,imagen,etc.
<h1class=""></h1>
<pclass=""></p>
<imgclass=""/>
S,perocmosedavaloralatributodelaclase?
________________________________________________________________________________________
CSS10
Dehecho,debesescribirunnombrequeidentificaalaetiqueta.Loquequieras,siemprey
cuandoelnombreempiececonunaletra.
Porejemplo,asociarlaclaseintroduccinamiprimerprrafo(lnea11):
<!DOCTYPEhtml>
<html>
<head>
<title>PruebadeCSS</title>
</head>
<body>
<h1>Misupersitio!</h1>
</p>
<pclass="introduccion">Bienvenidos!
paciencia!</p>
</body>
</html>
Ahora lo que se ha hecho, es que el prrafo est identificado. Tiene un nombre: introduccin.
Sers capaz de volver a utilizar el nombre en el archivo CSS para decir: "quiero que las
etiquetasquetienennombrescomo"introduccin"semuestrenenazul."
ParahacerestoenCSS,especificaelnombredelaclase,apartirdeunpunto(.),dela
siguientemanera:
.introduccion
{
color:navy
}
Apareciendoalejecutarlo
Misupersitio
Bienvenidos!
________________________________________________________________________________________
CSS11
Yentonceselatributoid?
Funciona exactamente de la misma manera que la clase, excepto por una cosa: que su
denominacinslopuedeutilizarseunavezenelcdigo.
Qu inters? Haypoco para ser honesto, ser til si luego se usa JavaScript para reconocer
ciertas etiquetas. Por otra parte, ya hemos visto el atributo id en el captulo sobre los enlaces
(para hacer losanclajes)
.Enlaprctica,vamosaponer eseIdentificacinenloselementosque
sonnicosdentrodelapgina,talescomoellogotipo.
<imgsrc="images/logo.png"alt="Logodelsitio"id="logo"/>
SiutilizaslaIdentificacin,cuandosedefinenlaspropiedadesenelarchivocss,seprecederel
nombredelaIdentificacinporelsignosostenido(#):
#logo
{
/*IndicalaspropiedadesCSSaqu*/
}
Etiquetasuniversales
Llegar el momento en que se necesite aplicar una clase (o id) a ciertas palabras que,
originalmente,noestnrodeadasporetiquetas.
En efecto, el problemade la clase es que es un atributo.Entonces no se puede poner en una
etiqueta. Si, por ejemplo, quiero cambiar slo "bienvenido" en el prrafo: <p>Buenos das y
bienvenidoamisitio!</p>.
Sera fcil de hacer si hay una etiqueta alrededor de "bienvenido", pero por desgracia no hay
ninguna.Porsuerte,hemosinventadolaetiquetaquenosirveparanada.
De hecho, hemos inventado dos etiquetas de las llamadas universales, sin un significado
especial(noindicanquelapalabraesimportante,por ejemplo).Hayunadiferenciamnima(pero
importante)entreestasdosetiquetas:
<span> </ span>: esta etiqueta es de lnea, es decir que esunaetiqueta se coloca
dentro de un prrafo de texto, para seleccionar slo algunas palabras. Las etiquetas
<em> y <strong> sondelamismafamilia.Estaetiqueta,por lotanto,seutilizaenmedio
deunprrafoyaslavamosautilizarparadarcolora"bienvenida".
<div> </ div>: esta es una etiqueta del tipo bloque, en tornoaunbloquedetexto.Las
________________________________________________________________________________________
CSS12
etiquetas <p>, <h1>, etc. son de la misma familia. Estas etiquetas tienen algo en
comn: crear un nuevo "bloque"en la pgina y generar por lotanto, necesariamenteun
salto de lnea. <div> esuna etiqueta que es utilizada con frecuencia en la construccin
deundiseo,comoveremosmsadelante.
As que por ahora, vamos a utilizar la etiqueta <span>. Se pone alrededor de "bienvenida",
aadiendounaclase(conelnombrequequieras).
CdigoHTML:
<p>Buenosdasy<spanclass="saludos">bienvenidoa</span>mi
sitio!</p>
yelcdigoCSS:
.saludos
{
color:blue
}
Aplicarunestilo:selectoresavanzados
En CSS, la parte ms difcil esconocer eltexto de destino al que se deseacambiar la forma.
Para hacer referencia (o seleccionar) loselementosdelapginaamodificar,usamosloquese
llaman selectores. Has usado alguno anteriormente en este captulo,un resumen deellospara
empezar.
Selectoresqueyaconoces:
Estos selectores, como hemos vistoanteriormente, son en gran medidalosmscomnmente
utilizados.Sedebensaberdememoria.
Comienzaconlabasedelabase:
p
{
}
quiere decir "quiero afectar acadaprrafo."Despusdeeso,tetocadecirloquehacerenesos
prrafos(escribirenrojo,porejemplo).
Tambinhemosvisto:
________________________________________________________________________________________
CSS13
h1,em
{}
que significa "Todos los ttulos y todos los textos importantes". Hemos seleccionado dos
etiquetasalavez.
Y, por ltimo, vimos cmo seleccionar etiquetas especficas a las que hemos dadounnombre
conlosatributosclaseeid:
.class
{
}
#id
{
}
Sabes qu hay otras formas de poner etiquetas en CSS. No vamos a ver todas porque hay
muchasyalgunassoncomplejas,peroestassonlasquepuedesermseficacesenCSS!
Selectoresavanzados
*:selectoruniversal
*
{
}
Seleccionatodaslasetiquetassinexcepcin.Selellamaelselectoruniversal.
AB:unaetiquetadentrodeotra
h3em
{
}
Selecciona todaslasetiquetas<em>ubicadas dentrodeuna etiqueta<h3>. Tenencuentaque
nohayunacomaentrelosnombresdelasetiquetas.
CdigoHTMLequivalente:
<h3>Ttulocon<em>textoimportante</em></h3>
A+B:unaetiquetaquesigueaotra
________________________________________________________________________________________
CSS14
h3+p
{
}
Seleccionalaprimeraetiqueta<p>situadadespusdeunttulo<h3>.
EjemplodecdigoHTML
<h3>Ttulo</h3>
<p>Prrafo</p>
A[atributo]:unaetiquetaqueposeeunatributo
a[titulo]
{
}
Seleccionatodoslosenlaces<a>queposeenunatributottulo.
EjemplodecdigoHTML
<ahref="http://www.esceptiismo.es"title="Escepticismo">
A[atributo="valor"]:unaetiqueta,unatributoyunvalorexacto.
a[titulo="Pulseaqu"]
{
}
Lomismo,peroelatributotambindebetenerexactamenteelvalor"Pulseaqu".
EjemplodecdigoHTML
<ahref="http://www.escepticismo.s"title="Pulseaqu">
A[atributo*="valor"]:unaetiqueta,unatributoyunvalor.
a[titulo*="aqu"]
{
}
________________________________________________________________________________________
CSS15
Lo mismo ocurre, pero el atributo debe contener en su valor la palabra "aqu" (cualquier
posicin).
EjemplodecdigoHTML
<ahref="http://www.escepticismo.es"title="Cualquierparteporaqu>
Existenotrosselectores
Aqu se ha presentado una parte de los selectores CSS,perosabemosquehaymuchos otros.
Si deseas una lista completa, puedes acceder directamente a la fuente: el sitio del W3C. Es
muycompleto.Otrosselectoresseconsiderarnmsadelante.
Enresumen
CSS es otro lenguaje que complementa a HTML. Su funcin consiste en dar formato a las
pginasweb.
Se ha de tener cuidado con la compatibilidad del navegador con algunas caractersticas
recientesdeCSS3.
Cuando un navegador no tiene conocimiento de un formato de instruccin, simplemente lo
ignora.
Podemos escribir el cdigoCSS en varios lugaresdiferentes,lomsaconsejableescrearun
archivoseparadoconextensin.css(ejemplo:estilo.css).
En CSS, seleccionamos qu partes de la pgina HTML se desean cambiar y modificar su
presentacinconpropiedadesdeCSS:
Hay muchas manerasde seleccionar la parte de lapginaalaquesedeseadarformato.Por
ejemplo:
todas las etiquetas del mismo tipo, simplemente escribiendo su nombre (por ejemplo,
h1)
algunas etiquetas especficas, que se le han dado nombres mediante el uso de los
atributosclassoid(.nombreclaseo#nomid)
nicamenteetiquetasqueestndentrodeotrasetiquetas(h3em).
etc.
________________________________________________________________________________________
CSS16
Formatodetexto
Llegamos ahora a un apartado que te interesar mucho. Simplemente significa que vamos a
cambiarlaaparienciadeltexto.
No es una sorpresa especial:todavaestamosenCSSy usamosloquehemosaprendidoenel
captulo anterior.Por lotanto, vas a trabajar directamente en elarchivo.cssquehemoscreado
previamente.
Este captulo ser una oportunidad para descubrir muchas de las propiedades CSS: vamos a
vercmocambiareltamaodeltexto,cambiarlafuente,alineareltexto
Tamaodeltexto
Para cambiar el tamao deltexto,utilizalapropiedadCSSfontsize.Pero,cmoespecificarel
tamao de la fuente? Aqu es donde las cosas se ponen difciles, porque haymuchastcnicas
disponibles:
Indicar un tamao absoluto:en pxeles, centmetros o milmetros.Estemtodoesmuypreciso,
pero es aconsejable utilizarlo slo si es absolutamente necesario, porque puede indicar un
tamaodemasiadopequeoparaalgunoslectores.
Indicar un tamao relativo en tanto porciento,<em>o<ex>,estatcnicatienelaventajadeser
msflexible.loqueresultamsfcilalaspreferenciasdetamaodelosvisitantes.
Tamao absoluto. Para especificar un tamao absoluto, se utilizan generalmente lospxeles.
Parauntextode16pxelesdealto,escribe:
fontsize:16px
Heaquunejemplodeuso,puedescopiarelcdigoenelficheroestilo.css:
p
{
fontsize:14px/*Prrafode14pixeles*/
}
h1
{
fontsize:40px/*Ttulosde40pixeles*/
}
________________________________________________________________________________________
CSS17
SI lo deseas, lostamaos se pueden definir en cm o mm(SistemaInternacionaldeUnidades),

reemplazandopxporcmomm.Sinembargoestasunidadesseadaptanpeoralaspantallas.
Valorrelativo
Es el mtodo recomendado pues el textose adaptamsfcilmentealaspreferenciasdetodos
los visitantes. Hay varias formas de indicar un valor relativo, por ejemplo se puede indicar el
tamaoconpalabraseninglscomo:
xxsmall:minscula
xsmall:muypequea
small:pequea
medium:media
large:grade
xlarge:muygrande
xxlarge:gigantesca
Esfcilprobarelcdigo
p
{
fontsize:small
}
h1
{
fontsize:large
}
Esta tcnica tiene un inconveniente: hay siete tamaos disponibles (porque solo hay siete
nombres). Afortunadamente, hay otros, es habitual especificar el tamao en "em".Si escribes
1em, el texto tiene un tamao normal. Si deseas ampliar el texto, puede introducir un valor
mayor que 1, como 1.3em. Si deseas reducir el texto, introduce un valor inferior a 1, como
0.8em.
Tencuidado:paralosnmerosdecimales,debesponerunpuntoynounacoma.Tendrsque
escribir"1.4em"yno"1,4em"
EjemplodecdigoCSS:
p
{
________________________________________________________________________________________
CSS18
fontsize:0.8em
}
h1
{
fontsize:1.3em
}
Otras unidades estn disponibles. Puedes probar el "ex" (que funcionacon el mismo principio
queemperosignificabasemspequea)yelporcentaje(80%,130%...).
Fuentes
De hecho, hay un problema: para que un tipo de letrase visualice correctamente, se requiere
que todos los usuarios que lo visiten tengan la fuente instalada en su sistema operativo. Si un
usuario no tiene lamismafuentequesuponescomofuentepredeterminadadelnavegador(tipo
deletraestndar)loquesemuestrapuedequenotenganadaqueverconloesperado.
La buena noticia esque desde CSS3, es posible descargar automticamenteenunnavegador
lafuente.Explicarenunsegundopasocmohaceresto.
Cambiarlafuente
La propiedad CSS quepermiteespecificareltipode letraautilizaresfontfamily.Debesescribir
elnombredelafuenteas:
etiqueta
{
fontfamily:fuente
}
Sloparaevitarproblemassielusuarionotienelamismafuentequeseprecisa,engeneralse
indicanlosnombresdediferentesfuentes,separadosporcomas:
etiqueta
{
fontfamily:fuente1,fuente2,fuente3,fuente4
}
El navegador intentarutilizarlafuente1.Sinoesas,intentarlafuente2.Sinolohace, seira
lafuente3,yassucesivamente.
En general, se indicala ltima como serif, que corresponde a una fuente predeterminada (que
slo se aplica si no se ha encontrado otra fuente). Tambin hay otro tipo de letra por defecto
________________________________________________________________________________________
CSS19
llamado sansserif. La diferencia entre los dos es la presencia de pequeas lengetas de

conexinenlaparteinferiordelasletras,lafuentesansserifnotiene.S,essutil.
S,peroculessonlasfuentesmscomunesquetienesel"derecho"autilizar
Arial
ArialBlack
ComicSansMS(norecomendada)
CourierNew
Georgia
Impact
TimesNewRoman
TrebuchetMS
Verdana.
As,siescriboelsiguientecdigoCSS
p
{fontfamily:Impact,"ArialBlack",Arial,Verdana,sansserif
}
significa:"ponlafuenteimpactsinoesas,ArialBlack,osinoArial,osinoVerdanaosinada
funciona,poneruntipodeletraestndar(sansserif).
En general, se indica una seleccin de tres o cuatro fuentes (+ serif o sansserif) para
asegurarse de que al menos una de ellas ha sido encontrada en el ordenador del visitante de
nuestraweb.
Si el nombre de la fuente lleva espacios en blanco, entonces se ha de poner entre comillas,
comoporejemploArialBlack.
Usodeunafuentepersonalizadacon@fontface
Si te parece la eleccin de fuentes demasiado pequea. Cmo puedo usar mi fuente favorita
de mi sitio web? Durante mucho tiempo esto no era posible. Actualmente, con CSS3, hay
afortunadamente una manera de utilizar cualquier fuente entu web. Esto funciona bien con la
mayora de los navegadores. Pero cuidado, hay defectos (de lo contrario sera demasiado
bueno):
Ser necesarioqueelnavegadordelosvisitantesdescargueautomticamenteelarchivode la
fuente,quepuedepesaroexcederde1MB.
La mayora de las fuentes estn sujetas a derechos deautor,noeslegalutilizarlasentusitio.
________________________________________________________________________________________
CSS20
Afortunadamente, hay sitios como dafont.com y fontsquirrel.com que ofrecen la posibilidad de

descargar fuentes libres de derechos de autor. Recomendamos especialmente
fontsquirrel.com,yaquepermitequedescargueslospaqueteslistosparaCSS3.
Hay varios formatos de archivos de fuentes y no funcionan en todos los navegadores,
necesitassaber:
.ttf:FontTrueType.FuncionaenIE9ylosdemsnavegadores.
. eot: Embedded OpenType. Slo funciona en todas las versiones de Internet Explorer.
Esteformatoespropietario,producidoporMicrosoft.
.tfo:FontOpenType.NofuncionaenInternetExplorer.
.svg:SVGFont.ElnicoformatocompatibleconiPhonesyiPadsporahora.
. woff: Web Open Font Format. Nuevo formato diseado para la web, quefunciona en
IE9ylasdemsnavegadores.
EnCSSparadefinirunnuevotipodeletraofuente,debesdeclararloas:
@fontface{
fontfamily:'MiFuenteEsceptica'
src:url('MifuenteEsceptica.eot')
}
Elarchivodefuente(aquMiFuenteEsceptica.eot)debeestarubicadoenlamismacarpetaque
elarchivoCSS(oenunasubcarpeta,siseutilizaunarutarelativa).
S,ademsEOTslofuncionaenInternetExplorer.Loidealesofrecermltiplesformatospara
lasfuentesqueelnavegadordescargayquepuedaleer.Seindicancmovariosformatos:
@fontface{
fontfamily:'MiFuenteEsceptica'
src:url('MiFuenteEsceptica.eot')format('eot'),
url('MiFuenteEsceptica.woff')format('woff'),
url('MiFuenteEsceptica.ttf')format('truetype'),
url('MiFuenteEsceptica.svg')format('svg')
}
Para probar, sugiero descargar una fuente de Squirrel Font, por ejemplo, Learning Curve Pro.
Haz clic en "@
fontface Kit" que permitir descargar una lista para su uso con todos los
formatosdelafuente.
ElarchivoCSSseveralfinalcomo:
________________________________________________________________________________________
CSS21
@fontface{/*DefinicindeunafuenteLearningCurveProRegular*/
fontfamily:'LearningCurveProRegular'
src:url('LearningCurve_OTwebfont.eot')
src:url('LearningCurve_OTwebfont.eot?#iefix')
format('embeddedopentype'),
url('LearningCurve_OTwebfont.woff')format('woff'),
url('LearningCurve_OTwebfont.ttf')format('truetype'),
url('LearningCurve_OTwebfont.svg#LearningCurveProRegular')
format('svg')
}
h1/*Utilizacindelafuentedefinidaenlosttulos*/
{
fontfamily:'LearningCurveProRegular',Arial,serif
}
Laprimera seccin@fontfacesirveparadefinir unnuevonombre detipodeletraquese puede
utilizar en el archivo CSS. A continuacin, utilizamos este nombredelafuenteconlapropiedad
fontfamily, que ya sabemos, para cambiar la apariencia de los ttulos <h1>. Se puede ver una
muestradeestafuenteacontinuacin.
Te dars cuenta de algunas peculiaridades en el CSS generadopor el tipo de letra Squirrel. El

objetivo es superar algunos errores de Internet Explorer porque las versiones anteriores no
entiendencuandodefinimosvariosformatos.Esoexplicalapresenciadeun?#iefixenelcdigo.
Cursiva,negrita,subrayado
Hay un nmero de propiedades CSS de formato de texto de forma convencional. Vamos a
descubrir aqu cmomostrar eltextoennegrita,cursivaysubrayado...yde pasoveremosque
inclusoesposiblehastaelparpadeo.
Cursiva
Se piensa que la etiqueta <em> permite poner texto en cursiva. Nunca dije eso. Vuelve a los
captulos anteriores, si tienes dudas, pero yo nunca hedichoquelaetiqueta<em> sehizopara
ponertextoencursiva(comoyonuncahedichoque<strong>sehizoparanegrita).
________________________________________________________________________________________
CSS22
<em>, sirve para hacer hincapi en las palabras. Esto significa que rodea a las palabras que
son bastante importantes. Para representar esta importancia, la mayora de los navegadores
optan por mostrar el textoencursiva,peroestonoes obligatorio.CSSpuededecir:"Quieroque
este texto est en cursiva." Nada lo impide, por ejemplo, para decidir que todos tus ttulos irn
encursiva.
Enconcreto,enCSS,paraponerencursiva,seutilizafontstyle,quepuedetomartresvalores:
italic:eltextoencursiva.
oblique: el texto aparece oblicuamente (si las letras son examinadas, el resultado es
ligeramentediferentedelacursiva).
normal: el texto ser normal (por defecto). Esto permite cancelar la cursiva. Por
ejemplo,sideseasquelostextosentre<em>yanoestnencursiva,sedebeescribir:
em
{
fontstyle:normal
}
Porlotanto,enelsiguienteejemplo,usofontstyleponerencursivatodosmisttulos<h2>:
h2
{fontstyle:italic}
Negrita
As que de nuevo, recuerda que <strong> no significa negrita(sufuncinesindicarqueel texto
es importante, porlo general, el navegadorlomostraren negrita).LanegritaenCSSsepuede
aplicaradiversosvalores,algunosprrafosenteros,etc.Tododependedeti.
LapropiedadCSSparaponerennegritaesfontweightytomalossiguientesvalores:
bold:eltextoaparecerennegrita
normal:eltextoserescritonormalmente(pordefecto).
Porejemplo,laformadeescribirlosttulosennegrita:
h1
{
fontweight:bold
}
________________________________________________________________________________________
CSS23
Subrayadoyotrasdecoraciones
La propiedad CSS asociaun nombre apropiadoa:textdecoration.Permite,entreotros,resaltar
eltexto,peronoslo.Diferentesvaloresdequepuedetomar:
underline:subrayado.
llinethrough:cruzado.
overline:lneaencima.
blink:Intermitente.Nofuncionaentodoslosnavegadores.
none:normal(pordefecto).
EstecdigoenCSSpermitirprobarlosefectosdetextdecoration:
h1
{
textdecoration:blink
}
.subrayado
{
textdecoration:underline
}
.cruzado
{
textdecoration:linethrough
}
.linea_superior
{
textdecoration:overline
}
Yporejemplo,conelsiguientecdigoenHTML,
<!DOCTYPEHTML>
<html>
<head>
<title>Ejemplocss</title>
<metaname="Generator"content="Quanta+3.5">
<metaname="Description"content="Ejempodeatributosacaracteres
mediantetextdecoration">
<metaname="Keywords"content="css,ejemplo">
</head>
________________________________________________________________________________________
CSS24
<body>
PruebadeCSS<br/><br/>
<h1>Lapropiedadcsstextdecorationpermite<br/>decorarunpocoel
texto.</h1><br/><br/>
<spanclass="subrayado">subray&aacutendolo</span><br/>
<spanclass="cruzado">cruz&aacutendolo</span><br/>
<spanclass="linea_superior">...oponiendounal&iacuteneapor
encima</span>
</body>
</html>
setendra:
Alineacin
CSSnospermitetodaslasalineaciones:izquierda,centro,derechaojustificada.
Esmuysencillo.Usamoslapropiedadtextalignyseindicalaalineacindeseada:
left,alaizquierda:eltextoestalineadoalaizquierda(pordefecto).
center,eltextosecentrar.
right,eltextoestalineadoaladerecha.
justify, el texto est "justificado". Justificar el texto puede usarse para asegurarse de
que se ocupa todo elancho posible sin dejar espacios en blanco al final de las lneas.
Losartculosdeperidicos,porejemplo,estnhabitualmentejustificados.
Enelsiguienteejemplosemuestranlasdistintasposibilidades:
h1
________________________________________________________________________________________
CSS25
{
textalign:center
}
p
{
textalign:justify
}
.signature
{
textalign:right
}
Yporejemploconelsiguientecdigohtml,
<head>
<linkrel="stylesheet"href="estilo3.css"/>
<title>Ejemplocss</title>
<metaname="Generator"content="Quanta+3.5">
<metaname="Description"content="Ejempodealineacin>
<metaname="Keywords"content="css,ejemplo,alineancin">
</head>
<body>
<h1>LaEducaci&oacutenCient&iacuteficaNoes
Garant&iacuteadeEscepticismo</h1><br/>
<p>Muchosesc&eacutepticosasumenciertamedidadeplacer
eneltipodetareasamenudopuestasdelantedeellos:
evaluaci&oacutendefotograf&iacuteasborrosas,
realizaci&oacutendeexperimentosdelaboratorioquereduceno
eliminanelenga&ntildeo,cr&iacuteticadelacienciaimperfectay
lapseudociencia,ycontrarrestandolasafirmacionesdeevidentes
charlatanes.Porsupuesto,losesc&eacutepticosesperanquesu
esfuerzoayudealavancedelaeducaci&oacuten
cient&iacutefica[1].Apesardeestosesfuerzos,losdatosde
encuestasdediversasfuentessugierenquelacreenciaenlo
paranormalyelpensamientopseudocient&iacuteficosiguen
siendocomunes[2].<br/><br/>
Losesc&aecutepticossuelenutilizarestoshallazgospara
________________________________________________________________________________________
CSS26
reforzarlosargumentosafavordem&aacuteseducaci&oacuten
cient&iacutefica.Suargumentosebasaenlasuposici&oacuten
nocomprobadadequeunmayorconocimientocient&iacutefico
reduceeln&uacutemerodecreenciasparanormalesqueun
individuoposee.Sinembargo,estasuposici&oacutenpuedeno
serv&eacutelida.AndrewEdesostuvorecientementequela
educaci&oacutencient&iacuteficapuedehacerpocoparaelevar
elniveldepensamientoracionaly,dehecho,enrealidadlo
desalienta![3].Recientesdebatessobrelainclusi&oacutendela
&quotcienciadelacreaci&oacuten&quoty/oeliminaci&oacuten
delaevoluci&oacutendelcurr&iacuteculodebiolog&iacuteaen
laense&ntildeanzasecundaria[4],sonunejemplodeello,loque
indicaquemuchoslegisladores,miembrosdelp&uacuteblico,y
algunoseducadoresest&eacutenconfundidosacercade
c&oacutemocriticarycompararteor&iacuteasconelfinde
separarloshechosdelascreencias.Edehaidentificadotres
razonesdeporqueestopuedesercierto[5]:</p>
<pclass=firma>ChileSkeptic</class><br/>
</body>
</html>
Setendra
No se puede cambiar la alineacin del texto de unaetiqueta inline (como <span>,<a>,<em>,

<strong> ...). La alineacin slo funciona en las etiquetas de tipo bloque (<p>, <div>, <h1>,
<h2>, ...) y tiene unpocodelgica,cuandopiensas:nosepuedecambiarlaalineacindeunas
pocaspalabrasenmediodeunprrafo.Porlogeneralestodoelprrafoelquesedebealinear.
Seguidamenteseindicacmolograrelejemplomostradoacontinuacin
________________________________________________________________________________________
CSS27
Supongo que ahora la pregunta que te haces es: "pero cul es lapropiedadmgica quehace
que flote? ". La respuesta es... float ("flotar"enIngls).Estapropiedadpuedetenerdosvalores
simples:
left:elelementoflotaralaizquierda.
right:elelementoflotaraladerecha.
Elusodefloatesmuysencillo:
1.Aplicafloataunaetiqueta.
2.Acontinuacin,sigueescribiendotextodeformanormal.
Puedesutilizarlapropiedadfloatenetiquetasblockeinline.Escomnhacerflotarunaimagen
paraserrodeadaporeltexto,comoenelejemploanterior.
Hacerflotarunaimagen
Aquvamosaaprenderaflotarunaimagen.ElcdigoHTMLquedebemosescribir:
<p><imgsrc="flash.gif"class="imageflottante"alt="Imagenflotante"/>Esteesuntextonormal
deprrafo,escritoacontinuacindeunaimagenyenelqueaparecerlaimagenflotando.</p>
ElcdigoCSSes:
.imagenflotante
{
float:left
}
Detenerunaimagenflotante
________________________________________________________________________________________
CSS28
Cuando se implementa un texto flotante, fluye. Pero si lo que quieres es que despus de un
tiempo, el texto contine por debajo de la flotacin, se podran encadenar varios <br />perono
esnielegantenimuypropio.
Bsicamente,aunolegustaraobtenerelmismoresultadoqueenlasiguienteimagen.
En realidad, hay una propiedad CSS que nos permite decir: alto, este texto debe estar por
debajodelfloatynoallado,eslapropiedadclear,quepuedetomartresvalores:
left:eltextocontinamsabajodespusdeunfloat:left
right:eltextocontinamsabajodespusdeunfloat:right
both:eltextosiguemsadelante,yaseadespusdeunfloat:leftodespusdeun
float:right.
Para simplificar, vamos a utilizar todoel tiempo clear:both,quetrabajadespusdeunfloatala
izquierda justo despus de un float a la derecha. (As funciona todo el tiempo). Para ilustrar
cmofunciona,vamosaverelcdigoHTML:
<p><imgsrc="flash.gif"class="imagenflotante"alt="Imagenflotante"/></p>
<p>Estetextoestescritoaladerechadelaimagenflotante.</p>
<pclass="debajo">Estetextoestescritobajolalmagenflotante.</p>
YencdigoCCS
.imagenflotante
{
float:left
}
.debajo
{
clear:both
}
Yesoestodo.Aplicamosclear:bothalprrafoquequeremosverbajolaimagenflotante.
________________________________________________________________________________________
CSS29
Resumen:
Cambiamos el tamao del texto con la propiedad CSS fontsize. Se puede especificar el
tamaoenpxeles(16px)en'em',(1.3em),porciento(110%),etc.
Cambiamoseltipodeletraconfontfamily.Atencin,sloalgunasfuentessonconocidaspor
todoslosequipos.Sinembargo,sepuedeutilizarunafuentepersonalizadacon@fontface:
estoharqueelnavegadordescarguelafuentedetueleccin.
Existen muchas propiedades de formateo de texto: fontstyle para cursiva, fontweight para
negrita,textdecorationparasubrayado,etc.
Eltextosepuedealinearcontextalign.
Puedeshacerqueunaimagensevista("rodee")detextoconfloat.
________________________________________________________________________________________
CSS30
Coloryfondo
Continuamos connuestravisin general de laspropiedadesCSS.Noscentraremosaquenlas
propiedadesrelacionadasdirectamentecon:
cmocambiarelcolordeltexto
cmoponeruncoloroimagendefondo
cmoaadirsombras
cmojugarconlosnivelesdetransparencia.
Colordeltexto
Ahora, pasamos al amplio tema del color. Ya conoces la propiedadquete permite cambiar el
colordeltexto:escolor.Veremosdistintasmanerasdeespecificarelcolor,yaquehayvarias.
Indicarelnombredelcolor
Laformamssencillaycmodadeelegiruncolor,bastaconescribirsunombre(enIngls,por
supuesto).
El nico inconveniente de este mtodo es que slo hay diecisis colores llamados "estndar".
Otros colores son informales pero,nonecesariamentefuncionandelamismamaneraentodos
losnavegadores,voyaevitarmostrarlos.
La siguiente figura muestra los diecisis colores que se pueden utilizar simplemente
escribiendosunombre.
________________________________________________________________________________________
CSS31
Puedes aprenderlos de memoria, si quieres. Para poner todos los ttulos en rojo, podemos
escribir:
EnCSS:
h1
{
color:red
}
Notacinhexadecimal
Diecisis colores, es todavaun poco limitado si se considera que la mayora de losmonitores
actualespuedenmostrardiecisismillones.
Por otro lado, fjate, si tuviramos que dar un nombre a cada uno de losdiecisis millones de
colores. Afortunadamente, hay varias maneras de elegir un color CSS de todos los existentes.
La primera vez que se vaa mostrar esla notacin hexadecimal. Se utiliza comnmente en la
________________________________________________________________________________________
CSS32
webperotambinhayotromtodoqueveremosmsadelante.
Un nombre de color en hexadecimal, es as: #FF5A28. En pocas palabras, se trata de una
combinacin de letrasy nmeros indicando un color. Siempre hayqueempezarporescribirun
sostenido (#) seguido de seis letras o dgitos del 0 al 9 y de A a F. Estas letras o nmeros
operan en parejas. Los dos primeros dgitos indican la cantidad de rojo, los dos siguientes la
cantidad de verde ylosdosltimoslacantidaddeazul.Mediantelamezcladeestascantidades
(quesoncomponentesrojo,verdeyazul)sepuedeobtenerelcolordeseado.
As, #000000 es el color negro #FFFFFF el blanco. Pero ahora, no me preguntes por qu hay
unacombinacinqueproduceelcolornaranja"puestadesol".
Porejemplo,cmoseaplicarcolorblancoalosprrafosenhexadecimal?:
p
{
color:#FFFFFF
}
MtodoRGB
Qu significaRGB?Eningls,RedGreenBlueestoesRojoVerdeAzul,queseabreviacomo
"RGB". Al igual que conla notacin hexadecimal, si eliges un color, debesdefinir una cantidad
derojo,verdeyazul.
Se ver que es mucho ms cmodo y con un sencillo programa de dibujo,encontrar el color
quedesees,einclusohayutilidadesenlnea,muypotentesparagestindelcolor.
IntroducelosvaloresenesteordenenelarchivoCSS,comoenelsiguientecdigo:
p
{
color:rgb(240,96,204)
}
Colordefondo
Para especificar un color de fondo, utiliza el cdigo CSS backgroundcolor. Se emplea de la
misma manera que la propiedad color, es decir, puedes escribir el nombre de un color, en
notacinhexadecimaloutilizarelmtodoRGB.
Para especificar el color de fondo de la pgina web, es necesario trabajar en <body>, que
corresponde a toda la pgina web, as que esto escambiando elcolor de fondo se cambia el
________________________________________________________________________________________
CSS33
colordefondodelapgina.
CdigoenCSS:
/*Operasobrelaetiqueta<body>,sobretodalapgina*/
body
{
backgroundcolor:black/*elfondodelapginasernegro*/
color:white/*eltextodelapginaserblanco*/
}
CSSyherencia
En CSS, si aplicas un estilo a una etiqueta, todas las etiquetas que estn en el interior deben
adoptarelmismoestilo.
De hecho, es fcil de entender e intuitiva. La etiqueta <body> contieneentreotraslas etiquetas
deprrafo<p>y<h1>.
Si aplico un color de fondo negro y color de texto blancoenlaetiqueta<body> todosmis ttulos
y prrafos tambin tendrn un fondo negro y texto en blanco. Este fenmeno se denomina
herencia se dice de las etiquetas que se encuentran dentro de otra etiqueta "heredan" sus
propiedades.
Aqu tambinesdondeobtenemoselnombre de"CSS",quesignifica"CascadingStyleSheets",
es decir "Hojas de estilo en cascada ". Las propiedades CSS se heredanencascada:sisele
daunestiloaunelemento,todoslossubelementostienenelmismoestilo.
Esto significa que todoel texto de mi pgina websernecesariamenteescritoenblanco?No,
no necesariamente. Si dices ms adelante que quieres que los ttulos aparezcan en rojo, este
estilo y sus acciones tendrn prioridad, por lo tanto estar en rojo. Sin embargo, si no se
especifica nada en particular (como se hizo anteriormente), entonces sus accionesheredanel
colorblanco.
Esto funciona no slo para el color, que quede claro. Todas laspropiedades CSS se heredan.
Por ejemplo, puedes poner negrita en la etiqueta <body> y todos los ttulos y los prrafos
estarnennegrita.
EjemplodeHerenciaconlaetiqueta<mark>
Tendemos a creer que slo podemos cambiar el color de fondo de la pgina. No es cierto: se
puede cambiar el fondo de cualquier elemento: ttulos, prrafos, algunas palabras ... En este
caso,aparecerresaltado(comosiusramosunmarcadorporencima).
________________________________________________________________________________________
CSS34
Recuerdasqueporejemplo,laetiqueta<mark>puederesaltaralgunaspalabras?Utilzalade
nuevoaqu:
CdigoenHTML:
<h1>Quinapaglasluces?</h1>
<p>Todoesnegroenestesitio,queesunpoco
<mark>inquietante</mark>comolaatmsferanoteparece?</p>
CdigoenCCS:
body
{
backgroundcolor:black
color:white
}
mark
{
/*Elcolordefondotieneprioridadsobreeldetodalapgina*/
backgroundcolor:red
}
Eneltexto delaetiqueta<mark> seaplicaelcolordefondorojo.Inclusosielfondodelapgina

es negro, es la propiedaddelCSSdelelementoms precisoelquetieneprioridad,porloquela
palabraalaqueseaplicamarkapareceraconfondorojo.
El mismo principio se aplica a todas las etiquetas HTML y propiedades CSS. Si dices: mis
prrafos tienen untamaode1.2emmisdocumentosimportantes(<strong>)tienenuntamao
de1.4emunopodrapensarquehayunconflicto.
Si el texto importante es parte de un prrafo, qu tamao le da? 1.2em o 1.4em? CSS
determina que esla declaracin ms precisaprevalece:como <strong>esmsespecficoque
prrafos,eltextoserescritoen1.4em.
Imgenesdefondo
En los ejemplosquesiguen,voyacambiarlaimagende fondodelapgina.Sinembargo,como
con el color de fondo, recordarque la imagen de fondo no se aplica necesariamente a toda la
pgina.Tambinpuedesponerunaimagendefondodetrsdettulos,prrafos,etc.
________________________________________________________________________________________
CSS35
Aplicarunaimagendefondo
La propiedad para especificar una imagen de fondo es backgroundimage. Como valor,
debemosindicarurl("nombre_de_la_imagen.png").Porejemplo:
body
{
backgroundimage:url("nubes.png")
}
Opcionesdisponiblesparalaimagendefondo
Podemos completar la imagen de fondo, hemos visto otras varias otras propiedades que
permitencambiarelcomportamientodelaimagendefondo.
backgroundattachment:fijaelfondo
El cdigo CSS backgroundattachment permite fijar el fondo. El efecto es interesante
porquevemosacontinuacin,eltexto"deslizarse"sobre elfondo.Dosparmetrosestn
disponibles:
fixed:laimagendefondosemantienefija
scroll:laimagendefondodesfilaconeltexto(pordefecto).
CdigoCSS
body
{
backgroundimage:url("nube.png")
backgroundattachment:fixed/*Elfondoquedarfijo*/
}
backgroundrepeat:repeticindelfondo
Deformapredeterminada,laimagendefondoserepiteenelmosaico.Puedescambiar
estoconelbackgroundrepeat:
norepeat:elfondonoserepite.Laimagensernicaenlapgina.
repeatx:elfondoserepetirsloenlaprimeralnea,horizontalmente.
repeaty:elfondoserepetirsloenlaprimeracolumna,enposicinvertical.
repeat:elfondoserepetirenmosaico(pordefecto).
________________________________________________________________________________________
CSS36
Ejemplodeuso:
Cdigo:CSS
body
{
backgroundimage:url("nubes.png")
backgroundrepeat:norepeat
}
backgroundposition:posicindefondo
Se puede indicar dnde se encuentra laimagendefondoconbackgroundposition.Esta
propiedad es interesante slo si se combina con backgroundrepeat: norepeat (un
fondoquenoserepite).
Debes dar a backgroundposition dos valores de los pxeles para indicar la posicin
relativa a la esquina inferior y parte superior izquierda delapgina(oenelprrafo,sise
aplicaelfondodeunprrafo).Asquesiescribes:
Cdigo:CSS
backgroundposition:30px50px
tu fondo se colocar 30 pxeles desde la izquierda y 50 pxelesdesdelapartesuperior.
TambinesposibleutilizarestosvaloresenIngls:
top:partesuperior
bottom:parteinferior
left:izquierda
center:centro
right:derecha.
Es posible combinar estas palabras. Por ejemplo, para alinear una imagenen la parte
superiorderecha,tendrasqueescribir:
Cdigo:CSS
backgroundposition:topright
As que si voy a poner un sol en el fondo (figura siguiente), en una sola muestra
(norepeat), siempre visible (fixed) y se coloca en la parte superior derecha (topright),
________________________________________________________________________________________
CSS37
voyaescribiresto:
Cdigo:CSS
body
{
backgroundimage:url("sol.png")
backgroundattachment:fixed/*Elfondoquedarfijo*/
backgroundrepeat:norepeat/*Elfondonoserepetir*/
backgroundposition:topright/*Elfondosecolocarencimaala
derecha*/
}
Apareciendoelsoldelasiguienteforma:
Combinarpropiedades
Si utilizas una gran cantidad de propiedades relacionadas con el fondo (como es el caso de
este ltimo ejemplo), puedes utilizar una especie de "superpropiedad" de fondo, cuyo valor
puede combinar varias propiedadesvistaspreviamente:backgroundimage,backgroundrepeat,
backgroundattachmentybackgroundposition.
Portanto,podemosescribirsimplemente:
CdigoCSS
body
{
background:url("nubes.png")fixednorepeattopright
}
Estaeslaprimera"superpropiedad"talcomoindiqu,habrotras.Debessaberque:
________________________________________________________________________________________
CSS38
Elordendelosvaloresnoimporta.
Sepuedencombinarlosvaloresencualquierorden.
Nosonobligatorios.
Asquesinodeseasescribirfixed,sepuedequitarsinningnproblema.
Variasimgenesdefondo
Desde CSS3, es posible dar varias imgenes de fondo a un elemento. Para hacer esto,
simplementeusadeclaracionesseparadasporunacoma,as:
body
{
background:url("sol.png")fixednorepeattopright,
url(nubes.png")fixed
}
La primera imagen de esta lista se coloca encima de la otra. As que ten cuidado, el orden de
declaracin. La imagen es importante: si se invierte el sol y la nieve en el cdigo CSS
anteriormente,noverselsol.
Ten en cuenta que varias imgenes de fondo funcionan entodos los navegadores excepto en
las versiones anteriores de Internet Explorer, que no reconoce esta caracterstica hasta la
versin9(IE9).
Transparencias
CSS permite jugar fcilmente con los niveles de transparencia de los elementos. Para ello
utilizamoscaractersticasCSS3:lapropiedaddeopacityynotacinRGBA.
Propiedaddeopacidad
La propiedad opacity, es muy simple para especificar el nivel deopacidad (es decir, la inversa
delatransparencia).
________________________________________________________________________________________
CSS39
Con un valor de 1, el elemento estar completamente opaco: este es el comportamiento por

defecto. Con un valor 0,el elemento ser completamente transparente. As que selecciona un
valorentre0y1.As,conunvalorde0.6,serel60%opaco.
Cmopodemosutilizarla?
p
{
opacity:0.6
}
Unejemploquenospermitirapreciarlatransparencia.
body
{
background:url('nubes.png')
}
p
{
backgroundcolor:black
color:white
opacity:0.3
}
NotacinRGBA
CSS3 ofrece otra manerade jugar con la transparencia: lanotacinRGBA.Estoesenrealidad
la notacinRGBquehemosvistoantes,peroconun cuartoparmetro:elniveldetransparencia
(llamado "alfa"). Como anteriormente,conunvalorde1,el fondoescompletamenteopaco.Con
unvalormenorque1,estransparente.
Cdigo:CSS
p
{
backgroundcolor:rgba(255,0,0,0.5)/*Fondorojomediotransparente*/
}
Es tan simple como eso. Puedes conseguir el mismo efecto que con opacity jugando con la
notacinopacidadRGBA.
Esta notacin esconocidapor todos los navegadores, incluido Internet Explorer (IE9). Paralos
________________________________________________________________________________________
CSS40
navegadores antiguosserecomiendalanotacinmsclsicaRGB.Paraestosnavegadores,el
fondonosertransparenteperonolomenoshayuncolordefondo.
Resumen
Cambiamoselcolordeltextoconlapropiedadcolor,elcolordefondoconbackgroundcolor.
Se puede especificar un color escribiendo su nombre en Ingls (black, por ejemplo), como
hexadecimal(#FFC8D3)onotacinRGB(rgb(250,25,118)).
Puedes agregarunaimagen de fondo con backgroundimage.Puedes optar por configurar la
imagen de fondo,en la pantalla en mosaico o no,einclusoposicionarlaencualquierlugardela
pgina.
Puedes hacer una partede la pginatransparenteconlapropiedaddeopacidadola notacin
RGBA(igualnotacinRGB,conunvalorqueindicaelcuartoniveldetransparencia).
________________________________________________________________________________________
CSS41
Bordesysombreados
Nuevo captulo, nuevo lote de propiedades CSS. Aqu vamos a ver los bordes y efectos de
sombra que se pueden aplicar tanto en el texto como en los bloques que componen nuestra
pgina.
Vamos a volver a utilizar, enparticular, nuestro conocimiento de los colores paraelegirelcolor
denuestrosbordesysombreados.
Bordesestndar
CSS ofrece una amplia seleccin de bordes para decorar tu pgina. Muchas propiedades de
CSSpermitencambiarlaaparienciadelosbordes:borderwidth,bordercolor,borderstyle...
Para llegar al punto, propongo aqu utilizar directamente la propiedad border que incluye todas
estas propiedades. Recuerdas la propiedad background? Esto funciona con el mismo
principio:vamosasercapacesdecombinarvariosvalores.
Para border se pueden utilizar un mximo de tres valores para cambiar la apariencia de los
bordes:
ancho:introducelaanchuradelborde.Ponerunvalorenpxeles(porejemplo2px).
color:elcolordelborde.Eluso,escomohemosaprendido,unnombredecolor(negro,
rojo,...)oenhexadecimal(#FF0000)ounvalorRGB(rgb(198,212,37)).
tipodeborde:aqutieneslaopcindelbordequepuedeserunalneaopuntos,o
guiones,etc.Aqulosdiferentesvaloresdisponibles:
none:sinbordes(pordefecto)
solid:unasolalnea
dotted:puntos
dashed:trazos
double:doblecontorno
groove:enrelieve
ridge:otroefectoenrelieve
inset:efecto3Dglobaldeprimido
outset:efecto3Dglobalresaltado.
Porlotanto,paratenerunbordeazul,tipoguiones,detrespxelesalrededordemisttulos,
escribo:
________________________________________________________________________________________
CSS42
h1
{
border:3pxbluedashed
}
Arriba,derecha,izquierda,abajo...
Quin dice que tienes que aplicar el mismo margen en los cuatro lados de un elemento? Si
quieres poner bordes diferentes segn el lado (arriba, abajo,izquierda o derecha), puedes, no
hayproblema.Enestecaso,debesutilizarestascuatropropiedades:
bordertop:bordesuperior
borderbottom:bordeinferior
borderleft:bordeizquierda
borderright:bordederecho.
Tambin hay equivalentes para configurar cada detalle del borde, caso de ser necesario:
bordertopwidth para cambiar el grosor del borde superior, bordertopcolor para el color
superior,etc.
Tambin son superpropiedades, pero que funcionan como border, pero se aplican slo a un
lado.Paraaadirunbordesolamentealasseccionesizquierdayderecha,escribir:
p
{
borderleft:2pxsolidblack
borderright:2pxsolidblack
________________________________________________________________________________________
CSS43
}
Puedes cambiar los bordes de cualquier tipo de elemento de la pgina. Lo hemos hecho aqu
con los prrafos pero tambin sepueden cambiar bordes deimgenes,textosdestacados con
<strong>,etc.
Bordesredondeados
Los bordes redondeados, que es una propiedad esperada por los desarrolladores de pginas
webdesdehacemuchotiempo,conCSS3hanllegado,ahoraesposiblecrearlosfcilmente.
La propiedad borderradius nos permitir completar fcilmente las esquinas de cualquier
elemento.Bastaindicareltamao("importancia")delredondeoenpxeles:
p
{
borderradius:10px
}
Elredondeosevercomosemuestraseguidamente
Sepuedeprecisarlaformadelredondeoencadaesquina.Enestecasoseindicanloscuatro
valores:
p
{
borderradius:10px5px10px5px
}
Losvalorescorrespondenalosngulosenesteorden:
1.partesuperiorizquierda
2.partesuperiorderecha
3.parteinferiorderecha
________________________________________________________________________________________
CSS44
4.parteinferiorizquierda.
Por ltimo, es posible refinar nuestras esquinas redondeadas para crear curvas elpticas. En
este caso, se han de especificar dosvaloresseparadosporunabarra(/). Probarloessinduda
lamejormaneradeverelefecto:
p
{
borderradius:20px/10px
}
Los bordesredondeadostrabajancontodoslosnavegadores,incluidoInternet Explorerdesdela
versin 9 (IE9). Para versiones anteriores de Mozilla Firefox, Chrome y Safari, era necesarioel
uso de prefijos, es decir, tenas que escribir el cdigo CSS en diferentes versiones para la
propiedad (mozborderradius para Firefox,webkitborderradius para Safari, etc). Esto,
afortunadamente,yanoesnecesariohoyenda,amenosquedeseesadministrarlasversiones
anterioresdeestosnavegadores.
Sombras
Las sombras son parte de las ltimas innovaciones que ofrece CSS3. Hoy en da, apenasuna
solalneadeCSSbastaparaagregarsombrasenunapgina.
Aquvamosadescribrirdostiposdesombras:
sombrasdecajas
sombrasdetexto.
boxshadow:sombrasdecajas
Lapropiedadboxshadowseaplicaatodoelbloqueytomacuatrovaloresenelordensiguiente:
1.desplazamientohorizontaldelasombra
2desplazamientoverticaldelasombra
3.difuminadodelgradiente
4.colordelsombreado.
Porejemplo,paraunsombreadonegrodeseispxeles,sinsuavizar,escribimos:
p
{
boxshadow:6px6px0pxblack
}
________________________________________________________________________________________
CSS45
Aadir difuminado a travs de un tercer parmetro. El difuminado puede ser bajo (menos
desplazamiento), normal (igual al cambio) o elevado (por encima de desplazamiento). Prueba
conundesplazamientonormal:
p
{
boxshadow:6px6px6pxblack
}
Tambin puedes agregar un cuarto valor opcional en el recuadro. En este caso, la sombra se
colocadentrodelacaja,paradarunefectoenfatizado.
p
{
boxshadow:6px6px6pxblackinset
}
textshadow:sombratexto
Con textshadow, puedes aadir directamente una sombra en las letras del texto. Los valores
de la funcin son exactamente de la misma forma boxshadow: desplazamiento, difuminado y
color.
p
{
textshadow:2px2px4pxblack
}
Elresultadosemuestraacontinuacin:
Resumen
Se puede aplicar un borde a un elemento con la propiedadborder.Debesindicarelanchodel
borde,sucolorytipo(lneaslida,lneadepuntos...).
________________________________________________________________________________________
CSS46
Puedesredondearlosbordesconborderradius.
Puedes agregar una sombra a bloques de texto con boxshadow. Se debe indicar el
desplazamientohorizontalyverticalsombra,niveldereblandecimientoycolor.
Eltextotambinpuedetenerunasombracontextshadow.
________________________________________________________________________________________
CSS47
Creacindeaparienciasdinmicas
Este es uno de sus puntos fuertes: CSS tambin permite modificar la apariencia de los
elementos de forma dinmica, es decir que los elementos pueden cambiarde forma, una vez
cargadalapgina.VamosautilizarunapotentefuncindeCSS,pseudoformatos.
Vemosenestecaptulocmocambiarlaapariencia:
alvuelo
cuandosehaceclic
enelfoco(puntoseleccionado)
cuandoseaccedeaunenlace.
VersqueCSSnoparadesorprendernos.
Alvuelo
Vamos a descubrir en este captulo varios pseudoformatos. El primero que voya mostrar se
llama: hover. Al igual que todos los otros pseudoformatos queveremos,estaeslainformacin
queseaadedespusdelnombredelaetiqueta(olaclase)enelCSS,as:
a:hover
{
}
:hover significa "sobrevolar". a:hover se puede traducir como: "cuando el ratn est sobre el
enlace".
A partir de ah, te toca definirel aspecto que debe tener al hacerclic en los enlaces.Darienda
sueltaatuimaginacin,nohaylmite.
Aqu se indica el cdigo de un ejemplo de representacin de los enlaces, pero no dudes en
inventarlostuyospropios
a/*Enlacespordefecto(noalvuelo)*/
{
textdecoration:none
color:red
fontstyle:italic
}
________________________________________________________________________________________
CSS48
a:hover/*Aspectoalsobrevuelodelosenlaces*/
{
textdecoration:underline
color:green
}
Sehandefinidodosversionesdelosestilosparalosenlaces:
paralosenlacespordefecto(noalvuelo)
paralosenlacesalvuelo.
Si bien a menudo se utilizaenlosenlaces,sepuedecambiarelaspectodecualquierelemento.
Porejemplo,puedescambiarlaaparienciadelosprrafosalhacerclicen:
p:hover/*Cuandoseapuntasobreunprrafo*/
{
}
Parahacerclic,enlaseleccin
Puedes interactuar an ms finamente en el CSS. Vamos a ver que podemos hacer para
cambiarlaaparienciadelascaractersticascuandosehaceclicycuandoseseleccionan
:active:enelmomentodelclic
El pseudoformato :active permite aplicar un estilo en particular cuando se hace clic. En la
prctica,sloseutilizaenlosenlaces.
El enlace mantendr esteaspecto un corto perodo de tiempo.dehecho,elcambiose produce
cuando se pulsa el botn del ratn. Claramente, esto no es necesariamente siempre visible.
Porejemplo,puedescambiarelcolordefondodelenlacealhacerclic:
a:active/*Cuandoelusuariopulsaelenlace*/
{
backgroundcolor:#FFCC66
}
:focus:cuandoelelementoestseleccionado
Aqu es un poco diferente. El pseudoformato :focus se aplica cuando el elemento est
seleccionado.
Una vez que haces clicen el enlace, es "seleccionado" (hay un pequeo borde de trazos a su
________________________________________________________________________________________
CSS49
alrededor).Esdecir,laseleccin.
Este pseudoformato puede ser aplicado a otras etiquetas HTML que no hemos visto todava,
comolosformularios.
a:focus/*Cuandoelvisitanteseleccionaelenlace*/
{
backgroundcolor:#FFCC66
}
Cuandoelenlaceyahasidoconsultado
Es posible aplicar un estilo a un enlace a una pgina que ya se ha visto. De forma
predeterminada, los colores de tu navegador muestran el enlace en un color prpura msbien
feo(desdemiperspectivaporlomenos).
Puedes cambiar esta apariencia con: visited (que significa "visitado"). En la prctica, en los
enlacesconsultados,nosepuedecambiarmuchomsqueelcolor.
a:visited/*Cuandoelvisitanteyahavistolapgina*/
{
color:#AAA/*Aplicaruncolorgris*/
}
Sinoquieresquelosenlacesyavisitadosseandecolordiferente,tendrsqueaplicarelmismo
color que los enlaces normales.Muchossitioswebhacenesto.Unaexcepcinnotable:Google.
Esto es muy til, ya que podemos verenlosresultadosdebsquedasisehanconsultadoono
lossitiosquepresenta.
Resumen
En CSS, puedescambiarlaaparienciadeciertasseccionesdeformadinmicadespusdela
carga de la pgina, cuando se producen determinados eventos. Esto se hace usando los
pseudoformatos.
El pseudoformato:hoverpuedecambiarelaspectoalpasarelratn(porejemplo:a:hoverpara
cambiarlaaparienciaquesevinculacuandoelratnpasaporencima).
El pseudoformato :active modificala apariencia de los enlaces cuando se hace clic, :visited
cuandounenlacehasidovisitado.
Elpseudoformato:focuspermitecambiarlaaparienciadeunelementoseleccionado.
________________________________________________________________________________________

Lenguaje de Programacion HTML 2

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Lenguaje de Programacion HTML 2

Enviado por

Direitos autorais:

Formatos disponíveis

CSS1

El primer mtodo que se recomiendaparecesermscomplicadoquelosotrosdos.Porqu?

En este fragmento de etiquetas se ven, los atributos y valoresqueacabodemencionar.Como

SI lo deseas, lostamaos se pueden definir en cm o mm(SistemaInternacionaldeUnidades),

llamado sansserif. La diferencia entre los dos es la presencia de pequeas lengetas de

Afortunadamente, hay sitios como dafont.com y fontsquirrel.com que ofrecen la posibilidad de

Te dars cuenta de algunas peculiaridades en el CSS generadopor el tipo de letra Squirrel. El

No se puede cambiar la alineacin del texto de unaetiqueta inline (como <span>,<a>,<em>,

Eneltexto delaetiqueta<mark> seaplicaelcolordefondorojo.Inclusosielfondodelapgina

Con un valor de 1, el elemento estar completamente opaco: este es el comportamiento por

Você também pode gostar