Scribd Logo
Carica

Benvenuto in Scribd!

  • Cssjava

    Caricato da

    Pablo Nicolas
    9 visualizzazioni10 pagine
    para poder programar

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    para poder programar

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    9 visualizzazioni10 pagine

    Cssjava

    Caricato da

    Pablo Nicolas
    para poder programar

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 10

    CSS

    (Cascading Style Sheets - Hojas de Estilo en Cascada)

    Qu es 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, en cambio html abarca la estructura del documento, como los textos,
    capas, ubicacin de elementos, etc.

    Qu diferencia hay entre CSS y HTML?


    HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido
    previamente estructurado.
    CSS se invent para proporcionar a los diseadores web con sofisticadas
    oportunidades de presentacin soportadas por todos los navegadores (que es el
    problema con el html). Al mismo tiempo, la separacin de la presentacin de los
    documentos del contenido, hace que el mantenimiento del sitio sea mucho ms
    fcil.

    Uso de las CSS


    CSS sirve para definir el aspecto de las pginas web. No obstante, hay diferentes
    niveles a los que podemos aplicar los estilos.
    Estos niveles van desde definir los estilos de manera especfica, para un pequeo
    fragmento de una pgina, hasta los estilos para todo un sitio web.

    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;}

    Como vers, el cdigo usado es ms o menos idntico para HTML y CSS. El ejemplo
    anterior te muestra adems el modelo CSS fundamental:

    De este modo se pueden definir muchos pares de valores y propiedades en un


    mismo bloque, dado que una definicin bsica es separada de la prxima por un
    punto y coma(;).
    En el siguiente ejemplo un conjunto de propiedades visuales es definido para la
    etiqueta <p>. Para lograr esto, el nombre de la etiqueta debe aparecer antes de la
    declaracin de propiedades, las cuales irn encerradas entre llaves ("{" y "}").

    Aplicando CSS a un documento HTML


    Podemos aplicar CSS a un documento HTML de tres maneras diferentes (NIVELES).
    Todos estos mtodos se explican a continuacin.
    N i v e l 1: E n l n e a ( e l a t r i b u t o 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:

    N i v e l 2: I nt e r n o ( l a et i q u e ta style )
    Otra forma es incluir el cdigo CSS usando la etiqueta HTML <style>. Por ejemplo,
    as:

    N i v e l 3: Ex t e r n o ( e n la c e a u n a h o ja d e e s t i l o )
    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 la misma
    carpeta de trabajo o en otra, dentro de la de trabajo.

    Hoja de estilo, junto a la de html.

    Hoja de estilo en carpeta


    independiente.

    Crear la hoja de estilos CSS


    La hoja de estilos CSS no contiene cdigo HTML, por lo tanto no deberemos
    escribir etiquetas HTML en l, para crear la hoja de estilos vamos a:
    1. Crea una carpeta de trabajo llamada ejemplo_css.
    2. Abre el Editor de cdigo.
    3. Indcale que vas a trabajar con cdigo CSS.
    4. Guarda el archivo en una nueva carpeta de nombre css (dentro de la carpeta
    ejemplo_css) con el nombre: "estilos.css", recuerda, debe terminar en ".css"
    sin ms.
    Una vez que tengamos el archivo estilos.css vaco tenemos que lograr, de alguna
    forma, que los estilos que escribamos en ese archivo sean tomados en cuenta por
    el archivo HTML.

    Relacionar la hoja de estilos CSS con nuestra pgina web


    Para relacionar la hoja de estilos CSS utilizaremos la etiqueta <link>, en ella
    deberemos especificar la ubicacin, tipo de archivo y la relacin entre la hoja de
    estilos, la etiqueta <link> va dentro de la etiqueta <head>.
    1. Abre otra hoja en el editor de cdigo e indcale que vas a trabajar en html.
    2. Escribe <html>, luego dentro de la etiqueta <head>, la etiqueta <link> de la
    siguiente forma.

    rel="STYLESHEET" indicando que el enlace es con una hoja de estilos


    type="text/css" el archivo es de texto, en sintaxis CSS
    href="css/estilos.css" indica el nombre del fichero fuente de los estilos
    3. Gurdala con el nombre de inicio.htm en la carpeta de nuestro trabajo
    ejemplo_css.

    Nuestra primera pgina con hoja de estilo


    Ya tenemos creadas la hoja de estilo estilos.css y tambin la pgina que se
    mostrar a los usuarios inicio.htm
    Teniendo ambos archivos activados, comenzaremos la construccin de la siguiente
    web:

    E n e l a r ch i v o cs s

    E n e l a r ch i v o h t ml

    Actividad 1
    Sigue los pasos de construccin de la siguiente web

    E n e l a r ch i v o cs s

    E n e l a r ch i v o h t ml

    Ejercicios:
    Utilizando los ejercicios ya realizados en html, cambia cada uno de ellos a hojas de estilo para formatear la apariencia de la
    web.

    Fuentes:
    http://es.html.net/tutorials/css/lesson1.php
    http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html
    http://www.comocrearunsitioweb.com/c1-crear-web-desde-cero

    Potrebbero piacerti anche