Introducción a CSS

Desarrollo de Aplicaciones Web

Introducción a CSS

Contenido:


  1. Introducción
  2. Propiedades básicas de CSS

Introducción

Introducción a CSS

  • Los sitios web formateados con las etiquetas HTML son poco atractivos


  • Las etiquetas HTML no proporcionan mucha flexibilidad en la presentación de contenido


  • Las etiquetas fueron soportadas de diferente forma en los navegadores


  • El uso inadecuado de etiquetas (como tablas) también causó problemas a las personas con necesidades especiales

Introducción a CSS

  • CSS es el acrónimo de Cascading Style Sheets


  • CSS ha logrado ser un lenguaje de gran importancia


  • CSS hace la vida más fácil a los programadores de páginas web


  • CSS facilita la vida a muchas otras profesiones

Introducción a CSS

¿Qué es CSS?

  • CSS es un lenguaje creado por el World Wide Web Consortium (W3C), diseñado específicamente para documentos de formato HTML


  • Hoja de estilo es un tipo de plantilla que contiene la configuración de la fuente, el estilo, el formato y visualización que permiten mostrar un documento


  • CSS apareció en HTML 4.0 con el fin de resolver un problema con las versiones anteriores de HTML

Introducción a CSS

¿Por qué se necesita CSS?

  • Las versiones originales de HTML nunca tuvieron la intención de utilizar las etiquetas que se necesitan para dar formato


  • HTML fue diseñado para definir el contenido de los documentos HTML


  • Se hizo para el cuerpo, párrafo, y etiquetas de título entre otros


Introducción a CSS

¿Qué hace CSS?

  • CSS logra que los sitios web HTML se vean bien y sean fáciles de usar


  • Se consigue al permitir que el programador personalice las fuentes, tamaños de contenidos, espacios, colores, fondo, bordes, colocación, superposiciones, márgenes, cajas, el formato efectos de enlaces, botones, y listas


  • En las versiones más recientes como CSS3, incluso se puede jugar con gradientes, transiciones y transparencias


Introducción a CSS

Estándares CSS

El estándar base es el estándar CSS2.1 que se encuentra en www.w3.org/TR/CSS21/. Se le agregan las siguientes normas:


    ✓ Atributos de Estilo CSS (www.w3.org/TR/Css-style-attr/)
    ✓ Consultas de Medios Nivel 3 (www.w3.org/TR/css3-mediaqueries/)
    ✓ Espacios de nombres CSS (www.w3.org/TR/Css3-namespace/)
    ✓ Selectores Nivel 3 (www.w3.org/TR/Css3-selectors/)
    ✓ Nivel de color CSS 3 (www.w3.org/TR/Css3-color/)

Introducción a CSS

Características básicas

    ✓ Características de las fuentes, como el tipo de letra y énfasis.
    ✓ Características del elemento de texto, como espaciamiento entre letras, espaciado de palabras y espaciamiento entre líneas.
    ✓ Características de color de todos los elementos.
    ✓ Alineación de elementos incluyendo texto, imágenes, controles y tablas
    ✓ Posicionamiento y tamaño de los elementos de espaciado tales como bordes, relleno y márgenes
    ✓ Identificación y clasificación de grupos de atributos

Introducción a CSS

Características avanzadas

    ✓ Posicionamiento absoluto, relativo y fijo de los elementos para que pueda crear una alineación precisa de los elementos.
    ✓ Índice z para controlar el apilamiento de elementos en la pantalla para que un elemento puede ocultar otro.
    ✓ Soporte para varios tipos de medios para que un desarrollador no necesite ser un artista para crear páginas espectaculares.
    ✓ Soporte para hojas de estilo auditivas donde se lee el contenido.
    ✓ Procesamiento de texto bidireccional.
    ✓ Añadir nuevos efectos de fuente, como sombras.

Introducción a CSS

Estructura de una regla CSS


Todas las declaraciones CSS siguen el mismo formato:

Esquema css

Introducción a CSS

Estructura de una regla CSS

  • Una regla de CSS está formada por un "selector" y una "declaración"


  • La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo"


  • Un selector se puede utilizar para nombrar cualquier elemento HTML o componente específico que precisa estilo


  • Una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas

Introducción a CSS

Cómo usar hojas de estilo

  • Tres tipos de manejo de hojas de estilo: en línea, internas y externas


  • La diferencia es simplemente donde se coloca el código en relación con el documento HTML


Introducción a CSS

Cómo usar hojas de estilo, ejemplos


Ejemplo de hoja de estilo en línea:


<p style="color: navy; font-family: Arial;">Párrafo de texto con estilo<p>

Introducción a CSS

Cómo usar hojas de estilo, ejemplos

Ejemplo de hoja de estilo en cabecera:


<html>
<head>
<style>
p {
font: verdana; color: navy;
align: right; }
.logo-imagen {
align: left;
min-height: 120px;
border: 2px solid #fff;
}
</style>
</head>
<body> ... ...</body>
</html>

Introducción a CSS

Cómo usar hojas de estilo, ejemplos

