Scribd Logo
Upload

Welcome to Scribd!

  • Css

    Uploaded by

    Bernardo Mora Viorato
    12 views14 pages
    css

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    css

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views14 pages

    Css

    Uploaded by

    Bernardo Mora Viorato
    css

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 14

    CSS

    Qu es CSS?

    Puede que ya hayas odo hablar de CSS sin saber


    realmente qu es. CSS es el acrnimo de Cascading
    Style Sheets
    (es decir, hojas de estilo en cascada).
    Qu puedo hacer con CSS?

    CSS es un lenguaje de estilo que define la presentacin de


    los documentos HTML. Por ejemplo, CSS abarca cuestiones
    relativas a fuentes, colores, mrgenes, lneas, altura,
    anchura, imgenes de fondo, posicionamiento avanzado y
    muchos otros temas.

    Es posible usar HTML, o incluso abusar del mismo, para


    aadir formato a los sitios web. Sin embargo, CSS ofrece
    ms opciones y es ms preciso y sofisticado. CSS est
    soportado por todos los navegadores.
    Qu beneficios me ofrece CSS?

    CSS fue toda una revolucin en el mundo del diseo


    web. Entre los beneficios concretos de CSS
    encontramos:
    control de la presentacin de muchos documentos
    desde una nica hoja de estilo;
    control ms preciso de la presentacin;
    aplicacin de diferentes presentaciones a diferentes
    tipos de medios (pantalla, impresin, etc.);
    numerosas tcnicas avanzadas y sofisticadas.
    La 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;}


    Mtodo 1: En lnea (el atributo style)
    Un modo de aplicar CSS a HTML es usando el atributo de HTML style. Si
    ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede
    aplicar as:

    <html>
    <head>
    <title>Ejemplo</title>
    </head>
    <body style="background-color: #FF0000;">
    <p>Esta es una pgina con fondo rojo</p>
    </body>
    </html>
    Mtodo 2: Interno (la etiqueta style)
    <html>
    <head>
    <title>Ejemplo</title>
    <style type="text/css">
    body {background-color: #FF0000;}
    </style>
    </head>
    <body>
    <p>Esta es una pgina con fondo rojo</p>
    </body>
    </html>
    Mtodo 3: Externo (enlace a una hoja de estilo)

    El mtodo recomendado es
    enlazar con lo que se
    denomina hoja de estilo
    externa.

    Una hoja de estilo externa es


    sencillamente un fichero de
    texto con la extensin .css
    Como cualquier otro fichero,
    puedes colocar la hoja de estilo
    en el servidor web o en el disco
    duro.
    El truco consiste en crear un vnculo desde el documento
    HTML (por ejemplo, index.html) con la hoja de estilo
    (estilos.css). Dicho vnculo se puede crear con una sencilla
    lnea de cdigo HTML:

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

    La lnea de cdigo debe insertarse en la seccin de


    encabezado del cdigo HTML, es decir, entre la etiqueta
    <head> y </head>.

    <html>
    <head>
    <title>Mi documento</title>
    <link rel="stylesheet" type="text/css
    href=css/estilos.css" />
    </head>
    <body>
    ...
    Este vnculo indica al navegador que
    debera usar la presentacin del
    fichero CSS al mostrar el fichero HTML.

    Lo realmente bueno de este mtodo


    es que se pueden vincular varios
    documentos HTML con la misma hoja
    de estilo. Usar un nico fichero CSS
    para controlar la presentacin del
    muchos documentos HTML
    Ejemplo
    H4 { color:#FFF; background-color:#000;}

    H4 { color: #FFF; background-color:


    #000; }
    Selector propiedad valor propiedad
    valor
    Practica 1

    You might also like