Archivo de la categoría: CSS

Las Hojas de estilo en cascada (Cascading Style Sheets, CSS), son un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado, normalmente páginas web escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etc. También permite aplicar estilos no visuales, como las hojas de estilo auditivas

Html, Lenguaje de programación, CSS, Programación, Página Web

CSS

07 de octubre de 2024 secarcam

CSS

Una hoja de estilos no es más que un archivo de texto con extensión .css. Aunque las hojas de estilo se definieron a mediados de los años noventa, han tenido especial repercusión a partir de su última versión (CSS3), en combinación con HTML5

Se pueden aplicar distintas hojas de estilo dependiendo del dispositivo en el que mostremos nuestra página web (una pantalla grande, un móvil, papel impreso, etc)

Integración de estilos en una página

Existen varias formas de integrar estilos en una página. Pero normalmente usaremos una de estas dos:

Incluida como etiqueta que forma parte del HTML
```
<p style="color: red;">texto</p>
```
El problema de esta opción es bastante obvio. Si en un futuro quisiéramos modificar el color de los párrafos que contienen el texto, tendríamos que buscar uno por uno todas las apariciones y cambiarlos manualmente

Definida como una regla de estilo en la cabecera

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <style type="text/css">
            p { color: red; }
        </style>
    </head>
<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
    <p>texto</p>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187870&k=22cc66558df62bc4f5ca96cf611f44dc&__muid="></script>
<!-- Inserted by miarroba -->
</body>

En una página web real usaremos más de una regla de estilo, por lo que tampoco será una buena opción añadirlas una a una en la cabecera

Definida con la etiqueta <link> a un fichero externo

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <link rel="stylesheet" type="text/css" href="./css/fichero.css">
    </head>
<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
    <p>texto</p>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187870&k=22cc66558df62bc4f5ca96cf611f44dc&__muid="></script>
<!-- Inserted by miarroba -->
</body>

Normalmente usaremos más de una regla de estilo, por lo que será una buena opción añadirlas desde un fichero externo de extensión .css y enlazarlas en la cabecera del HTML con la etiqueta <link>

Estructura de una hoja de estilo

Una hoja de estilo define una o más reglas que se aplicarán a los elementos que cumplan dicha regla

Cada regla se compone de dos partes:

Selector: indica a qué elementos vamos a aplicarle la regla. Pueden escribirse más de un selector para la misma regla separados por comas
Lista de declaraciones: los estilos que se van a aplicar a los elementos que cumplan la regla. Corresponden a un par propiedad:valor, separados por punto y coma

p {
    color: red;
    font-family: Verdana;
    text-aling: center;
}

En el ejemplo se ha definido una regla que se aplica a todos los elementos p de párrafo del HTML. Además el texto se ha definido de color rojo, su fuente como Verdana y su alineación de párrafo es centrada

De forma adicional, podemos añadir comentarios, que aparecerán escritos entre /* y */

También podremos añadir directivas at (que empiezan por @), las cuales modifican la forma de aplicar las reglas

El árbol DOM

El document object model (DOM) es la representación estructurada, en forma de árbol, de todos los elementos escritos en un documento HTML

Por ejemplo, cualquier documento HTML empieza por la etiqueta , conteniendo además las etiquetas y , con su respectivas etiquetas de cierre

Por su parte, dentro de la cabecera (etiqueta <head>) contendrá a su vez elementos con las etiquetas <meta>, <link>, <title>, etc

Y el cuerpo (etiqueta <body>), contendrá a su vez más elementos y así sucesivamente hasta llegar a sus etiquetas de cierre

A la estructura jerárquica resultante en informática se la denomina árbol

En concreto, el árbol que representa la estructura de un documento HTML es el DOM

Gracias a esta estructura en forma de árbol, podemos identificar de forma única cada elemento del documento HTML, según cómo estén relacionados entre sí esos elementos, podremos aplicarles distintas reglas de estilo

Las relaciones que podemos identificar son:

Descendientes: son todos los elementos contenidos (directa o indirectamente) por un elemento
Por ejemplo, <head>, <meta> o <body> son descendientes de <html>
Hijo directos: son los descendientes de primer nivel
Por ejemplo, <head> es hijo de <html>
Hermanos: descendientes que tienen un padre común
Por ejemplo todos los elementos <meta> son hermanos entre si

Gracias a estas relaciones dentro del DOM, en el ejemplo que usamos anteriormente que afectaba sólo a los elementos <p>, podríamos aplicárselo también a los elementos contenidos en una división <div> que contuviera una clase o un identificador concreto

O podríamos crear reglas para los hermanos con los que compartiera un nodo

Apoyándonos en el lenguaje JavaScript y en el DOM, podremos modificar el contenido de los elementos una vez cargada la página web en el navegador

Cascada de estilo

Gracias al DOM podemos identificar los elementos concretos de un documento HTML y por eso podemos aplicarle las hojas de estilo

Una hoja de estilos puede contener diferentes reglas que configuren el mismo elemento, incluso podemos tener varias hojas de estilo con reglas contradictorias

body {
    background-color: black;
    color: red;
}

p {
    color: blue;
}

En este ejemplo, nuestras reglas dicen que para todo elemento del <body>, incluidos sus descendientes, se le van a aplicar el color de fondo negro y el color de texto rojo

En la siguiente regla, le indicamos que en el elemento <p> de párrafo, el texto ha de ser de color azul

El documento final tendrá todos los elementos de color de fondo negro y el texto de color rojo, pero además los párrafos tendrá color azul

Las reglas se han ido aplicando unas sobre otras, en forma de cascada. Por eso tienen el nombre de cascadas de hojas de estilos (cascade style sheets, CSS)

En general, los estilos se heredan. Primero se establecen la propiedad del elemento padre y sus descendientes los heredan, para finalmente aplicar los suyos, que a su vez son heredados por sus descendientes, hasta que llegar al último nodo de descendientes de la hoja de estilos

En el caso de que tengamos dos elementos que son hermanos y haya conflicto por ver quien hereda qué propiedad, se aplica el más específico y en el caso de que tengan las mismas propiedades, se aplicará el último estilo definido

Es decir, si una regla está definida en dos hojas de estilo externas, se aplicará la regla de la hoja que se incluyó más tarde en el documento HTML. Por eso, el orden en el que las incluyamos es muy importante

Primero incluiremos las hojas más generales y después aquellas que sean más específicas

En el caso de haber incrustado en el HTML alguna regla, el estilo que se ha definido, será el que tendrá mayor prioridad que la regla que esté incluida en la cabecera del HTML

Resumiendo, se aplicarán las siguientes prioridades a la hora de aplicar una regla a un elemento concreto:

Se buscan todas las declaraciones aplicables al elemento
Si no existen reglas, se usará el valor heredado

Si no hubiera valor heredado, el navegador aplicará el valor por defecto
Si existen reglas, se aplicará la de mayor prioridad de acuerdo a los siguientes criterios:
- Se asigna un peso según su origen: hoja de estilos del autor, del usuario o del navegador
- Atributos con la palabra clave !important: tendrán mayor prioridad
- Selectores específicos: tendrán mayor prioridad
- Dos reglas con la misma prioridad: se aplica la indicada en último lugar

CSS Reset

Cada navegador posee su propia hoja de estilos por defecto

Esto implica que el estilo por defecto de algunos elementos puede ser diferente para cada navegador

Por esta razón es recomendable realizar un reinicio de los estilos aplicados a los elementos añadiendo una CSS especial (la CSS Reset) al principio de nuestras páginas web

Existen múltiples CSS que realizan esta tarea (como las utilizadas en los frameworks de Yahoo YUI, HTML5 BoilerPlate o Normalize), pero uno de los más populares es la de Eric Meyer considerado como uno de los gurús de las CSS

Para añadirla sólo has de guardar el archivo en la carpeta css contenida en la raíz de tu sitio web y definirla con la etiqueta <link> en la cabecera de tu HTML:

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <link rel="stylesheet" type="text/css" href="./css/reset.css">
    </head>
