Espera por favor...

CSS avanzado
Pseudoclases en CSS

¿Qué es una pseudoclase?

Algunos elementos de HTML disponen de estados especiales o usos asociados a ellos. Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica el estado especial del elemento seleccionado.

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 pulsa sobre él

    Las pseudoclases, 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;
    }

CSS avanzado
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.

  • 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)

CSS avanzado
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

CSS avanzado
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

CSS avanzado
Pseudoclases en CSS

    Ejemplo

    <!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>

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

  • Mediante pseudoclases se 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; }

CSS avanzado
Pseudoclases en CSS

    Ejemplos

    Esta regla puede incluir otras referencias

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

    Se pueden 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.

CSS avanzado
Pseudoclases en CSS

    Ejemplo

    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; }

CSS avanzado
Pseudoclases en CSS

    Ejemplo 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

CSS avanzado
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>.

    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.

CSS avanzado
Pseudoclases en CSS

    Ejemplo

    :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

CSS avanzado
Pseudoclases en CSS

    Ejemplo

    :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

CSS avanzado
Pseudoclases en CSS

    Ejemplo

    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.

CSS avanzado
Pseudoclases en CSS

    Ejemplo 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

CSS avanzado
Pseudoclases en CSS

    Ejemplos Caso 1

    El segundo elemento dentro del div es una lista, por lo tanto, 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><br>

    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>

CSS avanzado
Pseudoclases en CSS

    Ejemplo

    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>.

CSS avanzado
Pseudoclases en CSS

    Ejemplo

    :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ú

CSS avanzado
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

CSS avanzado
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.

CSS avanzado
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 { ... }

CSS avanzado
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

CSS avanzado
Pseudoclases en CSS

    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;
    }

    Ejemplo 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>

    <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>

CSS avanzado
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.

CSS avanzado
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%;
    }

    .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>

CSS avanzado
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.

    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.

CSS avanzado
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.

CSS avanzado
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í;
    }

  • 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.

CSS avanzado
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.

CSS avanzado
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'>Absoluto</div>
    <div id='object2'>Relativo</div>
    <div id='object3'>Fijo</div>
    </body>
    </html>

    Acceso al ejemplo

CSS avanzado
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

CSS avanzado
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.

CSS avanzado
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;

CSS avanzado
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;

CSS avanzado
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

CSS avanzado
Pseudoclases en CSS

CSS avanzado
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

CSS avanzado
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 }

CSS avanzado
Unidades de medida

Unidades relativas
    em, (no confundir con la etiqueta <em>) relativa respecto del tamaño de letra m 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

CSS avanzado
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>

CSS avanzado
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%;

CSS avanzado
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

CSS avanzado
Preprocesadores

    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.

CSS avanzado
Preprocesadores

Búsquedas en UMU