Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • CSS

    Cargado por

    David De León
    40 vistas13 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, 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 DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    40 vistas13 páginas

    CSS

    Cargado por

    David De León

    Copyright:

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

    CSS

    Introducción
    Bienvenidos al curso de CSS. En este curso aprenderemos a crear diseños para una
    página web HTML mediante hojas de estilos (CSS).

    CSS (Cascading Style Sheet) es un lenguaje que permite dar formato a las etiquetas
    HTML, permitiendo definir parámetros para obtener un diseño deseado.

    El código CSS puede ir incrustado en el código HTML de la página que queramos


    formatear (ya veremos cómo).

    De esta forma se puede tener en un mismo archivo la estructura de la página web


    (HTML) y el diseño (CSS).

    El problema de esto es cuando queremos aplicar una hoja de estilo a varias


    páginas.

    Para ello se permite crear un archivo CSS con su propio formato y aplicarlo en las
    páginas que queramos, que también veremos cómo más adelante.

    Mi primer estilo I
    Ya podemos empezar a utilizar hojas de estilo sobre documentos HTML.
    Lo primero que vamos a hacer es coger una página sencilla en HTML y aplicarle un
    estilo sencillo. Partimos de esta pequeña página web:

    Código HTML

    <html>
    <head>
    </head>
    <body>
    <p>Aplicando el primer estilo</p>
    </body>
    </html>

    Hasta aquí nada de CSS, todo es HTML. Vamos a copiar este código en nuestro
    Notepad++.

    Para ello abrimos Notepad++ y seguimos estos pasos:


    1. Click en el icono para crear una nueva página.
    2. Copiamos el código en el documento de texto.
    3. Vamos al menú "Archivo> Guardar como..." y lo guardamos con el
    nombre estilo1.html.

    Bien, tenemos una página web sencilla, para visualizarla en nuestro navegador
    vamos al menú Ejecutar y la ejecutamos en Google Chrome (en nuestro caso), si
    usas otro navegador, pues en el que prefieras.

    También podemos buscar el archivo en la carpeta que lo hayamos guardado y


    ejecutarlo haciendo doble click en él.
    Veremos el resultado en nuestro navegador, que será una página web tan sencilla
    como esto:

    Mi primer estilo II
    Ya tenemos nuestra página web. Sólo queda aplicarle un estilo.

    En CSS hay diferentes formas de aplicar estilos. Se pueden aplicar estilos a


    etiquetas HTML, por ejemplo:

     <body> - Cuerpo de la página


     <p> - Párrafo
     <font> - Fuente
     <a> - Enlace
     <table> - Tabla

    Y muchas más. Aparte de eso, en CSS se pueden crear reglas de estilo a tu gusto y
    aplicarlas a los elementos que quieras.
    Esto lo veremos más adelante, vamos a empezar por las etiquetas.

    Recordemos nuestra página HTML, que tiene básicamente un párrafo (etiqueta


    <p>). Bien, vamos a crear un estilo para darle color a esa etiqueta. Sería así:

    Código CSS

    p {color: green;}

    Aquí estamos aplicando un estilo a una etiqueta. Esta línea quiere decir que todas
    las etiquetas <p> de esa página tengan color verde.

    Vamos a insertarlo en nuestra página HTML para que funcione:


    Hemos insertado las líneas resaltadas en blanco. El código CSS debe ir entre las
    etiquetas <style> especificando el tipo, en nuestro caso text/css.

    Aquí el código no está en una línea como hice antes, eso es indiferente, es
    aconsejable utilizar esa estructura por tener cierto orden.

    Ahora que tenemos nuestra página HTML con un estilo incrustado, vamos a
    visualizarla a ver qué efectos tiene:

    Estructura CSS
    Bien, ya hemos aprendido lo básico sobre como crear y aplicar estilos.

    Ahora conviene que hagamos un pequeño paréntesis para aclarar la estructura de


    CSS y otras cuestiones que nos serán útiles para entender lo que estamos
    haciendo.

    En primer lugar la estructura de CSS. Utilizaremos el ejemplo ya usado.


     Regla: una regla CSS se define de la siguiente forma; selector/res, apertura
    de llave ({), declaración o declaraciones y se cierra la llave (}).

     Declaración: contiene las propiedades y sus valores

     Selector: es la etiqueta a la que queremos aplicar la regla. Puede ser más de


    una.

     Propiedad: aquello que queremos modificar de la etiqueta, cada etiqueta


    tiene sus características, aunque hay muchas comunes, color, tamaño, etc...

     Valor: el valor que le damos a esa propiedad.

    Con esto ya podemos ver varias cosas. En CSS podemos...

     Aplicar una regla a varios elementos (selectores

     Modificar el valor a varias propiedades en una misma regla.

     O lo que es lo mismo, crear varias declaraciones.

     Crear varias reglas de estilo en un mismo documento.

    Poco a poco vamos viendo el potencial que tiene CSS en cuanto a diseño web. Y
    esto es sólo el principio.
    Creación de varias reglas
    Vamos a añadir otra regla en nuestra hoja de estilo.

    Concretamente, crearemos una regla para el elemento <body> de nuestra página,


    es decir, que se aplicará en todo el cuerpo de nuestra web.

    body
    {
    color: blue;
    background-color: pink;
    }

    (De momento para definir colores estamos utilizando palabras reservadas para
    ellos, más adelante veremos más detalles sobre los colores.)

    Esta regla CSS nos indica que el texto que esté en el cuerpo de la página será de
    color azul (blue), y que el fondo de la web será rosa (pink).
    Vemos resaltado las líneas incluidas a nuestra web. ¿Qué ocurrirá con el texto entre
    las etiquetas <p>?
    Efectivamente, conserva su color verde, ya que la etiqueta <p> tiene su propia
    regla.

    Sólo los elementos que no tengan otra regla específica en nuestra hoja de estilo,
    serán de color azul.

    También observamos como el color de fondo es rosa.

    El tema de las colisiones de estilos es un poco complicado, nos vamos a quedar de


    momento con lo que tenemos.

    Bien, ya tenemos varias reglas funcionando, y hemos visto que podemos crear
    varias declaraciones.

    Podemos hacer tantas como deseemos, claro está, todo con cabeza, ya que sería
    absurdo añadir líneas porque sí o que sobren, eso ralentizaría innecesariamente la
    carga de nuestra página web.
    Tal como se esperaba, nuestro párrafo ahora tiene color verde.

    Independizando el código CSS


    Ya sabemos todo lo básico para crear buenos diseños de páginas web.

    Es el momento de incrementar el potencial de CSS independizando el código.

    Imaginemos que tenemos una página web con 7 páginas, lo más normal es que
    esas 7 páginas tengan un mismo estilo/diseño.

    Bien podemos incrustar el código CSS en las 7 páginas y no pasa nada, es correcto.
    Pero tiene sus desventajas.

    Partimos de la base de que el diseño en las 7 páginas es el mismo, si queremos


    cambiar el diseño de 1 elemento, tendríamos que modificar esa regla en las 7
    páginas.

    No es práctico. Si independizamos nuestro CSS, además de facilitarnos el trabajo,


    ganaremos en ligereza, nuestra página web tendría menos peso.

    Incluso podríamos tener varios CSS e ir cambiando el diseño de nuestra página en


    cada estación del año, por poner un ejemplo.

    Abrimos un archivo nuevo en Notepad++, copiamos el código CSS que tenemos


    hasta ahora y lo guardamos con la extensión Cascade Style Sheet File (*.css).
    Notepad++ autodetecta el lenguaje, y ahora nos resalta los valores en el código
    CSS, cosa que no hacía antes en el código HTML.
    Nuestro código HTML debe haber quedado así:

    Perfecto, ya tenemos nuestro código CSS independiente. Tal como lo tenemos,


    nuestra hoja de estilo no se aplicaría sobre ningún documento.

    Para ello debemos enlazarlo a cada documento que queremos que se aplique.
    Cosa que veremos en la siguiente lección.

    También podría gustarte