jjaramillo238@misena.edu.co
SENA - 2016
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.
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 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.
Son usados para "encontrar" o seleccionar elementos HTML basados en su nombre, id, clase, atributo, entre otros.
Selector de nombre : Selecciona elementos basados en su nombre.
Todos los elementos con el mismo nombre se verán afectados.
Son usados para "encontrar" o seleccionar elementos HTML basados en su nombre, id, clase, atributo, entre otros.
Selector de id : Usa el atributo id de un elemento HTML para seleccionar un elemento específico en el documento.
El id de cada elemento debe ser único en el documento.
Son usados para "encontrar" o seleccionar elementos HTML basados en su nombre, id, clase, atributo, 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.
Observaciones:
p.center {
text-align: center;
color: red;
}
<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;
}
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;
}
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.
El CSS se puede incluir en las páginas de tres maneras diferentes.
Cuando el estilo para un elemento HTML está especificado de maneras diferentes, el orden de prioridades es el siguiente:
"Este sistema de aplicación de reglas CSS, se denomina: En cascada"
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>
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.
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!"
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 eliminó el formato de estilo de las páginas HTML!"
color
background-color
background-image
font-size
font-style
width
height
min-height
max-width
min-width
max-height
font-family
font-weight
text-decoration
line-height
text-align
float
display
cursor
list-style
text-transformation
text-indent
letter-spacing