CSS avanzado

Desarrollo de Aplicaciones Web

Pseudoclases en CSS

Pseudoclases en CSS

¿Qué es una pseudoclase?

  • Algunos elementos de HTML disponen de estados especiales o usos asociados a ellos.

  • Se pueden aplicar estilos diferentes a estos elementos en base a esos estados o usos en hojas de estilo CSS.


  • Ejemplo, el elemento de HTML <a> tiene cuatro estados:

    • normal: Su estado normal
    • visited: Cuando se ha visitado el enlace al que hace referencia
    • hover: Cuando se tiene el cursor situado encima del mismo
    • active: Cuando se hace click sobre él

    Pseudoclases en CSS

    ¿Qué es una pseudoclase?

  • Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado.

  • Las pseudoclase, con los pseudoelementos, permiten aplicar estilo a un elemento no solo en relación con el contenido del árbol de documento, sino también en relación a factores externos como el historial del navegador (:visited, por ejemplo), el estado de su contenido (como :checked en algunos elementos de formulario), o la posición del ratón (como :hover que permite saber si el ratón está encima de un elemento).


  • selector:pseudoclase { propiedad: valor; }

    Pseudoclases en CSS

    Diferentes tipos de pseudoclases


  • Links: Se usan para dar estilo al enlace tanto en su estado normal por defecto como cuando ya ha sido visitado, mientras se mantiene el cursor encima de él o al hacer click en él.

  • Dinamicas: Pueden ser aplicadas a cualquier elemento para definir como se muestran cuando el cursor está situado sobre ellos, o haciendo click en ellos o bien cuando son seleccionados.

  • Estructurales: Permiten dar estilo a elementos en base a una posición numérica exacta del elemento.

  • Pseudoclases en CSS

    Diferentes tipos de pseudoclases


  • Otros: Hay otro tipo de pseudoclases que son más difíciles de clasificar, como:


  • :not(x), selecciona elementos que no coinciden con el selector x

  • :lang, selecciona elementos cuyo contenido está en un idioma específico

  • :dir, selecciona elementos cuyo contenido se muestra en un sentido dado (izquierda-derecha o derecha-izquierda)

  • Pseudoclases en CSS

    Pseudoclases soportadas, de enlace y dinámicos:

    Formato Nombre Se aplica
    :link Enlace Valor del atributo href no está en el histórico
    :visited Enlace Visitado Valor del atributo href está en el histórico
    :target Destino enlace Objetivo enlace
    :active Activo Se ha hecho click sobre el elemento
    :hover Sobre El cursor se encuentra sobre el elemento
    :focus Foco El elemento captura el foco del documento

    Pseudoclases en CSS

    Pseudoclases soportadas, estructurales y otras:

    Formato Nombre Se aplica
    :root Raíz El elemento principal de un documento
    :empty Vacío No tiene nodos hijos
    :only-child Solo del tipo Tiene un selector único entre sus hermanos
    :first-child Primer Hijo Es el primer nodo hijo de otro elemento
    :nth-of-type(n) N del tipo Es el n elemento con ese selector
    :last-child Último hijo El último nodo hijo de un elemento
    :first-of-type Primero del tipo El primer elemento de su tipo de selector en el elemento primario
    :last-of-type Último del tipo El último elemento de su tipo de selector en el elemento primario
    :lang Lenguaje Tiene un código de lenguaje específicamente definido
    :not Negación No está usando un selector específico

    Pseudoclases en CSS

    Ejemplos

    <!DOCTYPE html>
     <html lang="es">
     <head> <meta charset="utf-8"> <title>Pseudoclases</title>
     <link rel="stylesheet" href="estilos.css"> </head>
     <body>
     <div id="ejemplo">
     <p class="texto1">Mi texto1</p>
     <p class="texto2">Mi texto2</p>
     <p class="texto3">Mi texto3</p>
     <p class="texto4">Mi texto4</p>
     </div>
     </body>
     </html>
    

    Pseudoclases en CSS

    Ejemplos

  • El ejemplo incluye cuatro elementos que son hermanos entre sí e hijos del mismo elemento.

  • Mediante pseudoclases de puede aprovechar esta organización y referenciar un elemento específico sin importar cuánto conocemos sobre sus atributos y valor.

  • Una pseudoclase se agrega añadiendo : (dos puntos) detrás de la referencia y antes de su nombre.

  • Ejemplo:

    p:nth-child(2){ background: #999999; }
    

    Pseudoclases en CSS

    Ejemplos

    Esta regla puede incluir otras referencias.

                .miclase:nth-child(2){ background: #999999; }
              

    Se puede crear estilos para todos los elementos

    p:nth-child(1){ background: #999999; }
    p:nth-child(2){ background: #CCCCCC; }
    p:nth-child(3){ background: #999999; }
    p:nth-child(4){ background: #CCCCCC; }
    

    La pseudoclase nth-child(2) permite encontrar un hijo específico, es como buscar el hijo en una posición dada, en el ejemplo previo.

    Pseudoclases en CSS

    Ejemplos

    Es posible incorporar nuevos elementos <p> y reglas, mediante odd y even.
    Así se puede dar distinto formato a los hijos pares e impares.

    p:nth-child(odd){ background: #999999; }
    p:nth-child(even){ background: #CCCCCC; }
    

    Pseudoclases en CSS

    Ejemplos

    nth-child para tablas

    span:nth-child(2n+1)
    {
        background-color: red;
    }
    <div>
        <span>Este span es rojo</span>
        <span>Este span no lo es.</span>
        <span>Pero este si lo es</span>
        <span>Este no lo es...</span>
      </div>
    

    Se verá alternativamente cada frase con fondo rojo y blanco.

    Pseudoclases en CSS

    Ejemplos

    :first-child selecciona el primer elemento hijo de un elemento.

    p em:first-child {
      color: red;
    }
    

    El selector p em:first-child selecciona el primer elemento <em> que sea hijo de un elemento y que se encuentre dentro de un elemento <p>.

    Pseudoclases en CSS

    Ejemplos

    Ejemplo de :first-child

    span:first-child {
        background-color: navy;
    }
    <div>
      <span>Este span es azul marino</span>
      <span>Este span no lo es</span>
    </div>
    

    Se mostraría la primera frase con fondo azul y la segunda con el color por defecto.

    Pseudoclases en CSS

    Ejemplos

    :last-child selecciona el último elemento hijo.

    li:last-child {
      background-color: lime;
    }
    <ul>
      <li>Este elemento no es de color lima</li>
      <li>Este otro tampoco</li>
      <li>Este lo es</li>
    </ul>
    

    Se mostraría el tercer párrafo con fondo color lima.

    Pseudoclases en CSS

    Ejemplos

    :only-child selecciona el elemento hijo único de su padre.

    span:only-child {
      color: red;
    }
    <div>
      <span>Este span es el único hijo de su padre</span>
    </div>
    <div>
      <span>Este span es uno de los dos hijos de su padre</span>
      <span>Este span es uno de los dos hijos de su padre</span>
    </div>
    

    Se mostraría el primer párrafo en rojo. Los dos siguientes en negro, formando otro párrafo.

    Pseudoclases en CSS

    Ejemplos

    Lista desordenada, tamaño creciente

    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    li:first-child { font-size: .9em; }
    li:first-of-type { color: green; }
    li:nth-of-type(4) { font-size: 2em; }
    li:nth-last-of-type(3) { font-size: 1.5em; }
    li:last-of-type { color: red; }
    li:last-child { font-size: 0.5cm; }
    </style>
    </head>
    <body>
    <ul>
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
    <li>Cuarto</li>
    <li>Quinto</li>
    </ul>
    </body>
    </html>
    
    Acceso al ejemplo.

    Pseudoclases en CSS

    Ejemplos

    nth-child frente nth-of-type

    Ambas son pseudoclases basadas en la estructura, y referencian a un elemento específico dentro de un elemento padre (contenedor), pero de una manera distinta.
    Si n es 2, entonces :nth-child(n) referenciará a un elemento que es el segundo hijo de su elemento padre, y :nth-of_type(n) referenciará al segundo dentro del mismo tipo de elementos (por ejemplo, párrafos) dentro de un elemento padre.


    /* Un párrafo que es también el segundo hijo dentro de su elemento padre */
      p:nth-child(2) {
      color: #1E90FF;    // azul claro
    }
    /* El segundo párrafo dentro de un elemento padre */
    p:nth-of-type(2) {
      font-weight:bold;
    }
    

    A continuación se plantean dos casos

    :

    Pseudoclases en CSS

    Ejemplos

    Caso 1
    El segundo elemento dentro del div es una lista, por lo tanto, el la regla de nth-child(2) no se aplicará. Aunque es un segundo hijo, no es un párrafo.
    Pero si el elemento padre tiene un segundo párrafo, la regla nth-of-type(2) se aplicará, ya que esta regla sólo buscará los elementos párrafo y no se preocupará por otros tipos de elementos (como listas) en el interior del elemento padre.
    En el ejemplo, la regla nth-of-type(2) personalizará el segundo párrafo, el cual es el tercer hijo.
    <div>
      <p>Párrafo 1, hijo 1</p>
      <ul>Lista desordenada 1, hijo 2</ul>
      <p>Párrafo 2, hijo 3</p>
    </div></h4><br>
    

    Pseudoclases en CSS

    Ejemplos

    Caso 2
    En este segundo caso, se mueve la lista a la tercera posición, y el segundo párrafo se pone antes de la lista. Esto significa que ambas reglas, la :nth-child(2) y la :nth-of-type(2) se aplicarán, ya que el segundo párrafo es también el segundo hijo de su padre, el elemento div.
    <div>
      <p>Párrafo 1, hijo 1</p>
      <p>Párrafo 2, hijo 2</p>
      <ul>Lista desordenada 1, hijo 3</ul>
    </div>
    

    Pseudoclases en CSS

    Ejemplos

    Lista ordenada

    <html>
    <head>
    <style>
    ol > li { font-weight:bold; }
    </style>
    </head>
    <body>
    <ol>
    <li>Uno</li>
    <li>Dos</li>
    <li>Tres</li>
    </ol>
    <ul>
    <li>Uno</li>
    <li>Dos</li>
    <li>Tres</li>
    </ul>
    </body>
    </html>
    
    Pone en negrita los elementos <li> que son hijos directos de elementos <ol>.

    Pseudoclases en CSS

    Ejemplos

    :not(X) (negación), es una notación funcional que toma un selector simple X como argumento.
    Coincide con un elemento que no está representado por el argumento.
    X no debe contener otro selector de negación.
    Selecciona el único elemento hijo de su padre.

    p:not(.clasi) { color: red; }
    body :not(p) { color: green; }
    <p>Algún texto.</p>
    <p class="clasi">Algún otro texto.</p>
    <span>Más texto<span>
    

    Se mostraría el primer párrafo en rojo, el siguiente en negro y el último en verde.

    Enlace a un ejemplo de uso en menú.

    Pseudoclases en CSS

    Ejemplos

    Pseudoclases :link y :visited: sirven para aplicar diferentes estilos a los enlaces de una misma página.
    :link se aplica a todos los enlaces que todavía no han sido visitados.
    :visited se aplica a todos los enlaces que han sido visitados al menos una vez.
    Ejemplo:

    a:link    { color: red; }
    a:visited { color: navy; }
    

    Se mostraría el primer párrafo en rojo, el siguiente en negro y el último en verde.

    Pseudoclases en CSS

    Ejemplos

    Pseudoclases :hover, :active y :focus permiten variar los estilos de un elemento en respuesta a las acciones del usuario.

    :hover, se activa cuando el usuario pasa un dispositivo apuntador por encima de un elemento.
    :active, se activa cuando el usuario activa un elemento, sobre un elemento. El estilo se aplica durante un tiempo prácticamente imperceptible, desde que se pulsa el botón del ratón hasta que se suelta.
    :focus, se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado. Normalmente se aplica a los elementos de los formularios cuando están activados y se puede escribir directamente en esos campos.


    Pseudoclases en CSS

    Ejemplos

    Un mismo elemento puede verse afectado por varias pseudoclases de forma simultánea. Al pulsar un enlace que fue visitado previamente, al enlace le afectan las pseudoclases :visited, :hover y :active
    Es importante cuidar el orden en el que se establecen las diferentes pseudo-clases.
    El único orden correcto para establecer las cuatro pseudoclases principales en un enlace es:


    a:link { ... } a:visited { ... } a:hover { ... } a:active { ... }
    

    Pseudoclases en CSS

    Ejemplos

    Pseudoclase :lang se usa para seleccionar elementos en función de su lengua


    p { color: blue; }
    p:lang(es) { color: green; }
    

    Los párrafos del ejemplo se ven de color azul, salvo los párrafos cuyo contenido esté escrito en español, que se ven de color verde.

    Otras instrucciones

    Otras instrucciones

    Float

    Simple pero útil para que el diseño de la página se adapte al dispositivo de visualización.
    Modifica el flujo normal de la página y lo ubica a izquierda o derecha del resto del contenido de su elemento padre.
    Tres posibilidades: none, left, right.


    img {
      float: right;
      margin: 0 0 1em 1em;
    }
    

    Otras instrucciones

    Float

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <title>float</title>
    
    <style type="text/css">
    p.derecha {
    	border: 1px dotted black;
    	float: right;
    	width: 10em;
    	padding: 0.25em;
    	margin: 1em 1em 1em;
    }
    p.izquierda {
    	border: 4px dotted black;
    	float: left;
    	width: 10em;
    	padding: 0.25em;
    	margin: 0 1em 1em;
    }
    div {
    	width: 50%;
    }
    
    </style>
    </head>
    

    Otras instrucciones

    Float

    <body>
    <h1>CSS float</h1>
    
    <h2>Ejemplo</h2>
    <div>
    <p class="derecha">Esto es texto. Esto es texto. Esto es texto.
        Esto es texto. Esto es texto. Esto es texto.</p>
    <p class="izquierda">Esto es texto. Esto es texto. Esto es texto.
        Esto es texto. Esto es texto. Esto es texto.</p>
    <p> Esto es texto. Esto es texto. Esto es texto.
        Esto es texto. Esto es texto. Esto es texto.
        Esto es texto. Esto es texto. Esto es texto.
        Esto es texto. Esto es texto. Esto es texto.
        Esto es texto. Esto es texto. Esto es texto.
        Esto es texto. Esto es texto. Esto es texto.
        Esto es texto. Esto es texto. Esto es texto.</p>
    </div>
    </body>
    </html>
    

    Otras instrucciones

    Clear

  • Complementa a float.

  • Especifica que un elemento no admite un flotante a su izquierda, derecha o a ambos lados.

  • Se puede usar en un elemento flotante para impedir que otros flotantes puedan quedar sobre algunos de sus lados.
  • Otras instrucciones

    Clear

    <!DOCTYPE html>
    
    <html lang="es">
    <head>
    <title>clear</title>
    
    <style type="text/css">
    .wrapper {
      border: 1px solid black;
      padding: 10px;
    }
    
    .izda {
      border: 1px solid black;
      clear: left;
    }
    
    .negro {
      float: left;
      margin: 0;
      background-color: black;
      color: #fff;
      width: 20%;
    }
    

    Otras instrucciones

    Clear

    .rojo {
      float: left;
      margin: 0;
      background-color: red;
      width: 20%;
    }
    
    p {
      width: 50%;
    }
    
    </style>
    </head>
    
    <body>
    <h1>CSS float</h1>
    <h2>Ejemplo</h2>
    <div class="wrapper">
        <p class="negro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
        <p class="rojo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        <p class="izda">Este es con clear</p>
    </div>
    
    </body>
    </html>
    

    Otras instrucciones

    z-index

  • Indica el orden en el eje z de un elemento y sus descendientes.

  • Cuando varios elementos se superponen, determina cuales tapan a otros.

  • z-index solo funciona con elementos posicionados.

  • Para una caja posicionada, la propiedad z-index indica:

    • El nivel de apilamiento en el actual contexto de apilado.
    • Si la caja establece un contexto de apilamiento.

    Otras instrucciones

    z-index

    Características de los contextos de apilamiento
  • Elementos con un padre común que se desplazan hacia adelante o hacia atrás juntos en el orden de apilamiento.
  • Cada contexto de apilamiento tiene un elemento HTML como su elemento raíz.
  • Si un nuevo contexto de apilamiento se forma en un elemento, ése contexto confina todos sus elementos hijos en un lugar particular del orden.

  • Nuevos contextos de apilamiento se pueden formar en un elemento:
         - Cuando un elemento es el elemento raíz de un documento (el elemento HTML).
         - Cuando un elemento tiene un valor de posición que no sea “static” y valor de z-index distinto a “auto”.
         - Cuando un elemento tiene un valor de opacidad menor que uno.

    Otras instrucciones

    z-index

    Orden de apilamiento en un contexto:

    1. El contexto de apilamiento del elemento raíz.

    2. Elementos posicionados (y sus hijos) con valores z-index negativos.

    3. Elementos no posicionados (ordenados por aparición en el HTML).

    4. Elementos posicionados (y sus hijos) con un valor z-index auto.

    5. Elementos posicionados (y sus hijos) con valores z-index positivos.

    Otras instrucciones

    Especificidad de reglas

  • Se calcula la especificidad de una regla obteniendo números de tres partes basado en los tipos de selectores.

  • Estos números compuestos empiezan a partir de [0,0,0].

  • Cuando se procesa una regla, cada selector que hace referencia a un ID incrementa el primer número en 1, de manera que se obtendrá [1,0,0].

  • Por ejemplo, la siguiente regla, tiene siete referencias, tres con las ID #cabecera, #principal y #menu. Así que el número compuesto se convierte en [3,0,0].
  • #cabecera #principal #menu .text .quote p span {
    // Las reglas van aquí;
    }
    

    Otras instrucciones

    Especificidad de reglas

  • El número de clases en el selector se coloca en la segunda parte del número compuesto.

  • En este ejemplo, hay dos (.text y .quote), por lo que la especificidad se convierte en [3,2,0].

  • Finalmente, se cuentan todos los selectores que hacen referencia a las etiquetas de elementos y este número se coloca en la última parte.

  • En el ejemplo, hay dos (p y span), Por lo que se convierte en [3,2,2], que es lo que se necesita para comparar la especificidad de esta regla con otra.
  • Otras instrucciones

    Especificidad de reglas

    Se puede comparar con otro conjunto de reglas, como:

    #cabecera #principal .text .quote .news p span {
    // Las reglas van aquí;
    }
    

    También se hace referencia a siete elementos, hay dos referencias de ID y hay tres referencias de clase, lo que da como resultado una especificidad [2,3,2].
    Como 322 es mayor que 232, el primer ejemplo tiene precedencia sobre este último.
    Si los números son superiores a nueve se han de expresar en una base adecuada.

    Otras instrucciones

    Posicionamiento

    Los elementos de una página web aparecen donde se colocan en el documento, pero se pueden mover cambiando la propiedad de posición de un elemento del valor predeterminado (static).
    Las tres opciones son: absolute, relative, o fixed.

    <html>
    <head>
    <title>Posicionamiento</title>
    <style>
    #object1 {
    position :absolute;
    background:pink;
    width :100px;
    height :100px;
    top :100px;
    left :0px;
    }
    #object2 {
    position :relative;
    background:lightgreen;
    width :100px;
    height :100px;
    top :-8px;
    left :110px;
    }
    #object3 {
    position :fixed;
    background:yellow;
    width :100px;
    height :100px;
    top :100px;
    left :236px;
    }
    </style>
    </head>
    <body>
    <br><br><br><br><br>
    <div id='object1'>Absolutog</div>
    <div id='object2'>Relativo</div>
    <div id='object3'>Fijo</div>
    </body>
    </html>
    

    Acceso al ejemplo

    Otras instrucciones

    Transformaciones

  • Usando transformaciones, se pueden inclinar, rotar, estirar y contraer elementos en cualquiera de las tres dimensiones.

  • Para realizar una transformación se usa la propiedad transform (que tiene prefijos específicos del navegador para Mozilla, WebKit, Opera y el navegador de Microsoft).

  • Se puede aplicar varias propiedades a transform, comenzando con el valor none, que restablece un objeto a su estado no transformado.

  • transform: none;
    

    Otras instrucciones

    Transformaciones

    La propiedad transform tiene diversas funcionalidades:

    matriz Transforma un objeto aplicando una matriz de valores
    translate Mueve el origen de un elemento
    scale Escala un objeto
    rotate Gira un objeto
    skew Distorsiona un objeto

    También hay versiones de muchas de estas funciones, como translateX, scaleY,


    Otras instrucciones

    Transformaciones 3D

    También se puede transformar objetos en tres dimensiones utilizando las siguientes funciones de CSS3:

    perspective Libera un elemento del espacio 2D y crea una tercera dimensión dentro de la cual puede moverse
    transform-origin Establece la ubicación en la que todas las líneas convergen a un solo punto
    translate3d Mueve un elemento a otra ubicación en su espacio 3D
    scale3d Reescale una o más dimensiones
    rotate3d Gira un elemento alrededor de cualquiera de los ejes X, Y y Z.


    Otras instrucciones

    Propiedades de transiciones

    Las transiciones tienen propiedades tales como height y border-color. Se pueden incluir múltiples propiedades separándolas con comas.



    transition-property        :property;
    transition-duration :time;
    transition-delay :time;
    transition-timing-function :type;

    Otras instrucciones

    Transiciones

    Se puede especificar un efecto de animación cuando un elemento se transforma, y el navegador realiza automáticamente todos los pasos intermedios.
    Hay cuatro propiedades que se han de proporcionar para configurar una transición:


    Propiedad Sintaxis
    Información completa transition-property:all;
    Duración de la transición transition-duration:x.xs;
    Retardo de inicio transition-delay:x.xs;
    Tiempo de transición ease, linear, ease-in, ease-out,ease-in-out
    Sintaxis abreviada Ej.: transition:all .3s linear .2s;

    Otras instrucciones

    Ejemplo de traslaciones

    <html>
     <head>
     <title>Transición con hover</title>
     <style>
     #square {
     position :absolute;
     top :50px;
     left :50px;
     width :100px;
     height :100px;
     padding :2px;
     text-align :center;
     border-width :1px;
     border-style :solid;
     background :orange;
     transition :all .8s ease-in-out;
     -moz-transition :all .8s ease-in-out;
     -webkit-transition:all .8s ease-in-out;
     -o-transition :all .8s ease-in-out;
     -ms-transition :all .8s ease-in-out;
     }
     #square:hover {
     background :yellow;
     -moz-transform :rotate(180deg);
     -webkit-transform :rotate(180deg);
     -o-transform :rotate(180deg);
     -ms-transform :rotate(180deg);
     transform :rotate(180deg);
     }
     </style>
     </head>
     <body>
     <div id='square'>
     La primera gran virtud del hombre fue la duda, y el primer gran defecto la fe
     </div>
     </body>
    </html>
    

    Acceso al ejemplo

    Otras instrucciones

    Transformaciones

    Enlaces a ejemplos:

    Perspectiva 1
    Perspectiva 2
    Perspectiva 3
    Transformación
    Volteo
    Cajas
    Carrusel


    Unidades de medida

    Unidades de medida

    Definición

  • Las medidas en CSS se emplean para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto.

  • Las medidas se indican como un valor numérico seguido de la unidad.

  • Dos tipos: absolutas y relativas.

  • Si no se indica ninguna unidad, la medida se ignora.

  • Unidades absolutas:
         - in, pulgadas (inches). in = 2.54 cm
         - cm, centímetros y mm, milímetros (SI)
         - pt, puntos. pt = 1 pulgada/72, 0.35 mm
         - pc, picas. pc = 12 puntos, es decir, 4.23 mm


    Unidades de medida

    Ejemplos

    /* El cuerpo de la página debe mostrar un margen de media pulgada */
    body { margin: 0.5in; }
    /* Los elementos deben mostrar un interlineado de 2 cm */
    h1 { line-height: 2cm; }
    /* Las palabras de todos los párrafos deben estar separadas 4 mm */
    p { word-spacing: 4mm; }
    /* Los enlaces se deben mostrar con un tamaño de letra de 12 puntos */
    a { font-size: 12pt }
    /* Los elementos deben tener un tamaño de letra de 1 pica */
    span { font-size: 1pc }
    

    Unidades de medida

    Unidades relativas

    em, (no confundir con la etiqueta <em>) relativa respecto del tamaño de letra del elemento

    ex, relativa respecto de la altura de la letra x del tipo y tamaño de letra del elemento

    px, (píxel) relativa respecto de la resolución de la pantalla del dispositivo en el que se visualiza la página


    em y ex no han sido creadas por CSS, llevan décadas utilizándose en la tipografía

    La unidad 1em equivale a la anchura de la letra M del tipo y tamaño de letra del elemento

    La unidad em hace referencia al tamaño en puntos de la letra que se está utilizando

    Si se utiliza una tipografía de 12 puntos, 1em equivale a 12 puntos

    El valor de 1ex se puede aproximar por 0.5 em

    Unidades de medida

    Unidades relativas

    La proliferación de sitios con diseño adaptable (responsive) ha dado lugar al uso de unidades relativas.
    Consiguen una mejor visualización en dispositivos móviles.
    Dan problemas por el efecto “cascada”. Ejemplo:

    <style>
    body  { font-size: 100%; }
    p, li { font-size: 0.75em; }
    </style>
    <p> soy un texto de 12px </p>
    <ul>
    <li> yo también soy un texto de 12px
    <ul><li> Yo tengo 9 px </li></ul>
    </li>
    </ul>
    

    Unidades de medida

    Ejemplo de uso

    Se muestra las distintas expresiones para indicar tamaño de fuente de 1 cm.
    font-size:1cm;
    font-size:10mm;
    font-size:37px;
    font-size:28pt;
    font-size:0.39in;
    font-size:2.37pc;
    font-size:2.37em;
    font-size:6.28ex;
    font-size:237%;

    Unidades de medida

    Nuevas unidades

    CSS3 propone nuevas unidades


    rem a diferencia de em, está referido al elemento raíz de la página en lugar del contenedor

    vw% de la anchura de la ventana del dispositivo

    vh% de la altura de la ventana del dispositivo

    vim% de la dimensión, altura o anchura, más pequeña del dispositivo


    Ejemplo: suponiendo un tamaño de ventana del navegador de 1000×800, establecer el texto en 1.8vw equivale a 18 px , 2vh serían 16px y 1.5vmin = 12px

    Preprocesadores CSS

  • Un archivo CSS contiene muchas líneas de código.


  • Limitaciones de CSS implican un trabajo menos productivo.


  • Preprocesadores de CSS, extienden las funcionalidades.


  • Con lenguaje de script se escribe código para compilar.


  • Permiten variables, funciones, mixins y reutilizar código.