HOJAS DE ESTILO
CSS
- Las hojas de estilo css (Cascading Style Sheets--Hojas de Estilo en Cascada) describen como los elementos de un HTML van a ser mostrados en pantalla.
- El HTML se debe usar solo para describir el contenido de una página web y el css se usa darle una mejor apariencia a ese contenido.
- Con una hoja de estilo se puede cambiar la apariencia de muchos sitios web.
- Se puede agregar un estilo a un elemento html de 3 formas
1. Estilo en Línea:
Este etilo se agrega directamente a la etiqueta html que queremos cambiar la apariencia el: <p style:”color:red; text-align: left;texto texto</p>
2. Hoja de Estilo Interna:
Dentro de las etiquetas head añadir las etiquetas <style></style> y dentro escribir el estilo ej:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: blue;
text-shadow: 5px 5px 5px black;
}
</style>
</head>
<body>
<h1>texto texto</h1>
</body>
</html>
3. Hoja de Estilo Externa:
Para esta forma se crea un documento con extencion css ej(estilo.css) en el que escribiremos el estilo ej(p{text-align: justify;}) y en el html poner esta eiqueta en el head <link rel="stylesheet" type="text/css" href="estilo.css"> (en “estilo.css” va el nombre que se le dio a la hoja de estilo .css)
Algunos ejemplos de estilos:
fondo:
- background-color : color, color de fondo
ej: background-color : aqua;
ej: background-color : # 2DE955;
- background-image: url(imagen.ext) imagen de fondo
ej: background-image: url(fondo.jpg);
- background-repeat: (repeat-x / repeat-y / no-repeat) repite el fonde de manera horizontal, vertical o no repite
ej: background-repeat: repeat-x;
- background-attachment: fixed; el fondo no sera afectado por el scroll
- background-position: (right- center – left) (top-center-bottom) o percentages
este fija la imagen de fondo en alguna posición
ej: background-position: center center ; -> centra la imagen tanto vertical Como hrizontalmente
ej: background-position: left bottom; ubica la imagen de fondo abajo a la izquierda
ej: background-position: 50% 50% ; -> centra la imagen tanto vertical Como hrizontalmente
borde:
- brder-style: (solid, dotted, double, dashed, groove, ridge, inset, outset)
pone borde a cualquier elemento como minimo se puede poner un tipo y como maximo 4
ej: brder-style: dotted;
ej: brder-style: dotted double ridge solid;
sombra a texto:
text-shadow: 2px 2px 5px black;
margen:
- margin-top: 100px;
- margin-bottom: 100px;
- margin-right: 150px;
- margin-left: 80px;
- margin: 100px 150px 100px 80px;
height: 200px; -alto
width: 50%; -ancho