CSS


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.


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

Volvemos a lo que hemos denominado código HTML base para el desarrollo del curso, código HTML donde no se aplican estilos.
En el epígrafe anterior vimos cómo aplicábamos estilos CSS en línea con este ejemplo:
<ul style = "color: red;">
<li><a href="#" style = "color: green; text-decoration: none;">Inicio</a></li>
<li> <a href="libros.html" style = "color: green; text-decoration: none;">Libros de programación</a> </li>
<li> <a href="cursos.html" style = "color: green; text-decoration: none;">Cursos de programación</a> </li>
<li> <a href="humor.html" style = "color: green; text-decoration: none;">Humor informático</a> </li>
</ul>


CSS INTERNO
Vamos a ver ahora cómo podemos definir esos estilos en la cabecera del documento HTML usando la siguiente sintaxis:
<head>
…
<style type="text/css">
elementoAfectadoPorElEstilo {
propiedad1ParaEseTipoDeElementos:valor;
propiedad2ParaEseTipoDeElementos:valor;
propiedad3ParaEseTipoDeElementos:valor;
…
propiedadnParaEseTipoDeElementos:valor;
}
</style>
</head>


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 <head> … </head> incluiremos una etiqueta de apertura de declaración de estilos <style type=”text/css”>, a continuación colocaremos la definición de tantos estilos como deseemos y cerraremos la declaración con </style>. 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:
<!DOCTYPE html>
<!-- Código ejemplo para el curso CSS -->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<style type="text/css">
ul {color:red;}
a {color:green; text-decoration: none;}
</style>
</head>
<!-- Contenido de la página web -->
<body>
<!-- Cabecera de la página web -->
<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<!-- Fin de la cabecera de la página web -->
<br />
<!-- Contenedor para la parte central -->
<div>
<!-- menu -->
<div>
<div>Menú</div>
<hr/>
<ul>
<li><a href="#">Inicio</a></li>
<li> <a href="libros.html">Libros de programación</a> </li>
<li> <a href="cursos.html">Cursos de programación</a> </li>
<li> <a href="humor.html">Humor informático</a> </li>
</ul>
</div>
<!-- fin menu -->
<!-- Aquí el resto del código del ejemplo -->
</html>


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:
<head>
…
<link rel="stylesheet" type="text/css" href="rutaDelArchivo.css">
</head>


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:
<!DOCTYPE html>
<!-- Código ejemplo para el curso CSS -->
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<!-- Aquí el resto del código del ejemplo -->
</html>




¿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


Comentarios

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:
<!-- Este es un comentario en HTML -->

<!-- Este es un
     comentario HTML de varias
     lineas -->

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.



ReferenciaSección



PropiedadesSección



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








Elementos de línea y de bloque en HTML



Escrito por Laura Chuburu

volver al índice

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): <a>, <span>, <strong>, <img>, <input>, <code>



Etiquetas de bloque (las más usadas):<h1>, <h2>, <h3>, <p>, <ul>, <li>, <div>, <header>, <nav>, <section>, <article>, <footer>, <form>, <table>



Ejemplo:



etiquetas de línea y de bloque



En el ejemplo de arriba los tres enlaces están escritos en etiquetas <a></a>, como son de línea se colocan uno al lado del otro, porque tienen lugar.



En cambio los párrafos, escritos en etiquetas <p></p> 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 CSS.









DefiniciónSección



Propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), un Se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.



La especificación de CSS define las propiedades abreviadas para agrupar la definición de propiedades en común para el mismo tema. Ejemplo: La propiedad  background de CSS es una propiedad abereviada que puede definir el valor de background-color, background-image, background-repeat, y background-position. Similarmente, las propiedades más comúnes relacionadas con las fuentes se pueden definir usando la abreviación font, y los diferentes márgenes alrededor de una caja pueden ser definidos usando la abreviación margin.



Casos especiales delicadosSección



Incluso si son convenientes de utilizar, hay algunos casos especiales que mantener en mente al utilizarlos:


    

  1. Un valor que no es especificado se le asigna su valor inicial. Suena a algo anecdótico, pero significa que se sobreescribirán valores previamente definidos. Por lo tanto:
    background-color: red;
