TutorialCSS PDF

MANUALBSICOCSS
Presentacin
BienvenidoaestetutorialdeCSS,ellenguajedehojasdeestilousadoenpginasweb.Estetutorial
pretendehacerunaintroduccinaestelenguaje,mtodosparasepararestilodecontenido,etc.
Setratadeintroducirlosconceptos,propiedadesyestilosbsicosdeestelenguajeparaquedespus
cadaunohagasuspropiosdiseos.
NormalmentelamayorademanualesdecreacinydiseodepginaswebquehayenInternet,
explicansistemasymtodosdeHTMLparadarformatotalescomolasetiquetas<font>,diseo
contablas,etc.
ConlallegadadelCSSnosloestos"antiguos"mtodosestn"desfasados",sinoquesonbastante
mscomplicadosdeutilizarymuchomenosaccesibles(comoparanavegadoresenmodotexto,
reproductoresorales,robots...).
LoidealseraqueenloslenguajesdeestructuracincomoHTMLnoincluysemosnadaacercadel
estilodeloselementos,sinodesuestructura.
Esdecir,eneldocumentoHTMLenlugardedecir"estoloquieroatamao24yencursiva,estoen
rojo"lomejoresestructurareldocumento:"estoesunencabezado,estounalistaordenada,estoun
prrafo"sininclurningnelementodediseoypresentacin.
Despues,creamosundocumentoCSSenelques"diseamos"cadapartedeldocumento,
incluyendocolores,posicin,bordesydemsadornos.
Lasventajassonevidentes:unnavegadorosistemaenmodotextooquenosoporteCSS,se
quedarconeldocumentoHTMLconelcontenidoestructurado.
PerolosquesoportenCSSpodrnvereldocumentocontodosusestilos,adornos,etc.
Tambinhaymsventajas,comoelhechodepoderinclurlamismahojadeestilosenvarias
pginasHTML,loqueesmuycmodoytil.
Deestamanerapodremospo rejemploc ambiarlafuentedelosprrafosdedieciochopginas
consloeditarunarchivo;cosaqueseramuchomscomplejasihubisemosusadolasviejas
etiquetascomo<font>.
EstemanualasumequesetienenconocimientosbsicosencuantoaHTML,estructuracinde
contenidos,prrafos,etc.
DetodasformastambinveremosalgunosenlacesinteresantessobremanualesdeHTML,yms.
AntesdeEmpezar
AntesdeempezarconCSSdeberastenerporlomenosunosconocimientosbsicosdeHTML.
DeentrelasversionesvariasdeHTMLyoterecomiendoelXHTMLyaqueesel"futuro"del
HTMLyelmsclaro.
Miralossiguientesenlaces,altamenterecomendados.
TutorialdeXHTML,porBenKo
HTMLcorrecto:cmohacerbuenaspginasweb,porDanielClemente
DocumentosEstructurados
ParapoderaplicarcmodamenteunestiloCSSaundocumentoHTML,stec omohemosvisto
antesd ebeestarbienestructurado;esdecir,cabeceras,prrafosydems.
ComoenestemanualsepartedelabasedequeyasetienenconocimientosdeHTML,sloveremos
unejemplo:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Mi documento</title>
</head>
<body>
<h1>Encabezado del documento</h1>
<h2>Segundo encabezado</h2>
<div id="contenido">
<p>Esto es un prrafo</p>
<p>Esto otro prrafo</p>
</div>
<div id="final">
<p>Final del documento</p>
</div>
</body>
</html>
Comosepuedeverenlapartedecolorverde,hemosseparadoencabezados,prrafosymarcadolas
secciones"contenido"y"final".
stonosservirparadiferenciarlasalahoradeaplicarleunCSS.
Siquierespuedesvercmoquedara.Comovs,elnavegadorleaplicaralaestructuraunaseriede
estilos"predeterminados"queporsupuestopodremosanularomodificarconCSS.
ElestndarCSSynavegadores
CSSesunestndarrecomendacinlibredel
W3C
;conunasespecificacionesquelosnavegadores
quesoportenCSSdeberandeimplementar.
SinembargoalgnnavegadorcomoMicrosoftInternetExplorersesalta"alatorera"algunasde
estasespecificacionesyaveceshaceloque"ledlagana"envezdeloquedeberahacersegnel
estndar.
EsporestoporloquenoesnadarecomendabledisearCSSbasndoseenelresultadoquese
obtieneenestenavegador,yaquesitefasdelprobablementeestsenrealidadcreandounos
verdaderoschurros.
PorsupuestosesposiblehacerCSSsqueseveanbientantoenelIEcomoenlosnavegadoresque
respetanlosestndares,peroaveceshayquerecurrira"trucos"ocosasrarasonoestndares.
Aparte,elIEesunnavegadorobsoleto.PorejemplonosoportaXHTMLporloqueporejemplono
podrsleerestetutorialdesdeelIE.
Cualquiernavegadordecente(Mozilla,Safari,Opera,etc.)teservirperfectamente,aunqueyote
recomiendoMozillaFirefoxporsermultiplataforma,ligeroysoportamuybienelCSS.
QuNOesCSS
Siloquepretendesescambiarelcolordelabarradedesplazamientoyotrasidioteces,quesepas
quenosonparanadaestndarniCSS,apartedemolestarydedarmalaimgenalapgina.
Despusdeestoscaptulosdeteorayapodemosempezarconla"prctica":)
Empecemos
Bien,vamosaverlasintaxisbsicadeCSSyqupodemoshacerconl.
Antesdenada,decirqueunarchivoCSSesindependientedelarchivoHTML,ysueletener
extensin.css.
ParainclurunarchivoCSSaunapginaHTMLoXHTMLseincluyeuncdigocomoesteen
<head>:
<link rel="stylesheet" title="Nombre del CSS" type="text/css"
href="estilo.css">
SiestsusandoXHTMLrecuerdacerrarlaetiqueta<link>
Bien,ahoraveremoscmohacerlosarchivos.css:
RedefinirunaetiquetaHTML
SiloquequeremosesdarformatooredefinirunaetiquetaHTML,staeslasintaxis:
etiqueta {
<estilos CSS>
}
Comoves,loscontenidosseagrupanentrellavesocorchetes:)En"etiqueta"pondramosel
nombredelaetiqueta(porejemplo"p","div"...)perosinlossignos<>.
Tambinpodemosredefinirvariasetiquetasalavez,separndolasporcomas:
etiquetauno,etiquetados,etiquetatres {
<estilos CSS>
}
Redefinirunaetiqueta"hija"deotraetiqueta
Estonossirveparadefiniretiquetasqueson"hijas"(esdecir,quedependendeyestndentrode
otrasetiquetascomoelcasode"li"quepuedeestardentrode"ol"y"ul").
padre>hija {
<estilos CSS>
}
Claro;enestecasoseaplicaranlosestilosalasetiquetas"hija"slosison"hijas"de"padre".
Redefiniretiquetas"dentro"deotrasetiquetas
Estecasomuyparecidoalanterior,serviraparaaplicarestilosCSSa"etiqueta"slosiestdentro
de"contenedor".(comoporejemplounspandentrodeunp,etc.).
contenedor etiqueta {
<estilos CSS>
}
IdentificadoresyClases
EnelapartadoanteriorveamoscomoredefiniretiquetasHTML,peroavecestenemosvarias
etiquetasdelmismotipoperoqueremosaplicardiferentesestilossegndondeestn.
Paraestousamoslosidentificadoresylasclases.
LaprincipaldiferenciaentreellosesquelosIDstienenquesernicosentodoeldocumentoHTML
mientrasquelasclasespuedenrepetirseenvariasetiquetas.
LosIDssesuelenusarmuchoconetiquetas"neutras"comodivyspanparamarcarlasdiferentes
partesdeldocumentoydespusaplicardiferentesestilosacadauna.
InclurIDsyclasesenundocumentoHTML
Sehaceconlosparmetrosidyclassrespectivamentequesepuedenaplicaracualquier
etiqueta:
<div id="capitulodos">
<p>Prrafo uno</p>
<p class="parrafoverde">Prrafo dos</p>
</div>
Enesteejemplo"capitulodos"seraunaseccinnicamarcadaeneldocumentoenlacualpodemos
aplicarunestiloconcreto;yelestilodelaclase"parrafoverde"seaplicaraaesaetiqueta"p"eneste
casoperopodramosaplicarloamsetiquetassiqueremos.
AplicarestilosaestosIDsyclases
ParaaplicarestilosCSSaidentificadoresestaeslasintaxisCSS:
#identificador {
<estilos CSS>
}
Comovemos,elnombredelidentificadorseprecederaporunaalmohadilla(#)ylosestilosCSSse
aplicaranalaseccindeldocumentoconeseidentificador.
Porsupuestopodemoscombinarestoconloquehemosvistoenelcaptuloanterior:).Por
ejemplo,paraaplicarunestiloenconcretoalasetiquetas"etiqueta"dentrodelID"identificador":
#identificador etiqueta {
<estilos CSS>
}
Paraaplicarestilosaclasesesparecidoperoconunpunto(.)envezdealmohadilla.Porejemplo:
.clase {
<estilos CSS>
}
Conesoaplicaramoslosestilosalasetiquetasconclase"clase".
Tambinpodemoshacercomoantes,combinarloquehemosvistoenelcaptuloanterior.
Yademstambinpodemosaplicarlosestilosdelaclasesloaunadeterminadaetiqueta:
etiqueta.clase {
<estilos CSS>
}
Enestecasosloseaplicaraelestiloalasetiquetas"etiqueta"conclase"clase".Noaotras
etiquetasaunquetenganlamismaclase.
EmpezandoconEstilos
Hastaahorahemosvistocmoredefinireinclurestilos,peronoshemoslimitadoaponer
<estilos CSS>dondedeberanirlasdefinicionesdelosestilos.
Ahoraveremosquestilospodemosdefinir,empezandoporlosbsicos:)
Antesdenada,decirquelasintaxisparaestosatrbutoses:
atributo: valor;
Losatributossiempreseseparanporpuntoycoma,ydespuesdelnombreseponedospuntos(no
igual,esunerrortpicoalconfundirseconelHTML).
Texto:fuente,familia,color,decoracin,estilo...
Bien,empecemosporlafuente.
Laformabsicadedeclararuntipodeletraes:
font-family: <fuente>;
Bien,ahoraveremosqupodemosponeren<fuente>.Antesdenadadebessaberquelasfuentes
sedividenprincipalmenteentresclases:serif(lasfuentes"conserifa"alestiloTimes,
Georgia...);sans-serif(lasfuentes"sinserifa"alestiloArial,Helvetica,Geneva...);ymono
quesonlasdeanchurafijacomoCourieroMonaco(idealesparacdigofuenteporejemplo).
Alahoradedefinirunaomsfuentesconlasquequeremosqueseveauntexto,siempredebemos
darcomoltimaalternativaunodelostresgruposgenricos;paraqueencasodequeelvisitanteno
tengainstaladalafuente(ofuentes)especficasquenosgustara,sunavegadorescojacomo
alternativaunadelmismotipoquestengainstalada.
Bien,paradefinirlasfuentesquequeremos:sisonvariasfuentesseseparanconcomas;ysisu
nombrecontieneespaciosseponeentrecomillas(estoesaplicableatodoslosatributos).Ejemplo:
font-family: Georgia, "Book Antiqua", Palatino, Times, "Times New
Roman", serif;
Enesteejemplo,eltextoseveraconGeorgia;sistanoestdisponibleconBookAntiqua;sista
noestdisponibleconPalatino,yassucesivamentehastallegaralcasoenqueningunafuentede
lasquehemosrecomendadoestdisponible.Enesecasoseutilizaraunapredeterminadadelgrupo
"serif".
Bien,ahoraveremoscmodefinirelcolor.
color: <color>;
LoscoloresenCSSsepuedendefinirdevariasformas:
Hexagesimal:#RRGGBB.Sedefineconunaalmohadillaseguidadelascantidadesdecolor
pararojo,verdeyazul.
Lascantidadesseexpresanenhexagesimal(esdecir,dosdgitosde09aAF).Deesta
maneranegroes#000000,rojoes#FF0000,grisoscuroes#333333yblanco#FFFFFF.
Existenprogramasquetecalculanestascantidadesapartirdeuncolorquetledas.
Hexagesimalabreviado:#RGB.Sienelcasoanteriorlosdosdgitospararojo,verdeyazul
sonlosmismos(porejemploDD,BBo22)sepuedeabreviardejandoslouno.
Deestamaneranegroes#000,rojoes#F00,grisoscuroes#333yblanco#FFF.
Combinacionespredefinidaseningls:Existenunaseriedecoloressimplesqueyavienen
predefinidosyquepodemosusarconsusnombreseningls.
Deestamaneraelnegroesblack;rojoesred,grisoscuroesgray,yblancowhite.
CantidadesdecolorenRGB:rgb(ROJO, VERDE, AZUL).Conestafuncinpodemos
indicarelcolordirectamenteconsuscantidadesderojo,verdeyazul;connmerosdel0al
255(mximo).
Deestamaneraelnegroesrgb(0,0,0);rojoesrgb(255,0,0),grisoscuroesrgb
(100,100,100)yblancorgb(255,255,255).
Paraponerunejemplodeesto,elcolorgranate:
color: #A00000;
Bien;ahoraveamoscomomodificareltamaodelafuente:
font-size: <tamao>;
CSSnosdmuchalibertadalahoradeespecificartamaos,yaquestoslospodemosexpresaren
muchasmedidas:porejemplopx,pt,em,cm,mm...:)
Ejemplo:
font-size: 16px;
Bien,pasemosahoraaladecoracinquelepodemosdarauntexto.
Elprimeratributoqueveremosparadecorarnuestrostextoses:
text-decoration: <decoracin>;
Donde<decoracin>puedevalerlosiguiente:
underline:Subrayanuestrotexto.Ejemplo
overline:Lneaporencimadenuestrotexto.Ejemplo
line-through:Tachanuestrotexto.Ejemplo
none:Modonormal,sinsubrayar,sinlneaporencimaysintachar.Aunqueestemodoes
elpredeterminadoenalgunasetiquetas,enotrascomo<a>elmodopredeterminadoes
underlineporloquepodemosponerloanonesinoqueremossubrayarlosenlaces.
Ejemplo
Elsegundoatrbutobsicamentenospermiteponertextosoencursivaoenoblcuo:
font-style: <estilo>;
Donde<estilo>puedevalerlosiguiente:
italic:Poneeltextoencursiva.Ejemplo
oblique:Poneeltextoenoblcuo(casiidnticoalacursiva).Ejemplo
normal:Modonormal,nocursivanioblcuo.Ejemplo
Ahorapasemosalgrosor.
font-weight: <grosor>;
Donde<grosor>puedevalerlosiguiente:
bold:Latpicanegrita.Ejemplo
bolder:Msgruesoquelatpicanegrita.Ejemplo
lighter:Ligero.Ejemplo
Unnmerodel100al900:Diferentesvaloresdesdeelmnimo(100)almximo(900).
Ejemplo(valor100)
normal:Grosornormal.Ejemplo
Tambinpodemosespecificaruna"variante"delafuente.Aunqueslohayuna:lasversales(aparte
delnormal).
font-variant: small-caps;
Ejemplo
Sigamosconelformateadodetextos.ConCSSpodemosespecificareltamaoentreletras.
letter-spacing: <tamao>;
Eltamao(aligualqueentodoslostamaosenCSS)seespecificadelamismaformaquecomo
veamosenfont-size.
letter-spacing: 5px;
Ejemplo
Tambinpodemosespecificareltamaoentrepalabras:
word-spacing: <tamao>;
EnHTMLpara"indentar"oespaciaruntextotenamosquetirardecosascomo .
ConCSSpodemosusartext-indent.
text-indent: <tamao>;
Comosiempre,lostamaosseespecificanigualqueantes.Ademsenesteatributotambinle
podemosdarunvalorenporcentajeconrespectoalelementocontenedor.
text-indent: 3cm;
Ejemplo
ConCSStambinpodemostransformarlasmaysculasyminsculasdelostextos.
text-transform: <transformacin>;
Donde<transformacin>puedevalerlosiguiente:
uppercase:Todoamaysculas
lowercase:Todoaminsculas
capitalize:Laprimeraletradecadapalabraamaysculas
none:Sintransformacin(predeterminado)
Otroatributoquepodemosespecificarparalostextoseselinterlineado,esdecir,eltamaoentre
laslneasdeuntexto:
line-height: <tamao>;
<tamao>seexpresacomohemosvistosiempre:)
AlineadodeTextos
Nohacefaltausaralign="center"nicosasparecidasparanada.ConCSStenemosmuchoms
control:
text-align: <alineado>;
Donde<alineado>puedevalerleft,right,centerojustify.
Porejemplosiaplicamosesteestiloaunprrafo...
text-align: center;
...eltextodelprrafoestarcentrado:)
Elfondodeunelemento
OlvdatedeatributosHTMLtalescomobgcolor:enCSStenemosmuchomscontrolsobreel
fondodeloselementos:
Paracambiarelcolordefondo:
background-color: <color>;
Loscoloresseespecificanigualquecuandoveamoselatributocolor.Ejemplo:
Prrafoconcolordefondorgb(200,200,255)
Tambinpodemosespecificarelcolortransparent.
ConCSSpodemosponercomofondoungrfico:
background-image: <imgen>;
LasimgenesenCSSseexpresanconlafuncinURL:
url("imagen.jpg")
Porejemplo:
background-image: url("/pic/fondo.png");
RecuerdaquesilaimgenesunPNGcontrasnparenciaalphapodrsconseguirefectos
impresionantes:)
Paraconseguirqueelgrficodefondosequedefijoenelsitioynosemuevaconelscrollnohace
faltautilizarelinfamebgproperties="fixed"propietariodeMicrosoft:
background-attachment: fixed;
AdemsconCSStenemosmscontrol:normalmentecuandoponemosungrficodefondoenun
objeto;siesteesmspequeoqueelobjetoseirrepitiendoenmosaicohastallenartodoelobjeto.
ConCSSpodemoscontrolarestarepeticin:
background-repeat: <modo>;
Donde<modo>puedeserunodelossiguientes:
no-repeat:Simplementecuandoacabeelgrficonolorepite,demaneraqueelrestodel
objetoquedasinfondo.Tambinsiespecificamosuncolordefondoapartedelaimgen,
dondenocubralaimgenseverelcolor.
repeat-x:Serepitelaimgenhorizontalmenteperonoverticalmente.
repeat-y:Serepitelaimgenverticalmenteperonohorizontalmente.
repeat:Serepitetantohorizontalmentecomoverticalmente.
Tambinpodemosespecificardndequeremosqueempiecelaimagen:
background-position: <posicin>;
Enposicinpodemosexpresardosmedidasseparadasporespacio.LaprimeraeslascoordenadasX
ylasegundalascoordenadasY.
Podemosexpresarlasmedidasenunidades(comohemosvistosiempre),porcentajesconrespectoal
contenedor;opalabrascomotop,bottomleftyrightquehacenreferenciaalasdistintas
esquinasdelapantalla.
Ejemplos:
background-position: 14px 29px;
background-position: top right;
Bordes
ConCSSpodemosespecificarbordesaloselementosdetodotipo.
Enesteapartadovamosaverlasintaxisabreviadaparainclurbordes.Conestasintaxistenemos
cuatroatributos:
border: <tipo> <grosor> <color>;

border-top: <tipo> <grosor> <color>;
border-bottom: <tipo> <grosor> <color>;
border-left: <tipo> <grosor> <color>;
border-right: <tipo> <grosor> <color>;
Elprimeratrbutohacereferenciaalbordegeneraldelobjeto(loscuatrolados)ylossiguientes
hacenreferenciaaladosenconcreto.
Elordendelosvaloresnotieneporqueserese,puedesercualquierordeneinclusopodemosomitir
valores(estostomarnelvalorpredeterminado).
En<tipo>ponemoseltipodebordequequeremos.Puedeserunodelossiguientes:
solid:Unbordeslido,esdecir,unalnea.
dashed:Unborde"rayado",conlneadiscontnua.
dotted:Unbordehechoapartirdepuntos.
double:Doslneasslidas.
Bordes3D:Personalmentenadarecomendados,peroson:groove, ridge, inset,
outset.Experimentaconellossiquierespero...
none
Encuantoa<grosor>y<color>seespecificancomohemosvistohastaahora:grosoren
unidades(cm,px...)ycolorcomosiempre:)
Veamosunejemplo,aplicandoalgodeloquehemosaprendido:
.miborde {
border-top: solid 2px #a00000;
border-bottom: outset 3px #a00000;
border-left: dotted 2px #a00000;
border-right: dashed 2px #a00000;
font-size: 20px;
color: #a00000;
font-variant: small-caps;
}
Ahoraslotenemosqueaplicarlaclaseaunobjetoparaverelresultado:
AsQuedaraElEfecto
Bonito,eh?:)
Pseudoclases
EnCSSexistenunasclasesespecialesquesellamanpseudoclasesqueafectanacomportamientos
especialescomopasarelratnporencima,etc.
Paradefinirunapseudoclase:
etiqueta:pseudoclase {
<Formatos CSS>
}
Comovemosseponendospuntosydespuselnombredelapseudoclasepredefinida.
hover:Estapseudoclaseseactivamientraselratnestporencimadelobjeto.
Generalmenteseaplicaaenlacesyformularios.
visited:Estapseudoclaseseactivaenlosenlacesqueyahansidovisitados.
link:Enlacesenestadonormal(novisitadosyelratnnoencima)
active:Estapseudoclasesedefinemientraselobjetoestactivo.
target:Estapseudoclaseseactivacuandounelementoquehemosdefinidoconun"id"es
visitadoatravsdeunenlaceancla.
Hayms,peroestassuelenfuncionarentodoslosnavegadores.Algunascomoafterybefore
lasveremosenelsiguientecaptulo:)
Porejemplo,alpasarporencimadelosenlacesdeestedocumentoseactivanunosefectos(cambio
decolorporejemplo)quesepuedendefinircona:hover.
Display.Bloques.
EnHTMLhayelementosdevariostipos:porejemplolosinlinequesevisualizanenlamisma
lnea(talescomo<a>,<span>...)olosblockquesonbloques(como<div>,<p>...).
ConCSSpodemosmodificareltipodeelementoHTMLquequeramos,utilizandoelatributo
display.
display: <tipo>;
Donde<tipo>puedeserporejemploinline,block,list-item(comolasetiquetas<li>...)
Conestopodemos,porejemplo,hacerlistasquesevisualicenenlamismalnea;solapas,loque
queramos!
Siunelementoesdetipoblock(comoundiv)podemosdefinirnosotrossualturayanchuracon
losatributos:
width: <ancho>;
height: <alto>;
Elanchoyelaltolospodemosexpresarconunidadesperotambinconporcentajes:)Ejemplo:
width: 55px;
height: 120px;
Mrgenesy"padding"
Losmrgenesnossirvenpararegularelespacioquehayacontinuacindeunelementoen
cualquieradesuslados.
margin-top: <cantidad>;
margin-bottom: <cantidad>;
margin-left: <cantidad>;
margin-right: <cantidad>;
LacantidadseexpresacomotodaslasmedidasenCSS.Ejemplo:
margin-bottom: 7px;
Otrovalorquepodemosusaresauto,dondeelnavegadorcalcularautomticamentelosmrgenes
quelehayquedaralobjetopara,porejemplo,centrarlo.
Porejemplo:
div.centrado {
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: right;
}
Conesecdigoeldivconclase"centrado"serundivde500pxalineadoenelcentrodela
pantalla,peroqueeltextoquecontieneestalineadoaladerecha:)
Porsuparte,elpaddingeselespacioentreelbordeyelcontenidodeunobjeto,yseexpresaigual
quelosmrgenesperocon"padding"envezde"margin".Ejemplo:
padding-left: 2mm;
ElementosAFTERyBEFORE
UnadelascosaspotentesdeCSSsonlospseudoelementosAFTERyBEFORE,quejuntoconla
propiedad"Content"nospermiteinsertarcosasantesydespuesdeunelemento(X)HTML.
Comoejemploveremoscmoponerenunblockquoteesas"comillas"quesevenmuchasveces,
que"envuelven"elcontenido.
blockquote
{
color: #333333;
}
blockquote:before {
color: #BEBEBE;
content: url("blockquote.gif") " " attr(cite);
}
blockquote:after
{
content: url("blockquotefin.gif");
}
EnverdeestnmarcadosloselementosAFTERyBEFORE.Estclaroloquehacen,elBEFORE
insertalaimagendelascomillasantesdelcontenidoyAFTERinsertalascomillasdespues.
Estoloconseguimosgraciasalatributocontent.
Perotambinvemosesodeattr(cite).Queseso?Puesesonos"devuelve"elcontenidodel
atrbuto"cite"quelepongamosalblockquote(p.e.<blockquote
cite="http://www.barrapunto.com">).
TambinconvienemeterelcontenidodelBlockquotedentrodeun<div>paraquevalideel
XHTML.
Comoimgenespodeisusarestas:imgen1eimgen2.
Capas
Porfin,llegamosaunadelaspartesdeCSSmspotente.
Graciasalascapastenemostodoelcontrolquequeramossobreloselementosdenuestrapgina
web.
Normalmentelaposicindeloselementosdeunapginaesrelativa,esdecir,quedependedelos
demselementosdeunapgina.Porejemplo,unprrafoestarmsabajosiantesdelhayms
prrafosoelementos.
Debidoaesto,normalmentecuandosequeracolocarelementosenunsitioconcreto,serecurraa
lastablasinvisiblesoimgenesespaciadorasinvisibles,loqueesunachapuzaymuypoco
accesiblecomohemosvistoenelcaptulouno.
ConCSSestohacambiado:ahorapodemoscolocarloselementosenposicinabsoluta,esdecir,
indicandoeltamaoycoordenadasexactasalnavegadorparaquelascoloque:)
Bien,empezaremosdesdeelprincipio:).
Antesdenadadecirquedebidoasunaturalezalascapassesuelenusarconbloques<div>.Por
ejemplocadacapaunbloqueDIVconunidentificadornicoquedespuesdefinimosenelarchivo
CSS:).
Bien,veremosahoraloprimero:cmoindicarqueunelementotieneposicinabsolutayno
relativa:
position: <posicin>;
Y<posicin>puedevaler:
absolute:Laposicindelelementonodependedeningunaotraetiqueta.Normalmentelo
quenosinteresaparalascapas
fixed:Aligualqueelanteriorlaposicinesabsoluta,peroelelementosequedafijoenel
sitioalhacer"scroll"coneldocumento.Comoejemplo,elmendeestemismo
documento:)
relative:Posicinrelativa;normalmentelopredeterminado
static:Aligualqueelanteriorlaposicinesrelativa,peronopodemosredimensionar
(porejemplo)elobjeto.
Demaneraqueparalascapasdebemosponerlaposicinaabsoluteofixed:)
Especificandolascoordenadas
Bien,yatenemosnuestracapaconposicinabsoluta(ofija)pero...cmolesituamos?
Fcil:utilizandolosatributostop,bottom,leftyright.
Normalmenteseespecificanslotopyleft:
top: <posicin>;
left: <posicin>;
<posicin>seespecificacomolasmedidasenCSSenunidadescomoporejemplopx.Tambin
seadmitenporcentajes:)
Deestamanera:
#micapa {
position: absolute;
top: 200px;
left: 150px;
width: 175px;
height: 175px;
border: dashed 1px maroon;
text-align: center;
color: maroon;
font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
}
Despueshacemosun<div id="micapa">enundocumentoHTMLdepruebasqueests
haciendo:)ydentrocolocamosunfragmentodetexto,cerramoseldivycomprobamoselresultado
:)
Lacapaseruncuadradode175pxdelado,enlaposicin200x150,conunbordemarrn
discontnuo,tipodeletraLucidaGrande,colormarrn,tamao16pxycentrado:)
Elzindex
Avecestenemosvariascapasunasporencimadeotrasyqueremosespecificarculesestnpor
encimadecales:)
Paraestousamoselz-index:
z-index: <ndice>;
Zindexesunnmerocualquiera,lacapaconmayorzindexaparecerporencimadelacapaconz
indexmenor,etc.
Enlaces
HastaaqullegaestetutorialdelCSS,esperoquetehayaservidoparaalgo:)
SiannoestsconvencidodelasposibilidadesdelCSSchaleunvistazoaesto:
CSSZenGarden:MagnficositiodondepuedesaplicarvariosestilosCSSsalapginade
ejemplo.Losdiseossonrealmenteimpresionantes,contcnicasymtodosmuy
interesantesquetepuedenserdeutilidad.Altamenterecomendable:)
Yestossonblogs(bitcoras)encastellanodondesehablatambindeXHTMLyCSS;trucos,
estndaresweb,etc:
Minid
NordicDesign
LechugaHervida,mipropioblog:)
YestossontambinbitcorassobrediseowebyCSSperoeningls:
CSSinformationinspiration
AListApart
AnneVanKesteren
Paradudas,sugerencias,opiniones:epanelapse(arroba)gmail.com:)
TodoestoestlicenciadobajoestalicenciadeCreativeCommons:)

TutorialCSS PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

TutorialCSS PDF

Cargado por

Copyright:

Formatos disponibles

MANUALBSICOCSS

border: <tipo> <grosor> <color>;

También podría gustarte