¿Que es el CSS?

CSS o Cascading Style Sheets (hojas de estilo en cascada) es un lenguaje de estilos utilizado para describir la presentación de un documento HTML u otro lenguaje de etiquetas (XML,SVG, etc).

La versión actual es la 3.

El World Wide Web Consortium (W3C) es el encargado de mantener el standar de CSS.

Sintaxis

Una declaración de css esta compuesta de 2 elementos:

  • Propiedades: Identificador que nos indica que propiedad vamos a afectar
  • Valor: Indica el valor que vamos a modificar la propiedad seleccionada
background-color: red

Propiedad

Separador

Siempre se utiliza el simbolo dos puntos

Valor

Sintaxis

Una regla de css consiste en declaraciones agrupadas en bloques

div {
    background-color: red;
    font-size: 10px;
}

En este caso div representa el selector y el bloque se declara encerrando las definiciones entre corchetes { }

Formas de usar CSS

Los estilos css se pueden aplicar de 3 formas diferentes:

  • Estilos inline
  • Hoja de estilos interna
  • Hoja de estilos externa

Estilos inline

Los estilos inline solo afectan aun solo elemento html y se declaran mediante el atributo style.

<h1 style="color: blue;background-color: yellow;">hola mundo</h1>

Debido a que solo afectan a un solo elemento se consideran mala practica.

Hoja de estilos interna

Como en este tipo de estilos no se cuenta con un archivo aparte, los estilos se colocan dentro del elemento <style> en el head del HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Estilos internos</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h1>Hola mundo</h1>
  </body>
</html>

Este tipo de estilos solo tienen efecto en el archivo donde se declaran.

Hoja de estilos externa

Aqui el css se define en un archivo separado con la extencion .css y se agrega en el html mediante el elemento <link>

h1 {
  color: blue;
  background-color: yellow;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Estilos internos</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hola mundo</h1>
  </body>
</html>

Esta forma es la mas recomendada ya que mediante la misma referencia se puede utilizar en distintos archivos

Selectores

Los selectores son los que nos indican a que elementos se le va aplicar el estilo definido.

Los podemos agrupar en diferentes categorías:

  • Selectores Simples
  • Atributos
  • Pseudo-clases
  • Pseudo-elementos
  • Selectores múltiples
  • Combinadores

Selectores simples

Los selectores de tipo o elemento se declaran colocando el nombre del elemento html a los que se le quiere aplicar el estilo.

<p>What color do you like?</p>
<div>I like blue.</div>
<p>I prefer red!</p>
p {
  color: red;
}

div {
  color: blue;
}

Selectores simples

El selector de clase consiste en un '.' seguido del nombre de la clase que se quiere seleccionar. Las clases se definen en los elementos html mediante el atributo class.

<ul>
  <li class="first done">Primera linea</li>
  <li class="second done">Segunda linea</li>
  <li>Tercera linea</li>
</ul>
.first {
  font-weight: bold;
}
.done {
  text-decoration: line-through;
}

Para especificar clases múltiples en un elemento solo hay que separarlas con un espacio en blanco.

Selectores simples

El selector de ID consiste en un '#' seguido del nombre del id que se quiere seleccionar. Los ID se definen en los elementos html mediante el atributo id.

<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>
#polite {
  font-family: cursive;
}
#rude {
  font-family: monospace;
  text-transform: uppercase;
}

Es el selector mas eficiente para seleccionar un solo elemento ya que los id son únicos.

Selectores de atributos

Se utilizan para seleccionar elementos en base a sus atributos o al valor de sus atributos.

Su sintaxis básica consiste en el atributo rodeado de corchetes [ ] y opcional mente una condición del valor.

Se pueden clasificar de 2 formas:

  • Selector de presencia y valor
  • Selector de substring

Selectores de presencia

Estos selectores de atributos encuentran valores exactos.

  • [attr]: Selecciona todos los elementos que contienen el atributo
  • [attr=value]: Selecciona todos los elementos que contienen el atributo con el valor especificado
  • [attr~=value]: Selecciona todos los elementos que contienen el atributo solo si el valor pertenece a una lista de valores separadas por un espacio en blanco, por ejemplo, cuando se agregan varias clases a un elemento

Selectores de presencia

Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>
[data-vegetable] {
  color: green
}
[data-vegetable="liquid"] {
  background-color: goldenrod;
}
[data-vegetable~="spicy"] {
  color: red;
}

Selectores substring