<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
    <p>texto</p>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187870&k=22cc66558df62bc4f5ca96cf611f44dc&__muid="></script>
<!-- Inserted by miarroba -->
</body>

Html, Lenguaje de programación, CSS, Programación, Página Web

Selectores

07 de octubre de 2024 secarcam

Selectores

Los selectores sirven para identificar los elementos a los que se aplicará el formato definido en la lista de declaraciones

Hay distintos tipos de selectores que pueden ser utilizados para definir las reglas CSS

Vamos a describirlos de los más generales a los más específicos (desde el punto de vista de menor a mayor prioridad)

Selector Universal

Se define con * y se aplica a todos los elementos de la página:

* {
    margin: 0;
    font-family: Verdana;
}

En el ejemplo se han configurado los márgenes y la fuente del texto, que suelen ser algunas de las reglas más usadas

Selector de etiqueta HTML

Indica el estilo que se va a aplicar a un elemento o una etiqueta concreta

Su hay más de uno, serán separados por comas

h1, h2, h3, h4, h5 {
    font-size: large;
}

En el ejemplo se han configurado las etiquetas 1 a 5 de título, aplicándoles la fuente del texto de tamaño grande

Como puede apreciarse, podemos prescindir de < y de > de la etiqueta

Selector de clase

Algunos elementos HTML tienen el atributo class que indica que las clases a las cuales pertenece el elemento

Este atributo nos permite tratar a esa «clase» de elemento de una manera concreta, tanto en la aplicación de estilos CSS como en su comportamiento mediante programación con JavaScript

Para aplicar el selector de clase, usaremos etiqueta.class

.cabecera{
    color: blue;
}

En el ejemplo se han configurado el texto en color azul para todos los elementos de la clase cabecera, ya que si no especificamos una etiqueta, se usará por defecto el selector universal *

h1.cabecera{
    text-aling: center;
}

En el ejemplo se han configurado la alineación del texto centrada solo para los elementos de la clase cabecera que pertenecen a la etiqueta de título <h1>

Debemos tener especial cuidado en no dejar espacios entre la etiqueta, el punto y el nombre de la clase, ya que ese espacio es significativo, como veremos más adelante

Selector de identificador

Algunos elementos HTML tienen el atributo id que indica que ese identificador único pertenece a ese elemento concreto

Para aplicar el selector de identificador, usaremos etiqueta#id

Al igual que con las clases, es muy importante el uso de los espacios

p#destacado{
    background-color: yellow;
}

En el ejemplo se han configurado el color de fondo del texto como amarillo, en aquel párrafo que tenga el identificador destacado

Selectores descendientes y adyacentes

Estos selectores permiten seleccionar elementos contenidos dentro de otros de acuerdo a la estructura del árbol DOM

Aquí es donde toman importancia los espacios, ya que si separamos dos selectores con un espacio, entonces estaremos aplicando la regla a todos los descendientes del primer selector

section p{
    text-font: Verdana;
}

En el ejemplo se han configurado la fuente del texto como Verdana para todos los elementos <p> que son descendientes del elemento <section > (recordemos que pueden ser los descendientes de cualquier nivel, ya que esa regla será heredada)

Se pueden mezclar indistintamente selectores descendientes de clase o de identificador

section .error{
    color: red;
}

En el ejemplo se han configurado el color del texto como rojo para cualquier elemento de la clase error que sea descendiente del elemento

Si en vez de aplicarlo a todos los descendientes queremos que sólo se aplique a los descendientes directos (los hijos), entonces usaremos el simbolo >

section>p{
    text-font: Verdana;
}

En el ejemplo se han configurado la fuente del texto como Verdana sólo para los elementos <p> que son hijos del elemento <section >

También podemos seleccionar los elementos hermanos, es decir, aquellos que aparecen justo después de otros elementos, entonces usaremos el simbolo +

h1 + p{
    text-indent: 1.5em;
}

En el ejemplo se han configurado la indentación del primer párrafo que aparece justo después de la etiqueta de título <h1>

Selectores de atributos

Estos selectores se utilizan para seleccionar elementos en función de sus atributos

Hay de cuatro tipos:

[atributo]: elementos que tienen un atributo llamado atributo independientemente de su valor
[atributo=valor]: elementos que tienen un atributo llamado atributo con el valor especificado
[atributo^=valor]: elementos que tiene un atributo llamado atributo y cuyo valor empieza por el valor especificado
[atributo$=valor]: elementos que tienen un atributo llamado atributo y cuyo valor termina con el valor especificado

a {
    color: red;
}

a[href^https] {
    color: blue;
}

En el ejemplo se han configurado un enlace que queremos en un color distinto si lleva a una url con HTTP seguro

Pseudoclases

Existen selectores especiales para especificar elementos que tienen unas determinadas propiedades

Son clases virtuales, ya que no se especifican en el HTML, pero representan las posiciones o estados en los que se puede encontrar un elemento mientras se visualiza en el navegador

ul li:first-child {
    color: green;
}

En el ejemplo se han configurado para que se aplique solo si un elemento es el primer hijo de su padre, para ello hemos usado la pseudoclase first-child, solo el primer elemento <li> de una lista de viñetas (<ul>) aparecerá en color verde

Existen otras pseudoclases que nos ayudarán a seleccionar a un hermano concreto de entre los hijos de un elemento:

:nth-child(n) : representa el n-ésimo hermano
Permite incluir una forma más compleja como:
- :nth-child(even) : que representa los hijos que ocupan posiciones pares
- :nth-child(odd) : que representa los hijos que ocupan posiciones impares
(por ejemplo para hacer que las filas impares de una tabla tengan distinto color de fondo y tener un efecto cebreado en una tabla)
:nth-last-child(n) : similar al anterior, pero empezando a contar desde el final

Hay también pseudoclases dinámicas, que indican el estado de los elementos cuando el usuario interactúa con ellos:

:hover : se utiliza para establecer el estilo cuando el usuario coloca el ratón sobre el elemento
:active : se utiliza para establecer el estilo cuando el usuario pincha sobre el elemento o mantiene el botón del ratón pulsado sobre él
:focus : se utiliza para establecer el estilo cuando el elemento tiene el foco

También son muy típicas las pseudoclases relacionadas con los los enlaces:

a:link : establece el estilo del enlace cuando aún no se ha visitado o cuando el usuario aún no lo ha pulsado
a:hover : establece el estilo cuando el usuario coloca el ratón sobre el elemento de enlace
a:active : establece el estilo cuando el usuario pincha sobre el enlace
a:visited : establece el estilo cuando el usuario ya lo ha visitado

a:link {
    color: green;
    text-decoration: none;
}
a:visited {
    color: red;
}
a:hover {
    color: blue;
}

En el ejemplo se han configurado el estado de los enlaces sin visitar, visitados o cuando pasemos el ratón sobre ellos

Al usar este CSS, los enlaces del documento aparecerán sin subrayar y en verde

Al situar el ratón sobre ellos pararán a azul y, una vez visitados, pasarán a rojo

Ejemplo de Selectores en acción

En el siguiente ejemplo se ha incluido una página HTML y varios de los selectores explicados anteriormente

Puedes comprobar el resultado visualizándolo por ti mismo en tu navegador y si no utilizas un CSS reset, podrías tener resultados distintos en otros navegadores

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <title>Página de ejemplo</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="./css/ejemploSelectores.css" />
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <header>
             Ejemplo de Selectores en acción <span> en este caso CSS3</span>
        </header>
        <nav>
            <a href="index.html">Inicio</a>
            <a href="info.html">Información</a>
            <a href="login.html">Acceso</a>
        </nav>
        <div id="index">
            <article>
                <p>Las tecnologías más utilizadas en el front-end son:</p>
                <ul class="cebreada">
                   <li>HTML5</li> 
                   <li>CSS</li>
                   <li>JavaScript</li>
                   <li>Jquery</li>
                </ul>
            </article>
            <aside>Barra lateral</aside>
        </div>
        <footer>Este es el pie de página</footer>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187870&k=22cc66558df62bc4f5ca96cf611f44dc&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

