Currículo: este documento contiene la parte práctica que complementa los saberes básicos desarrollados en el Tema 5. La Web correspondiente a 2º Bachillerato.
Tabla de contenidos
- 1. ¿Cómo funcionan las hojas de estilo?
- 2. ¿Cómo se añaden estilos a nuestras páginas?
- 3. Estructura y sintaxis de CSS
- 4. Valores y unidades en CSS
- 5. Colores
- 6. Imágenes con estilo
- 7. Tipos de letras
- 8. Selectores CSS
- 9. Propiedades CSS
Si HTML es el lenguaje con el que se construyen los contenidos de una página, las hojas de estilo CSS son el lenguaje en el que se usa para trabajar el diseño de cualquier web actual, es decir, la estética o la apariencia de las páginas web.
CSS son las siglas de Cascading Style Sheets, o lo que es lo mismo Hojas de Estilo en Cascada.
1. ¿Cómo funcionan las hojas de estilo?
Las hojas de estilo CSS son un conjunto reglas que enumeran en un fichero .css las propiedades que describen el aspecto que deben tener los diferentes elementos HTML de una página.
Lo interesante de esto es que funcionan con una filosofía de patrones o plantillas, es decir, no es necesario especificar cada uno de los elementos, sino que se pueden definir reglas como estas dos:
- “Los títulos de nivel 1 y 2 han de ser de color negro y un tamaño de fuente de 16 y 14 pixeles respectivamente.”
- “El texto de los párrafos están alineados a la izquierda, tienen un tamaño de fuente de 12 pixeles y un color gris oscuro.”
2. ¿Cómo se añaden estilos a nuestras páginas?
Para añadir estilos a nuestras páginas web podemos decantarnos por una de estas tres opciones, aunque la más recomendada siempre será la tercera.
2.1. Estilos en los atributos
La primera forma de incorporar estilos a nuestras páginas es hacerlo directamente en los atributos de los distintos elementos, utilizando el atributo style.
Imagina que queremos colorear de rojo el texto de un párrafo. Podemos hacer esto:
<html>
<head>
<title>Estilos</title>
</head>
<body>
<p style="color:red">
Un párrafo cualquiera coloreado de rojo
</p>
</body>
</html>Como puedes ver, a cada elemento al que queremos añadirle un estilo le indicamos con el atributo style las propiedades que queremos que tome el elemento, en este caso que el texto se coloree en rojo.
La desventaja de este método es que si tenemos 200 párrafos que queremos colorear de rojo, tenemos que escribir 200 veces lo mismo, y esto es algo muy poco eficiente.
2.2. Estilos en las páginas
La segunda forma es establecer al inicio de cada página los estilos que queramos. Para resolver el problema anterior podemos, crear un estilo para los párrafos p y de esta manera todos los párrafos que se encuentren en este archivo .html aparecerán coloreados de rojo.
<html>
<head>
<title>Estilos</title>
<style type="text/css">
p { color: red; }
</style>
</head>
<body>
<p>Primer párrafo que aparecerá coloreado de rojo.</p>
<p>Segundo párrafo que aparecerá coloreado de rojo.</p>
<h3>Encabezado de nivel 3 que no aparecerá coloreado de rojo.</h3>
</body>
</html>Fíjate como ya no hemos incluido los atributos style en cada elemento p, sino que hemos creado nuestro estilo en la sección head.
Esto resuelve los problemas de la primera manera de incorporar estilos, pero tiene una gran desventaja.
Si nuestro sitio web tiene (como es lo normal) muchas páginas .html, tendríamos que incluir esa sección de estilos del head en cada una de nuestras páginas HTML. Y esto, nuevamente es una forma muy ineficiente de trabajar.
2.3. Estilos en ficheros
Esta tercera forma, resuelve todos los problemas anteriores y además, genera un código muy limpio, eficiente y mantenible.
Se trata de colocar todos los estilos de todas nuestras páginas en un fichero aparte, un fichero .css. De esta manera, para que los estilos se apliquen en nuestras páginas sólo tenemos que incluir el fichero en nuestra página HTML.
Primero creamos nuestro fichero estilos.css:
p { color: red; }Y seguidamente, en nuestra página HTML, incluir el fichero CSS desde la sección head usando el elemento link:
<html>
<head>
<title>Estilos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Primer párrafo que aparecerá coloreado de rojo.</p>
<p>Segundo párrafo que aparecerá coloreado de rojo.</p>
<h3>Encabezado de nivel 3 que no aparecerá coloreado de rojo.</h3>
</body>
</html>Esta es la forma recomendada de incluir los estilos en nuestras páginas HTML.
Ahora que ya sabes cómo incorporar los estilos, veamos cómo le decimos al navegador a qué elementos HTML queremos aplicarle los estilos.
3. Estructura y sintaxis de CSS
El funcionamiento de CSS consiste en definir unas reglas de presentación que se van a aplicar a un número indeterminado de elementos del documento HTML, al que están vinculadas. Por lo tanto, se necesitan dos herramientas básicas para crear y aplicar un estilo:
- SELECTORES: son las herramientas que permiten seleccionar el elemento o elementos sobre los que aplicar las reglas.
- DECLARACIONES: son las indicaciones para asignar, mediante claves propiedad : valor, el aspecto deseado a los elementos determinados por el selector.
Los selectores y las declaraciones se agrupan en reglas.
En el siguiente ejemplo se muestra una regla compuesta por los distintos elementos:
- Selector body. El contenido se aplica a todos los elementos que se encuentren dentro del elemento body en la página HTML.
- Las declaraciones que asignan valor a las propiedades text-align, font-family, background-color y color, que afectarán respectivamente a la alineación del texto, el tipo de letra, el color de fondo y el color del elemento body y de todos los elementos contenidos en este, siempre que las propiedades sean aplicables a dichos elementos.
body {
text-align: center;
font-family: 'Courier New', Courier, monospace;
background-color: brown;
color: white;
}Los comentarios se delimitan así, y no se procesan por el navegador:
/* Esto es un comentario en CSS */4. Valores y unidades en CSS
Antes de presentar las posibilidades de las hojas de estilo es necesario conocer qué valores admiten los diferentes parámetros y en qué unidades se expresan.
4.1. Tipos de datos
Los tipos de datos que se utilizan a la hora de configurar un estilo son los que se detallan en esta tabla:
| Tipo | Descripción |
| Entero | Número entero, ya sea positivo o negativo. Por ejemplo 10, -3,… |
| Número | Un número decimal. Utiliza el punto como separador decimal. Si no hay decimales, se omite el punto. Por ejemplo: 5.4, 12.33,… |
| Dimensión | Es un número con una dimensión asociada; deg (grados), s (segundos) o px (píxeles) son algunos ejemplos |
| Porcentaje | Una fracción de un total, normalmente referente a la dimensión del padre del elemento al que se está aplicando. Por ejemplo: 60% en un font-size representa dicho porcentaje del tamaño del texto del elemento padre. Si, en cambio, se aplica un porcentaje a la propiedad width, se aplica dicho porcentaje sobre el ancho del elemento contenedor |
4.2. Unidades de longitud absolutas
Las unidades de longitud absoluta representan longitudes sin importar en qué contexto se encuentre el componente al que hacen referencia. Estas son las más usadas:
| Unidad | Nombre |
| px | Píxel |
| cm | Centímetro |
| mm | Milímetro |
| in | Pulgada |
| pt | Puntos (1/72 de in) |
4.3. Unidades de longitud relativas
Las unidades de longitud relativas representan longitudes que tienen diferente valor en función del contexto en el que se encuentran.
| Unidad | Nombre |
| em | Tamaño de letra del elemento padre |
| ex | Altura de la fuente del elemento |
| ch | Ancho del carácter O de la fuente del elemento |
| rem | Tamaño de la letra del elemento raíz |
| lh | Altura de la línea del elemento |
De este conjunto de posibles unidades, las más utilizadas con em y rem. Las dimensiones absolutas son más sencillas de aplicar, pero los resultados dependen mucho de la resolución y de la densidad de píxeles de la pantalla. Salvo casos excepcionales, suele ser más eficaz utilizar unidades relativas.
Veamos este ejemplo en el que se muestran tres textos con diferentes tamaños de letra: en los dos primeros casos se utiliza em como unidad de medida mientras que en el tercer caso se asigna un tamaño porcentual. El tamaño asignado al id saludoTriplePorcentual y al id saludoTriple tienen el mismo efecto, ya que ambos multiplican por 3 el tamaño del tipo de letra del elemento:
/* Fichero estilos.css */
body { text-align: center; background-color: red; color: white; }
#saludoDoble { font-size: 2em; }
#saludoTriple { font-size: 3em; }
#saludoTriplePorcentual { font-size: 300%; }<html>
<head>
<title>Estilos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
Texto por defecto sin estilos modificados
<p id="saludoTriplePorcentual">Párrafo al que se aplica saludoTriplePorcentual</p>
<p id="saludoDoble">Párrafo al que se aplica saludoDoble</p>
<p id="saludoTriple">Párrafo al que se aplica saludoTriple</p>
</body>
</html>Observa cómo aparecen los elementos en el navegador, para comprobar los efectos de cada regla CSS.
5. Colores
Los colores se pueden utilizar para colorear textos, fondos de contenedores o bordes, por ejemplo. CSS permite expresar los colores con varias notaciones distintas:
- Por nombre. Indicando el nombre del color de la lista de la recomendación del W3C (CSS Color Module Level 3). Así, el color rojo se asigna con el valor red. La lista completa se encuentra en la W3C Recommendation.
- Por valor RGB (Red Green Blue), indicando la composición de las tres componentes con valores en el rango 0-255 mediante el formato rgb(r,g,b). Por ejemplo, el color rojo se asigna con el valor rgb(255,0,0). Con la variante rgba(r,g,b,a) se añade un componente que indica la transparencia del color (lo que se denomina canal alfa) con un valor decimal comprendido entre 0 (completamente transparente) y 1 (completamente opaco).
- Por valor hexadecimal, indicando el valor en hexadecimal de las componentes RGB mediante el formato #valorhexadecimal. Por ejemplo, el color rojo se asigna con el valor #FF0000.
A continuación, se muestran dos ejemplos de asignación de color sobre un mismo código HTML expresando dichos colores con diferentes notaciones.
/* Fichero estilos.css */
.primerColor { background-color: burlywood; }
.segundoColor { background-color: rgb(200, 200, 200); }<html>
<head>
<title>Estilos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Los <span class="primerColor">testigos</span> presentes <span class="segundoColor">indicaron</span> que el incendio...</p>
</body>
</html>
6. Imágenes con estilo
Los archivos de imagen se referencian en CSS utilizando la función url(). Esta referencia puede ser local o a un recurso externo:
Por ejemplo: aquí se asigna una imagen de fondo a un elemento con identificador matrix, que está localizada en el mismo directorio que el fichero CSS que la llama:
/* Fichero estilos.css */
#matrix {
padding: 2em;
text-align: center;
color: whitesmoke;
font-weight: bolder;
font-size: 2em;
background-image: url(./bits.jpg);
}<html>
<head>
<title>Estilos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div id="matrix">
<p>No te lo vas a creer pero han resucitado a Neo.</p>
</div>
</body>
</html>
7. Tipos de letras
En computación se conoce como tipo de letra, tipografía o fuente al conjunto de modelos gráficos que representan cada uno de los caracteres y símbolos representables por el ordenador y que se almacena en un fichero. Existe un número casi ilimitado de tipos de letras creados por los diseñadores gráficos y, como puede imaginarse, no están todos disponibles en todos los ordenadores.
Para poder disponer de un tipo de letra específico hay que tener el fichero que almacena la información gráfica en el ordenador o, en caso contrario, algún mecanismo para obtener dicha información en el momento de su uso.
Desde el punto de vista del diseño web, existen ciertas tipografías que se pueden utilizar de manera segura y general, ya que son comunes a todos los sistemas. Se denominan tipos de letra seguros y la lista no es muy extensa: Arial, Courier New, Georgia, Times New Roman, Trebuchet MS y Verdana.
De manera específica CSS define cinco tipos de letra genéricos cuya representación puede no ser exactamente la misma en todos los sistemas. Estos tipos genéricos son: serif, sans-serif, monospace, cursive y fantasy.
La carga de tipografías se hace con la regla @import, en cuya sintaxis podemos especificar una fuente local del servidor o una fuente remota:
/* Fichero estilos.css */
/* Así se importa una fuente externa */
@import url('https://fonts.googleapis.com/css2?family=Madimi+One&display=swap');
p {
font-family: "Madimi One", sans-serif;
font-weight: 400;
font-style: normal;
}<html>
<head>
<title>Estilos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Un texto al que se le aplica una fuente externa (Google Fonts).</p>
</body>
</html>
8. Selectores CSS
Los selectores determinan sobre qué elemento(s) se debe aplicar un estilo. Es un sistema muy elaborado y capaz de conseguir un alto nivel de precisión a la hora de determinar sobre qué propiedades de qué elementos se van a aplicar los valores deseados.
Los selectores tienen un nivel de especificidad dispar, desde muy generales hasta muy específicos. Lo mismo ocurre con el nivel de complejidad; hay selectores muy sencillos y fáciles de comprender y otros más elaborados y complejos.
Se pueden agrupar los selectores como básicos, combinadores, pseudoclases y pseudoelementos.
8.1. Selectores básicos
Son los selectores más sencillos de entender y de uso más habitual. Se detallan en la siguiente tabla:
| Nombre | Selecciona | Sintaxis |
| Universal | Todos los elementos | * |
| De tipo | Todos los elementos de un tipo determinado | nombreElemento |
| De clase | Todos los elementos de una determinada clase | .nombreClase |
| De identificador | El elemento con el identificador indicado | #identificador |
| De atributo | Los elementos que tienen un determinado atributo con unas características específicas. = el atributo tiene un determinado valor. | [atributo] elemento[atributo] elemento[atributo=”cadena”] |
Por ejemplo:
/* SELECTOR UNIVERSAL */
* { margin: 3px; }
/* SELECTOR DE ELEMENTO */
h1 { color: #CCC; font-style: italic; }
/* SELECTOR DE IDENTIFICADOR */
#introduccion { border-style: dotted; padding: 1em; }
/* SELECTOR DE CLASE */
.negativo { color: crimson; font-weight: bolder; }
.positivo { color: green; font-weight: bolder; }
/* SELECTOR DE ATRIBUTO */
input[type] { background-color: #DDD; }
input[type=text] { color: lightsalmon; font-weight: bolder; }<html>
<head>
<title>Estilos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Resumen anual</h1>
<form action="">
<input type="text" placeholder="Departamento">
<input type="number" placeholder="Límite de ventas">
</form>
<p id="introduccion">
Resultados satisfactorios...
</p>
<table>
<tr>
<th>Ingresos</th>
<th>Gastos</th>
<th>Diferencia</th>
</tr>
<tr>
<td>100</td>
<td>50</td>
<td class="positivo">50</td>
</tr>
<tr>
<td>200</td>
<td>190</td>
<td class="positivo">50</td>
</tr>
<tr>
<td>80</td>
<td>180</td>
<td class="negativo">-100</td>
</tr>
</table>
</body>
</html>
8.2. Agrupación de selectores
En ocasiones se desea aplicar el mismo estilo a varios elementos de distinto tipo. Una posible solución consiste en crear un selector distinto para cada uno de ellos con las mismas propiedades y los mismos valores, aunque esta solución puede no ser la mejor.
CSS permite crear reglas con selectores múltiples pudiendo así aplicar las mismas declaraciones a distintos grupos de elementos.
h1, h2, .azules, #tituloSeccion {
color: blue;
padding: 2em;
}Las propiedades especificadas en el ejemplo anterior se aplicaran a todos los elementos de la página que respondan a alguno de los selectores especificados en la lista separada por comas.
8.3. Combinadores
Son selectores en los que se tiene en cuenta la relación entre elementos en la estructura jerárquica del documento:
| Nombre | Combinador | Significado: |
| De hermanos | A~ B | A y B son hermanos |
| De hijos | A > B | B es hijo directo de A |
| De hermanos adyacentes | A + B | A y B son hermanos y B está inmediatamente a continuación de A |
| De descendientes | A B | B es descendiente de A, pero no necesariamente es hijo directo |
Por ejemplo:
/* Los p hijos directos de article */
article > p { text-align: center; }
/* Los p hermanos de h2 */
h2 ~ p { text-align: center; }
/* Los p descendientes de div */
div p { text-align: center; }<html>
<head>
<title>Estilos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div>
<div>
<h2>Sistema operativo</h2>
<p>Es la capa software que...</p>
</div>
<article>
<p>Un buen antivirus...</p>
</article>
</div>
</body>
</html>¿Por qué usas tres reglas CSS para aplicar un mismo estilo? Bien visto. Este CSS sería equivalente al anterior:
article > p, h2 ~ p, div p { text-align: center; }8 líneas de CSS resumidas en 1 sola, ¿ves ya la utilidad de la agrupación de selectores?
8.4. Pseudoclases
Se añade como palabra clave a continuación de un selector convencional, creando un nuevo filtro de selección en función del estado del elemento filtrados por el selector.
La sintaxis es: selector:pseudoclase { propiedad: valor; } y esta es una relación de los más importantes:
| Nombre | Estado del(os) elemento(s) proporcionados por el selector |
|---|---|
| :active | El elemento ha sido activado por el usuario |
| :checked | Afecta a elementos input de tipo radio o checkbox o a elementos option cuando han sido marcados |
| :disabled | El elemento está deshabilitado |
| :empty | El elemento no tiene hijos |
| :enabled | El elemento está habilitado |
| :first-child | El primer elemento de entre un grupo de elementos hermanos |
| :first-of-type | El primer elemento de un tipo de entre un grupo de elementos hermanos |
| :focus | El elemento (de un formulario) tiene el foco |
| :focus-within | El elemento (de un formulario) o uno de los elementos contenidos tiene el foco |
| :hover | El cursor del ratón se encuentra sobre el elemento |
| :last-child | El último elemento de un grupo de elementos hermanos |
| :last-of-type | El último elemento de un tipo de entre un grupo de elementos hermanos |
| :link | El enlace referenciado por el elemento no ha sido visitado |
| :not() | Los elementos que no coinciden con una lista de selectores |
| :nth-child(n) | El elemento en la posición n de un grupo de elementos hermanos. Se puede utilizar odd para indicar las posiciones impares y even para las posiciones pares en el parámetro n. |
| :only-child | El elemento no tiene elementos hermanos |
| :only-of-type | El elemento no tiene elementos hermanos de un determinado tipo |
| :required | El elemento es obligatorio |
| :visited | El enlace referenciado por el elemento ha sido visitado |
Veamos un pequeño ejemplo:
li { font-weight: bolder; }
li:first-child { color:red; }
li:nth-child(3) { color:green; }
li:last-child { color:blue; }<html>
<head>
<title>Estilos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<ol>
<li>Plataformas</li>
<li>Simulador</li>
<li>Deportes</li>
<li>Estrategia</li>
<li>Aventura gráfica</li>
</ol>
</body>
</html>
8.5. Pseudoelementos
Permiten seleccionar elementos por reglas que no forman parte de la estructura general del documento HTML. Al igual que las pseudoclases, se añaden a los selectores, pero no para crear un nuevo nivel de filtrado, sino para seleccionar partes más precisas del conjunto de elementos proporcionados por el selector. La separación entre el selector y el pseudoelemento se suele hacer con dos puntos dobles :: para distinguirlos de las pseudoclases, pero los navegadores entienden también los dos puntos simples :.
La sintaxis es: selector::pseudoelemento { propiedad: valor; }
| Nombre | Descripción |
| ::after | Permite añadir contenido con el atributo content después del elemento seleccionado |
| ::before | Permite añadir contenido con el atributo content antes del elemento seleccionado |
| ::first-letter | Primera letra del primer bloque de un elemento seleccionado |
| ::first-line | Primera línea del primer bloque de un elemento seleccionado |
| ::selection | Permite modificar el estilo de la selección realizada con el ratón |
Ejemplo:
- Añadir el texto «[SEGUIR LEYENDO…]» inmediatamente después del elemento con id «ElQuijote».
- Asignar 3em como tamaño de la primera letra del elemento con id «ElQuijote» .
#ElQuijote::after { content: "[SEGUIR LEYENDO...]" }
#ElQuijote::first-letter { font-size: 3em; }<html>
<head>
<title>Estilos</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p id="ElQuijote">
En un lugar de La Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo
</p>
</body>
</html>
Práctica de selectores
Usando el código HTML que se propone a continuación:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Práctica de Selectores CSS</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div id="contenedor">
<div class="post" title="primer post">
<h2>Post 1</h2>
<p>Este es el primer post.</p>
<p class="comentario">Sin comentarios.</p>
</div>
<div class="post" title="segundo post">
<h2>Post 2</h2>
<p>Este es el segundo post con <a href="#">un enlace</a>.</p>
<p class="comentario empty"></p>
</div>
<div class="post destacado" title="post destacado">
<h2>Post Destacado</h2>
<p>Este es un post destacado con <a href="#" class="especial">un enlace especial</a>.</p>
<p class="comentario">Tiene comentarios.</p>
</div>
</div>
</body>
</html>
Completa el contenido del archivo estilos.css que se adjunta para resolver cada una de estas tareas:
- Aplica un margen de 0 a todos los elementos.
- Cambia el color de texto de todos los párrafos a azul.
- Aumenta el tamaño de fuente de los elementos con la clase destacado.
- Establece un borde para el elemento con el identificador contenedor.
- Cambia el color de fondo de los elementos que tienen el atributo title.
- Aplica el estilo de cursiva al texto de los encabezados de segundo nivel, elementos con la clase comentario y enlaces.
- Selecciona todos los párrafos que son hermanos de la clase comentario y cambia su color de fondo.
- Selecciona los párrafos que son hijos directos de la clase post y dales un margen inferior.
- Selecciona el elemento que sigue inmediatamente después de un encabezado de segundo nivel y cambiale el color de texto.
- Cambia el color de los enlaces dentro de los posts.
- Oculta los elementos que no contengan ningún contenido.
- Cambia el color de borde de los enlaces cuando estén enfocados.
- Cambia el color de fondo de los enlaces cuando el ratón pase sobre ellos.
- Añade contenido después de los posts, por ejemplo, la fecha de publicación.
- Cambia el color del texto cuando se seleccione texto dentro de los posts.
/* 1. */
/* 2. */
/* 3. */
/* 4. */
/* 5. */
/* 6. */
/* 7. */
/* 8. */
/* 9. */
/* 10. */
/* 11. */
/* 12. */
/* 13. */
/* 14. */
/* 15. */Entrega: debes entregar el archivo estilos.css antes de la fecha límite indicada en classroom.
9. Propiedades CSS
Ya sabes a qué elementos afectan las propiedades que establecemos con todos los selectores que hemos añadido a lo largo de toda esta sección. Pero todavía no hemos estudiado las diferentes propiedades que podemos aplicarle a los elementos HTML para cambiar su aspecto.
Este es el cometido del presente apartado.
9.1. Modelo de cajas
La maquetación en CSS se basa en el denominado modelo de cajas. Según este concepto, todos los elementos se encuentran ubicados en un contenedor rectangular denominado caja.
Estas cajas tienen un conjunto de propiedades básicas comunes que afectan directamente a su ubicación en la página y al espacio que ocupan:
- Margen exterior. Es el espacio vacío que se agrega alrededor del elemento y que lo separa del resto de elementos circundantes. Su dimensión se modifica con la propiedad margin y sus variantes margin-top, margin-bottom, margin-left y margin-right.
- Margen interior. Es el espacio vacío interior que se agrega al elemento y separa del borde a su contenido. Su dimensión se modifica con la propiedad padding y sus variantes padding-top, padding-bottom, padding-left y padding-right.
- Borde. Es un espacio que puede tener distintos tipos de relleno y que se encuentra entre el margen exterior y el margen interior. Se configura con la propiedad border y ocupa espacio, por lo que aumenta el tamaño del elemento. Algunas propiedades para configurar los bordes son border-radius, border-style, border-width y border-color.
- Contorno. Es similar al borde, pero no ocupa espacio ya que se dibuja encima del elemento. Se configura con las propiedades outline, outline-color, outline-width y outline-style.
- Ancho. Representa el ancho del contenedor que alberga los elementos. Se modifica con la propiedad width.
- Alto. Representa el alto del contenedor que alberga los elementos. Se modifica con la propiedad height.
Observa el siguiente ejemplo, para entender un poco mejor cómo afecta cada propiedad al elemento:
<div>
CAJA de 500x400px
</div>div {
margin: 20px;
padding: 10px;
border: 5px solid #FF0000;
outline: 15px dashed lightblue;
width: 200px;
height: 100px;
}
Hay dos tipos de cajas: cajas en bloque y cajas en línea (también llamadas tipo «inline»). El que una caja sea de un tipo u otro tiene implicaciones directas en cómo se comporta la caja en relación con la página y con las demás cajas.
Las características fundamentales de las cajas en bloque son las siguientes:
- Después de la caja se realiza un salto de línea.
- Suele ocupar el 100% del espacio del contenedor en el que se encuentra.
- Se aplican los valores de las propiedades width y height.
- Los márgenes, bordes y rellenos desplazan al resto de cajas.
Por su parte, las características principales de las cajas en línea son estas:
- No generan salto de línea. Por defecto, ocupan el espacio que ocupa su contenido.
- No se aplican los valores de las propiedades width y height.
- Los márgenes, bordes y rellenos horizontales desplazan al resto de cajas en línea.
- Los márgenes, bordes y rellenos verticales no desplazan al resto de cajas en línea.
El siguiente código HTML contiene ejemplo de cajas en línea (elemento span) y en bloque (elemento div). Vamos a colorear, además el fondo de cada caja para observar mejor su comportamiento:
<div>Caja de tipo bloque</div>
<span>Caja de tipo línea</span>
<div>Caja de bloque con una <span>caja de línea entro</span>, veamos.</div>div { background-color: lightblue; }
span { background-color: lightgreen; }
Como podemos ver las cajas en bloque ocupan todo el ancho disponible y provocan un salto de línea al final. En cambio, las cajas en línea sólo ocupan el espacio que ocupa su contenido y no provocan un salto de línea al final.
Todos los elementos HTML pertenecen a uno de estos dos tipos por defecto, pero este comportamiento se puede modificar utilizando la propiedad display, asignándole los valores inline o block según se desee.
Por ejemplo, si en el ejemplo anterior añadimos al CSS de span la propiedad display: block; obtenemos este resultado:
div { background-color: lightblue; }
span { background-color: lightgreen; display: block; }
9.2. Propiedades del texto
Los documentos HTML suelen estar formados, principalmente, por textos. La noticia de un periódico, las características técnicas de un producto o los ingredientes de una pizza, son textos y estos deben estar presentados de forma correcta.
Las propiedades de texto permiten especificar prácticamente cualquier característica relacionada con los textos, desde el tipo de fuente hasta el espaciado entre palabras.
Veamos la relación de propiedades aplicables a los textos:
| Propiedad | Descripción | Valores |
|---|---|---|
| color | Determina el color del texto | Cualquier valor válido aceptado como color |
| font-family | Determina el tipo de letra que se va a utilizar. Si no puede usar el indicado, aplica el tipo de letra por defecto | Cualquier valor válido aceptado como tipo de letra |
| font-size | Determina el tamaño del texto | medium, xx-small, small, large, x-large, xx-large, smaller, larger, un tamaño indicado en alguna de las unidades aceptadas y un porcentaje sobre el tamaño del texto del contenedor |
| font-style | Determina el estilo del texto | normal, italic y oblique |
| font-weight | Determina el grosor del trazo de los textos | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 |
| text-transform | Transforma el texto | capitalize, uppercase y lowercase |
| text-decoration | Agrega una decoración al texto en forma de línea | Un valor de las propiedades text-decoration-line, text-decoration-style y text-decoration-color |
| text-decoration-style | Determina el tipo de línea (solo en el caso de que haya una propiedad text-decoration-line) | none, underline, overline, line-through y combinaciones |
| text-decoration-color | Determina el color de la línea (solo en el caso de que haya una propiedad text-decoration-line) | Un color válido |
| text-align | Determina la alineación horizontal del texto | left, right, center y justify |
| line-height | Determina la altura de la línea | normal, un número entero sin unidades, un número expresado en cualquiera de las unidades válidas en CSS |
| letter-spacing | Determina el espacio entre las letras | normal, un número expresado en cualquiera de las unidades válidas en CSS |
| word-spacing | Determina el espacio entre palabras | normal, un número expresado en cualquiera de las unidades válidas en CSS |
9.3. Propiedades de las listas
Las listas son uno de los elementos de uso más habitual en HTML.
Con ellas se maquetan elementos tan importantes visualmente como los menús o los pies de páginas, por lo que es fundamental conocer cómo funcionan, qué propiedades se les aplican y cómo interaccionan con otras propiedades que ya hemos visto.
Veamos algunas de sus propiedades:
| Propiedad | Descripción | Valores más frecuentes |
|---|---|---|
| list-style | Permite definir las propiedades list-style-type, list-style-position y list-style-image en una única linea | Los valores de las propiedades separados por espacios |
| list-style-type | Permite definir la apariencia de la lista en lo referente a la viñeta que precede a cada elemento | disc, circle, square, decimal, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin y none |
| list-style-position | Determina dónde se colocarán las viñetas respecto a la posición de la lista | inside y outside |
| list-style-image | Asigna una imagen almacenada en una URL como viñeta | url (“url-de-la-imagen”); |
9.4. Propiedades de las tablas
Al igual que las listas, las tablas son elementos que se utilizan frecuentemente en la maquetación de páginas HTML. Sus propiedades son:
| Propiedades | Descripción | Algunos valores posibles |
|---|---|---|
| border-collapse | Determina si los bordes de las celdas de la tabla están fusionados o no | collapse y separate |
| border-spacing | Determina la distancia entre bordes adyacentes | Distancia utilizando las unidades de CSS |
| caption-side | Determina dónde aparecerá el texto contenido en el elemento <caption> | top y bottom |
| empty-cells | Indica si las celdas vacías deben mostrarse o no | show y hide |
| table-layout | Determina el algoritmo que utilizar para diseñar celdas, filas y columnas | auto y fixed |
| vertical-align | Determina la alineación vertical del contenido de las celdas de una tabla | middle, top y bottom |
9.5. CSS aplicado a los formularios
La gran mayoría de los estilos existentes se pueden aplicar a los formularios, por lo que a nivel teórico la aportación de esta sección es casi anecdótica.
Desde un punto de vista práctico, diseñar un formulario visualmente atractivo requiere utilizar tipos de letras, contenedores que alberguen y ubiquen los elementos, márgenes internos y externos para espaciar contenidos, contornos o estados de los elementos.
Se trata, como también ocurre en otros tipos de elementos, de aplicar estilos que ya conocemos en vez de aplicar nuevos estilos o reglas que desconocemos.
A modo de ejemplo, veamos cómo hemos resuelto el siguiente enunciado.
Crear un formulario que cumpla los siguientes requisitos:
- El formulario aparecerá centrado en la pantalla.
- Se utiliza un tipo de letra diferente del que aparece por defecto.
- Se solicitan los siguientes campos:
- Nombre, tipo text.
- Correo electrónico, tipo email.
- Contraseña y confirmación de contraseña, tipo password.
- Los campos tendrán la etiqueta descriptiva justo encima.
- Al poner el foco sobre un campo de entrada se cambiará el color del borde.
- Los campos de entrada y el botón de aceptación tendrán las esquinas redondeadas.
- El botón de aceptación estará coloreado.
Veamos la solución HTML y CSS, y también comparemos qué aspecto tiene la salida sin CSS y con CSS:
<div id="formulario">
<h1>Crear cuenta</h1>
<div>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" class="entrada borde-redondo">
</div>
<div>
<label for="correo">Correo electrónico</label>
<input type="email" name="correo" id="correo" class="entrada borde-redondo">
</div>
<div>
<label for="contra">Contraseña</label>
<input type="password" name="contra" id="contra" class="entrada borde-redondo">
</div>
<div>
<label for="nombre">Confirma tu contraseña</label>
<input type="password" name="concontra" id="concontra" class="entrada borde-redondo">
</div>
<div>
<input type="submit" id="boton-aceptar" value="Crear cuenta" class="entrada borde-redondo">
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Roboto');
body { font-family: 'Roboto', sans-serif; }
h1 { margin-top: 5px; }
label {
display: block;
font-weight: bold;
margin-bottom: 0.2em;
}
#formulario { width: 350px; margin:auto; }
#boton-aceptar {
margin-top: 30px;
width: 100%;
padding: 12px 3px 12px 3px;
background-color: #FFD904;
}
.entrada {
margin: 9px;
width: 97%;
padding: 7px 3px 7px 3px;
margin-bottom: 1em;
}
.entrada:focus { outline: none; border-color: #CA5F07; }
.borde-redondo { border: 1px solid #AAA; border-radius: 3px; }
Formulario sin CSS
Formulario con CSS
9.6. CSS aplicado a enlaces
Los enlaces son los elementos que convierten un documento en hipertextual.
Gracias a los enlaces se puede navegar por la web, saltando de recurso en recurso.
El texto de los enlaces, por defecto, se muestra subrayado (utiliza de manera interna la propiedad text-decoration) y en color azul cuando no ha sido empleado para navegar a la URL de destino.
En el momento de pulsarlo, el color por defecto es rojo. Una vez utilizado, el texto se muestra en color púrpura.
Estos estilos que acabamos de ver, es el comportamiento por defecto que les asignan los navegadores.
Sin embargo, todo esto podemos cambiarlo aplicando nuestro CSS personalizado, como el tamaño del texto o el tipo de letra, por ejemplo.
Los cambios específicos referentes al enlace se realizan sobre los diferentes estados por los que este puede pasar: sin pulsar, mientras se está pulsando, pulsado, visitado, etc.
Mediante selectores que incluyan pseudoclases se puede hacer referencia a dichos estados para asignar cambios en la apariencia del enlace.
| Selector | Estado |
|---|---|
| a:link | Es el estado por defecto de un enlace |
| a:visited | Se activa cuando el enlace ha sido activado. Suele estar deshabilitado en los navegadores modernos por razones de seguridad |
| a:hover | Se activa cuando se pasa el ratón por encima del enlace |
| a:focus | Se activa cuando el foco se posiciona en el enlace |
| a:active | Se activa en el momento de la activación del enlace |
<ul>
<li><a href="#">Inicio</a>.</li>
<li><a href="#">Categorías</a>.</li>
<li><a href="#">Descuentos</a>.</li>
<li><a href="#">Pedidos</a>.</li>
<li><a href="#">Devoluciones</a>.</li>
</ul>a:link {
color: #000000;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #FF0000;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #FFF;
font-weight: normal;
text-decoration: none;
background-color: #CCC;
}
a:focus {
color: #AAA;
font-weight: none;
text-decoration: underline;
}
a:active {
color: #0000FF;
font-weight: normal;
text-decoration: underline;
}Interacciona con los enlaces anteriores en tu navegador y comprueba cómo se van aplicando los distintos estilos en función del estado en el que se encuentra el enlace.
9.7. Propiedades CSS de fondos y bordes
Existe un importante número de propiedades para caracterizar el fondo, los bordes y los contornos de los elementos. Se pueden aplica a todo tipo de elementos: ítems de una lista li, celdas de una tabla td, contenedores de bloque (div, footer, article…), contenedores de línea span, etcétera.
9.7.1. Fondos
Las propiedades relativas al fondo comienzan por el prefijo background y permiten determinar un color o una imagen. En caso de ser una imagen, existen un buen número de propiedades con características relativas a como se deben presentar.
Por ejemplo, podemos modificar la transparencia de la caja:
<div></div>div {
background-color: green;
opacity: 0.3;
}
También, podemos colocar una imagen de fondo (si es más pequeña que el espacio disponible, se repetirá):
div {
width: 100%;
height: 100px;
background-image: url('https://static.vecteezy.com/system/resources/thumbnails/001/590/621/small/simple-geometric-dark-background-with-small-element-free-vector.jpg');
}
Aunque, podemos ajustar este comportamiento para que no se repita, y además colocarla en la posición que deseemos:
div {
width: 100%;
height: 100px;
background-image: url('https://static.vecteezy.com/system/resources/thumbnails/001/590/621/small/simple-geometric-dark-background-with-small-element-free-vector.jpg');
background-repeat: no-repeat;
background-position: right;
}
Además, la sintaxis de CSS, nos permite agrupar todo lo relativo al fondo en una sola propiedad con un valor compuesto:
div {
width: 100%;
height: 100px;
background:
#FFFFFF
url('https://static.vecteezy.com/system/resources/thumbnails/001/590/621/small/simple-geometric-dark-background-with-small-element-free-vector.jpg')
no-repeat
right;
}9.7.2. Bordes
Las propiedades relativas al borde de los elementos comienzan por el prefijo border y permiten configurar el color, el tipo, el grosor, redondear las esquinas y un largo etcétera.
Veamos una primera propiedad relativa al estilo del borde:
<p class="dotted">Un borde punteado.</p>
<p class="dashed">Un borde de línea discontínua.</p>
<p class="solid">Borde de línea continua.</p>
<p class="double">Borde de doble línea.</p>
<p class="groove">Borde en relieve hacia dentro.</p>
<p class="ridge">Borde en relieve hacia fuera.</p>
<p class="inset">Borde con apariencia de desnivel.</p>
<p class="outset">Borde con apariencia de sobrenivel.</p>
<p class="none">Sin borde.</p>
<p class="hidden">Borde oculto.</p>
<p class="mix">Mezcla de bordes.</p>p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
De la misma manera, podemos aplicar propiedades relativas al grosor del borde (border-width), al color (border-color) o al redondeado de las esquinas (border-radius).
Por ejemplo, a este párrafo le hemos puesto un borde punteado de 3px rojo y esquinas redondeadas 5px:
p {
border-style: dotted;
border-color: red;
border-width: 3px;
border-radius: 5px;
}
10. Frameworks CSS: Tailwind
Un framework de CSS es una biblioteca de estilos genéricos que puede ser usada para implementar diseños web.
Aportan una serie de utilidades que pueden ser aprovechadas frecuentemente en los distintos diseños web. Por tanto, ya no tenemos que escribir todo el CSS de nuestra página web preocupándonos de si se verá bien en todos los tamaños de pantalla y si estamos escogiendo los selectores, propiedades y valores correctos. Simplemente escribiremos nuestro código HTML y el framework de CSS hará todo el trabajo sucio.
Para ejemplificar el trabajo con frameworks CSS, vamos a apoyarnos en Tailwind.
Tailwind, en particular, se destaca por su enfoque de utilidades de primera clase, que permite un diseño más personalizado y eficiente sin la necesidad de escribir CSS desde cero. A continuación, exploraremos cómo Tailwind beneficia el desarrollo web y cómo podemos sacar el máximo provecho de este framework.
10.1. Instalar Tailwind
Realmente, para usar Tailwind no necesitamos instalar nada en nuestro servidor. Simplemente lo enlazamos desde nuestro HTML y ya podemos beneficiarnos de toda su potencia.
Para ello, usaremos el elemento script dentro de la cabecera de nuestra web:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
¡Hola mundo!
</h1>
</body>
</html>Fíjate bien en el código anterior, sólo hemos usado HTML, no estamos enlazando ningún archivo CSS, y si embargo, nuestro h1 aparece con un estilo personalizado, con el texto más grande, en negrita y subrayado:
¿Cómo hemos conseguido esto? Simplemente incorporando la librería Tailwind, usando el elemento script de la línea 6, y luego, añadiendo a nuestro elemento h1 -línea 9- los valores del atributo class que nos ofrece la librería.
Así se trabaja con este framework. Revisamos qué nos ofrece en su página web, descubrimos qué elementos HTML tenemos que añadir, y la librería CSS se encargará de aplicar los estilos predeterminados para esos elementos HTML.
10.2. Usando Tailwind
Ahora que ya sabes cómo conseguir interaccionar con la librería, veamos algunos usos comunes.
Todos los componentes que ofrece Tailwind los podemos encontrar en esta página.
Supongamos que queremos incorporar este Componente en nuestra web:
Sería tan sencillo, como pulsar en el botón superior derecho de código:
Luego, copiar el código:
Y pegarlo en nuestra propia web, modificando los textos que nos interesen para ajustarlos a nuestras necesidades:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="lg:flex lg:items-center lg:justify-between">
<div class="min-w-0 flex-1">
<h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">Curso para aprender a estudiar</h2>
<div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
<div class="mt-2 flex items-center text-sm text-gray-500">
<svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z" clip-rule="evenodd" />
<path d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z" />
</svg>
Bachillerato
</div>
<div class="mt-2 flex items-center text-sm text-gray-500">
<svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003zM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5z" clip-rule="evenodd" />
</svg>
Online
</div>
<div class="mt-2 flex items-center text-sm text-gray-500">
<svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10.75 10.818v2.614A3.13 3.13 0 0011.888 13c.482-.315.612-.648.612-.875 0-.227-.13-.56-.612-.875a3.13 3.13 0 00-1.138-.432zM8.33 8.62c.053.055.115.11.184.164.208.16.46.284.736.363V6.603a2.45 2.45 0 00-.35.13c-.14.065-.27.143-.386.233-.377.292-.514.627-.514.909 0 .184.058.39.202.592.037.051.08.102.128.152z" />
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-6a.75.75 0 01.75.75v.316a3.78 3.78 0 011.653.713c.426.33.744.74.925 1.2a.75.75 0 01-1.395.55 1.35 1.35 0 00-.447-.563 2.187 2.187 0 00-.736-.363V9.3c.698.093 1.383.32 1.959.696.787.514 1.29 1.27 1.29 2.13 0 .86-.504 1.616-1.29 2.13-.576.377-1.261.603-1.96.696v.299a.75.75 0 11-1.5 0v-.3c-.697-.092-1.382-.318-1.958-.695-.482-.315-.857-.717-1.078-1.188a.75.75 0 111.359-.636c.08.173.245.376.54.569.313.205.706.353 1.138.432v-2.748a3.782 3.782 0 01-1.653-.713C6.9 9.433 6.5 8.681 6.5 7.875c0-.805.4-1.558 1.097-2.096a3.78 3.78 0 011.653-.713V4.75A.75.75 0 0110 4z" clip-rule="evenodd" />
</svg>
Gratis
</div>
<div class="mt-2 flex items-center text-sm text-gray-500">
<svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd" />
</svg>
Sábado 24 Marzo, 18:30h
</div>
</div>
</div>
<div class="mt-5 flex lg:ml-4 lg:mt-0">
<span class="hidden sm:block">
<button type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
</svg>
Editar inscripción
</button>
</span>
<span class="ml-3 hidden sm:block">
<button type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M12.232 4.232a2.5 2.5 0 013.536 3.536l-1.225 1.224a.75.75 0 001.061 1.06l1.224-1.224a4 4 0 00-5.656-5.656l-3 3a4 4 0 00.225 5.865.75.75 0 00.977-1.138 2.5 2.5 0 01-.142-3.667l3-3z" />
<path d="M11.603 7.963a.75.75 0 00-.977 1.138 2.5 2.5 0 01.142 3.667l-3 3a2.5 2.5 0 01-3.536-3.536l1.225-1.224a.75.75 0 00-1.061-1.06l-1.224 1.224a4 4 0 105.656 5.656l3-3a4 4 0 00-.225-5.865z" />
</svg>
Ver detalles
</button>
</span>
<span class="sm:ml-3">
<button type="button" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
<svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
</svg>
Inscribirme
</button>
</span>
<!-- Dropdown -->
<div class="relative ml-3 sm:hidden">
<button type="button" class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:ring-gray-400" id="mobile-menu-button" aria-expanded="false" aria-haspopup="true">
More
<svg class="-mr-1 ml-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</button>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-200"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="absolute right-0 z-10 -mr-1 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="mobile-menu-button" tabindex="-1">
<!-- Active: "bg-gray-100", Not Active: "" -->
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="mobile-menu-item-0">Edit</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="mobile-menu-item-1">View</a>
</div>
</div>
</div>
</div>
</body>
</html>
Esto que es tremendamente sencillo de hacer, no lo es tanto de entender.
Es verdad que un framework como este nos aporta innumerables facilidades para agilizar el proceso de desarrollo de una aplicación web, sobre todo en lo que tiene que ver con su estética; pero es completamente necesario invertir un tiempo muy importante en entender cómo funciona la librería.
Si nosotros quisiéramos ahora, modificar el código anterior para ajustar el tamaño de un botón, su color, o añadir otros elementos que sean coherentes con ese diseño, simplemente no sabríamos hacerlo.
Necesitamos estudiar el framework, y sólo cuando dominemos toda su sintaxis, podremos aprovecharnos de toda su potencia.
10.3. Dominando al framework
La única manera que existe de aprender a utilizar una herramienta de este tipo es invirtiendo tiempo.
¿Cómo? Estudiando su documentación.
En esta página, podrás encontrar toda la documentación de cómo funcionan cada uno de sus elementos. En la parte izquierda tienes un menú muy detallado donde se explica cómo programar cada pequeño componente que te ofrece.
Por ejemplo, si necesitas aplicar cambios a un texto, en vez de usar la propiedad font-family de CSS, puedes usar las clases que ofrece para HTML, de esta manera:
Si quieres, cambiar la transparencia del texto, deberías revisar el apartado Text Color:
Y si quieres aplicar estilos a botones, podrías recurrir a la sección Outline Width de Borders:
Absolutamente cualquier cosa que se te ocurra, podrás encontrarla en la documentación que hemos enlazado.
Te invito a que juguetees con el framework y vayas incorporando a tu página todo lo que vayas necesitando. Con paciencia y un poco de interés, puedes conseguir resultados realmente espectaculares, y sin necesidad de pelearte con las propiedades CSS en los distintos navegadores.
10.4. Otros frameworks CSS
Existen innumerables frameworks para CSS que nos ofrecen recursos muy similares. Algunos son más sencillos de usar, otros ofrecen más componentes gratuitos y otros tienen una documentación mucho más detallada.
Tu trabajo es revisarlos, usarlos y comprobar con cuál te sientes más cómodo trabajando.
Te dejo algunas alternativas a Tailwind muy populares, usadas a diario por miles de programadores: