Scribd Logo
Carica

Benvenuto in Scribd!

  • Guía Breve de CSS3

    Caricato da

    oposeitor
    28 visualizzazioni3 pagine
    Guía Breve de CSS3

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Guía Breve de CSS3

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    28 visualizzazioni3 pagine

    Guía Breve de CSS3

    Caricato da

    oposeitor
    Guía Breve de CSS3

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 3

    2017523 GuaBrevedeCSS

    GuaBrevedeCSS (CASCADINGSTYLE SHEETS )

    QuesCSS?
    HojasdeEstiloenCascada(CascadingStyleSheets),esunmecanismosimplequedescribecmo
    sevaamostrarundocumentoenlapantalla,ocmosevaaimprimir,oinclusocmovaaser
    pronunciadalainformacinpresenteenesedocumentoatravsdeundispositivodelectura.Esta
    formadedescripcindeestilosofrecealosdesarrolladoreselcontroltotalsobreestiloyformatode
    susdocumentos.

    Paraqusirve?
    CSSseutilizaparadarestiloadocumentosHTML(HYPERT EXTMARKUPLANGUAGE)[HTTP://W3.ORG/MARKUP/EN]yXML
    ( E XTENSIBLE MARKUP LANGUAGE )[HTTP ://W 3.ORG/XML/EN],separandoelcontenidodelapresentacin.LosEstilosdefinenla
    formademostrarloselementosHTMLyXML.CSSpermitealosdesarrolladoresWebcontrolarel
    estiloyelformatodemltiplespginasWebalmismotiempo.Cualquiercambioenelestilomarcado
    paraunelementoenlaCSSafectaratodaslaspginasvinculadasaesaCSSenlasqueaparezca
    eseelemento.

    Cmofunciona?
    CSSfuncionaabasedereglas,esdecir,declaracionessobreelestilodeunoomselementos.Las
    hojasdeestiloestncompuestasporunaomsdeesasreglasaplicadasaundocumentoHTMLo
    XML.Lareglatienedospartes:unselectoryladeclaracin.Asuvezladeclaracinestcompuesta
    porunapropiedadyelvalorqueseleasigne.
    h1{color:red;}

    h1eselselector

    {color:red;}esladeclaracin

    Elselectorfuncionacomoenlaceentreeldocumentoyelestilo,especificandoloselementosquese
    vanaverafectadosporesadeclaracin.Ladeclaracineslapartedelareglaqueestablececul
    serelefecto.Enelejemploanterior,elselectorh1indicaquetodosloselementosh1severn
    afectadosporladeclaracindondeseestablecequelapropiedadcolorvaatenerelvalorred(rojo)
    paratodosloselementosh1deldocumentoodocumentosqueestnvinculadosaesahojade
    estilos.
    Lastresformasmsconocidasdedarestiloaundocumentosonlassiguientes:

    Utilizandounahojadeestiloexternaqueestarvinculadaaundocumentoatravsdel
    elemento<link>,elcualdebeirsituadoenlaseccin<head>.

    <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.1//EN">
    <html>
    <head>
    <title>Ttulo</title>
    <linkrel="stylesheet"type="text/css"href="http://www.w3.org/css/officeFloats.css"/>
    </head>
    <body>
    .
    .
    .
    .
    </body>
    </html>

    http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo 1/3
    2017523 GuaBrevedeCSS

    Utilizandoelelemento<style>,enelinteriordeldocumentoalqueselequieredarestilo,y
    quegeneralmentesesituaraenlaseccin<head>.Deestaformalosestilossern
    reconocidosantesdequelapginasecargueporcompleto.

    <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.1//EN">
    <html>
    <head>
    <title>hojadeestilointerna</title>
    <styletype="text/css">

    body{
    paddingleft:11em;
    fontfamily:Georgia,"TimesNewRoman",serif;
    color:red;
    backgroundcolor:#d8da3d;
    }

    h1{
    fontfamily:Helvetica,Geneva,Arial,sansserif;
    }

    </style>
    </head>
    <body>
    <h1>AquseaplicarelestilodeletraparaelTtulo</h1>
    </body>
    </html>

    Utilizandoestilosdirectamentesobreaquelloselementosquelopermitenatravsdel
    atributo<style>dentrode<body>.Peroestetipodedefinicindelestilopierdelasventajas
    queofrecenlashojasdeestiloalmezclarseelcontenidoconlapresentacin.

    AlgunasnormasbsicasalahoradecrearunaCSSsonlassiguientes:

    Enelsiguienteejemplo,h1{color:red;},elselector,<h1>,ledicealnavegadorlapartedel
    documentoqueseverafectadaporesaregla.Losselectorespuedenaparecer
    individualmenteoagrupados,separndolosconcomas:

    h1,h2,h3{
    color:red;
    }

    oloqueeslomismo

    h1{color:red;}
    h2{color:red;}
    h3{color:red;}

    Lapropiedad,queenestecasoseracolor,especificaquaspectosevaacambiar.En
    esteejemplolapropiedadcambiadaserelcolor.Laspropiedadesquesedesean
    modificarenunaCSSparaunmismoselectorpuedenagruparse,perosernecesario
    separarcadaunadeellasconunpuntoycoma.

    p{textalign:center;color:red}

    Normalmentesedescribeunapropiedadporlnea,delasiguientemanera:

    h1{
    paddingleft:11em;
    fontfamily:Georgia,"TimesNewRoman",Times,serif;
    color:red;
    http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo 2/3
    2017523 GuaBrevedeCSS

    backgroundcolor:#d8da3d;
    }

    Elvalor,representadoaladerechadelosdospuntos(:),estableceelvalordela
    propiedad.Esimportanterecordarquesielvalorestformadopormsdeunapalabra,
    hayqueponerloentrecomillas.

    p{fontfamily:"sansserif";}

    Ejemplos
    AcontinuacinsemuestrantresejemplosdeHojasdeEstilodiferentes,enlasquesecambian
    algunascaractersticas,vinculadasaestemismodocumento:LaGuaBrevedeCSS.Compruebael
    cambiodeaspecto:

    GuaBrevedeCSSsinvincularaunaCSS[./EJEMPLOS/CSS/EJEMPLOSINCSS]
    GuaBrevedeCSS.EjemplodeEstilo1[./EJEMPLOS/CSS/EJEMPLOCSS1]
    GuaBrevedeCSS.EjemplodeEstilo2[./EJEMPLOS/CSS/EJEMPLOCSS2]

    MsinformacinsobreCSS
    GuadeReferenciaRpidadeCSS2[HTTP://WWW.W3C.ES/DIVULGACION/GUIASREFERENCIA/CSS21]
    Incluyeunareferenciadetodoslosselectores,propiedades,valores,etc.
    PginaprincipaldeCSS[HTTP://WWW.W3.ORG/STYLE/CSS/EN]
    IncluyemultitudderecursossobreCSS.
    EspecificacionesCSS[HTTP://WWW.W3.ORG/STYLE/CSS/#SPECSEN]
    ConjuntodetodaslasespecificacionesdeCSSexistentes.
    TutorialintroductoriodeCSS[HTTP://WWW.W3.ORG/STYLE/EXAMPLES/011/FIRSTCSSEN]
    BrevetutorialdesarrolladoporBertBos[HTTP://WWW.W3.ORG/PEOPLE/BOS/EN]paraquienesdeseanutilizar
    CSSynotienenexperiencia.
    Aadiruntoquedeestilo[HTTP://WWW.W3.ORG/MARKUP/GUIDE/STYLEEN]
    GuadesarrolladaporDaveRaggett[HTTP://WWW.W3.ORG/PEOPLE/RAGGETT/EN US]queteayudardeforma
    sencillaadarestiloatusdocumentos.
    ConsejosyTrucosdeCSS[HTTP://WWW.W3.ORG/STYLE/EXAMPLES/007/EN]
    ColeccindeejemplosCSSconunabrevedescripcindecmoutilizarlos.
    CSSZenGarden[HTTP://WWW.CSSZENGARDEN.COM/TR/ESPANOL/]
    ElJardnZendelCSSesunejerciciodeaprendizajeydemostracindelasposibilidadesde
    diseoqueofreceCSS,paraellosepresentandiferenteshojasdeestiloparaunmismo
    contenidoyaspodremosverloscambiosdeestiloqueseproducensintenerquemodificarel
    documento.
    CamalenCSS[HTTP://WWW.CAMALEONCSS.COM/]
    ProyectodeorigenhispanoinspiradoenlamismaideayconceptooriginaldelCSSZenGarden.
    ValidadordeCSS[HTTP://JIGSAW.W3.ORG/CSSVALIDATOR/EN]
    ServiciodelW3C(WORLDWIDEWEBCONSORTIUM)onlineygratuitoquenospermitecomprobarlavalidezde
    lasHojasdeEstilo.

    [Copyright19942005W3C(MIT,ERCIM,Keio),Todoslosderechosreservados.Sonaplicableslasreglasderesponsabilidad,marcasregistradasyutilizacindedocumentos.]

    http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo 3/3

    Potrebbero piacerti anche