CSS
(Cascade Style Sheet)
Es un lenguaje de estilo que se utiliza para modificar la presentación visual de un sitio
web. Surge con el objetivo de tener separado por un lado el contenido (HTML) y por
otro diferente, la estética.
Con CSS es posible hacer referencia a cualquier elemento html y modificarlo
visualmente, otorgándole a dicho elemento un ancho, alto, color, etc, según
corresponda.
El consorcio W3C (
[Link]) es una organización mundial que se dedica a la
estandarización de casi todas las tecnologías dedicadas a la web.
El lenguaje HTML se utiliza para
estructurar contenido , mientras que la tarea de
interpretar recae en el navegador para poder visualizar su contenido final.
Sintaxis CSS
Para escribir una hoja de estilos se debe respetar la siguiente sintaxis de ejemplo:
selector {
propiedad
:valor;
}
body {
background
-
color
:tomato;/* Establece un fondo de la página de color tomate */
color: #006699 /* Establece el color de la tipografía con valores hexadecimales
*/
}
Es necesaria la utilización de llaves de apertura y cierre {} para contener las
propiedades y valores del selector: elemento html, clase o id que estamos
referenciando.
Ejemplo HTML
<div class=”clase” id=”identificador”>
Ejemplo html
</div>
Ejemplo CSS
div {
propiedad
:valor;
}
.
clase {
propiedad
:valor;
}
#identificador {
propiedad
:valor;
}
Hojas de estilos externas
Para vincular una o más hojas de estilos a un HTML se debe incluir dentro de la
etiqueta <head> la o las siguientes lineas
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/[Link]"
/>
<link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"[Link]"
/>
Se debe respetar correctamente el nombre del archivo (mayusculas y minusculas) y
su ubicación en directorios.
Propiedades básicas
1. 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 dos elementos. Se puede diferenciar por
lado en sentido horario (arriba, abajo, izquierda, derecha).
● padding :Relleno interior que se añade en los bordes del elemento. A
diferencia de margin, cuenta para el tamaño del elemento.
● float
:
Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad
se usa en elposicionamiento flotante
de CSS. El tema del
posicionamiento
en
CSS no es trivial y conviene estudiarcómo funciona
antes de usar esta
propiedad.
2. 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.
3. Color y fondos
● color:
Color del texto de un elemento. Se puede especificar en diferentes
formatos como palabras predefinidas (red, green, etc.), RGB o como valor
hexadecimal (#334400).
● 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.
4. 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.
5. 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.
Referencia CSS:
[Link]
[Link]
[Link]
Enlaces:
[Link]
[Link]
[Link]