CSS
1. ¿Qué es CSS3 y para qué sirve CSS3?
CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML o de los documentos XML. CSS se creó para separar el contenido de la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas.
A partir del año 2005 se comenzó a definir el sucesor de esta versión, al cual se lo conoce como CSS3 o Cascading Style Sheets Level 3. Actualmente en definición, esta versión nos ofrece una gran variedad de opciones muy importantes para las necesidades del diseño web actual. Desde opciones de sombreado y redondeado, hasta funciones avanzadas de movimiento y transformación, CSS3 es el estándar que dominará la web por los siguientes años.
Para que sirve?
CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio web… ese es precisamente el poder de CSS, en otras palabras, el mismo sitio web puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen, ya con CSS3 se suman muchas nuevos efectos que harán de la que la parte visual de nuestra página sea mucho más agradable y llamativa, como sombras, transformaciones de figuras, creación sencilla de bordes y efectos 3D.
2. Formas de aplicar CSS
Ya hemos visto que existen estilos por defecto que aplican automáticamente los navegadores web cuando no hay estilos especificados, así como que podemos embeber código CSS en las propias etiquetas de HTML, “en línea”. Vamos a ver ahora dos formas adicionales de aplicar estilos CSS: en la parte inicial del documento HTML (aplicación de estilos interna o CSS interno) o en un archivo de extensión .css independiente del archivo HTML (aplicación de estilos externa o CSS externo).
CSS INTERNO
Vamos a ver ahora cómo podemos definir esos estilos en la cabecera del documento HTML usando la siguiente sintaxis:
…
|
Las diferentes propiedades y valores se pueden poner en una misma línea o en distintas líneas según se prefiera (siempre separados mediante punto y coma).
Dentro de las etiquetas … incluiremos una etiqueta de apertura de declaración de estilos . En HTML 5 no es necesario especificar type =”text/css” pero de momento seguimos recomendando que se use esta sintaxis.
En nuestro código de ejemplo el cambio de los elementos del menú para que tengan el texto color verde y el icono o símbolo de viñeta de color rojo se haría de esta forma:
Portal web aprenderaprogramar.com
Didáctica y divulgación de la programación
Menú
Puedes comprobar que hemos usado las mismas propiedades CSS y los mismos valores que usábamos en línea.
Visualiza la página en tu navegador. El resultado para el menú será el mismo que cuando aplicamos CSS en línea:
No obstante podrás comprobar que hay otros elementos de la página web que también se ven afectados, por ejemplo los links presentes en el texto. Esto se debe a que hay una diferencia importante entre aplicar estilos CSS en línea y aplicarlos como CSS interno en la cabecera … del documento HTML. Al aplicar estilos en línea, tenemos que repetir la aplicación de estilos en cada una de las líneas que queramos modificar y en cada ocasión afectamos a únicamente una línea. Con la aplicación de estilos interna nos basta con declarar una vez el estilo y el tipo de elemento al que se aplica, y automáticamente se aplicará a todos los elementos de ese tipo existentes dentro de la página web. Esto permite que en una página web de gran extensión nos ahorremos tener que escribir múltiples veces la definición de estilos (una en cada línea), ya que una sola declaración inicial nos bastará, lo cual es una ventaja bastante evidente.
Sin embargo ahora surge una cuestión adicional: es posible que tengamos dos o más listas de tipo
- y en algunos casos, por ejemplo menús, queramos aplicar un estilo, y en otros casos, por ejemplo listas de elementos dentro de un artículo periodístico, queramos aplicar otro estilo. También es posible que deseemos que los elementos del menú sean links con texto verde y sin subrayado, pero queramos mantener el resto de links como texto azul con subrayado. Tal y como hemos hecho la definición de estilos no conseguimos hacer esto, ya que estamos modificando
CSS EXTERNO
Aunque el CSS interno nos permite unificar en una declaración todos los estilos para un archivo html, seguimos teniendo el problema de tener que repetir la definición de estilos en la cabecera de cada uno de los archivos html de nuestro desarrollo web. Si el desarrollo tiene pocos archivos quizás sea menos problemático, pero cuando el desarrollo tiene cientos o miles de archivos sí se convierte en un verdadero problema, ya que cada vez que introdujéramos cambios habría que hacerlo en los cientos o miles de archivos de que constara el desarrollo.
Para solventar esta solución se ideó la declaración externa de CSS, basada en declarar los estilos CSS en un archivo independiente que puede servir como referente para dotar de estilos a decenas, cientos o miles de archivos html, que únicamente deberán invocar el nombre de archivo utilizando una sintaxis específica. De este modo un cambio en los estilos habrá que hacerlo únicamente en el archivo de estilos correspondiente, lo cual supone una gran ventaja. Incluso un cambio completo de los estilos de una página web se puede conseguir simplemente sustituyendo el archivo correspondiente.
Vamos a generar un archivo de estilos independiente. Para ello abre Notepad++ (o el editor de texto que estés usando) y crea un archivo con el siguiente contenido:
/* Comentario en CSS estilos aprenderaprogramar.com*/
ul {color:red;}
a {color:green; text-decoration: none;}
|
Seguimos usando las mismas propiedades CSS y los mismos valores que hemos usado en la forma CSS en línea y en la forma CSS interna.
Los contenidos que se encuentren entre los símbolos /* …. */ serán considerados comentarios y se pueden usar para introducir información del autor del archivo, versión, etc. así como para escribir aquellas aclaraciones sobre los estilos que se consideren necesarias. Un comentario puede comprender una o varias líneas según se desee.
Elige Guardar Como… y guarda el archivo con un nombre y extensión css, por ejemplo estilos.css. Asegúrate que la extensión del archivo sea css. No es válido si no tiene esta extensión.
En nuestro archivo HTML eliminaremos la definición de estilos interna y dejaremos sólo la invocación al archivo escrita con la siguiente sintaxis:
…
|
link es una etiqueta que se usa en HTML para establecer vínculos entre un documento HTML y otros recursos como una imagen de icono o una hoja de estilos CSS. En este caso se indica con la propiedad rel (relación o relationship) que el documento HTML debe usar los estilos definidos como texto/css en un archivo con el nombre indicado. Ten en cuenta que si como ruta de archivo indicas simplemente el nombre del archivo, éste debe encontrarse en la misma carpeta en que se encuentre el documento HTML. Si el archivo CSS se encuentra en otra carpeta deberás indicarlo escribiendo una URL completa u bien una URL relativa que determine la ruta.
Nosotros ubicaremos de momento el archivo CSS en la misma carpeta que el archivo HTML. En el archivo HTML tendremos lo siguiente:
Ahora procedemos a visualizar el archivo HTML en nuestro navegador. Si se está cargando la hoja de estilos correctamente deberemos obtener el mismo resultado que habíamos obtenido con la aplicación de estilos interna. Prueba a hacer distintos cambios en el archivo css y visualiza los resultados.
¿QUÉ TIPO DE CSS USAR?
En la siguiente tabla hacemos un resumen de las características de los distintos tipos de CSS que hemos visto hasta el momento:
DECLARACIÓN CSS
|
ARCHIVOS AFECTADOS
|
CSS SE APLICA A
|
En línea
|
Uno, aquel donde se realiza la declaración
|
Una línea de código.
|
Interna
|
Uno, aquel en cuya cabecera se realiza la declaración
|
Todos los elementos del archivo en los que resulte de aplicación el estilo
|
Externa
|
Todos los archivos que invoquen el archivo css
|
Todos los elementos de los archivos afectados en que resulte de aplicación el estilo
|
3. Qué es un comentario y como se escribe en CSS.
CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar de forma clara los archivos CSS complejos.
El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo:
/* Este es un comentario en CSS */
Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se puede incluir un comentario dentro de otro comentario:
/* Este es un
comentario CSS de varias
lineas */
Aunque los navegadores ignoran los comentarios, su contenido se envía junto con el resto de estilos, por lo que no se debe incluir en ellos ninguna información sensible o confidencial.
La sintaxis de los comentarios CSS es muy diferente a la de los comentarios HTML, por lo que no deben confundirse:
¿Qué es el modelo de cajas en CSS?
El modelo de caja CSS es un módulo CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.
Propiedades que controlan el flujo del contenido en una caja.
Propiedades que controlan el tamaño de una caja.
Propiedades que controlan los márgenes de una caja.
Propiedades que controlan los rellenos de una caja
Otras propiedades
5. Elementos de línea y elementos de bloque
Todas las etiquetas del lenguaje HTML se pueden clasificar en etiquetas de línea o de bloque.
Una etiqueta de línea es aquella que ocupa el espacio mínimo necesario en horizontal, y permite que otro elemento se coloque a su lado. En cambio una etiqueta de bloque, ocupa todo el ancho disponible y no permite que otro elemento se coloque a su lado (aunque aparentemente tenga lugar suficiente).
Etiquetas de línea (las más usadas):
Etiquetas de bloque (las más usadas):
,
,
, , ,
- ,
,
,
, , ,
- ,
,
,
, ,
Ejemplo:
En el ejemplo de arriba los tres enlaces están escritos en etiquetas , como son de línea se colocan uno al lado del otro, porque tienen lugar.
En cambio los párrafos, escritos en etiquetas aunque sean cortos y tengan lugar al costado, se colocan uno debajo del otro.
Es imprescindible reconocer esta clasificación para poder modificar su apariencia utilizando la propiedad display del lenguaje
6. Propiedades abreviadas en CSS3
7. Herencia, cascada y especificidad en CSS
La cascada
Sección
CSS (Cascading Style Sheets) ya nos indica que cascada es un concepto importante. A su nivel más básico indica que el orden de las reglas CSS importa, pero es algo más que eso. Que prevalezcan unos selectores sobre otros en la cascada depende de tres factores (en orden de importancia — los primeros prevalecen sobre los últimos):
- Importancia
- Especificidad
- Orden del código
Importancia
Sección
En CSS, hay un trozo de sintaxis que podemos usar para asegurarnos que una determinada regla siempre "gane" sobre todas las demás: !important.
Veamoslo en un ejemplo:
<p class="better">This is a paragraph.</p> <p class="better" id="winning">One selector to rule them all!</p>
#winning { background-color: red; border: 1px solid black; } .better { background-color: gray; border: none !important; } p { background-color: blue; color: white; padding: 5px; }
Que produce el siguiente resultado:
Veamos qué ha pasado:
- Vemos que se han aplicado los valores de color y padding, pero no el de background-color ¿Porqué? En realidad deberían haberse aplicado las tres pues las reglas declaradas más tarde normalmente prevalecen sobre las anteriores.
- Sin embargo, ganan las reglas anteriores, pues los selectores de ID/clase son más específicos que los selectores de elemento (lo veremos en la siguiente sección).
- Ambos elementos pertenecen a la class better, pero el 2do tiene además la idwinning. Las IDs son más específicas que las clases (solo podemos tener un elemento para cada ID en una página, pero podemos tener varios elementos de la misma clase — los selectores ID son muy específicos en aquello que seleccionan), el fondo de color rojo y el borde de 1px negro se deberían aplicar al segundo elemento, y el primer elemento tomará el fondo gris, sin borde, como indica la clase.
- El 2do elemento toma el fondo rojo, pero no el borde. ¿Porqué? La declaración !important de la segunda regla — declarada después de (border: none) hará que esta declaración prevalezca sobre el valor del borde de la regla anterior, incluso aunque ID tenga una especificidad mayor.
Es útil saber que !important existe para poder reconocerlo en el código escrito por otros, PERO, no debemos usarlo a menos que sea estrictamente necesario. Una de estas ocasiones la encontramos cuando estamos trabajando un CMS y no podemos editar los módulos principales de CSS, y queremos sobrescribir un estilo que no puede sobrescribirse de ningún otro modo. NO lo usaremos si lo podemos evitar. Pues !important cambia la forma de trabajo de la cascada, y puede causar problemas de dificil solución en el depurado de CSS, especialmente en CSS grandes.
Es útil conocer que la importancia de una declaración CSS depende de los estilos que son especificados en la misma — los usuarios pueden establecer estilos propios que prevalezcan sobre los del desarrollador. Si, por ejemplo, usuarios disminuidos visuales quisieran usar un tamaño de fuente el doble de lo normal en todas las páginas para facilitar su lectura.
De existir conflicto, las declaraciones se aplicarán en el siguiente orden, donde las últimas prevalecen sobre las primeras:
- Declaraciones en el documento de estilos del usuario (como los estilos por defecto del navegador, usados cuando no hay otros estilos fijados)
- Declaraciones normales en el documento de estilos del usuario (establecidos por el propio usuario)
- Declaraciones normales en el documento de estilos del autor (los estilos establcidos por nosotros, los desarrolladores web)
- Declaraciones !Important en el documento de estilos del autor
- Declaraciones !Important en el documento de estilos del usuario
Tiene sentido que el documento de estilos del desarrollador prevalezca sobre el del usuario, pues así se puede mantener el diseño establecido, pero en determinadas ocasiones los usuarios pueden tener buenas razones para sobrescribir los estilos del desarrollador como ya se ha mencionado anteriormente — esto se consigue usado la declaración !Important en sus reglas.
Especificidad
Sección
La Especificidad es en sí una medida de cómo de específico es un selector — cuantos elementos puede seleccionar. Como hemos mostrado en el ejemplo anterior, los selectores de elementos son poco específicos. Los selectores de clase son más específicos, por lo que prevalecen sobre los selectores de elementos. Los selectores ID son todavía más específicos, por lo tanto ganan frente a los de clase. La única forma de vencer a los selectores ID es usando la declaración !important.
La especificidad que tiene un selector se mide mediante 4 valores (o componentes) diferentes, podemos pensar en ellos como en 4 columnas de unidades de millar, centenas, decenas y unidades:
- Unidades de millar: Puntúa 1 en esta columna si la declaración está dentro de un atributo style (como las declaraciones que no tienen selectores, que su especificidad es siempre 1000). Sino puntúa 0.
- Centenas: Puntúa 1 en esta columna por cada selector ID contenido en el selector.
- Decenas: Puntúa 1 en esta columna para cada selector de clase, selector de atributo o de pseudo-clase contenidos en el selector.
- Unidades: Puntúa 1 en esta columna por cada selector de elemento o pseudo-elemento contenidos en el selector.
Nota: El selector universal (*), las combinaciones (+, >, ~, ' ') y la pseudo-clase de negación (:not) no afectan a la especificidad.
La siguiente tabla muestra algunos ejemplos sueltos para meternos en tarea. Intentemos comprenderlos y entender porqué tienen la especificidad que se les ha atribuido.
Comentarios
Publicar un comentario