Scribd Logo
Upload

Welcome to Scribd!

  • Manual Css

    Uploaded by

    Yorian Lara
    2 views16 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views16 pages

    Manual Css

    Uploaded by

    Yorian Lara

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 16

    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&nbsp;. 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:)

    You might also like