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:
- CSS En línea (Al interior del elemento HTML).
- CSS Interno (En la sección head del documento).
- CSS Externo (En un archivo externo .css).
- 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