Introducción
Componentes del léxicoDeclaraciones
Niveles de definición
Comentarios
Herencia
ValoresPropiedades de fuentes
Propiedades color y background
Propiedades de texto
Propiedades de cuadros
Propiedades de clasificación
Propiedades de interfaz de usuarioSeudo-clase ancla
Seudo-elemento primera línea
Seudo-elemento Primera letra! important
Origen de las reglas
Regla especificidad
Orden de especificación
CSS son las siglas de Cascade Style Sheet, que significa hojas de estilo en cascada.
Es una especificación por medio de la cual se intenta separar la lógica (el contenido) de un documento HTML (de la que se encarga el lenguaje HTML), de su presentación o apariencia (el formato o diseño). En un desarrollo posterior JavaScript se ocuparía del comportamiento.
CSS nos permite aplicar formato de modo mucho más exacto, con más posibilidades de presentación, y más unidades de medida.
CSS facilita la lectura del código para la búsqueda de errores, al poder separar el contenido con las instrucciones necesarias para darle estilo.
CSS es soportado a partir de la versión 4 de Netscape y la 3 de Microsoft, aunque no todo y no siempre de igual forma, por lo que debemos utilizar esta tecnología con cuidado.
La sintaxis utilizada en la definición de estilos es prácticamente HTML. Recordar que los nombres siempre empiezan por letra, y que los de elementos (etiquetas) y atributos no distinguen entre mayúsculas y minúsculas, pero los de entidades si.
Un selector es el elemento que está conectado a un estilo particular.
Cualquier elemento, o nombre de etiqueta, HTML es un posible selector CSS. Esta conexión se realiza mediante una declaración que asigna propiedades a un conector (o a varios que estén separados por comas) y a éstas un determinado valor.
selector { propiedad1:valor; ...;prop-n:valor" }
selector, ... selector-n { propiedad1:valor; ...;prop-n:valor" }
Un selector puede tener diferentes clases, permitiendo así al mismo elemento tener diferentes estilos
selector.clase1 { propiedad1:valor; ...;prop-n:valor" }
selector.clase2 { propiedad1:valor; ...;prop-n:valor" }
Las clases también pueden ser declaradas sin elementos asociados:
.clase1 { propiedad1:valor; ...;prop-n:valor" }
Los selectores de contexto son dos o más selectores separados por espacios, en que solo se aplica el estilo al segundo cuanto esté dentro del primero.
Selector5 Selector6 { propiedad1:valor; ...;prop-n:valor" }
También es posible identificar un estilo por nombre, declarando un nombre único:
#nombre1 { propiedad1:valor; ...;prop-n:valor" }
Tenemos varias posibilidades para definir un estilo: especificarlo directamente en la etiqueta en la que queremos usarlo, definirlo aparte y aplicarlo en las etiquetas que queramos, o definir estilos globales para las etiquetas (que podrán ser cambiados en las que no se desee aplicarlos).
Para aplicar un estilo a una etiqueta concreta, usaremos el parámetro STYLE de la etiqueta:
<etiqueta STYLE="propiedad1:valor;...;prop-n:valor"> ... </etiqueta>
o el parámetro CLASS si hemos hecho declaración de clase:
<etiqueta CLASS=clase1> ... </etiqueta>
o el parámetroID si hemos hecho declaración de nombre:
<etiqueta ID=nombre1> ... </etiqueta>
Para que se aplique un mismo estilo a todas las etiquetas del documento, definiremos estilos globales por medio de la etiqueta <STYLE> y </STYLE>, dentro de la cabecera del documento (entre <HEAD> ... </HEAD>) como sigue:
<STYLE TYPE="text/css">
<!—
Selector1 {propiedad1:valor;...;propiedadn:valor }
Selector2, Selector3 {propiedad1:valor;...;propiedadn:valor}
Selector4.clase {propiedad1:valor;...;propiedadn:valor}
selector4.clase2 { propiedad1:valor; ...;propiedadn:valor}
.Clase1 {propiedad1:valor;...;propiedadn:valor}
Selector5 Selector6 {propiedad1:valor;...;propiedadn:valor}
#nombre1 { propiedad1:valor; ...;propiedadn:valor}
//-->
</STYLE>
Para secciones reducidas de una página, por ejemplo unas pocas palabras dentro de un párrafo, se utiliza la instrucción <SPAN> … </SPAN> con el parámetro style:
<p>texto <SPAN style="propiedad1:valor">texto con propiedad1</SPAN> más texto.</p>
Para definir divisiones o bloques de la página que incluyan una o más instrucciones se utiliza la instrucción <DIV> … </DIV>. La sintaxis es similar a las anteriores.
<DIV>
<etiqueta …
<etiqueta …
...
</DIV>
Podemos incluso definir los estilos en un fichero aparte, distinto al documento HTML, y después referenciarlo desde varios documentos HTML. Esto lo haremos con la etiqueta <LINK>, dentro de la cabecera del documento (entre <HEAD> ... </HEAD>):
<LINK REL="stylesheet" TYPE="text/css" HREF="URL_Hoja.css">
Otra manera de importar una declaración externa de estilos CSS en por medio de import, que se utiliza para importar unas declaraciones de estilos guardadas en la ruta que se indica entre paréntesis debiéndose escribir en la primera línea de la declaración de estilos:
<style type="text/css">
@import url ("archivo_a_importar.css");
...
</style>
Los comentarios se indican dentro de hojas de estilo con las mismás convenciones usadas en la programación C.
/* LOS COMENTARIOS NO PUEDEN ANIDARSE */
//Comentario de una sola línea.
La notación
//-->
dentro de un bloque STYLE se utiliza para indicar a
HTML establece una jerarquía de instrucciones de tal modo que unas contienen a otras, y nos dan una relación de herencia. La instrucción BODY, que hace referencia a todo el cuerpo del documento, podemos considerarla como la instrucción "padre", y dentro de ella todas las demás. Algunas de ellas a la vez, por ejemplo el párrafo es contenedora de otras instrucciones , como la negrita estableciéndose así una nueva relación "padre-hijo".
Atendiendo a esa relación, nos ahorramos establecer algunos parámetros en las instrucciones "hijas" dado que la mayoría de ellos se heredan. Sin embargo, si queremos, siempre podemos definir unos parámetros distintos para una instrucción "hija", de modo que en realidad solo se heredaran de la instrucción "padre" aquellos que no definamos en la instrucción "hija".
Atendiendo a los diferentes niveles de definición resulta que más de una declaración de estilos puede afectar a la misma instrucción. Para despejar las dudas que esto puede generar, siempre se tiene en cuenta la declaración de estilos más particular, siguiendo ese mismo orden de jerarquía de niveles de definición de estilos que hemos establecido en el apartado anterior.
Cualquier nombre que contenga un espacio en blanco deberá ser entrecomillado, con comillas simples o dobles.
Un valor de longitud se forma por un signo + o - opcional, seguido de un número y de una abreviación de dos letras que indica la unidad (sin espacio entre signo, número y abreviatura, p.e. +2px). Una longitud de 0 no necesita las dos letras para identificar la unidad. No hay espacios en un valor de longitud.
Las unidades relativas dan una longitud relativa a otra propiedad de longitud, y se prefieren ya que se ajustarán mejor a medios diferentes. Las siguientes unidades relativas están disponibles:
Las unidades de longitud absolutas son fijas y una longitud expresada en cualquiera de ellas aparecerá exactamente con ese tamaño. Son muy dependientes del medio de salida, y son por lo tanto menos útiles que las unidades relativas. Las siguientes unidades absolutas están disponibles:
Un valor de porcentaje se forma por un signo + o - opcional, seguido de un número y de %. No hay espacios en un valor de porcentaje.
Un valor de color es una palabra clave o una especificación numérica RGB.
Las 16 palabras clave se toman de la paleta Windows VGA
Black#000000NegroGreen#008000VerdeSilver#C0C0C0PlateadoLime#00FF00Verde limaGray#808080GrisOlive#808000Verde olivaWhite#FFFFFFBlancoYellow#FFFF00AmarilloMaroon#800000MarrónNavy#000080Azul marinoRed#FF0000RojoBlue#0000FFAzulPurple#800080PúrpuraTeal#008080Azul verdosoFuchsia#FF00FFFucsiaAqua#00FFFFCelesteLas especificaciones numéricas RGB se dan en una de cuatro maneras:
- #rrggbb (por ej., #00cc00)
- #rgb (por ej., #0c0)
- rgb(x,x,x) donde x es un entero entre 0 y 255 inclusive (por ej., rgb(0,204,0))
- rgb(y%,y%,y%) donde y es un número entre 0.0 y 100.0 inclusive (por ej., rgb(0%,80%,0%))
Un valor URL es dado por url(foo), donde foo es la URL. La URL puede ser opcionalmente entrecomillada con comillas simples (') o dobles (") y puede contener espacios en blanco.
selector { propiedad: url("ruta-nombre archivo.ext") }
El valor expresado como inherit significa que el elemento toma el mismo valor computado que la propiedad del padre del elemento. De este modo, se refuerza explícitamente el valor heredado. Pero, además, este valor se aplica aún a propiedades que de otro modo no serían heredadas.
El valor expresado como initial pone esta propiedad a su valor predeterminado.
Al definir una porción o bloque en las hojas de estilo se considera rodeado por una caja o cuadro, con propiedades de alineación, ancho, margen, borde, padding y fondo.
La seudo-clase distingue los diferentes tipos de un mismo elemento y el seudo-elemento se refiere a una parte de un elemento. Ambas son componentes especiales reconocidos automáticamente por los navegadores que soportan CSS.
La variación del estilo de los enlaces es de lo más utilizado.
A:link { propiedad1:valor; ... propiedadn:valor }
Podemos dar estilo de forma independiente o en conjunto, separando las seudo-clases con comas.
Un seudo-elemento first-line puede usarse en cualquier elemento de nivel de bloque (como P, H1, etc.). Un ejemplo de un seudo-elemento first-line sería:
P:first-line { font-variant:small-caps; font-weight:bold }
El seudo-elemento first-letter se emplea para crear letras capitales y otros efectos.
La primera letra de texto dentro del selector asignado se representará de acuerdo al valor asignado. Un seudo-elemento first-letter puede usarse en cualquier elemento de nivel de bloque. Por ejemplo:
P:first-letter { font-size:300%; float:left }
crearía una letra capital tres veces mayor que el tamaño normal de fuente.
Una capa es una división, una parte de la página, que tiene un comportamiento muy independiente dentro de la ventana del navegador.
Las etiquetas LAYER e ILAYER tienen como objetivo construir capas, pero estas no son compatibles más que con Netscape, por lo que es recomendable utilizar la etiqueta DIV, con el parámetro ID para su identificación.
En el uso de capas se basan muchos de los efectos más comunes del HTML dinámico.
Una capa puede tener cualquiera de los estilos vistos pero existen una serie de propiedades específicas que sirven para posicionar la división en la página como una capa.
CSS Grid Layout, es un sistema de rejilla en 2 dimensiones, creado dentro del lenguaje CSS para la maquetación web, estándar y compatible en todos los navegadores.
Líneas, son las divisiones que permiten acotar las celdas. Tenemos tanto líneas horizontales que dividen las filas como líneas verticales que dividen las columnas.
En una rejilla, todas las líneas están numeradas o mejor dicho, tienen un número que comienza en la línea más exterior de la rejilla. Obviamente la primera línea será la 1 y aumentarán de izquierda a derecha y de arriba a abajo.
Las líneas son muy importantes, porque serán las que nos permitan definir la posición de los contenidos (elementos del HTML) dentro de la rejilla.
Tracks, separados por dos líneas consecutivas es una columna completa o fila completa. Por tanto un track horizontal irá de izquierda a derecha, ocupando una única fila completa y un track vertical de arriba a abajo, ocupando una única columna completa.
Celda, un espacio definido entre dos líneas horizontales consecutivas y dos líneas verticales consecutivas. En la intersección de todas estas líneas se acota una celda.
Lógicamente, una celda tiene el tamaño de 1x1 en nuestra rejilla. Área, es una porción de nuestra rejilla que comprende más de una celda. Si hemos dicho que una celda es de 1 x 1, un área puede ser un conjunto de celdas de 2 x 1, 2 x 2, etc.
Las áreas son siempre cuadradas o rectangulares y se componen por celdas que están consecutivas, ya sea en la horizontal, vertical o ambas. Las áreas están delimitadas por las líneas.
Para utilizar el sistema CSS Grid necesitamos
1º Un contenedor Html con el atributo pertinente, por ejemplo:
<div class="grid-contenedor">
<div>fila 1</div>
<div>fila 2</div>
<div>fila 3</div>
</div>
2º Y definirlo como clase “grid” en CSS con la propiedad display
.grid-contenedor { display: grid; }
Este grid tiene una sola columna y tantas filas como elementos hijos tengamos en el contenedor, en este caso 3 filas..
Vamos a colocar algunos atributos extra en el contenedor:
.grid-contenedor { display: grid;
grid-template-columns: 100px 200px 300px;
justify-content: center; }
Con grid-template-columns estamos diciendo que queremos 3 columnas en nuestra cuadrícula; en este caso de 100, 200 y 300 pixels, y con justify-content se provoca que la rejilla entera se centre en la página.
También tenermos un par de atributos para obtener espacios entre filas (row-gap) y columnas (column-gap).
Numeración dinámica de las líneas en CSS Grid.
En un grid de 3 columnas, si tenemos 8 elementos hijo, se van llenando las filas y sus columnas correspondientes, una a una, por lo que en la última fila sólo aparecen dos elementos, ya que el tercero no existe en el código HTML. Los números de líneas que acotan las celdas se actualizan automáticamente.
En Chrome esto puede verse seleccionando Más herramientas. Herramientas para desarrolladores. , seleccionado el elemento grip-contenedor. Diseño, y marcando Superposiciones de cuadrícula.
Propiedad grid-template-columns define el número de columnas y sus tamaños Ya lo vimos anteriormente, con
grid-template-columns: 100px 200px 300px;
indicamos que queremos tres columnas, la primera que mide 100 píxeles de ancho, la segunda 200, y la tercera 300 píxeles de ancho.
Propiedad grid-template-rows para definir los tamaños de las filas,
grid-template-rows: 50px 100px 40px 60px 120px;
que funciona de forma parecida a la anterior. Las filas para las que no hemos definido nada adquieren el tamaño que les toque dependiendo de otras propiedades, pero serán todas iguales.
El navegador hará todo lo posible por ajustar el contenido de la rejilla a nuestra especificación situando cada elemento, según le llegue, en la casilla siguiente. Empezando de izquierda a derecha y de arriba a abajo.
Es normal que en una rejilla queramos combinar ambas propiedades, para que podamos definir los tamaños de las filas y columnas a la vez.
Para separar las filas se usa grid-row-gap, para las columnas grid-column-gap, y grid-gap para ambas a la vez.
grid-row-gap: 5px;
grid-column-gap: 10px;
grid-gap: 1em;
CSS Grid Layout trabaja con cualquier unidad CSS conocida, y además introduce la nueva unidad "fr" disponible solamente en los elementos de display grid. Esta unidad indica todo el espacio restante disponible. Usarla es sencillo e intuitivo, y sus posibilidades son muy amplias.
Por ejemplo para hacer dos columnas, una a la izquierda que mide 350 píxeles y otra a la derecha cuya anchura será todo el espacio restante de la línea.
grid-template-columns: 350px 1fr;
Creamos tres columnas. La del medio tendrá 300 píxeles, y las dos de los laterales ocuparán resto del espacio horizontal disponible, pero dividido a partes iguales.
grid-template-columns: 1fr 300px 1fr;
Indicamos que el espacio disponible se divida entre las dos columnas, de manera que la primera ocupará el doble que la segunda.
grid-template-columns: 2fr 1fr;
Es posible usar unidades fijas o relativas en cualquier situación y por supuesto mezclarlas a nuestra conveniencia.
grid-template-columns: 50% 1fr 2fr 100pt 8rem 200px;
Creamos 6 columnas indicando que la primera columna tenga el 50% del espacio total. Luego tenemos 1fr y 2fr. Estos valores se quedan para calcular al final, cuando todos los demás espacios ya han sido asignados. Los espacios de las columnas cuarta, quinta y sexta, 100pt, 8rem y 200px son fijos, por lo que se asignan de manera rígida y luego nos quedan 1fr y 2fr. Eso quiere decir que, del espacio que sobró después de asignar el resto de columnas, se dividirá en tres. Siendo una tercera parte a la columna que indica 1fr y dos terceras partes a la columna de 2fr.
La unidad auto la podemos usar siempre que queramos que la columna o la fila tengan un tamaño automático, lo suficientemente grande como para que quepa el contenido que lleva dentro.
grid-template-columns: auto auto;
En este caso estamos indicando que queremos tener dos columnas y que ambas crecerán automáticamente lo que sea necesario para que quepa el contenido.
Esta configuración está dejando al navegador libre para escoger los tamaños que dependerán mucho de la anchura de la pantalla del dispositivo.
La función repeat, nos solventará la necesidad de repetir siempre las mismas unidades todo el rato, de manera que ahorremos algo de código.
grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto;
grid-template-columns: repeat(5, 1fr) auto;
Estas dos notaciones son equivalentes. La función repeat tiene dos parámetros, el primero indica el número de veces que se debe repetir la unidad de medida que indica el segundo.
La función minmax recibe dos valores y el resultado final que le dará a las columnas es siempre un valor que se encuentra entre el mínimo y el máximo.
minmax(200px, 300px)
El valor del primer parámetro es el mínimo y el valor del segundo parámetro es el máximo.
El atributo justify-items, nos permite justificar los items de la rejilla en la horizontal. El valor por defecto es left, pero podemos alterar la disposición con right, center o stretch que hace que ocupe todo el espacio disponible.
El atributo align-items funciona de manera similar para la alineación que se produce en la vertical. Los valores a utilizar son
start, alineación superior,
end, alineación abajo,
center, centrado en la vertical, y
stretch, que hace que la imagen se agrande para ocupar el espacio disponible en la vertical.
El atributo justify-content hace una justificación de todas las celdas de la rejilla en la horizontal. Tiene sentido cuando los ítem que tenemos en la rejilla tienen un tamaño menor del espacio que les proporcionaría el contenedor.
justify-content: start; | end; | center; | stretch; | space-around; | space-between; | space-evenly;
El atributo border-radius permite redondear las esquinas de una caja según el valor del radio.
border-radius: 1-4 length | 1-4 length % | initial | inherit;
length. Define la forma de las esquinas. Valor predeterminado: 0
%. Define la forma de las esquinas en %
initial Pone esta propiedad a su valor predeterminado.
inherit. Hereda esta propiedad de su elemento padre.
Esta propiedad puede tener de uno a cuatro valores. Estas son las reglas:
Cuando se usan varias hojas de estilo, puede haber un conflicto sobre cual controla a un selector en particular. Las reglas de prelación de CSS son las siguientes:
Un estilo designado como ! important prevalecerá sobre estilos contradictorios de similar nivel.
La especificación se hace como si fuese un atributo, p.e.
BODY { background: url(bar.gif) white; background-repeat:repeat-x ! important }
Tanto los autores como los lectores tienen la capacidad de especificar hojas de estilo. Cuando hay un conflicto entre reglas, las reglas del autor prevalecerán sobre las reglas del lector de similar peso.
Tanto las hojas de estilo del autor como las del lector primarán sobre las hojas de estilo incorporadas del navegador.
Cualquier regla ! important prevalecerá sobre las reglas normales, por lo que se aconseja a los autores usar reglas normales casi exclusivamente, para asegurar que los usuarios con necesidades especiales de estilos puedan leer la página.
Un estilo más específico siempre prevalecerá sobre uno menos específico.
Es más específico un estilo dependiendo del número de
Para hacerlo sencillo, cuando dos reglas tienen el mismo peso, prima la última regla especificada.