- Evitar crear código basura (generar mas lineas de las necesarias).
- Ahorra tiempo (disminuye el tiempo de creación).
- Son herramientas que se utilizan para establecer el formato.
Ejemplo:
Este es el código de mi imagen principal:
<html>
<head> <title> Pagina Principal </title>
<link rel="stylesheet" type="text/css" href="formato.css"
</head>
<body >
<p class="parrafo"> Buen Inicio de Semana </p>
<hr class="parrafo">
<h1 class="parrafo1"> Lecciones de CSS</h1>
<br>
<a class="parrafo2" href="http://www.yahoo.com"> link </a>
<br>
<p class="caja"> Majeno de cajas </p>
<br>
<p class="caja"> Otro texto de cajas </p>
</body>
</html>
Este es el código de mi hoja de estilo:
/*Hoja de Estilo
Autor:Mariana
Fecha: 27-05-2013*/
.parrafo{ color:blue;
font-family:Verdana,Arial,Helvetica,sans-serit;
font-size:48pt;
font-weight: bold;
}
.parrafo1{
font-style:Italic;
background-color:red;
line-height:2em;
text-align:left;
text-decoration:overline;
text-transform:capitalize;
text-indent:1in;
letter-spacing:5px;
word-spacing:3em;
}
.parrafo2{
text-color:purple;
background-color:pink;
letter-spacing:2em;
}
a:hover{
background-color:orange;
color:black;
font-size:1.5em;
}
.caja{
width:200px;
height:300px;
background-color:silver;
margin-bottom:3em;
margin-top:3em;
background-image:url("imagenes/IMG_0029.jpg");
}
¿Que genera el código?
Se crea la hoja de estilo, hay se escriben los estilos que tendrán nuestros diversos formatos como:
- p = (párrafo) lo que hice solo fue editarlo para que al llamarlo este apareciera como mi edición.
- body = (cuerpo) lo que hice solo fue editarlo para que al llamarlo este apareciera como estoy declarando en mi hoja de estilo.
¿Como llamar a mi nuevo formato?
En el cuerpo de tu hoja principal o pagina web solo lo mandas a traer de la siguiente manera:
<p class="parrafo"> Buen Inicio de Semana </p>
- Abrir la etiqueta que se esta editando y colocar la clase y el nombre de esta despues ciera la etiqueta.
- Automáticamente va a la hoja de estilo y la caja, este debe tener el mismo nombre y debe ser para esa etiqueta:
.parrafo2{
text-color:purple;
background-color:pink;
letter-spacing:2em;
}
Nos aparecerá como resultado:
El resultado depende del código.
No hay comentarios:
Publicar un comentario