Implementacion de Estilos Para el Proyecto 4 (PaginaCliente)

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.

Esto lo hice usando CSS palabra esta resaltada mediante el uso de CSS, como? Aquí esta el codigo

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>