Si aún no conoces las hojas de estilo CSS, no lo dudes más y léete esta entrada de iniciación a esta magnífica forma de dar vida a tus textos HTML.
Después de corregir cierto artículo, voy a dar por olvidado el percance y voy a seguir con mi vida
Tutorial Hojas de estilo CSS
Dicha esta aclaración que bien poco tiene que ver con el tema, continuemos. ¿Eres de los que conoce HTML pero no conoce CSS? Si eres de estos, seguro que alguna vez has intentado ver el código fuente de alguna web y en vez de toparte con los clásicos "<font>" te has encontrado con un desconocido <span style="color: red; ">. Eso no es, ni más ni menos, que CSS.
Para empezar, CSS es una forma de dar formato, no es un lenguaje de programación (como JavaScript) ni de marcado (como HTML); de hecho, ni tan siquiera sé cómo definirlo.
Y entonces, ¿cómo coño lo voy a aprender, subnormal?
¡Eh! ¡Sin insultar! Pues muy fácil, con ejemplos y explicaciones simples.
Empecemos con el tag <span>, es un tag que sirve para dar formato al texto a través de su propiedad style (aunque esa propiedad se puede aplicar a cualquier tag realmente). Dentro del atributo style, se encuentra siempre esto:
nombredepropiedadCSS: valordepropiedadCSS; otronombredepropiedadCSS: otrovalordepropiedadCSS;
¿Cuántas propiedades hay? Pues muchas, muchísimas. Pero eso no es problema. Poca gente se conoce todas las propiedades de memoria y tú no tienes por qué destacar. Pero si te diré las más simples: color, font-size, text-align y text-decoration. Hay muchísimas más, pero esto pretende ser un manual de iniciación:
- color: #ff0000; //mostraría el texto en color rojo
- font-size: 14px; //mostraría la fuente en tamaño de 14 pixeles
- font-size: 80%; //mostraría la fuente en un tamaño del 80% del normal
- text-align: center; //mostraría el texto alineado al centro
- text-decoration: underline; //mostraría el texto subrayado
- text-decoration: none; //mostraría el texto sin subrayar, aunque fuera un enlace
<span style="color: #55ffaa;">Hola mundo, <span style="text-decoration: underline;">este es mi primer párrafo</span> formateado con <span style="font-size: 120%;">tags sobre CSS</span></span>.
Y el resultado sería este:
Hola mundo, este es mi primer párrafo formateado con tags sobre CSS.
No voy a explicar este ejemplo, que tenemos poco espacio en el artículo. Creo que el significado de todo es obvio, ¿no? Bueno, continuemos.
También podemos hacer un apartado único sobre CSS (recomendablemente en el <head>), para indicar como debe aparecer cada etiqueta:
<html><head>
<style>
body {
text-align: right;
}
a {
color: #00ffff;
text-decoration: none;
font-style: italic;
}
b {
font-size: 15px;
}
</style>
</head><body>
Este párrafo ahora queda mucho mejor, después de haber seguido los consejos de <a href="http://demondary.blogspot.com">demondary.blogspot.com</a> sobre <b>las hojas de estilo CSS</b></span>
</body></html>
Aquí tenemos una forma un poco más avanzada de aplicar las hojas de estilo de CSS. Pero no hay más que ver el resultado para saber como queda:
Este párrafo ahora queda mucho mejor, después de haber seguido los consejos de demondary.blogspot.com sobre las hojas de estilo CSS
¿Ves? Es muy simple, en vez de insertar en un <span style=""> los datos de CSS, están declarados en un tag propio en la cabecera. De esta forma, por ejemplo, el atributo BODY (que hace referencia a todo el cuerpo del texto) da el formato a todo, luego, la descripción del tag A, hace que sólo los enlaces aparezcan de esa forma y después el de B hace que las negritas aparezcan, además, más grandes.Con esto, y si lo has comprendido todo más o menos bien, sabes y comprendes lo suficiente para poder buscar el resto de propiedades (que son muchas) y poder ir haciendo tus pruebas con el bloc de notas.
0 comentarios:
Publicar un comentario en la entrada