Css Básico, Introducción al css
Escrito por Administrator   
Viernes, 03 de Septiembre de 2010 13:37

CSS BASICO

CSS es el acrónimo de: "Cascading Style Sheets". CSS es una extensión de HTML básico que le permite dar un estilo común a sus páginas web. Un ejemplo de un cambio de estilo
sería escribir palabras en negrita. En HTML estándar que se utiliza la etiqueta <b> de este modo:
<b>palabra en negrita</b>
Esto funciona bien y no hay nada de malo, sólo que ahora si usted quiere, por ejemplo, cambiar todo el texto que inicialmente había destacado en negrita, tiene que ir
a cada lugar en cada página y cambiar la etiqueta.
Otra desventaja podemos verla en este ejemplo: si quiere hacer el texto anterior en negrita, que el estilo de fuente sea Verdana y cambiar su color a rojo se
necesitaría una gran cantidad de código  alrededor del texto:
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif"><strong>
This is text
</strong></font>
Todo esto contribuye a hacer un codigo HTML desordenado. Con CSS se puede crear un estilo personalizado en otros lugares y establecer todas sus propiedades, darle un
nombre único y después 'etiqueta' AL código HTML para aplicar estas propiedades de estilo:
<p>My CSS styled text</p>
Y entre el <head> </ head> en la parte superior de su página web que se introduzca el código CSS que define el estilo que acaba de aplicar:
<style type="text/css">
<!--
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
-->
</style>
En el ejemplo anterior se incluye el código de estilo en la propia página. Esto está bien para proyectos más pequeños o en situaciones donde los estilos que está
definiendo sólo serán utilizadas en esa página en concreto. Hay muchas veces cuando se van a necesitar los estilos en muchas o en todas las páginas que es un fastidio tener que copiar y pegar el código CSS  en cada una de las página. Además del hecho de que se le alborote el código fuente con propio código CSS, también se encuentra el tener que editar cada una de estas páginas si quieres hacer un cambio de estilo en ella. Al igual que con el lenguaje Java, puede definir / crear un estilo CSS en un archivo separado y luego vincularlo a la página que desea aplicar el código para:
<link href="/myFirstStyleSheet.css" rel="stylesheet" type="text/css">
EN el código anterior lo que tenemoses el enlace en el código a su hoja de estilos externa llamada "myFirstStyleSheet.css para el documento HTML. Usted  y ha de
colocarlo  entre las etiquetas <head> </ head> en su página web.
Para crear una hoja de estilos externa todo lo que necesita hacer es crear un documento de texto simple (en Windows, simplemente haga clic derecho y elegir nuevo -
documento de texto>) y luego cambiar de un tipo de archivo. Txt a. Css. Usted puede cambiar el tipo de fichero simplemente cambiando la extensión de los nombres de
archivo. El nombre del archivo de extensión en Windows le dice al ordenador qué tipo de fichero, y facilita al equipo determinar cómo manejar el archivo cuando, por
ejemplo, intenta abrirlo o editarlo.
Usted probablemente ha adivinado; los archivos CSS son especificamente los archivos de texto con formato mucho de la misma manera que las páginas HTML. No hay nada
especial o diferente en el propio archivo, sino que es el contenido del archivo que hace que un documento de un arhivo CSS .
Cuando se trabaja con un archivo CSS externo hay un par de puntos para recordar:
1.  NO añadir estas etiquetas del archivo CSS en la página en sí como lo haría si el código CSS fuera incrustado en el código HTML:
<style type="text/css"> </style>
Desde el enlace en su página webt que linkea a la página de CSS para la página HTML se le indica que está vinculando a una página de CSS, no es necesario que declare
que el código de la página es CSS. Eso es lo que hacen las etiquetas anteriores. En su lugar usted acaba de agregar el código CSS directamente a la página:
. MyNewStyle (
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: # FF0000;
)
. My2ndNewStyle (
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: # FF0000;
)
. My3rdNewStyle (
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: # FF0000;
)
En el ejemplo anterior he creado una serie de clases CSS que se pueden aplicar a cualquier etiqueta HTML de este modo:
<p> Mi <texto con estilo CSS / p>
o
<h2> Mi texto con estilo CSS </ h2>
Usted se dará cuenta de que en el ejemplo anterior he aplicado un estilo CSS a una etiqueta <h2>. Esta etiqueta define el tamaño del texto que envuelve a un tamaño que
está preestablecido en el navegador (ejemplo: 10 píxeles). Cuando se aplica una clase CSS a la misma, el código CSS anula el tamaño predeterminado que normalmente se
obtiene con una etiqueta <h2> a favor del tamaño especificado en la clase CSS. Así que ahora usted puede ver que con el CSS se puede reemplazar el comportamiento
predeterminado de la etiqueta de HTML.
En los ejemplos anteriores, tengo el código CSS donde defino mis clases CSS y luego "aplicar" a varios elementos en la página. Otra forma de aplicar CSS es redefinir
una etiqueta HTML a nivel global para buscar una determinada manera:
h1 (font-family: Garamond, "Times New Roman", serif; font-size: 200%;)
Lo que el código CSS hace es establecer el estilo de fuente y el tamaño de todas las etiquetas <h1> en una sola toma. Ahora usted no tiene que aplicar una clase CSS
como lo hicimos antes de cualquier etiqueta <h1> ya que son automáticamente todos los afectados por las reglas de estilo CSS.
He aquí otro ejemplo en el que ampliamos los margenes de la página:
body (margin-left: 15%; margin-right: 15%;)
Como puede ver, se puede redefinir cualquier tag y cambiar la forma en que parece! Esto puede ser muy poderoso:
div (
de fondo: rgb (204,204,255);
padding: 0.5em;
border: 1px solid # 000000;
)
Situado en el código anterior, cualquier <div> / div> ahora tendrá un color de fondo de 'rgb (204,204,255) y tienen un relleno de 0.5em y un delgado borde de 1 píxel
que es negro sólido.
Hay que explicar algunas cosas del ejemplo anterior:
El color en CSS se puede expresar de varias maneras:
1. En Hex -> Por ejemplo: # 000000 - esto es negro y este FF0000: # es de color rojo.
2. En RGB - RGB> (204 204 255) es de color azul-púrpura.
3. Con los colores con nombre como: "rojo" o "azul"
Se suele utilizar el color hexadecimal pero usted puede usar el formato que le apetezca para definir el color en el CSS. Así que el último ejemplo se puede reescribir
así:
div (
backgroud: green;
padding: 0.5em;
border: 1px solid # FF0000;
)
Así que en lugar de 'rgb (204,204,255), se acaba de especificarcomo color "verde".
Mediante el uso de RGB (RGB es el acrónimo de: «Rojo Verde Azul ' "Red Green Blue") y el color hexadecimal, usted realmente puede conseguir el color exacto que desea
fácilmente cuando  conoce sus claves. Por suerte, muchos programas (como Dreamweaver) proporcionan un sencillo selector de color por si lo necesita
En este último ejemplo mostraré el 'código super cool' de CSS que te permite crear un link que cambie de color:
: Link (color: rgb (0, 0, 153)) / * para los enlaces no visitados * /
: Visited (color: rgb (153, 0, 153)) / * para los enlaces visitados * /
: Hover (color: rgb (0, 96, 255)) / * cuando el ratón está sobre enlace * /
: Active (color: rgb (255, 0, 102)) / * cuando se hace clic en enlace * /
El CSS anterior hará que su vínculo con el cambio de color cuando alguien pase el puntero del ratón sobre él, rollovers instantánea sin imágenes! Una nota importante
con el código anterior es que es importante que las declaraciones de estilo están en el orden correcto, de lo contrario puede fallar en algunos navegadores.
El CSS es muy poderoso y le permite hacer cosas que no se puede hacer con el estándar HTML. Cuenta con el apoyo de todos los navegadores modernos y es un deber
aprender a manejar esta herramienta para diseñadores web.
CSS es el acrónimo de: "Cascading Style Sheets". CSS es una extensión de HTML básico que le permite dar un estilo común a sus páginas web. Un ejemplo de un cambio de estilo
sería escribir palabras en negrita. En HTML estándar que se utiliza la etiqueta <b> de este modo:
<b>palabra en negrita</b>
Esto funciona bien y no hay nada de malo, sólo que ahora si usted quiere, por ejemplo, cambiar todo el texto que inicialmente había destacado en negrita, tiene que ir
a cada lugar en cada página y cambiar la etiqueta.
Otra desventaja podemos verla en este ejemplo: si quiere hacer el texto anterior en negrita, que el estilo de fuente sea Verdana y cambiar su color a rojo se
necesitaría una gran cantidad de código  alrededor del texto:
<font color="#FF0000" face="Verdana, Arial, Helvetica, sans-serif"><strong>
This is text
</strong></font>
Todo esto contribuye a hacer un codigo HTML desordenado. Con CSS se puede crear un estilo personalizado en otros lugares y establecer todas sus propiedades, darle un
nombre único y después 'etiqueta' AL código HTML para aplicar estas propiedades de estilo:
<p class="myNewStyle">My CSS styled text</p>
Y entre el <head> </ head> en la parte superior de su página web que se introduzca el código CSS que define el estilo que acaba de aplicar:
<style type="text/css">
<!--
.myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
-->
</style>
En el ejemplo anterior se incluye el código de estilo en la propia página. Esto está bien para proyectos más pequeños o en situaciones donde los estilos que está
definiendo sólo serán utilizadas en esa página en concreto. Hay muchas veces cuando se van a necesitar los estilos en muchas o en todas las páginas que es un fastidio tener que copiar y pegar el código CSS  en cada una de las página. Además del hecho de que se le alborote el código fuente con propio código CSS, también se encuentra el tener que editar cada una de estas páginas si quieres hacer un cambio de estilo en ella. Al igual que con el lenguaje Java, puede definir / crear un estilo CSS en un archivo separado y luego vincularlo a la página que desea aplicar el código para:
<link href="/myFirstStyleSheet.css" rel="stylesheet" type="text/css">
EN el código anterior lo que tenemoses el enlace en el código a su hoja de estilos externa llamada "myFirstStyleSheet.css para el documento HTML. Usted  y ha de
colocarlo  entre las etiquetas <head> </ head> en su página web.
Para crear una hoja de estilos externa todo lo que necesita hacer es crear un documento de texto simple (en Windows, simplemente haga clic derecho y elegir nuevo -documento de texto>) y luego cambiar de un tipo de archivo. Txt a. Css. Usted puede cambiar el tipo de fichero simplemente cambiando la extensión de los nombres de archivo. El nombre del archivo de extensión en Windows le dice al ordenador qué tipo de fichero, y facilita al equipo determinar cómo manejar el archivo cuando, por ejemplo, intenta abrirlo o editarlo.
Usted probablemente lo ha adivinado; los archivos CSS son especificamente los archivos de texto con formato de la misma manera que las páginas HTML. No hay nada
especial o diferente en el propio archivo, sino que es el contenido del archivo que hace que un documento de un arhivo CSS .
Cuando se trabaja con un archivo CSS externo hay un par de puntos para recordar:
1.  NO añadir estas etiquetas del archivo CSS en la página en sí como lo haría si el código CSS fuera incrustado en el código HTML:
<style type="text/css"> </style>
Desde el enlace en su página webt que linkea a la página de CSS para la página HTML se le indica que está vinculando a una página de CSS, no es necesario que declare que el código de la página es CSS. Eso es lo que hacen las etiquetas anteriores. En su lugar usted acaba de agregar el código CSS directamente a la página:
. MyNewStyle (
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: # FF0000;
)
. My2ndNewStyle (
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: # FF0000;
)
. My3rdNewStyle (
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: # FF0000;
)
En el ejemplo anterior he creado una serie de clases CSS que se pueden aplicar a cualquier etiqueta HTML de este modo:
<p class="myNewStyle"> Mi <texto con estilo CSS / p>
o
<h2 class="my3rdNewStyle"> Mi texto con estilo CSS </ h2>
Usted se dará cuenta de que en el ejemplo anterior he aplicado un estilo CSS a una etiqueta <h2>. Esta etiqueta define el tamaño del texto que envuelve a un tamaño que
está preestablecido en el navegador (ejemplo: 10 píxeles). Cuando se aplica una clase CSS a la misma, el código CSS anula el tamaño predeterminado que normalmente se
obtiene con una etiqueta <h2> a favor del tamaño especificado en la clase CSS. Así que ahora usted puede ver que con el CSS se puede reemplazar el comportamiento
predeterminado de la etiqueta de HTML.
En los ejemplos anteriores, tengo el código CSS donde defino mis clases CSS y luego "aplicar" a varios elementos en la página. Otra forma de aplicar CSS es redefinir
una etiqueta HTML a nivel global para buscar una determinada manera:
h1 (font-family: Garamond, "Times New Roman", serif; font-size: 200%;)
Lo que el código CSS hace es establecer el estilo de fuente y el tamaño de todas las etiquetas <h1> en una sola toma. Ahora usted no tiene que aplicar una clase CSS
como lo hicimos antes de cualquier etiqueta <h1> ya que son automáticamente todos los afectados por las reglas de estilo CSS.
He aquí otro ejemplo en el que ampliamos los margenes de la página:
body (margin-left: 15%; margin-right: 15%;)
Como puede ver, se puede redefinir cualquier tag y cambiar la forma en que parece, Esto puede ser muy poderoso para su uso en la web.
div (
background: rgb (204,204,255);
padding: 0.5em;
border: 1px solid # 000000;
)
Situado en el código anterior, cualquier <div> / div> ahora tendrá un color de fondo de 'rgb (204,204,255) y tienen un relleno de 0.5em y un delgado borde de 1 píxel
que es negro sólido.
Hay que explicar algunas cosas del ejemplo anterior:
El color en CSS se puede expresar de varias maneras:
1. En Hex -> Por ejemplo: # 000000 - esto es negro y este FF0000: # es de color rojo.
2. En RGB - RGB> (204 204 255) es de color azul-púrpura.
3. Con los colores con nombre como: "rojo" o "azul"
Se suele utilizar el color hexadecimal pero usted puede usar el formato que le apetezca para definir el color en el CSS. Así que el último ejemplo se puede reescribir así:
div (
backgroud: green;
padding: 0.5em;
border: 1px solid # FF0000;
)
Así que en lugar de 'rgb (204,204,255), se acaba de especificar como color "verde".
Mediante el uso de RGB (RGB es el acrónimo de: «Rojo Verde Azul ' "Red Green Blue") y el color hexadecimal, usted realmente puede conseguir el color exacto que desea fácilmente cuando  conoce sus claves. Por suerte, muchos programas (como Dreamweaver) proporcionan un sencillo selector de color por si lo necesita.
En este último ejemplo mostraré el 'código super cool' de CSS que te permite crear un link que cambie de color:
: Link (color: rgb (0, 0, 153)) / * para los enlaces no visitados * /
: Visited (color: rgb (153, 0, 153)) / * para los enlaces visitados * /
: Hover (color: rgb (0, 96, 255)) / * cuando el ratón está sobre enlace * /
: Active (color: rgb (255, 0, 102)) / * cuando se hace clic en enlace * /
El CSS anterior hará que su vínculo con el cambio de color cuando alguien pase el puntero del ratón sobre él, rollovers instantánea sin imágenes! Una nota importante con el código anterior es que es importante que las declaraciones de estilo están en el orden correcto, de lo contrario puede fallar en algunos navegadores.
El CSS es muy poderoso y le permite hacer cosas que no se puede hacer con el estándar HTML. Cuenta con el apoyo de todos los navegadores modernos y es un deber aprender a manejar esta herramienta para diseñadores web.
 
Make Text Bigger Make Text Smaller Reset Text Size

Usuarios Online

Tenemos 24 invitados conectado
Titulo Aleatorio