Ahora mostramos el contenido del fichero ejemploSelectores.css

* {
    margin: 0;
    font-family: Verdana;
}

header {
    height: 10%;
    bacground-color: lightblue;
    font-size: 30px;
}

header>span {
    font-size: 20px;
    color: grey;
    margin-left: 20px;
}

nav {
   background-color: lightgray;
   padding: 5 px;
}

nav a {
    margin-left: 15px;
    padding: 5px;
    background-color: white;
}

nav a:first-child {
    background-color: darkgray;
}

a {
   text-decoration: none;
   color: blue;
}

a:visited {
    color: lightblue;
}

a:hover {
   background-color: beige;
}

a[href^=https] {
   font-style: italic;
}

#index {
   display: flex;
   align-items: stretch;
}

article {
   width: 80%;
   bacground-color: lemonchiffon;
   min-height: 80%;
}

ul.cebreada {
   list-style-type: none;
   width: 100%;
   text-align: center;
}

ul.cebreada>li:nth-child(odd) {
   background-color: beige;
}

aside {
   width: 20%;
   bacground-color: lightsalmon;
   min-height: 80%;
}

footer {
   bacground-color: lightgreen;
   height: 5%;
}

Html, Lenguaje de programación, CSS, Página Web, Programación

Posicionamiento de elementos

07 de octubre de 2024 secarcam

Posicionamiento de elementos

El posicionamiento ‘clásico‘ de elementos se basa en el modelo de bloques, los cuales se van colocando para llenar el espacio de la página de izquierda a derecha y de arriba abajo

Sin embargo, este modelo no se adapta bien en los dispositivos móviles, donde nos encontraremos con problemas con el tamaño, la orientación en el navegador e incluso en la reordenación de los elementos para que se ajusten al tipo de dispositivo

Para solucionar estos problemas apareció el modelo de posicionamiento flexible, el cual simplifica esas tareas considerablemente

Sin embargo, este modelo es demasiado detallado para organizar la estructura general de la página web

Por esa razón, se está imponiendo el modelo de rejilla, el cual divide el espacio en una rejilla virtual y crea una matriz dividida en celdas dentro de esa rejilla, asignando los elementos a una celda concreta que ocuparan tantas celdas adicionales dependiendo del tamaño y orientación del dispositivo

Estos dos modelos admiten además el denominado diseño adaptativo (responsive desing), el cual permite que nuestra página web se adapte al dispositivo en el que será visualizada: teléfonos inteligentes, tabletas o PCs de escritorio

Modelo de bloque

Las cajas de los elementos se colocan por defecto siguiendo el ‘flujo normal‘, es decir, empujando las cajas hacia la izquierda y hacia arriba

Puede utilizarse la propiedad position para modificar el ‘flujo normal‘:

position: static es el modo de posicionamiento por defecto
La caja ocupará la posición del ‘flujo normal‘
position: relative utilizando la propiedades top, right, bottom y left desplazamos su posición
Estas dimensiones indican el espaciado que se deja a cada lado de acuerdo con la posición original de la caja
El resto de las cajas no se ven afectadas por este desplazamiento, por lo que respetan su espacio reservado
position: absolute se elimina la caja del flujo normal y se coloca la nueva caja en una posición fija con respecto a su caja contenedora
Admite las propiedades top, right, bottom y left
Puede superponerse a otros elementos porque no se respeta su espacio reservado
position: fixed similar al posicionamiento absolute, pero se especifica la posición con respecto a la ventana
Esto implica que la caja mantiene su posición y que no se moverá cuando se use la barra de desplazamiento
position: float la caja se desplazará hacia un lado usando la propiedades left o right, desplazandola hacia uno de los extremos de la caja contenedora o hasta la primera caja flotante que encuentre en esa dirección
Puede superponerse a otros elementos que no sean cajas flotantes
clear sólo será aplicable si hay cajas flotantes, fuerza a que el elemento se muestre debajo de la caja flotante de un determinado tipo con las propiedades left o right; o de cualquiera con both

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <meta charset='utf-8'/>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div id='a'></div>
       <div id='b'>
           <div id='c'></div>
       </div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing
       elit. Maoires est voluptas dolorem quod id neque
       esse doloribus saepe ut reprehenderit possimus fugit.
       Laudantium distinctio doloribus repellendus quibusdam
       voluptatem recusandae aut</p>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing
       elit. Doloremque nam illum eveniet iste commodi culpa
       vel quibusdam sint veniam itaque provident sed ipsum
       reiciendis labore beatae impedit vitae earum aut</p>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187870&k=22cc66558df62bc4f5ca96cf611f44dc&__muid="></script>
<!-- Inserted by miarroba -->
</body> 
</html>

Vamos a usar este html de ejemplo para poder comprobar el uso del modelo de bloque, para ello usaremos como base, la siguiente hoja de estilos de ejemplo:

div#a {
    background: blue;
    width: 2em;
    height: 4em;
}

div#b {
    background: red;
    width: 4em;
    height: 2em;
}

div#c {
    background: pink;
    width: 1em;
    height: 1em;
}

p{
    font-size: 80px;
    background: yellow;
    margin: 0;
    padding: 0;
}

Se ha usado una tamaño de fuente grande de forma intencionada para forzar el uso del scroll. Ahora realiza el siguiente ejercicio para que puedas comprobar por ti mismo como funciona el modelo de bloques:

Cambia el posicionamiento del bloque a a relative y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque azul se superpondrá al rojo, pero el espacio reservado que debería haber ocupado el bloque azul, se conserva
Cambia el posicionamiento del bloque c a relative y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque rosa cambiará su posición con respecto a su contenedor (el bloque rojo)
Cambia el posicionamiento del bloque a a absolute y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque azul se superpondrá al rojo, pero como no se ha reservado espacio para el bloque azul, el rojo se colocará en la esquina superior izquierda
Y si hacemos scroll, los bloques dejarán de ser visibles
Cambia el posicionamiento del bloque a a fixed y asignale un espaciado superior de 1em y un espaciado izquierdo de 2em

El bloque azul se superpondrá al rojo, pero como no se ha reservado espacio para el bloque azul, el rojo se colocará en la esquina superior izquierda
Y si hacemos scroll, veremos que el bloque azul ha quedado fijo en su posición con respecto a la ventana
Cambia el posicionamiento del bloque a a float: right

El bloque azul se superpondrá al resto de elementos, se habrá colocado en el borde derecho de la pantalla y no se ha reservado espacio para ese bloque
Cambia el posicionamiento del bloque c a float: right

El bloque rosa se pegará al lado derecho de su contenedor, el bloque rojo
Cambia el posicionamiento del bloque b a float: right

El bloque rojo se pegará al lado derecho del elemento flotante anterior, el bloque azul
Cambia el posicionamiento del bloque a a float: left y añade a p la propiedad clear: right

El párrafo se colocará debajo del bloque rojo, pero se superpondrá al bloque azul
Cambia el posicionamiento de p a clear: both

El párrafo se colocará debajo del bloque azul

Modelo flexible

El posicionamiento flexible permite acomodar los elementos de la página según cambien las dimensiones y orentación de la página

Nos permite hacer un diseño adaptativo para que nuestras páginas web se visualizen correctamente en cualquier dispositivo

Este estándar es relativamente reciente y todavía no está soportado por todos los navegadores, pero en un futuro lo estará

Como ventajas se obtiene un código más legible y simple, donde podremos cambiar el orden de los elementos independientemente del orden en el código HTML

El modelo flexible es apropiado para colocar pequeños componentes de una página web

Para realizar una disposición general de los elementos de la página, se está imponiendo el modelo de rejilla

La idea principal es que un contenedor flexible expande o comprime sus elementos para rellenar el espacio libre o ajustarse al área disponible

Así tendremos un contenedor flex (flex container) y una serie de elementos flex contenidos (flex item)

Para definir un contenedor utilizaremos la propiedad display: lex (o display: kit-web.flex si queremos compatibilidad con Safari)

Todos los elementos contenidos pasarán a ser elementos flex

En este modelo no se utilizan conceptos como ordenamiento horizontal o vertical sino que se define un eje principal (main axis) y otro secundario (cross axis)

De esta forma, el diseño se ajusta fácilmente a los cambios de orientación del dispositivo

Para cada eje podemos situar los componentes en su inicio (main-start o cross-start) y final (main-end o cross-end)

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->        
        <meta charset='utf-8'/>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div id='cont01' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont02' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont03' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
       <div id='cont04' class='contenedor'>
           <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
       </div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187870&k=22cc66558df62bc4f5ca96cf611f44dc&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

Vamos a usar este html de ejemplo para poder comprobar el uso del modelo flexible, para ello usaremos como base, la siguiente hoja de estilos de ejemplo:

.contenedor {
    width: 400px;
    border-style: solid;
    border-color: #3F51B5;
    border-width: 4px;
    margin-top: 15px;
    display: flex;
}

.contenedor>div {
    background-color: #FF4081;
    color: white;
    text-align: center;
    width: 50px;
    height: 50px;
    font-size: 3em;
    margin: 4px;
}

Dirección de los elementos

La propiedad flex-direction especifica la dirección del eje principal, es decir, cómo se colocan los elementos dentro del contenedor

Admite los siguientes valores:

row fila
row-revese fila invertida
column columna
column-reverse columna invertida

Para comprobar su comportamiento, añade el siguiente CSS al ejemplo anterior:

#cont01 {
    flex-direction: row;
}

#cont02 {
    flex-direction: row-reverse;
}

#cont03 {
    flex-direction: column;
}

#cont04 {
    flex-direction: column-reverse;
}

Ajuste en el eje principal

La propiedad wrap establece si es necesario ajustar los elementos para mostarlos en una única fila (o columna)

Admite los siguientes valores:

nowrap ajusta los elementos a una línea
wrap ajusta los elementos pero sin cambiar su tamaño
wrap-reverse ajusta los elementos pero sin cambiar su tamaño, pero en el orden inverso de filas

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont05' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
<div id='cont06' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>
<div id='cont07' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
    <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div>
</div>

Y el siguiente CSS:

#cont05 {
    flex-wrap: nowrap;
}

#cont06 {
    flex-wrap: wrap;
}

#cont07 {
    flex-wrap: wrap-reverse;
}

Alineación del contenido

Con la propiedad justify-content podemos alinear los elementos con respecto al eje principal del contenedor

Nos permite decidir qué hacer con el espacio restante

Admite los siguientes valores:

flex-start junta los elementos al principio del eje
flex-end junta los elementos al final del eje
center centra los elementos
space-between reparte el espacio entre los elementos dejando los extremos pegados al borde
space-around todo el espacio restante se reparte alrededor de cada elemento

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont08' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont09' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont010' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont011' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont012' class='contenedor'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

Y el siguiente CSS:

#cont08 {
    justify-content: flex-start;
}

#cont09 {
    justify-content: flex-end;
}

#cont10 {
    justify-content: center;
}

#cont11 {
    justify-content: space-between;
}

#cont12 {
    justify-content: space-around;
}

Ajuste en el eje secundario

Para alinear los elementos con respecto al eje secundario disponemos de la propiedad align-items

Admite los siguientes valores:

strech para ocupar todo el ancho
flex-start alinea los elementos al principio del eje
flex-end alinea los elementos al final del eje
center centra los elementos

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont013' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont14' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont015' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div id='cont016' class='contenedor contenedorAlto'>
    <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

Y el siguiente CSS:

.contenedorAlto {
    height: 100px;
}

#cont13 {
    align-items: strech;
}

#cont14 {
    align-items: flex-start;
}

#cont15 {
    align-items: flex-end;
}

#cont16 {
    align-items: center;
}

Propiedades de los elementos

Hasta ahora hemos visto propiedades para configurar el contenedor principal

Ahora vamos a enumerar algunas propiedades muy interesantes para manipular los elementos:

order indica el orden en el que aparece el elemento dentro del contenedor
De esta forma no será necesario modificar el HTML para reordenar los elementos, ya que lo realizaremos por código
flex-grow establece el factor de crecimiento del elemento
Es decir, cómo crece en relación a los otros elementos, siempre que el contenedor tenga espacio libre
flex-shrink establece el factor de encogimiento del elemento
Es decir, cómo decrece en relación a los otros elementos, siempre que el contenedor tenga espacio libre
flex-basis indica el tamaño por defecto (ancho) antes de que el espacio libre del contenedor sea distribuido
Normalmente se deja su valor por defecto: flex-basis: auto

Existe una forma abreviada para las propiedades flex-grow, flex-shrink y flex-basis, simplemente especificando el valor que tomarán: flex: 1 1 auto

Para comprobar su comportamiento, añade el siguiente HTML al ejemplo anterior:

<div id='cont017' class='contenedor'>
    <div id='item1'>1</div>
    <div id='item2'>2</div>
    <div id='item3'>3</div>
    <div id='item4'>4</div>
    <div id='item5'>5</div>
</div>

Y el siguiente CSS:

#item1 {
    order: 3;
}

#item2 {
    order: 1;
    flex-grow: 2;
}

#item3 {
    order: 2;
}

#item4 {
    order: 5;
}

#item5 {
    order: 4;
}

Modelo de rejilla

Aunque el modelo de cajas flexibles permite crear sitios adaptativos gracias a los media queries, el modelo que se está imponiendo es el de rejilla

En este modelo la pantalla se divide en una rejilla virtual y el diseñador puede elegir cuántas celdas de esa rejilla ocupará cada elemento dependiendo del dispositivo

Este diseño se ha popularizado gracias a Bootstrap creada por los desarrolladores de Twitter

En Bootstrap el espacio disponible se divide en 12 columnas de igual tamaño

Para cada elemento se indicará cuántas columnas ocupará dependiendo del tamaño del dispositivo

Por ejemplo, para una barra lateral podemos indicar que ocupe 2 columnas en un escritorio, 6 columnas (la mitad del ancho total) para tablets y 12 columnas (todo el ancho) en los dispositivos móviles

Para conseguirlo se usará un conjunto de clases, en este ejemplo serían: .col-md-2, .col-sm-6 y .col-xs-12

Los tamaños se definen en Bootstrap cómo:

xs (extra small)
Pantallas con ancho inferior a 768px
La gran mayoría de teléfonos inteligentes
sm (small)
Pantallas con ancho inferior a 992px
Si se ha definido la clase xs y el tamaño inferior a 768px, entonces se aplicará esa clase
md (medium)
Pantallas entre 992px y 1200px
Este rango representa la mayoría de los navegadores de escritorio
lg (large)
Pantallas muy grandes con ancho superior a 1200px
Normalmente son grandes pantallas de alta definición

<div class='col-xs-12 col-sm-6 col-md-8'>
    12 cols smartphone, 6 tablet, 8 PC
</div>
<div class='col-xs-6 col-md-4'>
    6 cols smartphone (y tablet), 4 PC
</div>

Como puede verse en el ejemplo, el contenido se organiza en filas (clase row) y dentro de estas filas crearemos las columnas con los tamaños deseados

Media Queries

Una media query permite utilizar las reglas de las hojas de estilo dependiendo de las caracteristicas del medio (ancho, alto y color)

Fueron añadidas a partir de CSS3, permiten que la presentación del contenido se adapte a un rasngo específico de dispositivos de salida sin tener que cambiar los contenidos y son la base del diseño adaptativo

Pueden utilizarse de dos formas: importando una hoja de estilo o aplicandolas dentro de una misma hoja de estilo

Importación de hojas de estilo

Podemos utilizar las media queries para elegir distintas CSS dependiendo del medio o las características del mismo