Estos funcionan muy similar a las expresiones regulares ya que son por aproximación o similitud.

  • [attr|=val]: Selecciona los elementos con el atributo y el valor exacto a "val" o que comience con "val"
  • [attr^=val]: Selecciona los elementos con el atributo con un valor que comience con "val"
  • [attr$=val]: Selecciona los elementos con el atributo con un valor que termine con "val"
  • [attr*=val]: Selecciona los elementos con el atributo con un valor que contenga "val"

Selectores substring

Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>
[lang|=fr] {
  font-weight: bold;
}
[data-vegetable*="not spicy"] {
  color: green;
}
[data-quantity$="kg"] {
  font-weight: bold;
}
[data-quantity^="optional"] {
  opacity: 0.5;
}

Pseudo clases

La pseudo clase es una palabra clave precesida del simbolo dos puntos(:) que se agrega a los elementos solo cuando cumplen con cierto estado

Unos ejemplos de pseudo clases son:

  • visited
  • hover
  • checked
  • enabled
  • disabled

Referencia de pseudo clases

Pseudo clases

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>
a {
  color: blue;
  font-weight: bold;
}
a:visited {
  color: green;
}
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

Mozilla Developer Network

Pseudo elementos

Son muy similares a las pseudo clases solo que estos en lugar de indicar un estatus especial, nos permiten aplicar estilos a ciertas partes del documento. Estos se especifican con un doble dos puntos (::).

Unos ejemplos de pseudo elementos son:

  • after
  • before
  • first-line
  • enabled

Referencia de pseudo elementos

Selectores multiples

Se utilizan para asignar una misma regla a multiples elementos o selectores.

Para utilizarlos simplemente hay que colocar comas "," entre los selectores.

p, li {
  font-size: 1.6em;
}
h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

Combinadores

Se utilizan para combinar varios selectores, normalmente en base a su relación con otro.

Combinador Selección
AB Cualquier elemento que cumpla con A y B simultáneamente.
A B Cualquier elemento que cumpla con B y ademas que sea descendiente de A (puede ser hijo, nieto, etc).
​​A>B ​Cualquier elemento que cumpla con B y que ademas sea hijo directo de A.

Basándonos en que A y B son cualquier selector.

Combinadores

Combinador Selección
A+B Cualquier elemento que cumpla con B y que ademas sea el siguiente hermano de A (el siguiente hijo del mismo padre).
A~B Similar al anterior solo que obtiene todos los elementos siguientes en lugar de solo uno 
<table lang="en-US" class="with-currency">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Qty.</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2" scope="row">Total:</th>
      <td>148.55</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Lawnchair</td>
      <td>1</td>
      <td>137.00</td>
    </tr>
    <tr>
      <td>Marshmallow rice bar</td>
      <td>2</td>
      <td>1.10</td>
    </tr>
    <tr>
      <td>Book</td>
      <td>1</td>
      <td>10.45</td>
    </tr>
  </tbody>
</table>
/* Configuracion de la tabla */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Todos los <td> que esten dentro de <table> y todos los
   <th> que esten adentro de <table>*/
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}

/* Todos los <th> dentro de <thead> que esten dentro de 
   <table> */
table thead th {
  color: white;
  background: black;
}

/* Todos los <td> que sean hijos directos de <td>,
   dentro de <tbody> y asu vez dentro de <table> */
table tbody td + td {
  text-align: center;
}

/* Todos los <td> que sean el ultimo hijo dentro
   de un <tbody> a su vez dentro de un <table> */
table tbody td:last-child {
  text-align: right
}

/* Todos los <th> dentro de <tfoot> a su vez dentro 
   de <table> */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;
}

/* Todos los <td> hijos de un <th> dentro de <table> */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

/* Todos los pseudo-elementos "before" <td> que son last child(pseudo-clase),
   dentro de elementos con la clase "with-currency" que tienen
   el atributo "lang" con el valor "en-US" */
.with-currency[lang="en-US"] td:last-child::before {
  content: '$';
}

/* Todos los pseudo-elementos "after" <td> que son last child
   dentro de elementos con la clase "with-currency" que tienen
   el atributo "lang" con el valor "fr" */
.with-currency[lang="fr"] td:last-child::after {
  content: ' €';
}

Link

Unidades y valores en CSS

En CSS se manejan diferentes tipos de unidades dependiendo de la propiedad que se vaya afectar.

Podemos resumirlos en los siguientes grupos:

  • Valores numéricos
  • Porcentajes
  • Colores
  • Coordenadas
  • Funciones

