NorfiPC »
Diseño Web »
Usar estilos CSS
Ejemplos prácticos del uso de estilos CSS en las páginas web
Tweet
Como utilizar CSS en el código HTML de las páginas web, para controlar y definir como se representa el texto y los otros elementos que la componen. Beneficios y ventajas. Códigos de ejemplos para descargar.
Los estilos CSS no son más que instrucciones escritas en un archivo de texto y guardados con la extensión .css. En dicho archivo se establece como debe el navegador representar una página web y todos los elementos que la componen, por ejemplo texto, imágenes, flash, formularios, 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.
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.
Como y donde 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:
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:
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:
• 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. 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" />
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í:font-family:trebuchet; el tipo de fuente
font-size:22px; tamaño de la fuente
<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, primero como se muestra y en la siguiente línea el código empleado.
La gran ventaja de utilizar CSS
La gran ventaja de utilizar <span style="color:#ffd700;font-weight:bold;font-size:40px;">CSS</span>es que puedes insertar objetos sencillos
es que puedes <span style="color:#00c;font-style:italic;font-size:20px;">insertar objetos sencillos</span>nada de imágenes u otros objetos
nada de <span style="color:#00c;text-decoration:line-through;font-weight:bold;font-size:20px;">imágenes u otros objetos</span>
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.
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
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.
Aquí el código.
Barra Desplazante
En esta barra puedes escribir el mensaje que quieras e incluir un link, el texto se irá desplazando constantemente.
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.
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.
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.
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:
Páginas relacionadas
◄ Como hacer una página web fácil, para subirla a internet
◄ Como crear una página web de forma sencilla y rápida
◄ Como crear páginas web usando plantillas prediseñadas
◄ Como crear una página web con el estilo de Facebook
◄ Como crear una página web de forma sencilla y rápida
◄ Como crear páginas web usando plantillas prediseñadas
◄ Como crear una página web con el estilo de Facebook