Actualmente sólo existen dos medios admitidos:

screen un navegador
print una impresora

<link rel='stylesheet' media='screen' href='browser.css'>
<link rel='stylesheet' media='print' href='printer.css'>
<link rel='stylesheet' media='(max-width: 800px)' href='tablet.css'>

Como puede observarse en el ejemplo, definir el tipo de medio es tan sencillo como añadir el atributo media dentro del elemento link

También es posible indicar condiciones sobre el tipo de medio, en el ejemplo le hemos dicho que se se cargue cuando el medio tenga una anchura inferior a 800px, para poder usarla con tablets

Reglas @media

Las reglas @media nos permiten indicar sobre qué tipo de medio deben aplicarse ciertas reglas CSS

Su sintasix genérica es:

@media [mediatype and] (media feature) {
   CSS-Code;
}

Los únicos mediatype admitidos son screen y print, como hemos visto anteriormente

@media (min-width: 700px) { ... }

@media (min-width: 700px) and (orientation: landscape) { ... }

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Como puede verse en el ejemplo, las media feature nos permiten indicar características del dispositivo y se pueden añadir condiciones utilizando los operadores lógicos and, not y only

Podemos utilizando los media feature especificar el tamaño del dispositivo, su orentación o resolución, número de colores, etc

Algunos de los más destacados son:

aspect-ratio ancho/alto del dispositivo
min-aspect-ratio mínimo ancho/alto del dispositivo
max-aspect-ratio máximo ancho/alto del dispositivo
color-index número de colores que el dispositivo puede mostrar
width ancho exacto
min-width ancho mínimo
max-width ancho máximo
height alto exacto disponible
min-height alto mínimo disponible
max-height alto máximo disponible
orientation orientación, admite los valores:
- landscape
- portrait

Diseño adaptativo con Media Queries

Vamos a ver dos ejemplos con media queries para entender cómo hacer nuestros propios diseños adaptativos, uno con el modelo flexible y otro con el modelo de rejilla

Diseño adaptativo con el modelo flexible

En siguiente ejemplo veremos que crear un diseño adaptativo con el modelo flexible es muy fácil

Ya que podemos aprovecharnos de la posibilidad de reordenar los elementos que nos ofrece esta opción

Vamos a partir de una disposición de 3 columnas con la barra de navegación, el contenido principal y una barra lateral

Cuando el tamaño del navegador sea menor que 640px pasaremos a una única columna

El código HTML que usaremos en el ejemplo es el siguiente:

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->        
        <meta charset='utf-8'/>
        <link rel='stylesheet' type='text/css' href='flexible.css'>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <header>Esta es la cabecera</header>
       <div id='principal'>
           <article>Contenido</article>
           <aside>Barra lateral</aside>
           <nav>Barra de navegación</nav>
       </div>
       <footer>Este es el pie de la página</footer>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187870&k=22cc66558df62bc4f5ca96cf611f44dc&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

El código CSS del archivo flexible.css que usaremos en el ejemplo es el siguiente:

header {
    height: 10%;
    background-color: lightblue;
}

#principal {
    display: flex;
    flex-flow: row;
    align-items: stretch;
    min-height: 80%;
}

nav {
    background-color: lightgray;
    flex: 1 6 20%;
    order: 1;
}

article {
    background-color: lemonchiffon;
    flex: 3 1 60%;
    order: 2;
}

aside {
    background-color: ligthsalmon;
    flex: 1 6 20%;
    order: 3;
}

footer {
    background-color: ligthgreen;
    height: 5%;
}

@media all and (max-height: 640px) {
    #principal {
       flex-flow: column;
    }

    article {
       order: 1;
    }

    aside {
       order: 2;
    }

    nav {
       order: 3;
    }
}

Diseño adaptativo con el modelo de rejilla

En siguiente ejemplo veremos que crear un diseño adaptativo con el modelo de rejilla es muy fácil

Una de las principales limitaciones es que ya no que podemos reordenar los elementos

Vamos a usar una rejilla de tipo Bootstrap

Para ello vamos a utilizar las clases cols-xs-12 para indicar que en tamaño pequeño el elemento ocupará 12 columnas, col-sm-8 ocupará 8 columnas para un tamaño pequeño y col-sm-2 ocupará 2 columnas para un tamaño un poco más grande

Para el cambio de tamaño pequeño a grande se ha asignado 768px

El código HTML que usaremos en el ejemplo es el siguiente:

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->        
        <meta charset='utf-8'/>
        <link rel='stylesheet' type='text/css' href='rejilla.css'>
    </head>
    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
       <div class='row'>
           <header class='col-xs-12 col-sm-12'>Esta es la cabecera</header>
       </div>
       <div class='row' id='principal'>
           <nav class='col-xs-12 col-sm-2'>Barra de navegación</nav>
           <article class='col-xs-12 col-sm-8'>Contenido</article>
           <aside class='col-xs-12 col-sm-2'>Barra lateral</aside>
       </div>
       <div class='row'>       
           <footer class='col-xs-12 col-sm-12'>Este es el pie de la página</footer>
       </div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187870&k=22cc66558df62bc4f5ca96cf611f44dc&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

El código CSS del archivo rejilla.css que usaremos en el ejemplo es el siguiente:

header {
    height: 10%;
    background-color: lightblue;
}

#principal {
    min-height: 80%;
}

nav {
    background-color: lightgray;
    height: 20%;
}

article {
    background-color: lemonchiffon;
    minheight: 80%;
}

aside {
    background-color: ligthsalmon;
    height: 20%;
}

footer {
    background-color: ligthgreen;
    height: 5%;
}

.row: after{
    clear: both;
}

.col-xs-12 {
    float: left;
    width: 100;
}

@media all and (max-height: 768px) {
    .col-sm-2, .col-sm-18, .col-sm-12 {
       float: left;
    }

    .col-sm-12 {
       width: 100%;
    }

    .col-sm-8 {
       width: 66.6667%;
    }

    nav, aside {
       height: 80%;
    }
}

Html, Lenguaje de programación, CSS, Programación, Página Web

Listas de declaraciones CSS

07 de octubre de 2024 secarcam

Listas de declaraciones CSS

Las propiedades se definen como listas de declaraciones CSS, son muy hetereogéneas y no pueden aplicarse a todas las etiquetas HTML

Podemos encontrar ejemplos en w3schools o en MDN Web Docs Mozilla

A continuación vamos a tratar algunas de las principales listas de declaraciones

Unidades de medida

Muchas propiedades aceptan como valor una unidad de medida

En general, es recomendable utilizar medidas relativas en vez de absolutas

Por ejemplo, para una página para la web podríamos indicar que queremos 20 píxeles de alto, sin embargo, si nuestros usuarios cambian de dispositivo, como por ejemplo a un móvil o a una tablet, ese tamaño seria o muy grande o el contenido aparecería desproporcionado

Para evitar ese problema u otros similares, las declaraciones CSS admiten las siguientes unidades:

Porcentaje: establece el tamaño en un tanto por ciento con respecto al valor heredado
```
* {
    font-size: 80%;
}
```
em: establece el tamaño de acuerdo a la fuente actual (o de la fuente heredada, si no se ha definido un tamaño de fuente)
```
* {
    font-size: 2em;
}
```
px: establece el tamaño en píxeles (un píxel representa un punto concreto de la pantalla que muestra nuestra página), siendo una medida absoluta, como puede generar problemas, deberíamos limitar su uso a casos concretos
```
* {
    font-size: 12px;
}
```

Podemos utilizar las declaraciones CSS para indicar la apariencia visual de la página web en distintos dispositivos, como por ejemplo una impresora. Para esos casos podemos utilizar otro tipo de medidas:

cm, mm, in: el tamaño se establece en una de las unidades internacionales (cm para centímetros, mm para milímetros e in para pulgadas)
```
header {
    font-size: 12cm;
}

body {
    font-size: 30mm;
}

p {
    font-size: 10in;
}
```
pt: el tamaño se establece en puntos (un punto equivale a \frac{1}{72} de pulgada)
```
* {
    font-size: 12pt;
}
```