Ventajas de acceso a hojas de estilo externas:


  • Es el tipo más habitual debido a ser el más conveniente

  • Una hoja de estilo externa está fuera del documento HTML, en un archivo

  • No deben incluir código HTML

  • Los archivos de hojas de estilo externas siempre tienen extensión .css. El nombre del archivo más común es style.css

  • Introducción a CSS

    Cómo usar hojas de estilo, ejemplos

    Ejemplo de uso de hoja de estilo externa:


    <link rel=”stylesheet” type=”text/css” href=“...style.css” />
    <style type=”text/css”> @import url(...style.css) </style>
    

    Introducción a CSS

    Cómo usar hojas de estilo, ejemplos


  • Referenciando con palabra clave. Ejs.: p { font-size: 1cm }, span { font-size: 2cm }

  • Referenciando con el atributo id. Ej.: #texto { font-size: 1cm }

  • Referenciando con el atributo class. Ej.: .texto { font-size: 1cm }

  • Referenciando con cualquier atributo. Ejs.: p[nombre] { font-size: 1cm }, p[nombre="textoUMU"] { font-size: 1cm }
  • Introducción a CSS

    Proridades de las instrucciones


    Cuando se usan varias hojas de estilo, puede haber un conflicto sobre la que controla a un selector dado


    Las siguientes características determinarán el resultado de hojas de estilo que se contraponen:

    Introducción a CSS

    Proridades de las instrucciones


    Prioridad 1. ! important


    Un estilo marcado como "importante" prevalecerá sobre estilos contradictorios de similar nivel.


    La regla del autor primará sobre la regla del lector en estos casos.

    Introducción a CSS

    Proridades de las instrucciones


    td{ font-family: verdana, arial !important; }
    td.casilla{
    font-family: monospace;
    }
    
    Que aplicado sobre el siguiente código HTML:
    <table>
    <tr> <td class="casilla">Prueba</td> <td>137</td> </tr>
    </table>
    
    La primera celda, de clase "casilla", tendría la fuente monospace y la segunda celda, que no tiene ningún clase, tendría el estilo verdana, arial. Como la fuente definida en primer caso tiene la declaración !important, la fuente será siempre verdana, arial, para ambas celdas.

    Introducción a CSS

    Proridades de las instrucciones


    Prioridad 2. Origen de las reglas


  • Tanto los autores como los lectores tienen la capacidad de especificar hojas de estilo

  • Caso de conflicto, las reglas del autor prevalecerán sobre las reglas del lector de similar peso

  • Tanto las hojas de estilo del autor como las del lector primarán sobre las hojas de estilo del navegador

  • Introducción a CSS

    Proridades de las instrucciones


    Prioridad 3. Especificidad


  • Un estilo más específico siempre prevalecerá sobre uno menos específico


  • Prioridad 4. Orden de especificación


  • Cuando dos reglas tienen el mismo peso, prima la última regla especificada

  • Propiedades básicas de CSS

    Propiedades básicas de CSS

    Maquetación básica


    width: Ancho de un elemento.
    height: Alto de un elemento.
    vertical-align: Alineamiento vertical dentro de un elemento.
    margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado (arriba, abajo, izquierda, derecha).
    padding: Relleno interior que se añade en los bordes. A diferencia de margin, cuenta para el tamaño del elemento.
    float: Mueve el elemento todo lo posible hacia el lado indicado.

    Propiedades básicas de CSS

    Fuentes y texto


    font-family: Tipo de letra
    font-size: Tamaño de letra
    font-weight: Peso (normal, negrita, …)
    font-style: Estilo (normal, cursiva, …)
    text-decoration: “Decoraciones” como subrayado, tachado, etc.
    text-align: Alineación del texto (izquierda, derecha, etc.)
    text-transform: Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada palabra en mayúsculas.

    Propiedades básicas de CSS

    Color y fondos


    color: Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green, etc.) RGB o como valor hexadecimal.
    background-color: Color del fondo del elemento.
    background-image: Permite especificar una imagen de fondo.
    background-repeat: Permite usar una imagen a modo de mosaico en diferentes modalidades.
    box-shadow: Crear un efecto de sombra para un elemento.

    Propiedades básicas de CSS

    Listas


    list-style-image: Usar la imagen especificada como viñeta para la lista.
    list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista.

    Propiedades básicas de CSS

    Bordes

    border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo de línea, etc.)
    border-color: Color del borde.
    border-style: Diferentes estilos para el borde (sólido, puntos, etc.)
    border-radius: Permite crear esquinas redondeadas para un elemento.


    Propiedades básicas de CSS

    Estilos para diferentes medios o dispositivos:

    Medio Descripción
    all Todos los medios definidos
    braille Dispositivos táctiles con sistema braille
    embosed Impresoras braille
    handheld Dispositivos de mano: móviles, PDA, etc.
    print Impresoras y navegadores en modo "Vista Previa para Imprimir"
    projection Proyectores y dispositivos para presentaciones
    screen Pantallas de ordenador
    speech Sintetizadores para navegadores de voz
    tty Dispositivos textuales limitados como teletipos y terminales texto
    tv Televisores y dispositivos con resolución baja