NorfiPC
NorfiPC » Diseño Web » Usar estilos CSS

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 mas 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.
Ejemplos prácticos del uso del estilo CSS en las páginas web El estilo CSS no son más que las instrucciones que el navegador web lee antes de renderizar 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.



Ventajas de utilizar CSS en las páginas web


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 pagina utilizando para eso solo texto plano, nada de imágenes u otros objetos, por lo que la carga de la pagina se efectuara mas 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 ultima especificacion de CSS, aporta muchas nuevas funciones Además con CSSAqui vas a encontrar un manual basico que te explicara su uso. no es necesario la instalación de plugins adicionales que casi siempre causan rechazo en el usuario.
EstaEsto lo hice usando CSS palabra esta resaltada mediante el uso de CSS, como?Aqui esta el codigo Se adjuntan varios ejemplos, puedes descargar un archivo que contiene el código con la explicación necesaria para incorporarlo a tu página. Todos estos objetos se visualizan también offline, es decir si el usuario descarga tu página los relojes se sincronizarán al tiempo de su PC.
Aquí el código.



¿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 navegadorcon 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>
Se mostrará:
La gran ventaja de utilizar CSS es que puedes insertar objetos sencillos nada de imágenes u otros objetos



Ejemplos prácticos del uso de CSS para mostrar imágenes y animaciones


Caja de Alerta


Alerta que funciona de tan solo pasar en boton por encima aunque tu navegador tenga deshabilitado los indeseables pop-up.
Un Pop-up!!   ALERTA ! X
POP-UP
hecho facilmente usando solo CSS.
Aquí el código.

Ampliador de Imagenes



Esto es un pequeño magnificador de fotos. Si vas deslizando suavemente tu mouse empezando desde arriba veras como va aumentando gradualmente la imágen.
Aquí el código.



Otro Ampliador de Imagen con un Punto de Mira


Hermoso magnificador de fotos, muy util para aprovechar el espacio en nuestra página.


Aquí el código.

Contador Digital


Este es el tiempo que has gastado en esta página.

minutos

segundos

(Solo funciona en Safari y Google Chrome)
Aquí el código.

Reloj Analogico


Sencillo reloj que puedes añadir a tu pagina, tiene un estilo elegante y no te consumira ningun recurso.
(Solo funciona en Safari y Google Chrome)
Aquí el código.

Los códigos de los ejemplos del uso de CSS para mostrar imágenes y animaciones, han sido tomados del sitio de Stuart Nicholls en: www.cssplay.co.uk
Es un maravilloso almacén de páginas que sirven de demostración de las posibilidades que brinda CSS para controlar el estilo de las páginas.
Si te has sentido interesado por los ejemplos, no dejes de visitar este sitio.



Usar estilos CSS en las páginas web

¿Dónde aprender más sobre los estilos CSS?


Esta página solo contiene algunos ejemplos prácticos y alguna noción de cómo utilizarlos.
Si te sientes animado y quieres conocer más, en otra página de este sitio, encontrarás un completo manual con los principales elementos necesarios, para utilizar los estilos CSS para personalizar completamente tu página.
Tutorial y manual básico del uso de los estilos CSS en las páginas web



Modificar los estilos CSS usando Javascript


Otra opción es modificar el estilo de cualquier página desde eventos en el navegador, como son los botones, casillas o un simple clic.
Esto se puede realizar utilizando Javascript, no es difícil, lee como hacerlo en la siguiente página: Como cambiar y modificar el estilo CSS de las páginas web con Javascript

Páginas relacionadas