Diseño Web

Clase 3

SENA - 2018

CSS

Cascading Style Sheet

Es un lenguaje de hojas de estilo que describe la presentación de un documento HTML.

CSS describe como los elementos HTML deben ser representados en la pantalla.

Estilos:

• Colores, fuentes, alineaciones, diseños.
• Distribución de los componentes en la pantalla (Maquetación).
• Presentación en diferentes dispositivos y tamaños de pantalla.

CSS

Orígenes

Tip: HTML nunca fue diseñado para crear etiquetas que den formato a las páginas web.

HTML fue creado para describir el contenido de una página web:

<h1>Encabezado</h1>
  <p>Párrafo</p>

Cuando etiquetas como <font>,<center>, y <color> fueron agregadas en la especificación HTML 3.2, desarrolladores de sitios web grandes perdían mucho tiempo aplicando formato a las páginas a través de etiquetas.

"Para resolver el problema, el World Wide Web Consortium (W3C) creó CSS."

CSS

Ejemplo

"CSS eliminó el formato de estilo de las páginas HTML!"

Esta regla aplica color de fuente rojo a todos los elementos h1 dentro de la página web.

CSS

Sintaxis y selectores

Una regla CSS consiste de un selector y un bloque de declaraciones

• El selector apunta al elemento HTML al cuál se le aplicará el estilo.
• El bloque de declaraciones contiene una o más declaraciones separadas por ;
• Cada declaración representa un estilo particular que será aplicado al elemento (o grupo de elementos) HTML.

CSS

Selectores

Son usados para "encontrar" o seleccionar elementos HTML basados en su nombre, id, clase, entre otros. 

Selector de nombre : Selecciona elementos basados en su nombre.

Todos los elementos con el mismo nombre se verán afectados.

CSS

Selectores

Son usados para "encontrar" o seleccionar elementos HTML basados en su nombre, id, clase, entre otros. 

Selector de id : Usa el atributo id de un elemento HTML para seleccionar un elemento específico en el documento.

En CSS esto se especifica utilizando el carácter de numeral (#).

El id de cada elemento debe ser único en el documento. 

CSS

Selectores

Son usados para "encontrar" o seleccionar elementos HTML basados en su nombre, id, clase, entre otros.

Selector de clase : Usa el atributo class para seleccionar todos los  elementos con el atributo class  en el documento.

Muchos elementos pueden afectarse asignándoles la misma clase. 

CSS

Selectores

Observaciones:

• Se pueden especificar elementos específicos los cuales se verán afectados por una clase.

p.center {
    text-align: center;
    color: red;
}

• Los elementos HTML pueden hacer referencia a más de una clase.

<p class="center large">
Este párrafo referencia 
dos clases.</p>

Si los elementos tienen la misma definición de estilos, los selectores pueden ser agrupados para minimizar el código.

h1 {
    text-align: center;
    color: red;
}
h2 {
    text-align: center;
    color: red;
}

h1, h2, p {
    text-align: center;
    color: red;
}

CSS

Comentarios

Son usados para explicar el código, pueden ayudar para editar el código posteriormente.

Comentario de una línea.

/* Esto es un comentario simple */
p {
    color: red;
    text-align: center;
}

Comentario multilínea

/* Esto es un comentario 
de varias líneas, 
entiendes, varias líneas.
*/
p {
    color: red;
    text-align: center;
}

CSS

Cuando un navegador interpreta una hoja de estilos, este aplicará formato al documento HTML de acuerdo a la información de la hoja de estilos.

¿Como funciona el CSS?

• CSS En línea.
• CSS Interno.
• CSS Externo.

El CSS se puede incluir en las páginas de tres maneras diferentes.

CSS

¿Como funciona el CSS?

Cuando el estilo para un elemento HTML está especificado de maneras diferentes, el orden de prioridades es el siguiente:

1. CSS En línea (Al interior del elemento HTML).
2. CSS Interno (En la sección head del documento).
3. CSS Externo (En un archivo externo .css).
4. Por defecto (Estilos por defecto del navegador)

"Este sistema de aplicación de reglas CSS, se denomina: En cascada"

CSS

En línea

Se incluye el atributo style al elemento especificando las declaraciones de estilo que se le aplicarán.

Los estilos en línea pueden usarse para aplicar un estilo único para un elemento simple.

<h1 style="color:blue;margin-left:30px;">
Esto es un encabezado con estilo en el mismo elemento.
</h1>

CSS

Interno

Son definidos dentro de la etiqueta <style>, al interior de la sección <head> del documento HTML.

Los estilos internos pueden usarse si una página web tiene un estilo único.

CSS

Externo

Las hojas de estilos externas son almacenadas en archivos con la extensión .css

CSS permite ahorrar cantidades de trabajo, dado que se puede controlar la vista de múltiples páginas web aplicando los cambios a un solo archivo.

Las definiciones de estilos son normalmente guardadas en archivos CSS externos.

"Con un archivos de hoja de estilos externo, puedes cambiar la apariencia completa de el sitio web cambiando solo un archivo!"

CSS

Externo

Ejemplo: incluir archivo (.css) en la página web

Cada página debe incluir una referencia a un archivo de hoja de estilos (.css) dentro dela etiqueta <link>. La etiqueta <link> se ubica  al interior de la sección <head> del documento HTML.

Ejemplo: contenido archivo (.css)

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

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

index.html

mystyle.css

CSS

"CSS eliminó el formato de estilo de las páginas HTML!"

Externo

CSS

Estilos básicos

color

background-color

background-image

Fuentes

Imágenes

Colores

font-size

font-style

Tamaños

width

height

min-height

max-width

min-width

max-height

font-family

font-weight

text-decoration

Alineación

line-height

text-align

Ubicación

float

Visualización

display

cursor

Listas

list-style

text-transformation

text-indent

letter-spacing

La práctica hace al maestro

¿Cuántos estilos tiene CSS?

ACTIVIDAD