En proceso de traducción
Introducción a Estilos¶
Sin importar cuán útil es una página web, aun necesita verse bien para que los visitantes del sitio quieran usarla. Ahí es donde los estilos entran. Los estilos se usan para cambiar cómo el contenido de tu sitio web se despliega. Puedes cambiar aspectos como colores, imágenes de fondo, alineación, fuentes, estilo de viñetas y mucho más utilizando codificación de estilo. Existe dos categorías principales de codificación de estilo: estilos en línea y Hojas de Estilo en Cascada (CSS).
Estilos en Línea¶
Hubo un tiempo en el pasado no muy lejano cuando los diseñadores de sitios web ponían los estilos de una página web directamente dentro de la etiqueta del elemento misma. Por ejemplo, si deseabas configurar la fuente para un párrafo a 12px, el marcado HTML antiguo sería:
<p style="font-size:12px">Fuente de 12px aquí.</p>
Esta práctica es conocida como estilos en línea. Tiene la ventaja de hacerlo inmediatamente aparente al diseñador del sitio web cuál será el marcado aplicado para cualquier elemento sin necesidad de referirse a otros archivos, pero es muy difícil de mantener, especialemente para sitios grandes. ¿Supon que decides que las marcas de párrafo deben ser renderizadas con fuente de 10 pixeles en vez de 12 pixeles? Si utilizaras estilos en línea, debieras purgar cada página de tu aplicación y reemplazar cada una. Todo ese marcado de estilos en línea hincha el tamaño de las páginas individuales y, por ende, toda tu aplicación. Una solución mejor debías ser encontrada, y lo fue - Hojas de Estilo en Cascada.
Hojas de Estilo en Cascada¶
El principio detrás de las Hojas de Estilo en Cascada (o CSS) es todo el marcado de estilo es removido de la página y es situado en uno o más archivos separados llamados hojas de estilo, cada uno con la extensión de archivo .CSS. La hoja de estilo es cargada en la sección head de la página web, luego las reglas de control de herencia cuáles estilos se aplican a cuáles elementos en cualquier página dada.
Existe tres formas en las cuales los estilos en una hoja de estilo son aplicados a los elementos en una página:
1. Por tipo de elemento. Si tienes este código en tu hoja de estilo:p {
text-align: left;
font-family: Arial;
font-size: 10px;
}
entonces cada etiqueta <p> en la página renderizará su contenido con alineación izquierda, en fuente Arial de tamaño de 10 pixeles, a menos que sea desautorizada. Los estilo de tipo elemento lo pueden hacer por estilo en línea, estilo de clase, o estilo de id específico (mira abajo).
2. Por clase. Puedes asignar un nombre de clase inventado a cualquier estilo en tu página de estilo, y ese estilo será aplicado a todos los elementos con el mismo nombre de clase. Como un ejemplo, supón que actualizaste tu hoja de estilo para que luzca como sigue:
p {
text-align: left;
font-family: Arial;
font-size: 10px;
}
p.centered {
text-align:center;
}
Ahora supón que tu página web incluyese este código:
<p>La Tigra es una gran novela.</p> <p class="centered">Sacha es una mujer muy atractiva.</p> <p class="centered">Hay algo mágico en ella.</p>
La primera oración será renderizada utilizando el estilo genérico </p>, incluyendo la alineación izquierda. La segunda y tercera oraciones, sin embargo, serán centradas, porque tienen el nombre clase de estilo más específico aplicado a ellas. Nota: Ellas también tendrían la familia de la fuente y el atamaño heredados de la marca de párrafo más generica, pero aprenderás más acerca de eso en la próxima sección.
3. Por id. La forma más específica de aplicar un estilo utilizando CSS es dar a un elemento un valor id específico, y crear un estilo solamente para ese elemento. Las reglas de CSS te permitirán aplicar el mismo valor id a un número ilimitado de elementos, pero es una mala práctica; los id's deben indicar elementos singulares de una página, y las clases deben indicar grupos de elementos similares.
Actualicemos nuestra hoja de estilos una vez más:
p {
text-align: left;
font-family: Arial;
font-size: 10px;
}
p.centered {
text-align:center;
}
p#contracultura {
text-align:right;
}
Ahora, si nuestra página tuviera un cuarto párrafo, como sigue:
pre><p>La Tigra es una gran novela.</p>
<p class="centered">Sacha es una mujer muy atractiva.</p>
<p class="centered">Hay algo mágico en ella.</p>
<p id="contracultura">La contracultura juega un importante papel en la historia.</p>
encontrarías que la primera oración estaría aun alineada a la izquierda, la segunda y la tercera aun estarían centradas, y la cuarta estaría alineada a la derecha, debido a al estilo específico al id contracultura que se le aplicó.
Probablemente es obvio, pero es necesario recalcarlo: los estilos aplicados al nombre de la clase se activan con un punto (.) en la hoja de estilo, y aquellos aplicados por id se activan con el signo de numeral (#).
Beneficios de Usar CSS sobre Estilos en Línea¶
Los beneficios del enfoque CSS son numerosos, eincluyen:
- El marcado HTML es más sencillo de leer.
- La páginas son más pequeñas y cargan más rápidamente
- El contenido se renderiza mejor en dispositivos como lectores de pantalla, mejorando el acceso de los discapacitados visuales
- El código es más facilmente mantenible, como los estilos atravez del tablero ueden ser modificados facilmente con muy poco trabajo
- El desarrollo del sitio web toma menos tiempo, ya que no requieres digitar los mismos estilos nuevamente
- La misma página web puede ser renderizada con diferentes hojas de estilo, basado en el typo de petición que se hace (este es un tópico más avanzado, fuera del campo que cubre este curso, pero es bueno conocer que puede hacerse)
Consideraciones Especialies Acerca de CSS y Estilos en Línea¶
Las siguientes son notas importantes a tomar en cuenta cuando estás trabajando con CSS y estilos en línea:
- Cuando valores diferentes son asignados a un parámetro de estilo de un elemento por la hoja de estilo CSS y por el estilo en línea, el estilo en línea tiene prioridad sobre el estilo CSS.
- Hay algunos estilos que solamente pueden ser aplicados vía hojas de estilo, y otros que solamente pueden ser aplicados en línea. Dicho esto, usualmente existe una alternativa CSS para cualquier caso de uso de estilo en línea.
- Los diferentes navegadores despliegan la misma página ligeramente de diferente forma basdos en maneras particulares de interpretar el código HTML. IE6 es un notable ofensor por tomar código "bueno" y hacerlo ver como basura, y como tal es la plaga de la existencia de muchos desarrolladores y diseñadores. Hay algunas cosas que puedes hacer para mitigar tales diferencias, pero es clave en realidad que pruebes tus páginas visualmente en todos los navegadores que tu o tu cliente desean soportar.