¿Qué es CSS y para qué sirve?
Las partes experimentales son particulares para cada navegador y deberían ser evitadas en entornos de producción, o usadas con extrema precaución, ya que tanto la sintaxis como la semántica pueden cambiar en el futuro.
Formas de aplicar CSS
CSS Externo
<link rel="stylesheet" type="text/css" href="index.css" />
De esta forma, los navegadores sabrán que deben aplicar los estilos de este archivo (index.css) al documento HTML actual. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de scripts), obligando así al navegador a aplicar los estilos cuanto antes y eliminar la falsa sensación de página no cargada por completo.
Esta es la manera recomendada de utilizar un archivo CSS en nuestros documento y la que utilizaremos principalmente.
De esta forma, los navegadores sabrán que deben aplicar los estilos de este archivo (index.css) al documento HTML actual. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de scripts), obligando así al navegador a aplicar los estilos cuanto antes y eliminar la falsa sensación de página no cargada por completo.
Esta es la manera recomendada de utilizar un archivo CSS en nuestros documento y la que utilizaremos principalmente.
CSS Interno
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<style type="text/css">
div {
background:#FFFFFF;
}
</style>
</head>
...
CSS en línea o embebido
<p>¡Hola <span style="color:#FF0000">amigo lector</span>!</p>
Al igual que en el método anterior, se recomienda no utilizarse salvo casos muy específicos, ya que se pierde la independencia de la presentación y contenido. Sin embargo, es una opción que puede venir bien en algunos casos.
¿Qué es un comentario y como se escribe?
Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos.
Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.
Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.
Sintaxis
/* Comentario */
La sintaxis de comentarios /* */ es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento <style>, se puede usar <!-- --> para ocultar CSS para navegadores antiguos, aunque no es recomendable. Como en la mayoría de los lenguajes de programación que usan la sintaxis de comentarios /* */ estos no pueden ser anidados. En otras palabras, la primera instancia de */ que siga a una instancia de /* cerrará el comentario.
¿Qué es el modelo de cajas en CSS?
Propiedades de las cajas
Las propiedades width y height establecen el ancho y alto de la caja de contenido, que es el área donde se muestra el contenido de la caja — este contenido comprende tanto el texto incluido en la caja como otras cajas representadas por elementos anidados.
padding
Padding hace referencia al margen interior de la caja CSS — entre el límite exterior de la caja del contenido y el límite interior del borde. El tamaño de esta capa puede configurarse en sus cuatro lados a la vez con la propiedad abreviada padding, o cada lado por separado con las propiedades: padding-top, padding-right, padding-bottom y padding-left.
border
El borde de una caja CSS descansa entre el límite exterior del padding y el límite interior del margen. Por defecto tiene un tamaño de 0 — invisible — pero podemos cambiar su grosor, estilo y color para hacerlo visible. La propiedad abreviada de border permite establecer los cuatro lados a la vez, por ejemplo: border: 1px solid black. Pero también se puede dividir en varias propiedades extendidas para su uso en necesidades concretas de estilo:
- border-top, border-right, border-bottom, border-left: Establecen el grosor, estilo y color de cada lado del borde.
- border-width, border-style, border-color: Establecen únicamente el grosor, el estilo y el color por separado, pero para los cuatro lados del borde al mismo tiempo.
- Podemos también establecer cada propiedad por separado para cada lado individualmente, usando border-top-width, border-top-style, border-top-color, etc.
margin
El margen envuelve la caja CSS, y sostiene a otras cajas del diseño. Se comporta como padding; la propiedad abreviada es margin y las propiedades individuales son margin-top, margin-right, margin-bottom, y margin-left.
Ejemplo:
HTML
<div id="wrapper">
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>
</div>
CSS
/* General styles */
body {
margin: 0;
}
#wrapper * {
padding: 20px;
font-size: 20px;
border: 20px solid rgba(0,0,0,0.5);
}
/* specific boxes */
#wrapper header, #wrapper footer {
background-color: blue;
color: white;
}
#wrapper main {
background-color: yellow;
}
#wrapper header {
}
#wrapper footer {
}
Elementos de línea y de bloque
Elementos de bloque
Los navegadores suelen mostrar el elemento a nivel de bloque con un salto de línea antes y después del elemento. El siguiente ejemplo demuestra la influencia elementos en bloque:
HTML
<p>Este párrafo es un elemento en bloque; este fondo se ha coloreado para mostrar elemento principal (o padre) del párrafo.</p>
CSS
Elementos de línea
Un elemento en línea ocupa sólo el espacio delimitado por las etiquetas que definen el elemento en línea. El siguiente ejemplo demuestra la influencia de los elementos en línea:
HTML
<p>Este <span>span</span> es un elemento en línea; este fondo se ha coloreado para mostrar el principio y fin de la influencia del elemento en línea</p>
CSS
Propiedades abreviadas en CSS3
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 abreviada 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.
Propiedades Background
Un fondo con las siguientes propiedades...
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
... puede acortarse con una sola declaración:
... puede acortarse con una sola declaración:
background: #000 url(images/bg.gif) no-repeat top right;
(La forma abreviada es realmente equivalente a las propiedades a mano anteriores más background-attachment: scroll y, en CSS3, a algunas propiedades adicionales.)
(La forma abreviada es realmente equivalente a las propiedades a mano anteriores más background-attachment: scroll y, en CSS3, a algunas propiedades adicionales.)
Las siguientes declaraciones:
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;
... pueden ser abreviadas como sigue:
... pueden ser abreviadas como sigue:
font: italic bold .8em/1.2 Arial, sans-serif;
Esta declaración abreviada es realmente equivalente a las declaraciones a mano anteriores así como también a font-variant: normal y font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).
Esta declaración abreviada es realmente equivalente a las declaraciones a mano anteriores así como también a font-variant: normal y font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).
Con los bordes, el ancho, color y estílo pueden ser simplificados en una declaración. Por ejemplo,
border-width: 1px;
border-style: solid;
border-color: #000;
... puede ser simplificada como
... puede ser simplificada como
border: 1px solid #000;
Herencia, cascada y especificidad
Cascada
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
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:
Que produce el siguiente resultado:
- 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.
Especificidad
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.
¿Qué es minificar recursos?
Esta regla se activa cuando PageSpeed Insights detecta que podría reducirse el tamaño de uno de tus recursos mediante la minificación.
¿Qué es el Flex Box en CSS3?
Flexbox viene de «Flexible Box Layout«, que se puede traducir como «Diseño de caja flexible«, y nos aporta una magnífica solución para todos nuestros desarrollos «responsive». Lo que nos permite es crear un conjunto de elementos flexibles que se adaptan automáticamente a su contenedor y con el que podemos controlar parámetros tales como la alineación, dirección (horizontal/vertical), ajuste de la fila según tamaños y multitud de posibilidades.
No hay comentarios:
Publicar un comentario