Valores numéricos

Generalmente se usan para longitud y tamaño, se utilizan para definir layouts, tipografía, etc.

Los podemos agrupar de dos formas:

  • Unidades absolutas
  • Unidades relativas

Valores numéricos

Las unidades absolutas siempre van a ser del mismo tamaño sin que le afecten otras configuraciones.

  • px: Pixeles
  • mm, cm, in: Milimetros, centimetros o pulgadas
  • pt, pc: Puntos(            de pulgada) o picas (12 puntos)
1/72
1/721/72

Su uso no es tan común, excepto los pixeles

Valores numéricos

Las unidades relativas son aquellas cuya influencia es relativa a elementos como el tamaño de fuente o el tamaño del viewport.

  • em: 1em es equivalente al tamaño actual de la fuente( mas especifico, al ancho de la letra mayúscula "M"). En base al tamaño de fuente default que manejan los navegador, podemos decir que 1em es igual a 16 pixeles.
  • ex, ch: Respectivamente equivalen a la altura de la letra minuscula "x" y al ancho del numero '0'.

Valores numéricos

  • rem: Funciona igual que el em, excepto que siempre equivale al tamaño default de la fuente.
  • vw, vh: Respectivamente son                del ancho del viewport y               del alto del viewport.

De todos los anteriores el em es el que mas se suele utilizar.

1/100
1/1001/100
1/100
1/1001/100

Son muy útiles ya que a como cambia el tamaño del viewport, conservando el layout de forma correcta.

Valores numéricos

<p>18 pixeles</p>
<p>30 pixeles</p>
<p>1 em</p>
<p>2 em</p>
p:nth-child(1) {
  font-size: 18px;
}
p:nth-child(2) {
  font-size: 24px;
}
p:nth-child(3) {
  font-size: 1em;
}
p:nth-child(4) {
  font-size: 2em;
}

Porcentajes

Estos especifican un tamaño en base a su contenedor padre.

Este tipo de unidades hacen que los elementos se vayan adaptando al tamaño del layout, conservando el aspecto en dispositivos mas pequeños.

Porcentajes

<div>div con porcentajes</div>
div {
    background-color:white;
    height: 80%;
    width: 90%;
}

Colores

Existen diferentes formas de declarar colores en CSS.

  • Nombre
  • Hexadecimal
  • RGB
  • HSL
  • RGBA and HSLA

También se puede definir la opacidad de manera independiente

Colores: Nombre

Es la forma de declaracion de colores mas vieja que hay, se declaran como strings, por ejemplo, red, green, blue, etc.

Lista completa

p {
  background-color: red;
}

Colores: Hexadecimal

Se representan con el símbolo de '#' seguido de seis números hexadecimales.

/* Equivale al rojo */
p:nth-child(1) {
  background-color: #ff0000;
}
/* Equivale al azul */
p:nth-child(2) {
  background-color: #0000ff;
}
p:nth-child(3) {
  background-color: #e0b0ff;
}

Colores: RGB

Se declaran mediante la funcion rgb(), se define cada canal con 2 digitos con valores entre 0 y 255.

/* Equivale al rojo */
p:nth-child(1) {
  background-color: rgb(255,0,0);
}
/* Equivale al azul */
p:nth-child(2) {
  background-color: rgb(0,255,0);
}
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

Colores: HLS

  • Hue: El tono base del color, su valor es entre 0 y 360
  • Saturation: Que tanta saturación tiene el color, con valor entre 0 y 100%
  • Lightness: Que tan brillante o iluminado esta el color, con valor entre 0 y 100%
/* Equivale al rojo */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}
/* Equivale al azul */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}
p:nth-child(3) {
  background-color: hsl(276,100%,85%);
}

Se define con la funcion hsl()

Colores: RGBA y HSLA

Similares a sus versiones anteriores con la peculiaridad de manejar el canal alfa con un valor entre 0 y 1.

p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

Colores: Opacidad

Mediante la propiedad opacity se puede definir la transparencia del elemento seleccionado, así como todos sus descendientes.

p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

Cascade y herencia

Debido a que un elemento puede ser afectado en diferentes reglas existe un orden en el que los estilos se aplica, a esto se le conoce como cascade.

La forma mas básica de cascade es por el lugar donde se declara la regla de estilo, siendo por orden de importancia:

  1. Estilos Inline
  2. Hoja de estilos interna
  3. Hoja de estilos externa

Cascade y herencia

