Introducción al CSS
Anuncio
Introducción al CSS
CSS
REFERENCIAS
http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21
El nombre hojas de estilo en cascada viene del inglés Cascading
Style Sheets
CSS equivale a asignar estilos (style) a los elementos estructurales
de contenido del HTML.
Introducción a estilos CSS
CSS
¿Por qué se llaman en cascada?
Cuando creamos un estilo, las especificaciones que se realicen para
un determinado elemento serán aplicables a todos aquellos
elementos que se encuentren "por debajo" de él atendiendo a un
criterio de herencia.
Por ejemplo, si especificamos un tipo de letra para el elemento
<body> todos aquellos elementos que puedan heredar las
características se presentarán con el mismo tipo de fuente. Así, el
elemento <p> heredará el tipo de letra salvo que especifiquemos lo
contrario.
Introducción a estilos CSS
CSS
También debemos de tener en cuenta que se establece un orden de
prioridad para la aplicación de las normas en caso de que resulten
contradictorias. El orden de preferencia para aplicar una norma es el
siguiente:
- Estilo especificado dentro de la etiqueta.
- Estilo especificado en la cabecera del documento.
- Estilo definido en un documento independiente al que se enlaza
nuestra página.
Si tenemos en cuenta el orden mencionado, lo más razonable es
crear una hoja de estilo en un archivo independiente y vincular las
páginas a este archivo. Si queremos realizar alguna modificación en
un elemento concreto podríamos recurrir a uno de los dos primeros
procedimientos que deberían resultar preferentes por ser más
específicos.
Introducción a estilos CSS
CSS
¿Cómo asignar estilos?
1.- Estilización en línea
<h1 style="color:red;">Hola</h1>
2.- En el propio documento
<style>
*{
font-family:Arial;
}
</style>
3.- En un documento externo
<link href="/ubicacion/del/archivo.css"
rel="stylesheet">
Introducción a estilos CSS
CSS
Sintaxis y elementos: Selector, declaración, propiedad, valor.
Introducción a estilos CSS
CSS
¿Cómo asociar un estilo con los elementos HTML?
> A través de los selectores.
Selector universal
*{
font-family:Arial;
}
Selector de tipo
h1{
color:red;
}
Selector de clase (class)
.box{
font-weight:bold;
}
Introducción a estilos CSS
CSS
¿Cómo asociar un estilo con los elementos HTML?
Selector de identificador (id)
#box{
background-color:black;
}
Selector descendiente
#box ul {
color:gray;
}
Agrupación de selectores
#box, .box, ul li a, #box:hover, input[type="text"] {
color:red;
}
Introducción a estilos CSS
CSS
¿Cómo asociar un estilo con los elementos HTML?
Pseudo-Selector de estado
#box:hover{
background-color:green;
}
#box a:active{
color:blue;
}
#box input:focus{
background-color:black
color:white;
}
Introducción a estilos CSS
a:link
a:visited
a:hover
a:active
CSS
Modelo de caja (Box Model)
Antes de CSS, se usaban las tablas para estructurar un sitio web, ahora
tenemos el modelo de caja que es un conjunto de propiedades que
definen como se muestran y se alinean los elementos HTML
(cajas/rectángulos) y cómo interactúan con su entorno en una página
web.
Introducción a estilos CSS
CSS
Modelo de caja (Box Model)
Introducción a estilos CSS
CSS
Modelo de caja (Box Model)
Este conjunto de propiedades
predeterminadas son los siguientes:
•Border: Define el borde del elemento,
por defecto es 0, osea sin borde.
•Background: El fondo del elemento, sus variaciones son un color solido o
transparente (background-color), una imagen (background-image) o hasta un
complejo gradiente con CSS3.
•Padding: Es un espacio que hay entre la caja y el contenido, se podría decir que es
un margen interno.
•Width/Height: El width es la longitud del contenido, no de la caja en sí, la longitud
real de la caja es la longitud del contenido + el padding y el border, y el height es el
alto de la caja.
•Margin: Es el espacio que hay entre la caja y lo que está afuera, un margen
externo.
Introducción a estilos CSS
CSS
Modelo de caja (Box Model)
Ejemplo
<style>
div {
background-color:#C2C2C2;
border:20px solid #E1E1E1;
height:200px;
margin:10px;
padding:20px;
width:200px;
}
</style>
<div>
Pellentesque habitant morbi
tristique senectus et netus et
malesuada fames ac turpis egestas.
</div>
Introducción a estilos CSS
CSS
Modelo de caja (Box Model)
Introducción a estilos CSS
