Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Clase4 css3

    Cargado por

    Henrry Monge Castro
    15 vistas14 páginas
    dfdf

    Título original

    clase4_css3

    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
    dfdf

    Copyright:

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

    Clase4 css3

    Cargado por

    Henrry Monge Castro
    dfdf

    Copyright:

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

    Introducción a CSS3

    Ing. Henrry D. Monge Castro


    CSS3
    • Hojas de estilo en cascada (cascading style sheets)
    • CSS es un lenguaje utilizado en la presentación de documentos HTML
    • Sirve para organizar la presentación y aspecto de una página web
    • Permite elegir una multitud de opciones de presentación como colores,
    tipos y tamaños de letra, etc.
    • La información de estilo puede ser definida en un documento separado o en
    el mismo documento HTML. En este último caso podrían definirse estilos
    generales con el elemento «style» o en cada etiqueta particular mediante el
    atributo «style».
    Selectores
    • Selecciona los elementos de una página que se aplicaran los respectivos
    diseños
    Selectores de Tipo o Etiqueta
    •Se puede trabajar cualquier etiqueta
    P{
    Color: red;
    }
    <p>Bienvenidos</p>
    •Se puede agrupar por etiquetas
    H1,h2,h3{
    Color: blue;
    }
    <h1>Bienvenidos</h1>
    <h2>Bienvenidos</h2>
    <h3>Bienvenidos</h3>
    Selector de Clase

    • Aplica estilo a un solo elemento de la página utilizando el atributo class de html


    .instructor
    {
    Color: blue;
    }
    <p class= “instructor”> Juan Perez </p>
    Selector de Identificador
    • Permite aplicar css a un solo elemento a través del atributo id
    #piePagina
    {
    Color: red;
    }

    <footer id = #piePagina>Gracias por la visita</footer>


    Como agregar estilos a una Web
    1. Incrustar una hoja de estilo 
    Las reglas de la hoja de estilo se insertan entre las etiquetas de estilo inicial y
    final (<style> y </style>) de la sección encabezado de la página web
    2. Declaración dentro de la misma etiqueta
    Se coloca dentro de la misma etiqueta mediante propiedad style y
    declarando los estilos correspondientes
    3. Vinculación a una hoja de estilo externa 
    Para crear un vínculo a una hoja de estilo externa, insertamos una etiqueta
    <link> como en el ejemplo siguiente:
    <head>
         <title>Hoja de estilo vinculada</title>
         <link href="estilo.css" rel="stylesheet" type="text/css">
    </head> 
    Seudoclases

    • Ayudan a dar efectos

    a <!--etiqueta normal-->
    {
    color: black; <!--quitamos el color del link-->
    text-decoration: none; <!--quitamos el subrayado-->
    }
    a:link <!--SeudoClases: del link -->
    {
    color:#F00; <!--color del link-->
    }
    a:hover <!--SeudoClases: efecto al pasar el cursos sobre el link-->
    {
    background-color: #CCEEFF;
    }
    Estilo y color a texto

    .fuente{
    color:#000;
    text-align:left;
    font-family: 'Indie Flower', cursive;
    }

    <p class=“fuente”>hola mundo </p>


    Background
    body
    {
    background-image: url(imagenes/demi.jpg),url(imagenes/2.jpg); imágenes
    background-size:25% 30%, 100% 100%; tamaño
    background-repeat:no-repeat, no-repeat; repetición
    background-position:right top, center ; posición
    background-attachment:fixed; fondo fijo efecto
    }
    Posicionamiento flotante
    • nav ul li
    {
    float: left;
    width :100px;
    }
    Márgenes
    Position
    • #box1 {
    position:absolute/relative/fixed;
    }
    • ABSOLUTE: La posición es absoluta y no se mueve, se adapta al tamaño de
    la página
    • RELATIVE: Toma como referencia donde se encuentra contenido más no el
    tamaño de la pagina
    • FIXED: Utilizado como fondo de pantalla para que siga al scroll, fondo fijo.
    http://www.mclibre.org/consultar/htmlcss/css/css_propiedades.html#tipos
    PROPIEDADES CSS ESTABLES

    • http://www.mclibre.org/consultar/htmlcss/css/css_propiedades.html#tipos

    También podría gustarte