DESARROLLADOR
Como usar CSS - Parte IPor Ronald Flores
En este artículo discutiremos cómo utilizar CSS en nuestras páginas y algunos ejemplos para dar formato sencillo a nuestro web.
CSS proviene del término "Cascading Style Sheet" y es un método muy eficiente para dar formato a nuestro diseño. Como sabemos, si queremos formatear alguna parte de nuestra página es necesario entrar un código parecido al siguiente:
<font size="1">Texto Pequeño</font>
Lo que resulta en lo siguiente:
Texto Pequeño
No obstante, si queremos repetir el mismo formato a través de toda una página, tenemos la dificultad que tenemos que incluir el mismo formato en todo el código. Al utilizar CSS, tenemos la ventaja que podemos definir cada formato o cada sección de la página en un sólo lugar, sin la necesidad de repetir el código una y otra vez, efectivamente reduciendo el tamaño de la página.
Veamos un ejemplo. Supongamos que en nuestra página queremos que los tags H1 y H2 tengan un formato específico. Para lograr esto, definimos un <style> tag dentro del tag HEAD de nuestra página:
<head>
<style>
h1 {
font-size: 24px;
color: #C00000;
}
h2 {
font-size: 18px;
color: #808080;
}
</style>
</head>
En el pasado código, establecimos que cada H1 y H2 tag serín formateados de la manera especificada. Luego, dentro de nuestras páginas, simplemente utilizamos los tags H1 y H2 para llamar el formato:
<h1>Titulo 1</h1>
<h2>Subtítulo 2</h2>
Es importante ver que cada vez que invoquemos cada tag definido, el navegador automáticamente dará ese formato a el contenido dentro del tag. De esta manera se pueden definir otros tipos de formatos y no está limitado a los tags regulares. De esta manera, existen un infinito de clases que podemos definir en nuestras páginas:
<head>
<style>
.mitexto {
font-size: 11px;
color: #E9E9E9;
}
</style>
</head>
De esta manera, definimos la clase "mitexto". Fíjese que para definir clases personalizadas, es necesario utilizar un punto a la izquierda del nombre de la clase, de lo contrario el navegador pensará que se trata de un tag regular pero el tag <mitexto> no existe, por lo que no se realizará ningún formato.
Para llamar la clase dentro de nuestro diseño, utilizamos el siguiente formato:
<font class="mitexto">Este es mi texto en formato 11px tal como definido en el STYLE tag.</font>
Este artículo ha sido visto 703 veces.
Más artículos y Noticias
|
