06 que son las hojas de estilo
18
CSS: qué son las hojas de estilo en cascada CONFECCION Y PUBLICACION DE PAGINAS WEB
-
Upload
fernando-salinas -
Category
Documents
-
view
216 -
download
2
description
Confección y publicación de páginas web: introducción a las hojas de estilo.
Transcript of 06 que son las hojas de estilo
CSS: qué son las hojas de estilo en cascada
CONFECCION Y PUBLICACION DE PAGINAS WEB
CSS
• Cascade Style Sheet (hojas de estilo en cascada).
• Permite controlar la apariencia de una página web.
• Describe cómo los elementos dispuestos en la página son presentados al usuario.
• Podemos especificar tamaño, fuentes, color, espaciado entre textos o recuadros, así como la disposición de texto e imágenes en la página.
Especificaciones
• El lenguaje de las Hojas de Estilo está definido en la Especificaciones CSS1, CSS2 y CSS3 del World Wide Web Consortium (W3C).
• Es un estándar aceptado por toda la industria relacionada con la Web o, por lo menos, por gran parte de los navegadores.
• Podemos asociar las reglas de estilo a las marcas HTML de tres maneras: – directamente a la marca. – en el head de la página. – en un archivo independiente.
Definición de estilos en marcas HTML
• Se define en la propiedad style, dentro del HTML.
• El estilo se aplica únicamente a la marca donde indicamos la propiedad.
• Es la forma más fácil pero menos recomendada.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Este mensaje es de color
rojo sobre fondo
amarillo.</h1>
<h1> Y este, también.</h1>
</body>
</html>
Definición de estilos a nivel de página
• Se definen los estilos en una sección del head de la página HTML.
• Se aplica a todas las marcas iguales de la página.
<!DOCTYPE html>
<html>
<head>
<style type="text/css“>
h1 {color:#ff0000;
background-color:#ffff00}
</style>
</head>
<body>
<h1 style=“color:#ff0000;
background-color:#ffff00">
Este mensaje es de color rojo
sobre fondo amarillo.</h1>
<h1> Este también.</h1>
</body>
</html>
Definición de estilos en un archivo externo
• Definición de los estilos en un archivo separado con extensión CSS.
• Podremos aplicar las mismas reglas a cualquier página de nuestro sitio web.
• El código resulta así más limpio y ordenado.
<!DOCTYPE html>
<html>
<head>
<link rel="StyleSheet"
href="estilos.css"
type="text/css">
</head>
<body>
<h1>Definición de hojas de
estilo en un archivo
externo.</h1>
</body>
</html> h1 {
color:#0000cc;
font-family:times;
font-size:25px;
text-align:center;
}
Definición de varias reglas para una misma marca HTML
• En algunas circunstancias, es necesario desglosar propiedades en distintas reglas.
– Podemos indicar un conjunto de marcas HTML con una serie de propiedades de estilo comunes.
– Luego, agregamos de forma individual las propiedades no comunes.
<style type="text/css">
h1,h2,h3,h4,h5,h6
{ font-family:Verdana; }
h1 { font-size:40px; }
h2 { font-size:30px; }
h3 { font-size:25px; }
h4 { font-size:20px; }
h5 { font-size:15px; }
h6 { font-size:10px; }
</style>
Definición de estilos por clases
• En muchas situaciones una regla de estilo puede ser igual para un conjunto de marcas HTML.
• En esos casos conviene plantear una regla de estilo con un nombre genérico que, posteriormente, se puede aplicar a varias marcas.
<h1 class=“destaca">
Titulo 1 resaltado
</h1>
<p> Fragmento de párrafo
<span
slass=“destaca">resaltado
</span>
</p>
.destaca
{
color:#000000;
background-
color:#ffff00;
font-style:italic;
}
Definición de estilos por pseudoclases
• Clases especiales referidas a algunos estados del elemento HTML.
• Se aplican fundamentalmente a la marca <a>: – Link
– Visited
– Hover
– Active
a:link {
background-color:#00ff00;
color:#ff0000; }
a:visited {
background-color:#000000;
color:#ffffff; }
a:hover {
background-color:#ff00ff;
color:#fffff; }
a:active {
background-color:#ff0000;
color:#ffff00; }
Definición de estilos por Id
• Los Id que se definen en una página deben ser únicos.
• Podremos aplicar dicho estilo solo a una marca dentro de la página HTML.
<div id="cabecera">
<h1>
Título de la cabecera
</h1>
<p>
Texto de la cabecera
</p>
</div>
#cabecera
{
font-family:Times;
font-size:30px;
text-align:center;
color:#0000ff;
}
Propiedades de las fuentes
• font-family
• font-size
• font-style
• font-variant
• font-weight
<style type="text/css">
h1
{
font-family:times new
roman;
font-size:30px;
font-style:italic;
font-weight:bold;
}
h2 {
font-family:verdana;
font-size:20px;
}
</style>
Propiedades del texto
• Color
• text-align
• text-decoration
• letter-spacing
• word-spacing
• text-indent
• text-transform
<style type="text/css">
h1
{
color:#ff0000;
text-align:left;
text-
decoration:underline;
letter-spacing:10px;
word-spacing:30px;
text-
transform:capitalize;
}
p { text-indent:20px; }
</style>
El modelo de cajas en CSS
El modelo de cajas en CSS
• Cada caja posee, además de su área de Contenido, otras tres áreas opcionales: – Área de margen (margin) – Área de relleno (padding) – Área de borde (border)
• Cada área, a su vez, puede dividirse en cuatro segmentos según su posición: – Izquierdo (left) – Derecho (right) – Superior (top) – Inferior (bottom)
Propiedades del margen
• Margin
– Margin-top
– Margin-right
– Margin-bottom
– Margin-left
div
{
margin: 10px 5px 20px 0
}
div
{
margin: 10px
}
div
{
margin-top: 10px ;
margin-right: 5px ;
margin-bottom: 20px ;
}
Propiedades del relleno
• Padding
– Padding -top
– Padding -right
– Padding -bottom
– Padding -left
div
{
padding : 0px 5px 10px 0
}
div
{
padding : 10px
}
div
{
padding -top: 10px ;
padding -right: 5px ;
padding -bottom: 20px ;
}
Propiedades del Borde
• border-width – border-top-width – border-right-width – border-bottom-width – border-left-width
• border-style – border-top-style – border-right-style – border-bottom-style – border-left-style
• border-color – border-top-color – border-right-color – border-bottom-color – border-left-color
div
{
border:5px solid red;
}
div
{
border-width:5px:
border-style:solid;
border-color: red;
}
Propiedades del fondo
• background
– background-color
– background-image
– background-repeat
– background-attachment
– background-position
div
{
background:#00ff00
url('smiley.gif')
no-repeat fixed center;
}
![Tema 09 - Hojas de Estilo en Cascada [02-2015]](https://static.fdocuments.ec/doc/165x107/577c84dd1a28abe054baa8e0/tema-09-hojas-de-estilo-en-cascada-02-2015.jpg)
