.::MGUSTA.COM::. Hojas de estilo - Ejemplos hojas de estilo css

Hojas de estilos. Te ofrecemos ayuda para que aprendas a crear hojas de estilo css o tambien llamadas hojas de estilo en cascada. Cambiar de color las barras de scroll, como quitar el subrayado de los links, tutorial y manual de ayuda con las hojas de estilos. Si no encuentras lo que estabas buscando accede a nuestro foro, realiza tu pregunta y en breve te responderemos y publicaremos el articulo.


Cambiar de color las barras de scroll	Hojas de estilos en cascada
Quitar el subrayado de los links

Cambiar de color las barras de scroll

Mediante este ejemplo podemos personalizar el color de las barras de scroll para que se adapten perfectamente al diseño de tu web. Como puedes ver, en mgusta.com se han utilizado colores con tonos azules en la barra. Para personalizar la barra de scrolling hay que hacer lo siguiente:

Ubicamos el siguiente código dentro de la página en la que queramos cambiar el color de las barras de scroll, o bien dentro de una hoja de estilos.

Personalizamos los colores para adaptarlos a nuestra web. A continuación te explicamos a qué corresponde cada variable:

face: color del primer plano
shadow: color de la sombra del fondo
highlight: color de la luz del cuadro de flecha
3dlight: color de la luz 3d
dark-shadow: color sombra del primer plano
track: color del fondo de la barra
arrow: color de la flecha
base: color base

Hojas de estilo en cascada

Sobre este tema se han publicado extensos manuales. Lo que aquí se va a explicar es lo básico y práctico. Mediante las hojas de estilo podemos diseñar una serie de estilos para luego ser aplicados a una página. Podemos modificar las etiquetas tags, o crear nuevos estilos.

DEFINIR UN ESTILO
<style type="text/css">
selector1,selector2{propiedad1:valor1;propiedad2:valor2}
</style>

Por ejemplo para cambiar a negrita los hipervínculos no visitados (A:link) y en amarillo los visitados (A:visited):
<style type="text/css">
A:link,A:visited{font-style:bold;color:yellow}
</style>

REDEFINIR LAS ETIQUETAS TAGS
En este ejemplo redefinimos la etiqueta H1 para que cada vez que la usemos aplique el estilo que nosotros queramos. Por ejemplo en color naranja y en cursiva.
<style type="text/css">
H1{color:orange;font-style:italic}
</style>

ESTILOS QUE SOLO SE APLICAN A UN PÁRRAFO
En este caso se aplica a un párrafo un texto en azul, resaltado y en negrita:
<p style="color:blue;background:lightblue;font-weight:bold">
Aca va un parrafo en azul, resaltado y en negrita
</p>

CLASES DE ESTILOS PROPIOS
Podemos crear estilos propios dándole el nombre que nosotros queramos para aplicarlo en una etiqueta. El nombre del estilo siempre debe comenzar con un punto:
<stile type="text/css">
.texto{font-face:arial;color:#ffffff;font-style:bold;background:#000000}
</style>

Una vez creado el estilo lo tenemos que aplicar. En el ejemplo lo aplicamos dentro de la etiqueta body:
<body class="texto">
<p>Este texto utiliza la letra Arial</p>
</body>

CREAR ESTILOS EN UNA HOJA EXTERNA
Es posible crear una sola hoja de estilos CSS global y guardarla en un archivo con extensión CSS para que podamos vincular las páginas que queramos de nuestro sitio. Para crearla podemos utilizar cualquier programa que trabaje con texto sin formato, como el Block de notas o NotePad, y al momento de guardar, escribir el nombre de la siguiente manera: "estilos.css". De esta forma, al poner las comillas, el archivo se guardará con la extensión css (de otro modo se guardaría como txt).
El archivo estilos.css debemos empezarlo con la etiqueta <style> y terminarlo con </style> y entre estas etiquetas aplicamos, como se ha explicado anteriormente, el estilo que nosotros queramos.

APLICAR ESTILOS DE UNA HOJA EXTERNA
Una vez hayamos creado el archivo con extensión CSS, por ejemplo estilos.css, necesitamos aplicarlo a nuestra página. Para ello escribimos lo siguiente dentro de la sección HEAD:
<link rel="stylesheet" type="text/css" href="estilos.css">
Debemos indicar en href la ruta donde hayamos guardado el estilo. Todas las páginas que tengan en el HEAD ese vínculo se les aplicará el estilo que nosotros hayamos predefinido en estilos.css.

Quitar el subrayado de los links

Para quitar el subrayado de los links basta con aplicar un estilo sobre la etiqueta <a> que es con la que se hace el link. Copiamos el siguiente código entre <head> y </head>:

Si por ejemplo, además de quitar el subrayado quisiéramos cambiar de color los links para que en lugar de azules fueran rojos y en negrita, pues podemos añadirle más características a la etiqueta <a>: