Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
como dominar CSS sin salir del escritorio parte 1
#1

Cómo dominar CSS sin salir del escritorio
Antes de comenzar:

Nota 1: Tal como indicamos en “Cómo aprender a programar y no morir en el intento”, en este caso es bueno decir que no somos expertos en CSS ni el diseño Web es nuestra profesión, sino que la intención es ir cubriendo las temáticas de la manera más sencilla posible para un mejor entendimiento de la tecnología, por lo que si lo que interesa es ir aprendiendo de cero, esto es lo ideal.

Nota 2: Es preferible, aunque no esencial, contar con algunos conocimientos de HTML antes de embarcarse en esta aventura. De cualquier forma, cada vez que incluyamos contenidos de ese lenguaje, los iremos explicando.

Para comenzar, siempre es bueno indicar:

Implementos necesarios:
A pesar de que como en todo tipo de programación (las hojas de estilo podrían considerarse programación), no es necesario contar más que con block de notas para desarrollar, en CLH recomendamos y utilizamos en el 99% de nuestros desarrollos Web un editor como Adobe Dreamweaver, el cual pueden descargar en su versión de prueba desde este enlace.
Con eso claro, veamos, los contenidos de hoy:

Contenidos:
¿Qué son las hojas de estilo?
Ventajas y desventajas de usar hojas de estilo.
Estilizando en HTML individualmente.
Estilizando en HTML a nivel de página.
La modalidad de esta saga, será bastante similar a como hemos operado durante otras. En cada nueva guía iremos cubriendo algunos contenidos y dando algunos ejemplos para mejor entendimiento. A medida que vayamos avanzando, iremos dando algunos ejercicios propuestos y resueltos.

Estando claros con los contenidos de hoy, vamos, manos a la obra:

1.- ¿Qué son las hojas de estilo?
Cuando hablamos de hojas de estilo, o CSS (Cascading Style Sheets o Cascade Style Sheets según la definición que encuentren) nos referimos a una tecnología de lenguajes de estilo (también definido en algunos casos como un lenguaje de programación de estilos), utilizado principalmente para controlar la apariencia de documentos escritos en lenguaje HTML o XHTML, aunque también puede ser utilizado para documentos escritos en XML.

Cuando hablamos de documentos escritos en lenguaje HTML nos referimos principamente a páginas Web. Este lenguaje HTML, el más utilizado y combinado con lenguajes dinámicos de programación como PHP o ASP entre otros, tiene como finalidad principal estructurizar el contenido de un sitio Web mediante la aplicación de marcas o etiquetas (<HTML>, <HEAD>, <TITLE>, <BODY>, etc.) y es definido en los estándares de la W3C de esa forma.

Sin embargo, dentro de HTML además de contar con etiquetas o marcas de estructura, también contamos con algunas etiquetas que nos permiten controlar el formato o apariencia de los contenidos desplegados. Algunas de las marcas más utilizadas son:

<i>: Define un formato de cursiva para el texto.
<b>: Define un formato de negrita para el texto.
<u>: Define un formato de subrayado para el texto.
<font face=”…”>: Define la tipografía a usar.
<font color=”…”>: Define el color a usar en el texto.
Si bien con ese tipo de etiquetas, junto a otras, podemos controlar practicamente todo lo relacionado al estilo y apariencia de una página Web, se comenzó a notar que HTML empezaba a perder las características estructurales que lo definían y se convertía ya en un lenguaje mucho más híbrido. Por esto, la W3C (entidad encargada de definir los estándares relacionados a tecnologías Web), decidió definir un nuevo estándar, conocido como CSS1 (luego vendría el CSS2), orientado exclusivamente a estilización y apariencia de sitios Web, intentando devolver a HTML a su naturaleza habitual. Es así como nacen las hojas de estilo.

Con la aparición de este estándar, nos encontramos con la posibilidad de definir la apariencia de nuestros sitios Web de 3 formas distintas: mediante la estilización individual de etiquetas HTML, estilizando un HTML como definición de página de forma interna, y mediante la utilización de un archivo externo .CSS. Hoy veremos las 2 primeras y luego empezaremos a trabajar con archivos externos, la forma más conveniente en mi opinión.

Hoy, los estándares de hojas de estilo son tan poderosos que ya no sólo se remiten al estilo o formato de textos, si no que podemos realizar controles de imágenes, opacidad y realizar efectos visualmente impresionantes, por lo que usar esta tecnología supone una potenciación importante de nuestros sitios Web.

2.- Ventajas y desventajas de usar hojas de estilo.
A pesar de que a primera vista el uso de hojas de estilo pudiése verse como algo únicamente conveniente, existen algunas desventajas a tener en consideración.

Claramente cuando hablamos de ventajas, tal como mencionabamos en la lección anterior, está el poder realizar una separación limpia y completa entre lo que es estructura y contenidos (HTML + lenguajes dinámicos de lado cliente y de servidor) y lo que es apariencia y estilos. Esto sin duda que nos otorga un orden importante a tener en consideración y mayor claridad, tanto en la planificación como en el diseño y desarrollo de la Web. Además, cuando utilizamos archivos externos, y estos son solicitados por muchas páginas que tengamos a nuestra disposición, se presenta la facilidad que cuando necesitamos realizar modificaciones de estilo, sólo modificamos 1 archivo, mientras que si nuestros estilos estuviesen definidos a nivel de página o mediante marcas HTML, estaríamos realizando cambios en cada página que se despliegue a nuestros visitantes.

Pero el uso de hojas de estilo también presenta algunos inconvenientes, aunque no del lenguaje propiamente tal, si no que gracias al software que la interpreta (navegadores Web). Hoy se encuentran disponibles en el mercado una multitud de navegadores (Internet Explorer, Firefox, Safari, Opera y Chrome solo por nombrar algunos), los cuales a pesar de cumplir con los estándares de la W3C, tienen distintos métodos de interpretación de los contenidos descargados de la Web, por lo que es común que una forma de definir una hoja de estilo pueda presentar fallas de compatibilidad en distintos navegadores, un punto al que hay que tener mucho ojo, pues a pesar de que hay navegadores que son preferidos por la mayoría de los usuarios en perjuicio de otro, nuestros sitios Web nunca deberían discriminar a ningún tipo de usuario y deberían estar preparados para todo tipo de eventualidades.

3.- Estilizando en HTML individualmente.
La forma más básica de controlar la apariencia de nuestras páginas Web mediante estándares CSS es la estilización individual a nivel de marcas en HTML. Cuando hablamos de marcas o etiquetas, nos referimos a una estructura en particular para definir el contenido que desplegamos en nuestras páginas Web. Como mínimo nuestras páginas siempre deben contener las etiquetas <HTML> <HEAD><TITLE> y <BODY> con sus respectivos cierres </HTML> </HEAD> </TITLE> y </BODY> en los espacios que corresponden. Además, dentro del cuerpo o body de nuestra página Web, podemos utilizar otras marcas para definir contenidos, como es el caso de los <H1> <H2> <H3>, etc para definir encabezados u otras que iremos viendo. Pues bien, a estas etiquetas se les puede aplicar estilización utilizando estándares CSS los cuales solo se aplicarán a todo lo contenido dentro de la etiqueta y no más alla que esta una vez que se cierre.

Para que todo quede más claro, veremos un ejemplo:

Ejemplo: Definir un estilo para un texto contenido en una etiqueta H1, el cual debe contener texto rojo y letra Arial.

Veamos primero si lo hubiésemos hecho con etiquetas estándar de HTML:

<html> /* Etiqueta HTML para iniciar el documento */
<head> /* Etiqueta valida para el encabezado de la página*/
<title> Ejemplo 1 </title> /* Etiqueta valida para el título de página */
</head> /* Cerramos la etiqueta para el encabezado */
<body> /* Iniciamos el cuerpo del documento */
<h1><font face=”Arial” color=”#ff0000″>Texto de ejemplo</font></h1>
/* Iniciamos el encabezado 1 mediante <h1> y luego ajustamos las propiedades del texto mediante la etiqueta <font>, utilizando face para la tipografía y color para bueno.. el color, el cual es definido en HTML mediante la combinación hexadecimal, para este caso ff0000 para rojo */
</body> /* Cerramos el cuerpo del documento */
</html> /* Cerramos el documento */

Recordemos que en HTML las etiquetas debemos irlas cerrando en el orden en que las abrimos, cerrando primero la última que abrimos.
Si bien nosotros creamos este archivo y le damos una extensión .html o .htm y lo ejecutamos en un navegador, obtendríamos el resultado solicitado, lo estaríamos realizando mediante etiquetas HTML lo cual no sería lo apropiado.

Ahora veamos si este ejemplo lo realizamos estilizando la marca mediante CSS:

<html>
<head>
<title> Ejemplo 1 </title>
<body>
<h1 style=”color:#ff0000;font-family:Arial”>Texto de ejemplo</h1>
</body>
</html>

Para visualizar el ejemplo, lo guardamos con extensión .htm o .html y lo abrimos en nuestro navegador.
Si nos fijamos, la definición es distinta. Aplicamos una estilización a la marca <h1> mediante el estándar “style” de CSS, definiendo el color (rojo, igual que en el anterior) y la propiedad font family, que se refiere directamente a la tipografía utilizada, en este caso Arial. Este estilo se aplicará a todo lo que este contenido antes de que cerremos la marca de la forma </h1> por lo que si ingresaramos más texto entremedio, también sería en Arial y de color rojo. Esta es la forma correcta de estilizar individualmente una marca HTML. Este método lo podemos aplicar a todas las marcas HTML que lo permitan, por lo que los incentivamos a probar en distintos casos y cambiando parámetros.

Tengamos en consideración que este método de estilización sólo se aplicará a la marca en particular y no a otra o al uso de la misma en otras partes de la página, lo cual es bueno si queremos individualizar mucho una marca en particular, pero poco conveniente cuando necesitamos aplicar el mismo estilo a varias partes del documento.

4.- Estilizando en HTML a nivel de página.
El método de estilización que veíamos en la lección anterior es bastante sencillo de utilizar. Sin embargo, puede volverse bastante incomodo, ya que si utilizamos una misma marca (por ejemplo <h1>Guiño en distintos lugares de nuestra página Web, se vuelve engorroso tener que redefinir el estilo cada vez que lo vayamos a utilizar. Para esto es que existe este segundo método, que es realizar definiciones de estilo a nivel de página en vez de marca, para lo cual realizamos una definición general de una marca al principio del documento y cada vez que la utilicemos contendrá ese estilo por defecto.

Para comprender mejor este método, veamos el mismo ejemplo anterior, pero ahora estilicemos a nivel de página:

<html>
<head>
<title> Ejemplo 2 </title>
<style type=”text/css”> /* Esta etiqueta es por defecto para definir estilo de tipo CSS */
h1{
color:#ff0000;
font-family:Arial;
}
/* Definimos el estilo para la etiqueta h1 */
</style> /* Cerramos la definición de estilos */
</head>
<body>
<h1> Texto de ejemplo </h1>
<h1> El mismo encabezado con otro texto </h1>
</body>
</html>
Como ahora hemos realizado la definición de estilo a nivel de página no es necesario que incluyamos la definición en la marca. Ahora cada vez que encerremos el texto en etiquetas <h1></h1> se aplicará el estilo definido arriba, sin importar cuantas veces la utilicemos.

Como podemos ver, eso nos ahorrará trabajo y no tendremos que preocuparnos de aplicar el estilo individualmente, lo cual es bastante útil, sobretodo si necesitamos actualizar la información con respecto al color o tipo de letra, solo modificamos arriba y se aplicará automáticamente.

En la sección de definición de estilos podremos definir muchas marcas, todas las que utilicemos en nuestra página (incluso <body>Guiño. Sin embargo tenemos que tener en cuenta que cada instancia de esa marca incluirá ese estilo por defecto.

A pesar de lo útil de este método, aun se presenta una problemática importante. ¿Qué pasa cuando queremos aplicar este estilo a muchas páginas que poseemos?. Lamentablemente tenemos que incorporar el código a todas y cada una de ellas, por lo que debemos fijarnos que cada vez que hagamos un cambio, lo realicemos en todos los documentos, lo cual puede ser engorroso. Para esto existe la solución de utilizar un archivo externo, lo que veremos en nuestros próximos números.
#2
Muy Bueno Tambien Tengo mis estudios aparte de Css,Hmtl,Php,Javascript etc
“Who are you to judge the life I live?
I know I'm not perfect
-and I don't live to be-
but before you start pointing fingers...
make sure you hands are clean!”
“Judge not unless you judge yourself”
― Bob Marley
#3
Simple, pero muy bueno
Luego lo miro Lengua
#4
gracias por el post esta muy bien elaborado conciso y didáctico felicidadez
WWW
#5
Me gusto tu tutorial esta ordenado y no es exageradamente grande. Luego le echare un vistazo que ahora estoy un poco ocupado
#6
copy+paste? creo que este tipo de temas deberían ser removidos ya que pueden contener derechos de autor, claro sin son un copy+paste, sino lo son, deberías darle más esctructura, colores, agregar imágenes, es decir, hacerlo más interactivo, ya que te apuesto que ninguno de los que hemos contestado lo leyó al 100% pero bueno, es solo una recomendación
Hoy miembro Junior, mañana tal vez más... Gran sonrisa Gracias Skylium por este maravilloso Hosting, en unas semanas haré mi donación Gran sonrisa Visita reddeociosos.com
#7
(18-11-2011, 09:16 PM)enrique73 escribió: copy+paste? creo que este tipo de temas deberían ser removidos ya que pueden contener derechos de autor, claro sin son un copy+paste, sino lo son, deberías darle más esctructura, colores, agregar imágenes, es decir, hacerlo más interactivo, ya que te apuesto que ninguno de los que hemos contestado lo leyó al 100% pero bueno, es solo una recomendación

efectivamente es un copy+paste pero el contenido esta bueno.
#8
Excelente post muy bien escrito
#9
Seguire tus tutos, aún se muy poco de css me domino poco por no decir nada jeje
#10
Muy buen tuto. Simple pero eficaz. Un saludo.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Juego del Ahorcado para Android y Escritorio Posits 0 209 01-05-2016, 05:16 PM
Último mensaje: Posits
  [Tutorial] Trucos con CSS parte I JancoBH 2 366 13-03-2016, 01:00 AM
Último mensaje: JancoBH
  Qué lenguajes de programación hay que dominar en 2015 bairesre 23 733 05-11-2015, 11:15 AM
Último mensaje: cocociencia
  Codigo al entrar y salir de una web Rilley 0 279 21-01-2014, 08:51 PM
Último mensaje: Rilley
  50 Herramientas de Diseño Web Gratis! [Parte 3] lukas 2 710 03-07-2013, 09:45 PM
Último mensaje: lukas
  50 Herramientas de Diseño Web Gratis! [Parte 1] lukas 2 455 18-06-2013, 10:59 PM
Último mensaje: fercol
  50 Herramientas de Diseño Web Gratis! [Parte 2] lukas 0 507 18-06-2013, 07:35 PM
Último mensaje: lukas
  Guía de Referencia Rápida de CSS 3 [Parte 1] Static-X 14 2,052 13-04-2013, 11:05 PM
Último mensaje: Infamer
  Manual de lenguaje HTML (Parte III) DiosOne 2 990 01-04-2013, 08:49 PM
Último mensaje: DiosOne
  Manual de lenguaje HTML (Parte II) DiosOne 1 645 01-04-2013, 11:03 AM
Último mensaje: global2013



Usuarios navegando en este tema: 1 invitado(s)