El otro día un colega, me pedía información sobre como cambiar el estilo de unos links cuando estaba aprendiendo HTML. Lo que quiero con esta entrada es dar unas nociones muy básicas sobre el CSS (Cascading Style Sheets), sobre esto hay cientos de libros, además de vídeo tutoriales pero lo que busco es exponer los pasos mas simples.
Las hojas de estilo reciben la extensión .css todo esto esta reglado por el W3C (World Wide Web Consortium). El CSS es un lenguaje usado para definir la presentación de un documento escrito en HTML. Por tanto, conocemos que en HTML se utilizan etiquetas y vamos crear un archivo que se llame ejemplo.html, con una estructura muy simple puede ser esta:
<html>
<head>
<!-- Es el primer elemento que lee el navegador y, por ello, es el mejor lugar para insertar sitaxis script. -->
<tile>Ejemplo</title>
<!--Colocamos el link para la hoja de estilos que crearemos-->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!--Cuerpo del código-->
<h1> <a class="orang" href="#">Enlace para enlazar</a> </h1>
<!--Añadimos un break,como un salto de línea, es el comando de abajo-->
<br/>
</body>
</html>
Una vez que tenemos esto, se puede disponer a darle un estilo que quede bien, por tanto nos podemos crear un archivo tal que styles.css, donde vamos a definir los estilos, por ejemplo el estilo del cuerpo y de la etiqueta h1, tal que así:
body{
font-family: sans-serif;
font-weight: 100;
background: #ccc;
}
h1{
text-align: center;
color: #666;
text-shadow: 0px 2px #fff;
}
Pero claro esto es lo más básico como se haría para solucionar el problema, de darle un estilo a los link, abajo lo vemos:
a{
margin: 1px 0;
float: left;
clear: left;
text-decoration: none; /**Quitamos la barra del link*/
}
.orang{
color: orange; /** Cambiamos a color naranja*/
padding: 0 0 0 18px;
border-bottom: thin dashed; /** Esto nos da el discontinuo*/
}
Como resultado tenemos:
No hay comentarios:
Publicar un comentario