El uso de medidas relativas (porcentajes o em) permiten que nuestra página se visualice correctamente en cualquier dispositivo. A esta práctica se la denomina diseño adaptativo o responsive, es decir, nuestro diseño se adaptará al dispositivo en el cual sea visualizado (un navegador, un móvil, una tablet, etc)

Colores

Otro de los elementos fundamentales para una página web es el tratamiento de los colores

Hay una lista de 140 colores básicos que podemos encontrar predefinidos, también podemos definirlos manualmente utilizando la notación RGB (Red, Green, Blue) para indicar la cantidad de rojo, verde y azul que componen ese color

Para definir el color usaremos un valor entre 0 y 255 (en su valor hexadecimal), iniciando la codificación con el simbolo ‘#’ seguido de un número hexadecimal de 6 cifras

Podemos definir el color de las siguientes maneras:

color: valor dónde valor es uno de los colores predefinidos
```
h1 {
    color: red;
}
```
color: codigo dónde código es un valor que empieza por el símbolo ‘#’ seguido de un número hexadecimal de 6 cifras
```
h1 {
    color: #FF0000;
}
```
color: RGB(entero, entero, entero): dónde RGB es una función que admite 3 valores entre 0 y 255 que corresponden a la cantidad de rojo, verde y azul que componen ese color
```
h1 {
    color: RGB(255, 0, 0);
}
```
color: RGB(entero%, entero%, entero%): igual que la anterior, pero el valor entero es un porcentaje
```
h1 {
    color: RGB(100%, 0%, 0%);
}
```
color: transparent: el color transparente también es un color válido en CSS3
```
h1 {
    color: transparent;
}
```

Propiedades de texto

Las principales propiedades que se pueden utilizar en los elementos de texto son:

color

indica el color de la fuente. Su valor es un color, ya lo hemos descrito en el párrafo anterior
```
p {
    color: #FF0000;
}
```
font-size

representa el tamaño de la fuente, como ya se ha descrito en el párrafo anterior es recomendable usar valores relativos
```
p {
    font-size: 80%;
}
```
font-style

admite un estilo de letra para el texto, podemos elegir entre uno de los siguientes estilos:
- normal es el estilo por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    font-style: normal;
}
```
- italic es el estilo por defecto del navegador para la letra en cursiva
```
p {
    font-style: italic;
}
```
- oblique es el estilo por defecto del navegador para la letra oblique, es similar a la cursiva, si la fuente no permite el tipo oblique tomará el estilo como italic
```
p {
    font-style: oblique;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    font-style: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    font-style: inherit;
}
```
font-weight

admite un estilo de letra en negrita para el texto, podemos elegir entre uno de los siguientes tipos de negrita:
- normal es la negrita por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    font-weight: normal;
}
```
- bold define la negrita con caracteres gruesos
```
p {
    font-weight: bold;
}
```
- bolder define la negrita con los caracteres más gruesos
```
p {
    font-weight: bolder;
}
```
- lighter define la negrita con los caracteres más finos
```
p {
    font-weight: lighter;
}
```
- entero define la negrita con un valor múltiplo de 100, con el valor 400 por defecto y el 700 para bold
```
p {
    font-weight: 600;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    font-weight: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    font-weight: inherit;
}
```
text-decoration-line

establece el tipo de decoración del texto para el subrayado, podemos elegir entre uno de los siguientes tipos de decoración:
- none valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    text-decoration-line: none;
}
```
- underline el subrayado será debajo del texto
```
p {
    text-decoration-line: underline;
}
```
- overline el subrayado será sobre el texto
```
p {
    text-decoration-line: overline;
}
```
- line-through el subrayado será a través del texto
```
p {
    text-decoration-line: line-through;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-decoration-line: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-decoration-line: inherit;
}
```
text-decoration-color

establece el color para la decoración del texto, podemos elegir entre uno de los siguientes tipos de decoración:
- color donde color es uno de los valores vistos en el párrafo anterior
```
p {
    text-decoration-color: #FF0000;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-decoration-color: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-decoration-color: inherit;
}
```
text-decoration-style

establece el tipo de decoración del texto, podemos elegir entre uno de los siguientes tipos de decoración:
- solid valor por defecto del navegador, si no se especifica, se tomará este valor. Mostrará la línea en una única línea
```
p {
    text-decoration-style: solid;
}
```
- double mostrará la línea con una doble línea
```
p {
    text-decoration-style: double;
}
```
- dotted mostrará la línea como una línea de puntos
```
p {
    text-decoration-style: dotted;
}
```
- dashed mostrará la línea como una línea discontinua
```
p {
    text-decoration-style: dashed;
}
```
- wavy mostrará la línea como una línea ondulada
```
p {
    text-decoration-style: wavy;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-decoration-style: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-decoration-style: inherit;
}
```
text-transform

establece el texto en letras minúsculas o mayúsculas, podemos elegir entre uno de los siguientes tipos de transformación:
- none valor por defecto del navegador, si no se especifica, se tomará este valor. No se tomarán letras mayúsculas
```
p {
    text-transform: none;
}
```
- capitalize se transforma la primera letra de cada palabra a mayúscula
```
p {
    text-transform: capitalize;
}
```
- uppercase se transforman todas las letras a mayúsculas
```
p {
    text-transform: uppercase;
}
```
- lowercase se transforman todas las letras a minúsculas
```
p {
    text-transform: lowercase;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-transform: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-transform: inherit;
}
```
letter-spacing

aumenta o disminuye el espacio entre caracteres en un texto, podemos elegir entre uno de los siguientes:
- normal valor por defecto del navegador, si no se especifica, se tomará este valor. No hay espacios extra
```
p {
    letter-spacing: normal;
}
```
- length dónde lenghth es la cantidad de espacios extra entre caracteres (también están permitidos valores negativos)
```
p {
    letter-spacing: 5px;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    letter-spacing: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    letter-spacing: inherit;
}
```
- word-spacing
  
  aumenta o disminuye el espacio entre las palabras en un texto, podemos elegir entre uno de los siguientes:
  - normal valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    word-spacing: normal;
}
```
  - length dónde length es la cantidad de espacios extra entre palabras (también están permitidos valores negativos)
```
p {
    word-spacing: 5px;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    word-spacing: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    word-spacing: inherit;
}
```
- line-height
  
  especifica la altura de una línea, podemos elegir entre uno de los siguientes:
  - normal valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    line-height: normal;
}
```
  - number dónde number es un valor que se multiplicará por el tamaño de la fuente actual para establecer la altura de la línea
```
p {
    line-height: 2;
}
```
  - length dónde length es la altura para esa línea (también están permitidos valores negativos)
```
p {
    line-height: 5px;
}
```
  - % es la altura para esa línea en porcentaje del tamaño de la fuente actual
```
p {
    line-height: 15%;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    line-height: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    line-height: inherit;
}
```
- text-align
  
  especifica la alineación horizontal del texto en un elemento, podemos elegir entre uno de los siguientes:
  - left el texto se alinea a la izquierda
```
p {
    text-align: left;
}
```
  - right el texto se alinea a la derecha
```
p {
    text-align: right;
}
```
  - center el texto se alinea centrado
```
p {
    text-align: center;
}
```
  - justify el texto las líneas son estiradas para que cada línea tenga el mismo ancho (como en los periódicos y las revistas)
```
p {
    text-align: justify;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-align: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-align: inherit;
}
```
- text-indent
  
  especifica la sangría de la primera línea en un bloque de texto, podemos elegir entre uno de los siguientes:
  - length dónde length es la sangría de la primera línea en un bloque de texto (también están permitidos valores negativos, en ese caso se usará una sangría a la izquierda)
```
p {
    text-indent: 5px;
}
```
  - % es la sangría de la primera línea en un bloque de texto en porcentaje del tamaño del elemento padre
```
p {
    text-indent: 15%;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-indent: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-indent: inherit;
}
```
Es muy importante definir una fuente que sea coherente con el estilo de nuestra web. Para ello se dispone de la propiedad font-family, en la cual especificaremos la fuente (verdana, arial, time new roman, etc) que será usada para ese texto

Sin embargo nos encontraremos con un problema si esa fuente en concreto no está definida en el navegador, por eso es recomendable especificar varias fuentes en caso de que no existiera alguna de ellas

Otra de las limitaciones es que sólo podremos usar fuentes que cumplan los estándares permitidos por los navegadores

Para solucionar los problemas relacionados con las fuentes existen servidores de fuentes de texto que ofrecen la posibilidad de cargar la fuente que necesitamos de ese servidor
```
<!DOCTYPE html>
<html>
    <head>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>

        
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="https://fonts.google.com/css?family=Roboto" />
    </head>

    <body>

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

    
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187870&k=22cc66558df62bc4f5ca96cf611f44dc&__muid="></script>

