Scribd Logo
Upload

Welcome to Scribd!

  • 1 Css

    Uploaded by

    Luis Abdon Diaz Parra
    18 views9 pages

    Original Title

    1.Css

    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
    18 views9 pages

    1 Css

    Uploaded by

    Luis Abdon Diaz Parra

    Copyright:

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

    Tema 2b

    Hojas de estilo (CSS)


    Hojas de estilo
    Separar la estructura del documento (etiquetas HTML) del
    estilo de presentacin (hoja de estiIo)
    Estndar del W3C: CSS (Cascade Sty/e Sheets)
    Versin actual: CSS3, pero.
    El soporte en los navegadores actuales es casi inexistente
    CSS2:
    Explorer 6: incompatibilidades serias
    Firefox/Opera/Konqueror: lo implementan aceptablemente

    Pegla de estilo
    Asocia una etiqueta HTML con su aspecto
    /* Selector { Propiedades }*/
    h1 {color:blue; font-size:25px;)
    El aspecto se "hereda, considerando el HTML como un
    "rbol genealgico (esto no ocurre con todas las
    propiedades, aunque s con la mayora)
    body {color:blue; font-size:25px;)
    p {font-size:15px;)
    Dnde colocar las reglas de estilo?
    En un fichero aparte (.css)
    <head>
    <link href="estilo.css" rel="stylesheet" type="textfcss" media="screen">
    ...
    <fhead>
    En la cabecera
    <head>
    <style type="textfcss" media="screen">
    h1 {color:red)
    <fstyle>
    <fhead>

    Dnde colocar las reglas? (ll)


    En el atributo sty/e de una etiqueta
    Cuando el estilo solo se utilice una vez
    Solo se especifican las propiedades
    <h1 style=color:blue; font-size:3em"> Hola, amigos <h1>
    Selectores: tipos (l)
    Etiquetas
    Se pueden poner varias etiquetas en la misma regla
    body, td {background:blue)
    Que afecte a una etiqueta solo si est dentro de otra. Afecta a
    la de la derecha
    h1 em {color:red)
    <h1> <em> Yo soy rojo <fem> <fh1> <em> pero yo no <fem>

    Selectores: tipos (ll)


    Cmo cambiar el estilo solo de cierto/s h1 (o lo que sea)
    y no de todos?
    Clase (para utilizar varias veces)
    h1.azul {color:blue; font-size:25px;) f* solo vale para h1 *f
    .hortera {color:red; background:yellow;) f* para cualquier etiqueta *f
    ...
    <h1 class=azul"> Un titulo azul <fh1>
    <p class=hortera"> cmo molo, eh <p>
    ldentificador (solo una vez)
    h1#azul {color:blue; font-size:25px;) f* solo vale para h1 *f
    #hortera {color:red; background:yellow;) f* para cualquier etiqueta *f
    <h1 id=azul"> EL titulo azul <fh1>
    Marcar secciones en HTML
    Cmo cambiar de estilo cierta seccin del texto para
    la que no tenemos etiqueta HTML?
    <h1>Bienvenidos a mi web </h1>
    Utilizar las etiquetas HTML <d|v> y <span> que sirven
    simplemente para definir secciones de texto
    Diferencia: <d|v> fuerza retorno de carro antes y despus,
    no as <spar>
    <h1>Bienvenidos a <span cIass="rojo">mi web </span> </h1>

    Selectores: tipos (lll)


    Pseudoclases: estados de etiquetas
    a:visited enlace ya visitado
    :hover - elemento por debajo del ratn
    a:hover {background:yellow)
    Pseudoelementos: partes de elementos
    :first-letter
    :first-line
    p:first-letter {font-size:3em)
    Tipos de propiedades
    Fuentes: tipos letra, tamao, negrita, cursiva,...
    CoIor: de texto, de fondo, imagen de fondo,...
    Texto: justificacin, espacio entre letras y/o palabras
    Caja: bordes a los 4 lados
    Formato visuaI: posicin en la pgina, mostrar o no...
    TabIas
    Listas, numeracin automtica

    Unidades de medida
    PaIabras cIave: small, bolder
    Unidades absoIutas: px {p|xe|esj, cm, mm, in {pu|gaoasj, pt
    {='/72 |nj, pc {='2 prj
    Unidades reIativas: em {ramano por oelecro. E. 2em=2 veces
    e| ramano por oelecroj
    URLs: url(http://www.dccia.ua.es/logo.gif) {ramo|en va|e con
    com|||as ooo|es o s|mp|esj
    CoIores: yellow, #ff0000, rgb(255,0,0), rgb(100%,0%,0%)
    Propiedades de fuentes
    p {
    font-size:25px; f* tamano *f
    font-family: Arial narrow", sans-serif; f* fuente *f
    font-weight: +00 f* negrita *f
    )

    Color
    p {
    color:rgb(0,0,255); f* color texto *f
    background-image: url(mosca.gif"); f* imagen fondo *f
    background-repeat: repeat f* fondo mosaico *f
    )
    Texto
    p {
    letter-spacing:0.5em; f* espaciado letras *f
    text-indent: 3em; f* indentacin primera linea *f
    )

    Caja
    #aviso {
    padding-left: 50%;
    padding-right: 20px;
    padding-top:3em;
    padding-bottom: 1em;
    background-color: #FFEFD5;
    border: 1px solid;
    }
    50%
    3em
    1em
    Dimensiones de caja
    Especificar ancho y alto: propiedades W|dlr y re|grl
    El Explorer incumple el estndar
    Explorer: w|dth - contenido + padding + border
    Estndar: w|dth - solo contenido
    #av|so {
    W|dlr:100px;
    oac|grourd-co|or : Ye||oW;
    padd|rg: 50px 25px 50px 25px;
    oorder: 1px so||d;

    100px 100px

    Formato visual. Posicionamiento


    Especificar tipo de posicionamiento: atributo position
    - abso|ute: referente al elemento contenedor del posicionado. Es como si se sacara de la
    pgina y se pusiera en otra capa
    - f|xed: referente a la ventana (no funciona en Explorer 6)
    - re|at|ve: referente a la posicin que ocupara normalmente. Deja un hueco en dicha
    posicin.
    Especificar posicin
    - |eft: x, top: y (origen de coords. en la esquina superior izquierda)
    - z-|ndex: z (cuanto mayor, ms cerca)
    #abs {
    position: absolute;
    left: 50px;
    top: 50px;
    z-index: 1;
    }
    #rel {
    position: relative;
    color: Ped;
    left: 30px;
    top: 30px;
    z-index: 2;
    }
    50px
    30px
    La cascada CSS
    Los efectos CSS se aplican "en cascada. El color puede
    venir de un estilo en un .css mientras que el tamao viene
    de un estilo en la cabecera
    Si los estilos son contradictorios, se emplean varios
    criterios
    Quin ha definido el estilo (autor, usuario, navegador):
    normalmente tiene prioridad el autor, salvo !important
    body {font-size: 18px !important}
    Especificidad: ganan los selectores ms especficos
    Orden de definicin: gana la ltima regla

    You might also like