Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Introduccion Css

    Cargado por

    elida
    19 vistas13 páginas
    css

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PPTX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    css

    Copyright:

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

    Introduccion Css

    Cargado por

    elida
    css

    Copyright:

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

    PROGRAMACIN BAJO WEB

    LENGUAJE DE MARCADO
    PROGRAMACIN BAJO WEB

    CSS
    CSS es un lenguaje que sirve para dotar de presentacin y aspecto, de estilo, a
    pginas web (documentos HTML). CSS es un lenguaje que apareci para hacer ms
    fciles y con mejor aspecto los desarrollos web. Un desarrollo web comprende
    mltiples reas de conocimiento
    PROGRAMACIN BAJO WEB

    Sintaxis Bsica de CSS


    Digamos que queremos un bonito color rojo como fondo de nuestra pgina web:
    Usando HTML podramos haberlo conseguido as:
    <body bgcolor="#FF0000">

    Con CSS el mismo resultado puede lograrse as: body {background-color: #FF0000;}
    PROGRAMACIN BAJO WEB

    Aplicando CSS a un documento HTML


    Mtodo 1: En lnea (el atributo style) Ejercicio1
    Mtodo 2: Interno (la etiqueta style) Ejercicio2

    Mtodo 3: Externo (enlace a una hoja de estilo) Ejercicio3

    <link rel="stylesheet" type="text/css" href="../../css/style.css" />


    PROGRAMACIN BAJO WEB

    Colores y fondos
    Color
    color: #ff0000; Ej:leccion2/ejercicio1.html
    background-color
    background-color: #FC9804;Ej:leccion2/ejercicio2.html
    background-image
    background-image: url(img1.jpg); Ej:leccion2/ejercicio3.html
    background-repeat
    Background-repeat: repeat-x
    background-repeat: repeat-y Ej:leccion2/ejercicio4.html
    background-repeat: repeat
    background-repeat: no-repeat
    background-attachment- Fijar el Fondo
    Background-attachment: scroll Ej:leccion2/ejercicio5.html
    Background-attachment: fixed
    background-position Ej:leccion2/ejercicio6.html
    background Ej:leccion2/ejercicio7.html
    PROGRAMACIN BAJO WEB

    Colores y fondos
    background-position
    background-position: top right
    Valores:
    left top
    left center
    left bottom
    right top
    right center
    right bottom
    center top
    center center
    center bottom

    Ej:leccion2/ejercicio6.html
    PROGRAMACIN BAJO WEB

    Fuentes
    font-family
    font-style
    font-variant Ej:leccion3/ejercicio1.html
    font-weight
    font-size
    font font: italic bold 30px arial, sans-serif;
    PROGRAMACIN BAJO WEB

    Pseudo-Clases
    pseudo-clase
    Una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al
    definir una propiedad para una etiqueta HTML.
    Sintaxis
    selector:pseudo-class {
    property:value;
    }

    Aplicados a:

    Enlaces: <a> ej: <Input>


    Focus Ej:leccion4/ejercicio2.html
    link checked
    visited
    active Ej:leccion4/ejercicio3.html
    hover
    Ej:leccion4/ejercicio1.html
    PROGRAMACIN BAJO WEB

    Agrupacin de elementos (div)


    Agrupacin de elementos con el atributo class
    <div> se usa para agrupar uno o ms elementos a nivel de bloque

    Ej:leccion6/ejercicio1.html
    PROGRAMACIN BAJO WEB

    Modelo de caja
    width, height, border, margin, padding, box-sizing

    height y width
    Ej:leccion7/ejercicio1.html

    Margin, Padding y Border


    Ej:leccion7/ejercicio2.html Ej:leccion7/ejercicio3.html
    PROGRAMACIN BAJO WEB

    Elementos flotantes (propiedad float)


    Los elementos se pueden hacer flotar a la derecha o a la izquierda usando la propiedad float. Es decir, que
    la caja con su contenido flota bien a la derecha o la izquierda de un documento (o de la caja contenedora)

    Ej:leccion8/ejercicio1.html

    Ej:leccion8/ejercicio1.html
    PROGRAMACIN BAJO WEB

    Elementos flotantes (propiedad float)


    Los elementos se pueden hacer flotar a la derecha o a la izquierda usando la propiedad float. Es decir, que
    la caja con su contenido flota bien a la derecha o la izquierda de un documento (o de la caja contenedora)

    Ej:leccion8/ejercicio1.html

    Ej:leccion8/ejercicio1.html
    PROGRAMACIN BAJO WEB

    Capa sobre capa con z-index


    hace referencia al orden en que los elementos se superponen unos con respecto a
    otros.

    Ej:leccion9/ejercicio1.html

    También podría gustarte