Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Hojas de Estilo en Cascada

    Cargado por

    Astrogante
    4 vistas14 páginas

    Título original

    Css

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

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

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    4 vistas14 páginas

    Hojas de Estilo en Cascada

    Cargado por

    Astrogante

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 14

    css

    Hojas de Estilo en Cascada

    Que es CSS?
    Siglas de "CASCADING STYLE SHEETS" (Hojas de Estilo en Cascada), es una tecnologa desarrollada con el fin de separar la presentacin de la estructura del HTML. Funciona aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamao, color de fondo, color del texto, posicin de los elementos, mrgenes, tipos de letra, etc... Quedando de esta manera todo lo que tiene que ver con la parte grfica de la web, separada completamente de la estructura del HTML.

    Este lenguaje desarrollado por la W3C, ha venido hacindose cada vez mas importante entre los diseadores, gracias a la facilidad de uso y a los ptimos y flexibles resultados.

    Los tres principales elementos en el desarrollo de CSS:


    ATRIBUTOS
    Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo "background", etc.

    VALORES
    Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo "font" y el valor "red".

    SELECTORES
    Se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta <body> del documento HTML.

    Hay tres tipos de selectores:


    Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
    Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre.

    El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma: .mi_clase.

    LA SINTAXIS:
    Es muy simple, primero se coloca el selector, luego se abre una llave "{" y se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden definir tantos atributos con sus respectivos valores como se desee, separandolos con un espacio o un salto de linea. En CSS se deben escribir los atributos y valores con minusculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar, como veremos en el siguiente ejemplo:

    /*CSS sobre selector de etiquetas*/ body { font-family: arial; font-size: 12px; color: black; background-color: #cccccc; }

    /*CSS sobre selector de identificador*/ #header { background-color: #ff0000; color: #ffffff; font-size: 26px; }
    En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este ejemplo: <div id="header">Aqui el contenido</div>

    /*CSS sobre selector de clase*/ .mi_clase { margin: 5px; height: 100px; width: 200px; }
    En los selectores de clase, usamos el atributo "class" en las etiquetas HTML para darles el estilo. Ejemplo:

    <div class="mi_clase">Aqui el contenido</div>

    COMO APLICAR ESTILOS CSS


    Existen tres formas de aplicar estilos CSS a una pagina: haciendo un archivo de texto plano guardado como archivo.css. Colocando el estilo en la seccin Head del documento HTML. Colocando el estilo directamente sobre la etiqueta.

    HACIENDO UN ARCHIVO DE TEXTO PLANO GUARDADO COMO ARCHIVO.CSS


    Es un archivo de texto plano guardado como archivo.css, separado del archivo HTML, y vinculando la hoja HTML a el. Esto se hace colocando en la seccin head de la pgina:

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

    EL ESTILO CSS, DIRECTAMENTE EN LA SECCIN <HEAD> DEL DOCUMENTO HTML.


    Se hace de la siguiente forma:

    <head> <title>Pagina</title> <style type="text/css"> body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color:#333333; } </style> </head>
    Es buena idea colocarlos de esta forma si son estilos exclusivos para la pagina a la que se le aplica.

    APLICANDO EL ESTILO DIRECTAMENTE SOBRE EL ELEMENTO HTML


    De esta forma:

    <head> <title>Pagina</title> <style type="text/css"> <!-body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color:#333333; } --> </style> </head>

    También podría gustarte