Monografias.com > Computación > Programación
Descargar Imprimir Comentar Ver trabajos relacionados

Introducción a CSS




Enviado por Pablo Turmero



Partes: 1, 2

    Monografias.com

    ¿Qué es CSS?
    Tecnología que nos permite controlar la apariencia de una página web.

    CSS (Cascade Style Sheet) describe como los elementos dispuestos en la página son presentados al usuario.

    El lenguaje de las Hojas de Estilo está definido en la Especificaciones CSS1 y CSS2 del W3C.

    Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras:
    directamente a la marca,
    en el head de la página o
    agrupar las reglas de estilo en un archivo independiente con extensión *.css

    Monografias.com

    Definición de estilos a nivel de marca HTML.
    La sintaxis para definir un estilo a una marca HTML es:

    < h1 style="color:#ff0000;background-color:#ffff00">
    Este mensaje es de color rojo sobre fondo amarillo.
    < /h1>

    Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma.

    El estilo se aplica únicamente a la marca donde inicializamos la propiedad style

    Monografias.com

    Definición de estilos a nivel de página.
    Podemos definir estilos que se aplican a las distintas marcas HTML de la página.

    < head>
    < title>Problema< /title>
    < style type="text/css">
    h1 {color:#ff0000;background-color:#ffff00}
    h2 {color:#00ff00}
    h3 {color:#0000ff}
    < /style>

    En todos los lugares de esta página donde se utilice la marca h1 debe aplicar como estilo de color de texto el rojo y fondo el amarillo.

    Podemos definir estilos para muchas marcas en una única sección style.

    Monografias.com

    Propiedades relacionadas a fuentes.

    Monografias.com

    Unidades de medida (px, cm, mm, em etc.)
    px (pixeles)
    em (altura de la fuente por defecto)
    ex (altura de la letra x)
    in (pulgadas)
    cm (centímetros)
    mm (milímetros)
    pt (puntos, 1 punto es lo mismo que 1/72 pulgadas)
    pc (picas, 1 pc es lo mismo que 12 puntos)
    % (porcentaje)

    La recomendación es utilizar em como medida cuando la salida es el monitor. Si utilizamos pixeles hay navegadores que no permiten cambiar el tamaño de texto.

    Monografias.com

    Propiedades relacionadas a fuentes.
    < head>
    < title>Problema< /title>
    < style type="text/css">
    h1 {
    font-family:times new roman;
    font-size:30px;
    font-style:italic;
    font-weight:bold;
    }
    h2 {
    font-family:verdana;
    font-size:20px;
    }
    < /style>
    < /head>

    Monografias.com

    Agrupación de varias marcas HTML con una misma regla de estilo.
    Esta característica nos permite ahorrar la escritura de reglas duplicadas para diferentes marcas HTML.

    Separamos por coma todas las marcas a las que se aplicará la misma regla de estilo

    Supongamos que queremos la misma fuente y color para las marcas h1,h2 y h3:

    < style type="text/css">
    h1,h2,h3 {
    font-family:verdana;
    color:#0000ff;
    }
    < /style>

    Monografias.com

    Definición de varias reglas para una misma marca HTML.
    En algunas circunstancias, es necesario desglosar la inicialización de propiedades en distintas reglas.?
    Supongamos que queremos todas las cabeceras con la misma fuente pero tamaños de fuente distinta:

    Monografias.com

    Tarea 1
    Problema 1:
    Definir la misma fuente, color y tamaño de fuente para las marcas p y h6

    Tener en cuenta que cuando vea la página el texto que se encuentra en la marca h6 difiere del texto que se encuentra dentro del párrafo por la propiedad font-weight.

    Ya que la marca h6 es de tipo bold y la marca p tiene por defecto normal.

    Monografias.com

    Tarea 1 (2)
    Problema 2:
    Confeccione una página que define una regla para la marca body e inicialice las propiedades color, font-family.

    Luego defina reglas de estilo para las marcas h1,h2 y h3 que redefinan la fuente con los valores: Times New Roman, Courier y Arial.

    Imprima tres títulos, cada uno con las marcas h1,h2 y h3. Por último imprima un párrafo.

    Monografias.com

    Propiedades relacionadas al texto.
    Color
    color:#0000ff //hexadecimales
    color:rgb(255,0,0); //rojo,verde y azul

    Alineación
    text-align
    Valores: left , right , center, justify

    Decorado
    text-decoration
    Valores: none , underline , overline , line-through

    Continúa ejemplo ->

    Monografias.com

    Propiedades relacionadas al texto.
    < style type="text/css">
    h1 {
    color:#ff0000;
    text-align:left;
    text-decoration:underline;
    }
    h2 {
    color:#dd0000;
    text-align:center;
    text-decoration:underline;
    }
    h3 {
    color:#aa0000;
    text-align:right;
    text-decoration:underline;
    }
    < /style>

    Partes: 1, 2

    Página siguiente 

    Nota al lector: es posible que esta página no contenga todos los componentes del trabajo original (pies de página, avanzadas formulas matemáticas, esquemas o tablas complejas, etc.). Recuerde que para ver el trabajo en su versión original completa, puede descargarlo desde el menú superior.

    Todos los documentos disponibles en este sitio expresan los puntos de vista de sus respectivos autores y no de Monografias.com. El objetivo de Monografias.com es poner el conocimiento a disposición de toda su comunidad. Queda bajo la responsabilidad de cada lector el eventual uso que se le de a esta información. Asimismo, es obligatoria la cita del autor del contenido y de Monografias.com como fuentes de información.

    Categorias
    Newsletter