Cuando lo anterior no es aplicable, existen tres factores que pueden sobreescribir una regla de estilo, siendo estos por orden de importancia:

  1. Importancia
  2. Especificidad
  3. Orden de declaración

Importancia

En CSS existe una forma de hacer que una regla de estilo de imponga sobre las demás, esto es mediante la palabra clave !important.

<p class="default">Parrafo</p>
<p class="default" id="unico" style="background-color: blue;">Parrafo importante</p>
.default{
  background-color: gray;
  border: none !important;
}
#unico{
  background-color: red !important;
  border: 1px solid black;
}

Especificidad

Se refiere a que tan especifico es un selector en base a que tantos elementos selecciona.

Se puede asignar un valor numérico a un selector, a esto se le llama selector weight. Hay 4 diferentes cantidades que las podemos enumerar de la siguiente forma:

  1. Miles: Selectores declarados dentro de la etiqueta <style> o en el atributo style
  2. Cientos: Cada selector de id en la regla
  3. Decimos: Cada selector de clase, de atributo o pseudo clase
  4. Unos: Cada selector de elemento o pseudo elemento

Especificidad

Selector Miles Cientos Decimos Unos Total
h1 0 0 0 1 0001
#important 0 1 0 0 0100
h1 + p::first-letter 0 0 0 3 0003
​li > a[href=*"en-US"] > .inline-warning 0 0 2 2 0022
#important div > div > a:hover, declarado dentro de un <style> 1 1 1 3 1113

Orden de declaración

Cuando no aplica ninguna de las anteriores, se recurre al orden de aparición en el archivo para determinar cual aplicar.

Texto de relleno

p {
    background-color: AliceBlue;
    color: blue;
}

/* Aparece mas abajo, por lo
   tanto este es el que aplica */
p {
    background-color: white;
    color: red;
}

Herencia

Existen ciertas propiedades las cuales son heredadas a todos los elementos que son descendientes del elemento afectado.

Por ejemplo el font-family y  color son propiedades que se heredan.

Esta herencia se controla mediante 3 valores especiales:

  • inherit: Especifica que se utilice el valor declarado en su padre
  • initial: Especifica que se utilice el valor default del navedor, si el navegador no especifica valor, se utiliza inherit

Herencia

  • unset: Reinicia la propiedad a su valor natural, si la propiedad es heredada naturalmente entonces actúa como inherit, sino actúa como initial.
<ul>
  <li>Color de <a href="#">link</a> default</li>
  <li class="inherit">Hereda el color de <a href="#">link</a></li>
  <li class="initial">Reinicia el color de <a href="#">link</a></li>
  <li class="unset">Reestablece el color de <a href="#">link</a></li>
</ul>
body {
  color: green;
}
.inherit a {
  color: inherit;
}
.initial a {
  color: initial
}
.unset a {
  color: unset;
}

<div id="outer" class="container">
  <div id="inner" class="container">
    <ul>
      <li class="nav"><span href="#">Uno</span></li>
      <li class="nav"><span href="#">dos</span></li>
    </ul>
  </div>
</div>
#outer #inner span {
  background-color: initial;
  color: red;
}
#outer div ul .nav span {
  background-color: blue;
  padding: 5px;
  display: inline-block;
  margin-bottom: 10px;
}
div div li span {
  color: yellow;
}

¿Cual va ser el resultado final?

  • Uno
  • Dos
  • Uno
  • Dos

Box model

El box model es la base de los layouts en web, cada elemento puede ser representado como una caja rectangular con un contenido, borde, margen y un relleno o padding.

Box model

  • width and height: Estas propiedades establecen el ancho y alto del content
  • padding: Representa un margen interno entre el contenido y el borde de la caja
  • border: El borde es una capa que se ubica entre el padding y el margin, por default es 0 lo que lo hace invisible
  • margin: El margen representa un área que rodea la caja y es la que "empuja" las otras cajas en el layout

Box model

div {
    background-color: #C8F7C5;
    width: 300px;
    border: 25px solid #1E824C;
    padding: 25px;
    margin: 25px;
}
<div>Este texto representa el 
"content" de la caja. Declaramos 
25px de padding, 25px de margin y 
25px de un border verde....</div>

Box model: overflow

Cuanto tenemos un elemento con un tamaño fijo con contenido que no quepa en el se utiliza la propiedad overflow para indicar su comportamiento:

  • auto: Si el contenido excede las dimensiones de la caja, el contenido sobrante se oculta y se agregan barras de scroll
  • hidden: Similar a auto, solo que no aparecen los scroll, el contenido permanece oculto
  • visible: El contenido excedente se muestra fuera de la caja (comúnmente el default)