</body>
</html>
```
En el ejemplo anterior hemos utilizado una de las fuentes de referencia de Google llamada Roboto y la hemos añadido a nuestra cabecera

Propiedades de fondo

Para establecer el fondo de un elemento utilizaremos la propiedad background-color

También puede utilizarse como fondo una imagen utilizando la propiedad background-image, que se repetirá vertical y horizontalmente para cubrir todo el elemento

Podemos limitar la forma en que se repite esa imagen con las propiedades background-repeat: repeat-y y background-repeat: repeat-x
```
body {
    background-image: url('fondo.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}
```
En el ejemplo anterior hemos utilizado la propiedad background-repeat: no-repeat para desactivar la repetición de la imagen, estableciendo además una posición fija, en la esquina inferior derecha, con la propiedad background-position: right bottom

Para mantenerla fija y que haga scroll en la página, se ha utilizado la propiedad background-attachment: fixed

Dimensiones y bordes

Para indicar las dimensiones de un elemento usaremos las propiedades width y height (anchura y altura)

Debemos tener en cuenta si sus márgenes son internos o externos

Para ello primero definiremos el margen desde el borde hasta los otros elementos con la propiedad margin

En segundo lugar definiremos el margen interno hasta el propio borde del elemento con la propiedad padding

Podemos asignar un margen externo para los cuatro lados con la propiedad margin o podemos indicarle un margen externo en particular para cada lado utilizando margin-top, margin-bottom, margin-left o margin-right

De forma análoga, se puede realizar para los márgenes internos utilizando padding-top, padding-bottom, padding-left o padding-right

Una vez difinidos los márgenes externos e internos, podremos configurar la apariencia que tomará el borde

Primero estableceremos el estilo con la propiedad border-style, la cual admite los valores dotted (puntuado), dashed (discontinuo), solid (sólido) o double (doble)

También es posible usar valores para crear bordes biselados, pero las guías de estilo modernas desaconsejan su uso por estar «pasados de moda»

En segundo lugar podremos personalizar la anchura del trazo con la propiedad border-width y su color con border-color

Propiedades para listas

Podemos utilizar las siguientes propiedades para manejar elementos lista:
- list-style-type: representa el tipo de marcador que se utilizará en la lista
  Existen estos valores predefinidos:
  - circle
  - square
  - decimal
  - lower-roman
  - upper-roman
  - none
- list-style-position: indica si el marcador se incluirá dentro del texto (propiedad inside) o fuera (propiedad outside), siendo esta última la más habitual
- list-style-image: permite añadir una imagen como marcador
  Podremos usar los valores none o url(‘url de la imagen’)
Otras propiedades

Además de las propiedades anteriores vamos a destacar un par más que nos serán de especial utilidad a la hora de dar formato a nuestros elementos:
- visibility: indica si el elemento está visible o no
  Puede tomar uno de los siguientes valores:
  - visible: el elemento está visible
  - hidden: el elemento está no visible
  - collapse: solo podremos usarlo con los elementos de tablas para no visualizar una fila o una columna concreta
- display: cambia el tipo de caja del elemento, puede tener los valores:
  - block
  - inline
  - none

Html, Lenguaje de programación, CSS, Programación, Página Web

Preprocesadores CSS

07 de octubre de 2024 secarcam

Preprocesadores CSS

El uso de procesadores CSS surge por un problema muy común en las hojas de estilo, muchos valores se repiten constantemente

.do-container {
    margin: 2em 1em;
    background-color: #E1E1E1;
    padding: 1em;
    border-radius: 15px;
    border-color: #C0392B;
    border-width: 1px;
}

#tableOfContents {
    list-sytle: none;
    border-left: 2px solid #C0392B;
}

a {
    color: #C0392B;
}

Como podemos ver en el ejemplo anterior, el color #C0392B se repite constantemente en el código porque es nuestro color principal en este diseño

¿Pero, y si necesitamos cambiarlo? Esa situación nos obligaria a cambiar todas sus apariciones en la hoja de estilo

@colorPrincipal = #C0392B;

.do-container {
    margin: 2em 1em;
    background-color: #E1E1E1;
    padding: 1em;
    border-radius: 15px;
    border-color: @colorPrincipal;
    border-width: 1px;
}

#tableOfContents {
    list-sytle: none;
    border-left: 2px solid @colorPrincipal;
}

a {
    color: @colorPrincipal;
}

En el ejemplo anterior se ha solucionado el problema con la variable colorPrincipal, sin embargo, esta solución no es permitida por el CSS estándar

Por eso surge la necesidad del uso de procesadores CSS, que son aplicaciones que permiten dotar al CSS de las ventajas de un lenguaje de programación, como el uso de variables, funciones, condiciones e incluso cálculos matemáticos, los cuales serán traducidos posteriomente a un CSS válido

No existe un estándar claro para este tipo de procesadores, pero tenemos las siguientes alternativas:

Sass funciona con Ruby, el cual viene preinstalado en Mac; si eres usuario de Windows necesitaras instalar previamente Ruby
Funciona mediante línea de comandos en un terminal, ya que no tiene entorno gráfico
Si quieres usarlo en modo visual, existen varias herramientas de pago que podrian interesarte
LESS está escrito en javascript, por lo que su instalación es tan sencilla como su importación directamente a nuestro documento HTML
Existen herramientas gratuitas que ayudan a compilar tus archivos escritos en LESS a un CSS válido
Aunque puede configurarse LESS para que haga el proceso de compilación ‘al vuelo‘, aunque no es recomendable porque consume tiempo de carga cada vez que recompila
Stylus necesitaremos instalar previamente Node.js, el cuál tiene su propio conjunto de repositorios que permite tener siempre la última versión estable del programa
Funciona mediante línea de comandos en un terminal, ya que no tiene entorno gráfico
Si quieres usarlo en modo visual, existen varias herramientas de pago que podrian interesarte

La sintaxis de estas herramientas es similar aunque hay pequeñas diferencias entre ellas, ya que como se ha dicho, no hay un estándar para preprocesadores CSS

LESS

Instalación

Con esta herramienta crearemos archivos .less donde se guardarán nuestras reglas CSS mejoradas

Incluiremos LESS en nuestro HTML mediante la importación de Javascript y se encargará de traducir el archivo .less en un .css válido que será cargado en la página HTML

Este tipo de instalación usada sólo en desarrollo es considerada ‘al vuelo‘ y llamada compilación, por motivos de eficiencia, en la página de producción, se añadirá el .css válido y ya traducido

Para poder realizar esta traducción ‘al vuelo‘ añadiremos las siguientes líneas en el head de nuestro HTML:

<link rel='stylesheet/less' type='text/css' href='mystyle.less' />
<script src='less.js' type='text/javascript'></script>

En el ejemplo nuestro fichero LESS se llama mystyle.less y le hemos indicado al navegador que es una hoja de estilos LESS con la referencia ‘stylesheet/less’

Despues hemos cargado la libreria Javascrip de LESS llamada less.js, que será la encargada de traducir el archivo mystyle.less al CSS válido y lo cargará en el HTML

Variables

Antes hemos visto un ejemplo para definir una variable para el color, en LESS se definen las variables con el símbolo @

@colorPrincipal = #ABABAB;
@anchoSitio = 1024px;
@estiloBorde: dotted;

body {
    color: @colorPrincipal;
    border: 1px @estiloBorde @colorPrincipal;
    max-width: @anchoSitio;
}

button {
    background-color: @colorPrincipal;
}

Mixins

Los mixins permiten que una regla CSS herede todas las declaraciones de otra

.bloque{
    margin: 10px 5px;
    padding: 2px;
}

p {
    .bloque; /* Hereda todos los estilos de .bloque */
    border: 1px solid #EEE;
}

ul ol {
    .bloque; /* Hereda todos los estilos de .bloque */
    color: #333;
    text-transform: uppercase;
}

En el ejemplo anterior hemos hecho que los elementos p, ul y ol incluyan todas las declaraciones de .bloque y así nos ahorramos el tener que volver a escribirlas en cada aparición

Los mixins también permiten la utilización de parámetros para configurarlos

@mixin error(@anchoBorde: 2px) {
    border: @anchoBorde solid #F00;
    color: #F00;
}

.error-generico {
   padding: 20px;
   margin: 4px;
   .error(); /* Se aplican los estilos de error */
}

.error-login {
   left: 12px;
   position: absolute;
   top: 20px;
   .error(5px); /* Se aplican los estilos de error pero con el parámetro @anchoBorde con el valor 5px */

En el ejemplo anterior hemos definido el mixin error donde el ancho de borde es configurable con la variable @anchoBorde

Si no hay parámetros, su valor por defecto será 2px, como se ha indicado en su definición

.error-generico llama al mixin para heredar todas las declaraciones y, como no tiene parámetros toma su valor por defecto

.error-login llama al mixin pero esta vez, como tiene un parámetro toma el valor del mismo

Código heredado

A veces surge el problema de tener varios elementos con el mismo padre, con lo que nos vemos obligados a repetir en cada aparición referencias al padre

section {
   margin: px;
}

section nav {
    height: px;
}

section nav a {
   color: #0982C1;
}

section nav a:hover {
    text-decoration: underline;
}

En el ejemplo anterior tenemos el problema comentado, section es el padre en la mayoría de los elementos de la hoja de estilo, a su vez nav es padre de varios de ellos, al igual que a

section {
   margin: px;
   nav {
      height: px;
      a {
         color: #0982C1;
         &:hover { /* En este caso, & representa el selector a */
             text-decoration: underline;
      }
   }
}

En el ejemplo anterior lo hemos solucionado escribiendo anidaciones de los hijos dentro de los elementos padre, así nos ahorramos repetir las referencias

Además permite usar el símbolo & para referirse al elemento padre inmediato dentro del elemento hijo

Funciones para el color

Las funciones para el color permiten modificar el color en tiempo de compilación

Son bastante útiles para crear degradados, oscurecer botones al pasar el ratón, etc

lighten(@color, 10%); /* Devuelve un color al 10% más claro que @color */
darken(@color, 10%); /* Devuelve un color al 10% más oscuro que @color */

saturate(@color, 10%); /* Devuelve un color al 10% más saturado que @color */
desaturate(@color, 10%); /* Devuelve un color al 10% menos saturado que @color */

spin(@color, 10%); /* Devuelve un color al 10% un tono mayor que @color */
spin(@color, -10%); /* Devuelve un color al 10% un tono menor que @color */

mix(@color1, @color2); /* Devuelve el color resultante de mezclar los colores @color1 y @color2 */

Operaciones

LESS permite operaciones matemáticas

@operacion: 100px * 2em; /* El resultado será 102px */

body {
    margin: (14px / 2);
    top: 50px + 100px;
    right: 100px - 50 px;
    left: 10 * 10;
}

Como se puede ver en el ejemplo, no tiene muchas restricciones, ya que permite hacer cosas sin sentido como mezclar distintas unidades

Media queries

Uno de los problemas de los media queries es que podemos tener distintas definiciones de la misma clase en disintos puntos del archivo CSS

.contenedor {
    width: 75%;
}

@media (max-width: 80px) {
   .contenedor {
       width: 100%;
   }
}

Podemos anidar los media queries dentro de la misma clase, solucionando el problema del ejemplo anterior

.contenedor {
    width: 75%;
    @media (max-width: 80px) {
       width: 100%;
   }
}

Html, jQuery, Lenguaje de programación, CSS, Javascript, Página Web, Programación

Modificación de estilos

07 de octubre de 2024 secarcam

Modificación de estilos

JQuery permite modificar facilmente los estilos y las propiedades CSS de nuestra página web

Añadir o eliminar propiedades CSS

Mediante los métodos addClass() y removeClass() podemos asignar o quitar una clase CSS de cualquier elemento

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $('#btn01').click(function() {
            $('#div01').addClass('important color');
        });
        $('#btn02').click(function() {
            $('#div01').removeClass('color');
        });
        </script>
        <style>
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .color {
            color: #D5322D;
        }
        </style>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <div id='div01'>Texto de ejemplo</div><br/>
        <button id='btn01'>Añadir clases important y color</button>
        <button id='btn02'>Eliminar clase color</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187870&k=22cc66558df62bc4f5ca96cf611f44dc&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

En el ejemplo se añaden los estilos important y color al elemento con id div01 cuando pulsemos el botón btn01 y se elimina el estilo color

Manipulación de las propiedades CSS

El método css() nos permite consultar o modificar cualquier propiedad de la hoja de estilos de un elemento HTML

Tiene la siguiente sintaxis:

css('nombre_propiedad', 'valor');

En caso de que sólo queramos consultar la propiedad, omitiremos el parámetro valor y si queremos modificarlo, usaremos ese parámetro

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $('#btn03').click(function() {
            $('.pcolor').css('background-color', 'yellow');
        });
        </script>        
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <p class='pcolor' style='background-color:#FF5555'>Primer párrafo</p>
        <p class='pcolor' style='background-color:#55FF55'>Segundo párrafo</p>
        <p class='pcolor' style='background-color:#5555FF'>Tecer párrafo</p>
        <button id='btn03'>Cambiar color a todos los párrafos</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732187870&k=22cc66558df62bc4f5ca96cf611f44dc&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

En el ejemplo se han usado tres párrafos distintos con un estilo para el color de fondo distinto, si pulsamos el botón con id btn03 podemos comprobar que con el método css hemos cambiado todos los párrafos a color amarillo

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

CSS

Integración de estilos en una página

Estructura de una hoja de estilo

El árbol DOM

Cascada de estilo

CSS Reset

Selectores

Selector Universal

Selector de etiqueta HTML

Selector de clase

Selector de identificador

Selectores descendientes y adyacentes

Selectores de atributos

Pseudoclases

Ejemplo de Selectores en acción

Posicionamiento de elementos

Modelo de bloque

Modelo flexible

Dirección de los elementos

Ajuste en el eje principal

Alineación del contenido

Ajuste en el eje secundario

Propiedades de los elementos

Modelo de rejilla

Media Queries

Importación de hojas de estilo

Reglas @media

Diseño adaptativo con Media Queries

Diseño adaptativo con el modelo flexible

Diseño adaptativo con el modelo de rejilla

Listas de declaraciones CSS

Unidades de medida

Colores

Propiedades de texto

color

font-size

font-style

font-weight

text-decoration-line

text-decoration-color

text-decoration-style

text-transform

letter-spacing

word-spacing

line-height

text-align

text-indent

Propiedades de fondo

Dimensiones y bordes

Propiedades para listas

Otras propiedades

Preprocesadores CSS

LESS

Instalación

Variables

Mixins

Código heredado

Funciones para el color

Operaciones

Media queries

Modificación de estilos

Añadir o eliminar propiedades CSS

Manipulación de las propiedades CSS

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Política de Cookies