Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • CSS (Copy) PDF

    Cargado por

    Marco Fraquet
    2 vistas62 páginas

    Título original

    3. CSS (copy).pdf

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    2 vistas62 páginas

    CSS (Copy) PDF

    Cargado por

    Marco Fraquet

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 62

    CSS

    Cascading Style Sheets


    Indice
    Front-end vs Back-end
    Anatoma de CSS
    Unidades de medida
    Aplicando CSS a un documento
    lado del Cliente lado del Servidor
    Front-end Back-end
    Front-end

    Back-end
    Tres capas del diseo web

    HTML CSS Javascript


    estructura estilo comportamiento
    Cascading Style Sheet
    CSS es un lenguaje de estilo que define la presentacin
    de los documentos HTML.

    Nos permite separar presentacin de contenido

    HTML se usa para estructurar el contenido; CSS se usa


    para formatear el contenido previamente estructurado.
    Cascading Style Sheet

    HTML Hoja de estilo Sitio web


    (contenido) (apariencia)
    Anatoma de una regla CSS
    Anatoma de una regla CSS
    Anatoma de una regla CSS
    Anatoma de una regla CSS
    Unidades de medida
    Unidades absolutas: est completamente definida, ya
    que su valor no depende de otro valor de referencia.
    in, pulgadas ("inches", en ingls). Una pulgada equivale a 2.54
    centmetros.
    cm, centmetros.
    mm, milmetros.
    pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35
    milmetros.
    pc, picas. Una pica equivale a 12 puntos, es decir, unos 4.23
    milmetros.
    Unidades de medida
    Unidades relativas: no estn completamente
    definidas, ya que su valor siempre est referenciado
    respecto a otro valor.
    em, relativa respecto del tamao de letra del elemento (1em
    equivale a la anchura de la letra M en 12 puntos)
    ex, relativa respecto de la altura de la letra x del tipo y tamao de
    letra del elemento (1ex se puede aproximar por 0.5 em.)
    px, (pxel) relativa respecto de la resolucin de la pantalla del
    dispositivo en el que se visualiza la pgina HTML.
    Aplicando CSS a un documento
    Podemos aplicar CSS a un documento HTML de
    tres maneras diferentes.
    En lnea (el atributo style)
    Interno (la etiqueta style)
    Externo (enlace a una hoja de estilo)
    Estilo en lnea (el atributo style)

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <h1 style="color:#ff0000; background-color:#ffff00">
    Este mensaje es de color rojo sobre fondo amarillo. </h1>
    </body>
    </html>
    Estilos Interno (la etiqueta style)
    <!DOCTYPE html>
    <html>
    <head>
    <title>Problema</title>
    <style type="text/css">
    h1 {color:#ff0000; background-color:#ffff00}
    </style>
    </head>
    <body>
    <h1>Primer ttulo</h1>
    <h1>Segundo ttulo</h1>
    </body>
    </html>

    <style type="text/css">
    h1 {
    color:#ff0000; text-decoration:underline;
    text-align:left;
    }
    h2 {
    color:#008800; font-family:verdana;
    font-size:40px; text-align:center;
    }
    h3 {
    color:#aa0000;
    text-align:right;
    }
    </style>

    </head>
    <body>
    <h1>Ttulo de nivel 1.<h1>
    <h2>Ttulo de nivel 2.<h2>
    <h3>Ttulo de nivel 3.<h3>
    </body>
    </html>
    Estilo externo (enlace a una hoja de estilo)

    El mtodo recomendado es enlazar con lo que se denomina hoja


    de estilo externa.
    Estilo externo (enlace a una hoja de estilo)
    Estilo externo (enlace a una hoja de estilo)

    Se pueden vincular varios documentos HTML con la misma hoja


    de estilo.
    Acoplamiento
    Atributo style

    Etiqueta <style>

    Etiqueta <link>
    Estilo del navegador

    Estilo externo

    Estilo interno

    Estilo en lnea
    Selectores
    Selector del tipo (elemento)
    Selector class
    Selector ID
    ID vs clases
    La diferencia mas importante entre IDs y class es que
    puede haber en una pagina solo un ID y mltiples
    clases
    Un ID es ms especfico que una clase.
    Un elemento puede tener ambos.
    Definicin de estilos por medio de clases
    Agrupacin de selectores
    h1 {color:red}
    p {color:red}

    h1, p {color:red}
    pseudoclases
    Las pseudoclases se utilizan para definir estilos,
    no para los elementos, sino para varios estados
    de los elementos.
    :link
    :visited
    :focus
    :hover
    :active
    Cajas CSS
    Todos los elementos HTML pueden ser considerados
    como cajas.
    Una caja, esencialmente, envuelve elementos HTML y
    consiste de: margen borde, acolchado, contenido
    padding
    padding: 25px 50px 75px 100px; padding: 25px 50px;
    top padding is 25px top and bottom paddings are 25px
    right and left paddings are 50px
    right padding is 50px
    bottom padding is 75px
    left padding is 100px

    padding: 25px;
    padding: 25px 50px 75px; all four paddings are 25px
    top padding is 25px
    right and left paddings are 50px
    bottom padding is 75px
    Creacin de un men vertical
    Creacin de un men horizontal
    Fondos
    Fondos
    CSS3: Esquinas redondeadas
    CSS3: Esquinas redondeadas
    CSS3: Bordes de imgenes
    CSS3: Bordes de imgenes
    CSS3: Bordes de imgenes
    CSS3: Bordes de imgenes
    CSS3: Imagen de fondo de tamao completo
    CSS3: Imagen de fondo de tamao completo
    Facebook sin CSS
    Facebook con CSS

    También podría gustarte