CSS Cascading Style Sheet
Una manera más fácil de dar formato a las páginas Web.
CSS usa reglas para dar un mejor control en cada uno de los elementos que conforman nuestra(s) página.
CSS asocia las reglas con elementos de HTML.
Tiene una sintesis muy sencilla que consta de "Selectores", "Propiedades" y "Valores" juntos crean reglas de Estilo
Construcción de una regla CSS
-----------------Selector {Propiedad:Valor;}
html---------------- p {color:
blue;font-family:
Arial;
}
Multiple----------- th,td {font-weight:
bold;padding:
7px;
}
Descendiente-- div h1 {font-size:
80%;margin-left:
7px;
}
Class--------------.centro {text-align:
center;line-height:
16px;
}
ID------------------- #logo {background-color:
blue;color:
orange;
}
Una regla CSS consta de 2 partes:
Un
Selector identifica el elemento o combinación de elementos que se les dará ese formato.
Declaracion: El estilo o formato que se aplicará,
consta de 2 partes
{propiedad
: valor;}
Se pueden especificar muchas propiedades en una declaración , siempre separados por
;
La propiedad indica los apspectos del elemento que vamos a cambiar ( color, Font, Width, Height, border)
El
Valor especifica las variables que se usarán para las propiedades.
Hay 3 formas de aplicar el formato CSS a las páginas
Dento del código html (Inline)
<html>
<head>
<title>CSS dentro de código</title>
</head>
<body>
<h1 style=" font-family: Helvetica; color: red;">Titulo</h1>
<p style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh
non sapien tempor faucibus. Duis pretium sollicitudin lectus nec
pellentesque. Duis pellentesque mattis nibh, vel convallis ligula.
Praesent dapibus blandit quam quis scelerisque. Ut risus justo,
porttitor a viverra ac, mattis ultrices magna. Aenean adipiscing rutrum
pellentesque. Morbi ipsum ipsum, dictum id eros vitae, semper pulvinar
lectus. </p>
</body>
</html>
Incluido de manera interna en un hoja de estilo, (Embeded)
<html>
<head>
<title>Uso Interno CSS</title>
<style type="text/css">
body {
font-family: Verdana;
font-size: 16px;
color: white;
background-color: blue;}
h1 {
color: orange;
font-size:24px;}
</style>
</head>
<body>
<h1>Titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh
non sapien tempor faucibus. Duis pretium sollicitudin lectus nec
pellentesque. Duis pellentesque mattis nibh, vel convallis ligula.
Praesent dapibus blandit quam quis scelerisque. Ut risus justo,
porttitor a viverra ac, mattis ultrices magna. Aenean adipiscing rutrum
pellentesque. Morbi ipsum ipsum, dictum id eros vitae, semper pulvinar
lectus. </p>
</body>
</html>
<style type="text/css">Se delcara el uso de un estilo, usa el atributo type para identificar que estilos son usados en CSS, cuando se hace un sitio con más de una página se debe optar por usar una Hoja de estilo externa.
Hoja de Estilo CSS externa (external)
<!DOCTYPE html>
<html>
<head>
<title>CSS de manera Externa</title>
<link href="css/estilo.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<h1>Titulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et nibh
non sapien tempor faucibus. Duis pretium sollicitudin lectus nec
pellentesque. Duis pellentesque mattis nibh, vel convallis ligula.
Praesent dapibus blandit quam quis scelerisque. Ut risus justo,
porttitor a viverra ac, mattis ultrices magna. Aenean adipiscing rutrum
pellentesque. Morbi ipsum ipsum, dictum id eros vitae, semper pulvinar
lectus. </p>
</body>
</html>
<link href=Usado en los documentos html para encontrar la ubicación del estilo usado por el archivo CSS, es un elemento vacío(no necesita ser cerrado el atributo) y va dentro del elemento
<head>
Tiene e elementos:
href= para especificar la ruta
type Especifica el tipo de documento enlazado y el valor es text/css
rel Especifica la relacion entre la página HTML y al archivo enlazado su valor es stylesheet cuando va enlazado a un archivo CSS
estilo.css
body {
font-family: Arial;
font-size: 14px;
color: yellow;
background-color: black;}
h1 {
color: red;
font-family: Impact;
font-size:20px;}
El uso de hojas externas de estilo nos va dar flexibilidad para dar mantenimiento a nuestro sitio.
Permite que diferentes páginas html usen las mismas reglas en vez de repetirlas por cada página.
