Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas
domingo, 31 de enero de 2010
domingo, 3 de enero de 2010
CSS-Capitulo 7
A veces querrás aplicar un estilo especial a un elemento concreto o a un grupo concreto de elementos. En esta lección examinaremos cómo usar los atributos
¿Como se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio web? ¿Cómo se pueden agrupar los enlaces en diferentes categorías y dar a cada categoría un estilo especial? Estas dos preguntas son un ejemplo de las preguntas a las que daremos respuesta en esta lección.
Agrupación de elementos con el atributo
Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El código HTML sería el siguiente:
Así pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.
Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo
Intentemos especificar algunas clases en el ejemplo anterior:
A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.
Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase unsando.nombredelaclase en la hoja de estilo del documento.
Identificación de un elemento usando el atributo
Además de agrupar elementos, podrías necesitar identificar un elemento único. Esto se hace con el atributo
Lo que hace especial al atributo
El código anterior podría hacer referencia a encabezados de cualquier documento dividido en capítulos y párrafos. Sería normal asignar un
Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS necesario, se podría hacer así:
Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento específico usando
En la lección siguiente, examinaremos dos elementos HTML muy usados en relación con CSS:
class e id para especificar propiedades para los elementos seleccionados.¿Como se puede dar color a un título concreto de forma diferente a los otros títulos de tu sitio web? ¿Cómo se pueden agrupar los enlaces en diferentes categorías y dar a cada categoría un estilo especial? Estas dos preguntas son un ejemplo de las preguntas a las que daremos respuesta en esta lección.
Agrupación de elementos con el atributo class
Digamos que tenemos dos listas de enlaces con los diferentes tipos de uva usados para el vino tinto y el blanco. El código HTML sería el siguiente:Así pues, queremos que los enlaces relativos al vino blanco sean amarillos, los enlaces relacionados con el vino tinto sean rojos, y el resto de enlaces de la página web sigan siendo azules.
Para lograr esto, dividiremos los enlaces en dos categorías. Esto se hace asignando una clase para cada tipo de enlace, usando el atributo
class.Intentemos especificar algunas clases en el ejemplo anterior:
A partir de aquí, podemos definir propiedades especiales para los enlaces que hacen referencia al vino tinto y al vino blanco, respectivamente.
Como se muestra en el ejemplo, se pueden definir las propiedades para los elementos que pertenecen a una clase unsando.nombredelaclase en la hoja de estilo del documento.
Identificación de un elemento usando el atributo id
Además de agrupar elementos, podrías necesitar identificar un elemento único. Esto se hace con el atributo id.Lo que hace especial al atributo
id es que no pueden existir dos elementos dentro del mismo documento con el mismo id. Cada id tiene que ser único. En cualquier otro caso, se debería usar el atributo class en su lugar. Ahora, examinemos un ejemplo de un posible uso del atributo id:El código anterior podría hacer referencia a encabezados de cualquier documento dividido en capítulos y párrafos. Sería normal asignar un
id a cada capítulo de la siguiente manera:Digamos que el título del capítulo 1.2 tiene que estar en rojo. Usando el código CSS necesario, se podría hacer así:
Como se muestra en el ejemplo anterior, se pueden definir las propiedades de un elemento específico usando
#nombredelidentificador en la hoja de estilo del documento.Resumen
En esta lección hemos aprendido que usando los atributosclass e id podrás especificar propiedades para elementos específicos.En la lección siguiente, examinaremos dos elementos HTML muy usados en relación con CSS:
"span" y "div".
sábado, 2 de enero de 2010
CSS-Capitulo 4
Ahora vamos a aprender como crear enlaces en CSS.La novedad respecto a los enlaces es que CSS te permite definir estas propiedades de forma diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o si el cursor está sobre dicho enlace. Esto permite añadir efectos divertidos y útiles a tu sitio web. Para controlar estos efectos se usan lo que se ha denominado como pseudo-clases.
Veamos un ejemplo. Como ya sabes, los enlaces se especifican en HTML con la etiqueta
Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado. Puedes usar una pseudo-clase para asignar diferentes estilos a los enlaces visitados y no visitados.
Usa
Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y más explicaciones.
Pseudo-clase
La pseudo clase
En el ejemplo de código que sigue, los enlaces no visitados tendrán un color azul claro.
Pseudo-clase
La pseudo clase
Pseudo-clase
La pseudo clase
El código de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo:
Pseudo-clase
La pseudo clase
Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estén en cursiva cuando el cursor pase sobre ellos, el código CSS que utilizaremos será el siguiente:
Estos dos ejemplos dan una idea sobre las posibilidades casi infinitas al combinar diferentes propiedades. Ya puedes ir creando tus propios efectos... ¡inténtalo!
Deberías considerar cuidadosamente la necesidad de quitar el subrayado, pues esto podría disminuir la usabilidad de tu sitio web de forma significativa. La gente está acostumbrada al subrayado azul de los enlaces en las páginas web y saben que pueden hacer clic en ellos. Si cambias el subrayado y el color de los enlaces, existe una buena posibilidad de que los usuarios se confundan y, por lo tanto, no saquen todo el provecho al contenido de tu sitio web.
Dicho esto, es muy sencillo quitar el subrayado de los enlaces. Como recordarás de la lección 5, la propiedad
De forma alternativa, puedes establecer la propiedad
¿Qué es una pseudo-clase?
Una pseudo-clase te permite tener en cuenta diferentes condiciones o eventos al definir una propiedad para una etiqueta HTML.Veamos un ejemplo. Como ya sabes, los enlaces se especifican en HTML con la etiqueta
"a". Por lo tanto, podemos usar a como selector en CSS:Todo enlace tiene diferentes estados. Por ejemplo, visitado o no visitado. Puedes usar una pseudo-clase para asignar diferentes estilos a los enlaces visitados y no visitados.
Usa
a:link y a:visited para enlaces visitados y no visitados, respectivamente. A los enlaces activos se les aplica la pseudo-clase a:active, y a:hover cuando el cursor se coloca o pasa sobre el enlace.Vamos a repasar ahora cada una de las cuatro pseudo-clases con ejemplos y más explicaciones.
Pseudo-clase a:link
La pseudo clase :link se usa para enlaces que dirigen a páginas que el usuario no ha visitado.En el ejemplo de código que sigue, los enlaces no visitados tendrán un color azul claro.
Pseudo-clase a:visited
La pseudo clase :visited se usa para enlaces que dirigen a páginas que el usuario ya ha visitado. Por ejemplo, el código siguiente hará que todos los enlaces visitados sean de color púrpura oscuro:Pseudo-clase a:active:
La pseudo clase :active se usa para enlaces que están activos.El código de este ejemplo hace que el color de fondo para los enlaces activos sea amarillo:
Pseudo-clase a:hover
La pseudo clase a:hover se usa cuando el puntero del ratón pasa por encima de un enlace.Esta pseudo-clase se puede usar para crear efectos interesantes. Por ejemplo, si queremos que nuestros enlaces sean de color naranja y estén en cursiva cuando el cursor pase sobre ellos, el código CSS que utilizaremos será el siguiente:
Ejemplo 1: Efecto cuando el cursor está encima de un enlace
Es bastante popular crear diferentes efectos cuando el cursor está encima de un enlace. Por lo tanto, examinaremos unos cuantos ejemplos más relacionados con la pseudo-clase:hover.Example 1a: Espaciado entre letras
Como recordarás de la lección 5, el espaciado entre los caracteres se puede ajustar usando la propiedadletter-spacing. Esta propiedad se puede aplicar a los enlaces para crear un efecto especial:Ejemplo 1b: MAYÚSCULAS y minúsculas
En la lección 5 examinamos la propiedadtext-transform, que sirve para intercambiar entre letras en mayúscula y minúscula. Esto se puede usar también para crear un determinado efecto en los enlaces:Estos dos ejemplos dan una idea sobre las posibilidades casi infinitas al combinar diferentes propiedades. Ya puedes ir creando tus propios efectos... ¡inténtalo!
Ejemplo 2: Quitar el subrayado de los enlaces
Una pregunta muy recurrente es: ¿cómo quito el subrayado de los enlaces?Deberías considerar cuidadosamente la necesidad de quitar el subrayado, pues esto podría disminuir la usabilidad de tu sitio web de forma significativa. La gente está acostumbrada al subrayado azul de los enlaces en las páginas web y saben que pueden hacer clic en ellos. Si cambias el subrayado y el color de los enlaces, existe una buena posibilidad de que los usuarios se confundan y, por lo tanto, no saquen todo el provecho al contenido de tu sitio web.
Dicho esto, es muy sencillo quitar el subrayado de los enlaces. Como recordarás de la lección 5, la propiedad
text-decoration se puede usar para determinar si el texto aparece subrayado o no. Para quitar el subrayado, establece el valor de text-decoration a none.De forma alternativa, puedes establecer la propiedad
text-decoration junto con otras propiedades para las cuatro pseudo clases.Resumen
En esta lección has aprendido nociones relativas a las pseudo-clases, a la vez que has usado algunas de las propiedades de lecciones anteriores. Esto debería darte una idea de algunas de las posibilidades que ofrece CSS.lunes, 28 de diciembre de 2009
CSS-Capitulo 3
Lección 3: Colores y fondos
En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán las siguientes propiedades CSS:- color
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
Color de primer plano: la propiedad 'color'
La propiedadcolor describe el color de primer plano de un elemento.Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan con color rojo oscuro. Todos los títulos están marcados con el elemento
"h1". El código siguiente establece el color de los elementos "h1" como rojo.Los colores se pueden introducir como valores hexadecimales, como en el ejemplo anterior: "#" "ff0000" ";" o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).
La propiedad 'background-color'
La propiedadbackground-color describe el color de fondo de los elementos.El elemento
"body" contiene todo el contenido de un documento HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento "body".También se pueden aplicar colores de fondo a otros elementos, entre ellos, a los encabezados y al texto. En el ejemplo que sigue se aplicarán diferentes colores a los elementos
"body" y "h1".Fíjate cómo hemos aplicado dos propiedades a
"h1" separándolas por medio de un punto y coma.Imágenes de fondo [background-image]
La propiedad CSSbackground-image se usa para insertar una imagen de fondo.Para el ejemplo de la imagen de fondo, vamos a usar la mariposa que ves más abajo. Puedes descargar la imagen para usarla en tu propio ordenador (haz clic con el botón derecho sobre la imagen y elige "guardar imagen como..."), o bien puedes usar cualquier otra imagen.
imagen1
Para insertar la imagen de la mariposa como imagen de fondo de una página web, aplica sencillamente la propiedad
background-image al elemento "body" y especifica la localización de la imagen.NOTA: Fíjate cómo hemos especificado la localización de la imagen: url("butterfly.gif"). Esto significa que la imagen está en la misma carpeta que la hoja de estilo. También puedes hacer referencia a imágenes en otras carpetas usando url("../imagenes/butterfly.gif") o incluso imágenes de internet si indicas la dirección completa del fichero: url("http://www.html.net/butterfly.gif").
Repetir la imagen de fondo [background-repeat]
En el ejemplo anterior, ¿te fijaste en que, por defecto, la mariposa se repetía tanto en el eje horizontal como en el vertical para ocupar toda la pantalla? La propiedadbackground-repeat controla este comportamiento.La tabla siguiente resume los cuatro valores diferentes para la propiedad
background-repeat.tabla1
Por ejemplo, para evitar que se repita un imagen de fondo, el código que tendríamos que usar sería el siguiente:
Fijar la imagen de fondo [background-attachment]
La propiedadbackground-attachment especifica si una imagen está fija o se desplaza con el elemento contenedor.Una imagen de fondo fija no se moverá con el texto cuando el lector se desplace por la página, mientras que una imagen de fondo no fija se desplazará con el texto de la página web.
La tabla siguiente resume los dos valores posibles para la propiedad
background-attachment. Haz clic en los ejemplos para ver la diferencia entre la imagen fija y la imagen que se desplaza.tabla2
Por ejemplo, el siguiente código fijará la imagen de fondo.
codigo5
Ubicación de la imagen de fondo [background-position]
Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedadbackground-position te permitirá cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que quieras.Hay muchas formas diferentes de establecer los valores de la propiedad
background-position. Sin embargo, todas ellas se formatean como un conjunto de coordenadas. Por ejemplo, el valor '100px 200px' posiciona la imagen de fondo a 100 píxeles del margen izquierdo y a 200 píxeles del margen superior del la ventana del navegador.Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (píxeles, centímetros, etc.) o puedes usar las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha). El modelo siguiente ilustra cómo funciona el sistema:
imagen2
La tabla siguiente proporciona varios ejemplos.
tabla3
El ejemplo de código siguiente posiciona la imagen de fondo en la esquina inferior derecha:
Combinación de propiedades [background]
La propiedadbackground es una forma abreviada de todas las propiedades de fondo listadas a lo largo de esta lección.Con la propiedad
background se pueden comprimir varias propiedades, y así escribir una hoja de estilo de forma más abreviada, lo que facilitará su lectura.Por ejemplo, observa estas cinco líneas de código:
Usando
background se puede lograr el mismo resultado con una única línea de código:El orden en que deben aparecer las propiedades individuales es el siguiente:
codigo9
Si se omite alguna propiedad, de forma automática ésta se establecerá con su valor por defecto. Por ejemplo, si se omiten las propiedades
background-attachment y background-position del ejemplo anterior, quedando el código de la siguiente manera:Estas dos propiedades que no se especifican se establecerían, sin más, con sus valores por defecto, que, como ya sabes, son
scroll y top left.
domingo, 27 de diciembre de 2009
CSS-Capitulo 2
En esta lección aprenderás a crear tu primera hoja de estilo; conocerás el modelo básico de CSS y qué código es necesario para usar CSS en un documento HTML.
Muchas de las propiedades que se usan en las hojas de estilo en cascada (CSS) son parecidas a las de HTML. Así pues, si estás acostumbrado a usar HTML para cuestiones de presentación, lo más probable es que reconozcas gran parte del código usado. Examinemos un ejemplo concreto.
Usando HTML podríamos haberlo conseguido así:
Con CSS el mismo resultado puede lograrse así:
Como verás, el código usado es más o menos idéntico para HTML y CSS. El ejemplo anterior te muestra además el modelo CSS fundamental:
imagen y codigo2
Pero ¿dónde se sitúa el código CSS? Eso, precisamente, es lo que vamos a estudiar ahora mismo.
Método 1: En línea (el atributo
Un modo de aplicar CSS a HTML es usando el atributo de HTML
Método 2: Interno (la etiqueta "
Otra forma es incluir el código CSS usando la etiqueta HTML
estilo externa. A lo largo de este tutorial usaremos este método en
todos nuestros ejemplos.
Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se llama style.css y está localizada en una carpeta que se llama style. Esta situación se puede ilustrar de la siguiente manera:
imagen2
El truco consiste en crear un vínculo desde el documento HTML (por
ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo
se puede crear con una sencilla línea de código HTML:
Fíjate cómo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo
La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta
Este vínculo indica al navegador que debería usar la presentación
del fichero CSS al mostrar el fichero HTML. Lo realmente bueno de este
método es que se pueden vincular varios documentos HTML con la misma
hoja de estilo. En otras palabras, se puede usar un único fichero CSS
para controlar la presentación del muchos documentos HTML.
imagen3
Esta técnica puede ahorrarte mucho trabajo. Si quisieras cambiar,
por ejemplo, el color de fondo de un sitio web compuesto por 100
páginas, un hoja de estilo puede ahorrarte el tener que cambiar de
forma manual los 100 documentos HTML. Con CSS, el cambio se puede
llevar a cabo en unos segundos modificando parte del código de la hoja
de estilo principal.
Vamos a llevar a la práctica lo que acabamos de aprender.
ficheros - un fichero HTML y un fichero CSS - con el siguiente
contenido:
Ahora coloca los dos ficheros en la misma carpeta. Recuerda grabar
los ficheros con las extensiones correctas (".htm" y ".css",
respectivamente).
Abre el fichero default.htm con el navegador y
observa que la página tiene un color de fondo rojo. ¡Enhorabuena!
¡Acabas de crear tu primera hoja de estilo!
Muchas de las propiedades que se usan en las hojas de estilo en cascada (CSS) son parecidas a las de HTML. Así pues, si estás acostumbrado a usar HTML para cuestiones de presentación, lo más probable es que reconozcas gran parte del código usado. Examinemos un ejemplo concreto.
La sintaxis básica de CSS
Digamos que queremos un bonito color rojo como fondo de nuestra página web:Usando HTML podríamos haberlo conseguido así:
Con CSS el mismo resultado puede lograrse así:
Como verás, el código usado es más o menos idéntico para HTML y CSS. El ejemplo anterior te muestra además el modelo CSS fundamental:
imagen y codigo2
Pero ¿dónde se sitúa el código CSS? Eso, precisamente, es lo que vamos a estudiar ahora mismo.
Aplicando CSS a un documento HTML
Podemos aplicar CSS a un documento HTML de tres maneras diferentes. Todos estos métodos se explican a continuación. Te recomendamos que te centres en el tercero, es decir, el externo.Método 1: En línea (el atributo "style")
Un modo de aplicar CSS a HTML es usando el atributo de HTML style. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede aplicar así:Método 2: Interno (la etiqueta "style")
Otra forma es incluir el código CSS usando la etiqueta HTML
Método 3: Externo (enlace a una hoja de estilo)
El método recomendado es enlazar con lo que se denomina hoja deestilo externa. A lo largo de este tutorial usaremos este método en
todos nuestros ejemplos.
Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor web o en el disco duro.
Por ejemplo, digamos que tu hoja de estilo se llama style.css y está localizada en una carpeta que se llama style. Esta situación se puede ilustrar de la siguiente manera:
imagen2
El truco consiste en crear un vínculo desde el documento HTML (por
ejemplo, default.htm) con la hoja de estilo (style.css). Dicho vínculo
se puede crear con una sencilla línea de código HTML:
Fíjate cómo la ruta a nuestra hoja de estilo aparece indicada por medio del atributo
"href".La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta
"head" y "/head". De esta manera:Este vínculo indica al navegador que debería usar la presentación
del fichero CSS al mostrar el fichero HTML. Lo realmente bueno de este
método es que se pueden vincular varios documentos HTML con la misma
hoja de estilo. En otras palabras, se puede usar un único fichero CSS
para controlar la presentación del muchos documentos HTML.
imagen3
Esta técnica puede ahorrarte mucho trabajo. Si quisieras cambiar,
por ejemplo, el color de fondo de un sitio web compuesto por 100
páginas, un hoja de estilo puede ahorrarte el tener que cambiar de
forma manual los 100 documentos HTML. Con CSS, el cambio se puede
llevar a cabo en unos segundos modificando parte del código de la hoja
de estilo principal.
Vamos a llevar a la práctica lo que acabamos de aprender.
Pruébalo tú mismo
Abre el Bloc de notas (o el editor de texto que utilices) y crea dosficheros - un fichero HTML y un fichero CSS - con el siguiente
contenido:
Fichero default.htm
Fichero estilo.css
Ahora coloca los dos ficheros en la misma carpeta. Recuerda grabar
los ficheros con las extensiones correctas (".htm" y ".css",
respectivamente).
Abre el fichero default.htm con el navegador y
observa que la página tiene un color de fondo rojo. ¡Enhorabuena!
¡Acabas de crear tu primera hoja de estilo!
CSS-Capitulo 1
¿Que es CSS?
Tal vez hayas oido hasta la saciedad hablar de CSS, sin tener idea de lo que estabas oyendo¿cierto?En este post vas a conocer un poco más acerca de CSS.Quien sabe, igual... hasta te agrada la idea de usarlo en tus trabajos.
CSS es el acronimo de Cascading Style Sheet(Hojas de estilo en cascada).
¿Que puedo hacer con CSS?
CSS es un lenguaje de estilo que define la forma en que se presenta un documento HTML.Abarca cuestiones como margenes, colores,imagenes de fondo,lineas, altura,fuentes y muchos temas más.
Puedes usar HTML,e incluso abusar de él, para añadir un buen formato a tu web, pero CSS es distinto.Es bastante más sofisticado y ofrece más opciones y más precision, sin contar con el hecho de que todos los navegadores actuales lo soportan.Esto quiere decir que, si usas CSS en tu web, esta se va a poder ver en Internet Explorer,Mozilla Firefox, Netscape...sin ningún problema.
Diferencias entre CSS y HTML
HTML se usa para estructurar el contenido.CSS formatea el contenido ya estructurado.
Tu dices:"Ok, vaya lio.No me he enterado de nada con tanta palabreja".Tienes razón.Hablando en cristiano significa que con HTML le das una estructura a tu web.¿Recuerdas los post acerca de crear una web con NVU? Ese código es HTML. Lo que aquí estamos aprendiendo es como dar una forma bonita y ordenada a nuestra web con CSS.
Recuerda:En nuestra web, HTML da el esqueleto y CSS, la apariencia.(A partir de ahora cuando hablemos de etiquetas HTML entenderemos que siempre van entre signos "<" y ">" y las señalaremos en cursiva.)
Al principio los diseñadores podian marcar sus textos diciendo "Esto es un titulo" (usando etiqueta HTML "h1" ) o " esto es un parrafo" (usando etiqueta HTML "p" ).
A medida que la web iba ganando popularidad los diseñadores buscaron nuevas posibilidades para añadir formato a sus documentos.Como los fabricantes de los navegadores(entonces Netscape y Microsoft) eran muy complacientes inventaron nuevas etiquetas HTML entre ellas "font" que definian el formato....no la estructura.
Se llegó a una situacion en que etiquetas estructurales como por ejemplo "table",se usaban cada vez más de forma incorrecta para dar formato a las páginas en lugar de para añadir estructura.Muchas etiquetas como el caso de "blink" sólo eran soportadas por un determinado tipo de navegador."Necesitas el navegador X para visualizar esta página" se convirtió en una declaración de descargo común en los sitios web.
CSS nació para remediar esta situación dando a los diseñadores web una herramienta sofisticada soportada en todos los navegadores.Por supuesto separar el contenido de los documentos web de su presentacion hace que sea mucho más facil el mantenimiento de nuestro sitio web.
¿Que beneficios obtengo con CSS?
Como ya te puedes imaginar CSS resultó ser toda una revolucion en el mundo de diseño web.Entre los beneficios que podemos encontrar están:
1.-Control de la presentación de muchos documentos desde una única hoja de estilo;
2.-Control más preciso de la presentación;
3.-Aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.);
4.-Numerosas técnicas avanzadas y sofisticadas.
Tal vez hayas oido hasta la saciedad hablar de CSS, sin tener idea de lo que estabas oyendo¿cierto?En este post vas a conocer un poco más acerca de CSS.Quien sabe, igual... hasta te agrada la idea de usarlo en tus trabajos.
CSS es el acronimo de Cascading Style Sheet(Hojas de estilo en cascada).
¿Que puedo hacer con CSS?
CSS es un lenguaje de estilo que define la forma en que se presenta un documento HTML.Abarca cuestiones como margenes, colores,imagenes de fondo,lineas, altura,fuentes y muchos temas más.
Puedes usar HTML,e incluso abusar de él, para añadir un buen formato a tu web, pero CSS es distinto.Es bastante más sofisticado y ofrece más opciones y más precision, sin contar con el hecho de que todos los navegadores actuales lo soportan.Esto quiere decir que, si usas CSS en tu web, esta se va a poder ver en Internet Explorer,Mozilla Firefox, Netscape...sin ningún problema.
Diferencias entre CSS y HTML
HTML se usa para estructurar el contenido.CSS formatea el contenido ya estructurado.
Tu dices:"Ok, vaya lio.No me he enterado de nada con tanta palabreja".Tienes razón.Hablando en cristiano significa que con HTML le das una estructura a tu web.¿Recuerdas los post acerca de crear una web con NVU? Ese código es HTML. Lo que aquí estamos aprendiendo es como dar una forma bonita y ordenada a nuestra web con CSS.
Recuerda:En nuestra web, HTML da el esqueleto y CSS, la apariencia.(A partir de ahora cuando hablemos de etiquetas HTML entenderemos que siempre van entre signos "<" y ">" y las señalaremos en cursiva.)
Al principio los diseñadores podian marcar sus textos diciendo "Esto es un titulo" (usando etiqueta HTML "h1" ) o " esto es un parrafo" (usando etiqueta HTML "p" ).
A medida que la web iba ganando popularidad los diseñadores buscaron nuevas posibilidades para añadir formato a sus documentos.Como los fabricantes de los navegadores(entonces Netscape y Microsoft) eran muy complacientes inventaron nuevas etiquetas HTML entre ellas "font" que definian el formato....no la estructura.
Se llegó a una situacion en que etiquetas estructurales como por ejemplo "table",se usaban cada vez más de forma incorrecta para dar formato a las páginas en lugar de para añadir estructura.Muchas etiquetas como el caso de "blink" sólo eran soportadas por un determinado tipo de navegador."Necesitas el navegador X para visualizar esta página" se convirtió en una declaración de descargo común en los sitios web.
CSS nació para remediar esta situación dando a los diseñadores web una herramienta sofisticada soportada en todos los navegadores.Por supuesto separar el contenido de los documentos web de su presentacion hace que sea mucho más facil el mantenimiento de nuestro sitio web.
¿Que beneficios obtengo con CSS?
Como ya te puedes imaginar CSS resultó ser toda una revolucion en el mundo de diseño web.Entre los beneficios que podemos encontrar están:
1.-Control de la presentación de muchos documentos desde una única hoja de estilo;
2.-Control más preciso de la presentación;
3.-Aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.);
4.-Numerosas técnicas avanzadas y sofisticadas.
CSS-Introduccion
En esta seria de post vamos a hablar de las CSS.En un post anterior tienes enlaces a webs, recursos....que te van a facilitar un poco conocer la idea general de lo que vamos a hablar en esta serie sobre CSS.
Y como lo primero, es lo primero vamos a comenzar hablando de que es CSS.Este tutorial lo piedes encontrar en Tutorial CSS de la web HTML.net. Es el mejor tutorial que he encontrado hasta el momento, a si que los codigos de los que hablemos los puedes encontrar en la web.
Comenzamos...
¿Que es CSS?
Las hojas de estilo en cascada (CSS, acrónimo de Cascading StyleSheets) son una herramienta fantástica para añadir presentación a los sitios web. Pueden ahorrarte mucho tiempo y te permitirán diseñar sitios web de un modo totalmente nuevo. CSS es imprescindible para todos aquellos que trabajen en el campo del diseño web.
Aprender CSS es divertido. Según vayas avanzando en el contenido del tutorial, recuerda dedicar el tiempo suficiente para experimentar con lo que hayas aprendido en cada lección.
Para usar CSS es necesario tener una experiencia básica en HTML.. Si no estás familiarizado con HTML, empieza, por favor, con nuestro tutorial HTML antes de adentrarte en CSS.
Todo lo que necesitas es un editor de texto sencillo y gratuito.
Por ejemplo, Microsoft Windows incorpora un programa que se llama Bloc de notas. Se localiza normalmente en el menú de Inicio, sección Todos los programas dentro de la carpeta Accesorios. Si no es éste, puedes usar un editor de texto parecido, por ejemplo, Pico para Linux o Simple Text para Macintosh.
Este tipo de editores de texto sencillos son ideales para aprender HTML y CSS puesto que no afectan o cambian el código que vas tecleando. De esto modo, los éxitos y errores sólo se te podrán atribuir a ti... y no al software.
Y en cuestiones de navegador¿Cual uso?
Puedes usar cualquier navegador con este tutorial. Te animamos a que mantegas siempre actualizado tu navegador y uses la versión más reciente.
Un navegador y un sencillo editor de texto es todo lo que necesitas.
¡En marcha!
Y como lo primero, es lo primero vamos a comenzar hablando de que es CSS.Este tutorial lo piedes encontrar en Tutorial CSS de la web HTML.net. Es el mejor tutorial que he encontrado hasta el momento, a si que los codigos de los que hablemos los puedes encontrar en la web.
Comenzamos...
¿Que es CSS?
Las hojas de estilo en cascada (CSS, acrónimo de Cascading StyleSheets) son una herramienta fantástica para añadir presentación a los sitios web. Pueden ahorrarte mucho tiempo y te permitirán diseñar sitios web de un modo totalmente nuevo. CSS es imprescindible para todos aquellos que trabajen en el campo del diseño web.Aprender CSS es divertido. Según vayas avanzando en el contenido del tutorial, recuerda dedicar el tiempo suficiente para experimentar con lo que hayas aprendido en cada lección.
Para usar CSS es necesario tener una experiencia básica en HTML.. Si no estás familiarizado con HTML, empieza, por favor, con nuestro tutorial HTML antes de adentrarte en CSS.
¿Qué software necesito?
Evita, por favor, usar software tal como FrontPage, DreamWeaver o Word con este tutorial. Este tipo de software tan sofisticado no te ayudará a aprender CSS; más bien, te limitará y reducirá de modo significativo tu curva de aprendizaje.Todo lo que necesitas es un editor de texto sencillo y gratuito.
Por ejemplo, Microsoft Windows incorpora un programa que se llama Bloc de notas. Se localiza normalmente en el menú de Inicio, sección Todos los programas dentro de la carpeta Accesorios. Si no es éste, puedes usar un editor de texto parecido, por ejemplo, Pico para Linux o Simple Text para Macintosh.
Este tipo de editores de texto sencillos son ideales para aprender HTML y CSS puesto que no afectan o cambian el código que vas tecleando. De esto modo, los éxitos y errores sólo se te podrán atribuir a ti... y no al software.
Y en cuestiones de navegador¿Cual uso?
Puedes usar cualquier navegador con este tutorial. Te animamos a que mantegas siempre actualizado tu navegador y uses la versión más reciente.
Un navegador y un sencillo editor de texto es todo lo que necesitas.
¡En marcha!
miércoles, 16 de diciembre de 2009
Lista de páginas donde puedes encontrar informacion sobre CSS
- Guía de Referencia Rápida de CSS 2
- Incluye una referencia de todos los selectores, propiedades, valores, etc.
- Página principal de CSS
- Incluye multitud de recursos sobre CSS.
- Especificaciones CSS
- Conjunto de todas las especificaciones de CSS existentes.
- Tutorial introductorio de CSS
- Breve tutorial desarrollado por Bert Bos para quienes desean utilizar CSS y no tienen experiencia.
- Añadir un toque de estilo
- Guía desarrollada por Dave Raggett que te ayudará de forma sencilla a dar estilo a tus documentos.
- Consejos y Trucos de CSS
- Colección de ejemplos CSS con una breve descripción de cómo utilizarlos.
- CSS Zen Garden
- El Jardín Zen del CSS es un ejercicio de aprendizaje y demostración de las posibilidades de diseño que ofrece CSS, para ello se presentan diferentes hojas de estilo para un mismo contenido y así podremos ver los cambios de estilo que se producen sin tener que modificar el documento.
- Camaleón CSS
- Proyecto de origen hispano inspirado en la misma idea y concepto original del CSS Zen Garden.
- Validador de CSS
- Servicio del W3C online y gratuito que nos permite comprobar la validez de las Hojas de Estilo.
Suscribirse a:
Entradas (Atom)