Box model: overflow

Box model: display

¿Cual es el comportamiento default de los elementos <p> y <div>?

A través de la propiedad display se puede especificar el comportamiento de la caja, por ejemplo block, inline e inline-block.

  • block: Se puede visualizar como si apiláramos cajas, el contenido de cada caja ocupa una linea separada.

Box model: display

  • inline: Lo contrario al block, la caja sigue el flujo del contenido así que esta va aparecer rodeada de texto y otras cajas inline. Las propiedades ancho y alto no tienen efecto alguno en este tipo de cajas, cualquier cambio a padding, margin o border no tiene ninguna influencia en las cajas block
  • inline-block: Combinación de los dos anteriores, sigue el flujo del texto sin crear nuevas lineas, pero su tamaño puede ser cambiado mediante width y height

Box model: display

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>
p {
  padding : 1em;
  border  : 1px solid black;
}
span {
  padding : 0.5em;
  border  : 1px solid green;
  /* Hace visible la caja */
  background-color: yellow;
}
.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

Box model: box sizing

Como vimos anteriorermente, el width y el height de una caja solo al content, esto se puede cambiar mediante la propiedad box-sizing.

  • content-box: Comportamiento visto anteriormente, el ancho y alto se calcula mediante la suma de width/height, padding y border
  • border-box: El width y height contiene content, padding y border

Box model: box sizing

Posicionamiento

Mediante la propiedad position podemos cambiar por completo el comportamiento del flujo de elementos en el layout.

Por ejemplo podemos colocar un elemento flotando en la pagina, o estático en una sola posición.

Posicionamiento estatico

Este tipo de posicionamiento le indica al navegador que coloque el elemento en el orden común que sigue el flujo del elemento.

Se declara mediante el valor "position:static"

Este es el comportamiento default de todos los elementos

Posicionamiento relativo

Los elementos con el valor "position: relative" son posicionados en su ubicación relativa de acuerdo al flujo del layout, con la peculiaridad que su posición puede ser alterada mediante top,bottom, left y right.

El contenido restante no ocupara el espacio vació que deje el elemento con posición relativa.

Posicionamiento relativo

<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

<p class="positioned">By default we span 100% of the width of our parent element, and our are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>

<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
body {
  width: 500px;
  margin: 0 auto;
}
p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}
.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

Posicionamiento absoluto

Los elementos con el valor "position: absolute" son posicionados en forma relativa a su ancestro mas cercano, sino cuenta con un elemento ancestro se utiliza el body y el elemento avanza con el scroll de la pagina.

Este tipo de posicionamiento no afecta el flujo de los demás elementos en el layout.

Posicionamiento absoluto

<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>

<p class="positioned">Now I'm absolutely positioned, I'm not playing by the rules any more!</p>

<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
body {
  width: 500px;
  margin: 0 auto;
}
p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}
.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Posicionamiento fijo

Los elementos con el valor "position: fixed" posiciona los elementos de manera fija en la ventana del navegador

Este tipo de posicionamiento no influye en el flujo del documento ya que siempre están fijos en una sola posición.

Posicionamiento fijo

z-index

Cuando tenemos elementos que se empalman visualmente utilizamos la propiedad z-index para indicar un orden de dibujado.

El valor default es 0 y como este numero vaya aumentando el elemento es dibujo al final. Tambien es posible asignar numeros negativos para reducir el orden del dibujado.

Ejemplo interactivo

Propiedad float

Mediante la propiedad float un elemento puede "flotar" hacia la izquierda o derecha, haciendo que todos los elementos fluyan a su alrededor.

Originalmente fue incluido para generar interfaces con imágenes rodeadas de texto, muy similares a las de los periódicos.

Es muy útil para cambiar el comportamiento de los elementos bloque(parrafos, divisores, etc).

Propiedad float

Propiedad float

Propiedad float

Cuando queremos que el texto ya no envuelva a los elementos flotantes, se utiliza la propiedad clear.

El clear puede recibir 3 valores:

  • Left
  • Right
  • Both

Es importante sabe cuando utilizarlo para evitar problemas como el siguiente

Propiedad float

Propiedad float

Si agregamos un selector con el valor css   clear: both;

Recrear el siguiente layout mediante CSS

Made with Slides.com