background: url(images/bg.gif) no-repeat top right;
    
 no pondrá el color en rojo si no al valor por defecto de background-color , transparent, puesto que la segunda regla tiene precedencia.
    2. 

  2. Solo los valores de las propiedades individuales pueden heredar. Dado que valores omitidos son reemplazados por su valor inicial, es imposible permitir la herencia de propiedades individuales omitiéndolas. La palabra clave inherit puede ser aplicada a una propiedad, pero solo como un todo, no como una palabra clave para un valor u otro. Eso significa que la única manera de hacer que un valor específico sea heredado es usar la propiedad a mano con la palabra clave inherit.
    3. 

  3. Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:
      

    1. Shorthands handling properties related to edges of a box, like border-style, margin or padding, always use a consistent 1-to-4-value syntax representing those edges:
      

      border1.pngThe 1-value syntax: border-width: 1em — The unique value represents all edges
      

      border2.pngThe 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
      

      border3.pngThe 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
      

      border4.png
      
The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL)
      

      

      

      2. 

    

    4. 







HERENCIA Y CASCADA 



Tal y como indicábamos en nuestro anterior post, Inicializar los estilos. Reset CSS, la visualización de las páginas web en un navegador se ven afectadas por los hojas de estilo que se cargan. Asimismo, se indicó que hay una prelación entre ellas.



En este post, vamos a hablar de los conceptos: cascada, especificidad  y herencia.



Cascada



Cuando dos o más reglas coinciden en un mismo elemento, dicho conflicto se resuelve mediante un proceso denominado cascada.



La cascada es el orden de prelación, importancia, que se le asigna a cada regla de las hojas de estilos. De ahí, que las hojas de estilo de autor/diseñador se consideren las más importantes, seguidas por las hojas de estilo de usuario y por último, las hojas de estilo predefinidas por el navegador.



El orden de importancia de las hojas de estilo coincide con el orden de carga de las hojas CSS al visualizar una página web: de izquierda a derecha, de menor a mayor prelación.



Sin embargo, teniendo en cuenta la accesibilidad web y su principio básico de eliminación de barreras para el acceso a la información para determinados grupos de personas – discapacitados y mayores-, el usuario mediante la regla !important toma el control de la presentación visual al asignar a su regla el máximo nivel de importancia, incluso por encima de las reglas !important declaradas por el autor/diseñador.



El orden de importancia de los estilos declarados es de mayor a menor:


    

  1. Estilos de usuario etiquetados como !important
    2. 

  2. Estilos de autor/diseñador etiquetados como !important
    3. 

  3. Estilos de autor/diseñador
    4. 

  4. Estilos de usuario
    5. 

  5. Estilos aplicados por el navegador
    6. 




Ejemplo de declaración de !important:



el resultado será: Prueba de especificidad



El texto se muestra en rojo porque la regla color:red está declarada como de mayor importancia, rompiendo de esta forma, con la norma sobre especificidad que a continuación pasaremos a tratar.



Especificidad



Las reglas se ordenan según lo específico que sea el selector. Las reglas con selectores más específicos tienen prioridad sobre aquellas reglas con selectores menos específicos, es decir, más genéricos.







El color del texto será verde: Prueba de especificidad.



El selector de tipo <p> es el mismo en las tres declaraciones y su importancia es la  misma, pero el texto se pintará de color verde (color: green;) porque la declaración p id=”especial” es la más específica, la más concreta. Es decir, sólo se aplicará a aquellos párrafos que lleven el selector ID.



Las otras declaraciones tienen un carácter mucho más genérico; bien para todos los párrafos –p color: red-; obien, para todos los elementos de la página – * color: blue-.



Si dos reglas tienen la misma especificidad, la última definida tiene prioridad.



El resultado es el texto en rojo (Prueba de especificidad) porque ambos selectores <p> tienen la misma prioridad, pero prevalece el último definido, p color: blue.



Para calcular cómo de específica es una regla, cada tipo de selector tiene asignado un valor numérico.  La especificidad de una regla se calcula al sumar el valor de cada uno de sus selectores.



