EJEMPLOS PRÁCTICOS DEL USO DE
LOS ESTILOS CSS EN LAS PÁGINAS WEB
Como
utilizar CSS en el código HTML de las páginas web, para darles más estética y
personalidad, controlar y definir como se representa el texto y los otros
elementos que la componen. Beneficios y ventajas. Códigos de ejemplos para
probar en una página o descargar a tu equipo.
El
estilo CSS no es más que las instrucciones que el navegador web lee antes de referirse
o redireccionar una página, para saber la disposición que deben tener todos los
elementos que la componen.
Se componen de una serie de comandos con distintos valores, que se encuentran
en el área del encabezado de una página o en un archivo externo vinculado a la
misma.
Este archivo es un simple documento de texto con la extensión .CSS.
En dicho archivo se establece la posición de los elementos, el espaciado, color
y tamaño del texto, tipo de fuente, etc.
La gran ventaja de utilizar CSS es que puedes insertar objetos sencillos, animaciones,
efectos que te pueden servir de adorno y ser
útiles al mismo tiempo, también cambiar y modificar a tu gusto el estilo y la forma de tu página utilizando para eso solo texto plano, nada
de imágenes u otros objetos, por lo que la carga de la página se efectuara más
rápido,
además los reproduce cualquier navegador estándar, siempre que sea moderno para
que acepte y sea compatible con las nuevas
especificaciones de CCS3.Es la última especificación
de CSS, aporta muchas nuevas funciones Además con CSS
Aqui vas a encontrar un manual basico que te explicara su uso.
No es necesaria la instalación de plugins adicionales que casi siempre causan rechazo en el usuario.
Resaltar palabras y cuadro de dialogo:
EN EL BODY:
<a class="tooltip">AQUI VA PALABRA
A RESALTAR<b><em></em>
Insertar
en el HEAD
<style
type="text/css">
a.tooltip
{color:#c00;}
a.tooltip
b {display:none;}
a.tooltip
{background:#7CFC00; color:#000; text-decoration:none;}
a.tooltip:hover
{border:0; position:relative; z-index:500; text-decoration:none;}
a.tooltip:hover
b {display:block; position:absolute; top:20px; left:-25px; padding:5px;
font-weight:normal; color:#000; border:1px solid #888; background:#ffc;
width:150px;}
a.tooltip:hover
b em {position:absolute; left:20px; top:-6px; width:11px; height:6px;
background:#fff url(tooltip.gif) 0 0; display:block; font-size:1px;}
.clear {clear:both;}
</style>
Puedes ir cambiando los valores de los colores
¿Cómo y dónde utilizar el código CSS?
Mediante CSS podemos lograr que una página web se muestre con el estilo visual
que nos interese, podemos hacer que cada elemento de la página se represente en
el navegador exactamente como estimemos, ya sea el orden, la posición, colores,
etc. del texto el fondo las imágenes, o cualquier otro elemento que forme parte
de la página.
Cada página web viene con su estilo definido mediante CSS, si no se encuentran
el navegador utiliza una configuración estándar predefinida.
Los métodos usados habitualmente son tres:
1-
Mediante
un archivo externo, un archivo de texto de extensión: css el cual se vincula a
la página con un código en el área del head para lograr que esté completamente
cargado en la memoria antes que el resto de la página.
La referencia se logra mediante la siguiente línea:
<link
rel="stylesheet" media="all" type="text/css"
href="ruta del archivo.css" />
2- Incluyendo directamente el código css en la
página, de forma similar al anterior se debe insertar en el área del head de la
siguiente forma:
<style type="text/css" media="screen"> CODIGO
CSS< /style>
3- Insertando el código en una etiqueta style
directamente en los bloques o contenedores div que contienen el texto, imagen u
otro objeto, por ejemplo:
<div
style="ESTILO">texto</div>< img style="ESTILO"
/>
• El
primer método, un archivo css externo, se utiliza cuando es mucha la cantidad
del código necesario, que en caso de insertarlos directamente en el codigo
fuente HTML lo recarguen considerablemente.
Es muy utilizado cuando el mismo código se utiliza en varias páginas, en ese
caso nos brinda el beneficio adicional de que se carga una sola vez el archivo
css y permanece a partir de ese instante en la cache del navegador con el
incremento del rendimiento que trae consigo.
• Las ventajas del segundo y tercer método es que no se necesita la carga de
ningún archivo externo, se utilizan cuando es mínima la cantidad de código o
cuando se necesita en páginas aisladas.
• El tercer método es el ideal en pequeños bloques o áreas.
Ejemplos de cómo modificar el estilo del texto con CSS
1- Cambiar el estilo de solo una palabra (ejemplo) en una línea de texto, para
eso utilizaremos los siguientes estilos:
color:red; fuente de color rojo
font-family:trebuchet; el tipo de fuente
font-size:22px; tamaño de la fuente
Unimos todo en una sola línea y lo insertamos en la etiqueta style,
quedará así:
< p>Esto es solo un
<span style="color:red;font-family:trebuchet;Font-size:22px;">ejemplo</span>
del uso de los css</p>
Se mostrará en la pagina de
la siguiente forma:
Esto es solo un ejemplo del uso de
los css.
2- Ejemplos del código utilizado en algunas porciones del texto que
aparece al comienzo de esta página.
La gran ventaja de utilizar
<span
style="color:#ffd700;font-weight:bold;font-size:40px;">CSS</span>
es que puedes <span style="color:#00c;font-style:italic;font-size:20px;">insertar
objetos sencillos</span> nada de <span
style="color:#00c;text-decoration:line-through;font-weight:bold;font-size:20px;">imágenes
u otros objetos</span>