La especificidad de un selector se divide en cuatro niveles:


    

  1. Nivel A es igual a 1 si el estilo es un estilo en línea
    2. 

  2. Nivel B es igual al número total de selectores ID
    3. 

  3. Nivel C es igual al número de selectores de clase, pseudo clase y atributo
    4. 

  4. Nivel D es igual al número de selectores tipo y selectores pseudo elemento
    5. 




Una regla escrita en un atributo de estilo/style siempre será más específica que cualquier otra regla. Una regla con un ID será más específica que una sin un ID, y una regla con un selector de clase/class será más específica que una regla con selectores tipo (h1-h6, p, etc.).



La especificidad de las hojas CSS permite establecer estilos generales para elementos comunes y luego ir anulándolos para elementos más concretos, más específicos.



Herencia



Los documentos HTML están estructurados de forma jerárquica para ordenar el contenido. El primer elemento de esta estructura es el <html>, y de él son descendientes el resto de elementos que constituyen y forman una página web.







Esta característica de las hojas de estilo nos va ha permitir que determinadas propiedades como por ejemplo color o tamaño de la fuente no se tenga que indicar elemento por elemento, sino que con indicárselo al elemento padre, éste, por herencia, lo trasladará a sus hijos, a sus descendientes.



Con motivo de esta característica, se nos puede dar el caso que un elemento herede valores de todos sus superiores jeráquicos.







Los párrafos en rojo con tipo de fuente Arial, tamaño 14px.







La herencia se puede interumpir si declaramos una nueva regla CSS. Por ejemplo, indiquemos que el color para body y sus descendientes es negro,  pero cambiemos el tipo de fuente, tamaño,  y color para el elemto p.







La regla definida para el elemto <p> prevalece sobre las que debería heredar de sus elementos superiores jerárquicos. Al igual que en la la especificidad, la regla CSS más próxima tiene mayor prioridad. Así, si en el elemento aplicamos una regla de estilo directa, ésta prevalecerá sobre la que se haya definido en las hojas de estilo CSS.



Minificar recursos (HTML, CSS y JavaScript)





Esta regla se activa cuando PageSpeed Insights detecta que podría reducirse el tamaño de uno de tus recursos mediante la minificación.



Descripción



Se entiende por "minificación" el proceso mediante el cual se eliminan datos innecesarios o redundantes de un recurso sin que se vea afectada la forma en que los navegadores lo procesan. Por ejemplo, eliminar comentarios y formato innecesario, retirar código que no se usa, emplear variables y nombres de funciones más cortos, etc.



Para obtener más información, consulta la sección Minificación: procesamiento previo y optimizaciones específicas para el contexto.



Recomendaciones



Es aconsejable minificar tus recursos de HTML, CSS y JavaScript. Para hacerlo, dispones de las siguientes herramientas:


    

  • Para minificar HTML, prueba HTMLMinifier.
    • 

  • Para minimizar CSS, prueba CSSNano y csso.
    • 

  • Para minificar JavaScript, prueba UglifyJS, aunque la herramienta Closure Compiler también es muy efectiva. Puedes diseñar un proceso de programación en el que se usen estas herramientas para minificar los archivos de desarrollo, cambiarles el nombre y guardarlos en un directorio de producción.
    • 




Si tienes un servidor web Apache o Nginx, el módulo PageSpeed se integra con tu servidor para optimizar automáticamente tu sitio web. Estas optimizaciones incluyen la minificación de recursos.

No hay comentarios.:

Publicar un comentario

Suscribirse a: Entradas (Atom)

SCRUM

Qué es SCRUM Scrum es un proceso en el que se aplican de manera regular  un conjunto de buenas prácticas  para  trabajar colaborativ...

  • SCRUM
    Qué es SCRUM Scrum es un proceso en el que se aplican de manera regular  un conjunto de buenas prácticas  para  trabajar colaborativ...
  • INTRODUCION A JAVA
    ¿Qué es Java? Lenguaje de programación Java Java es un lenguaje de programación orientado a objetos cuya versión 1.0 fue pu...