Escriu per cercar…

Estil

Una fulla d'estil CSS aplica el mateix estil a tots els elements que tria un selector.

S'ensenya a
Llenguatges de marques i sistemes de gestió d’informacióDocuments estàticsASIXDAMDAWDAW-BIO

Introducció

A Box has posat l’estil dins de l’atribut class de cada element.

Això vol dir repetir les mateixes classes element per element, i document per document.

Un document CSS ho capgira: escrius la regla un sol cop i el navegador l’aplica a tots els elements que hi encaixen.

Cada regla té un selector, que tria els elements, i un bloc d’estils, que se’ls aplica.

En aquesta activitat aprendràs a escriure regles i, sobretot, a triar els elements amb precisió.

Entorn de treball

Crea una carpeta amb el nom document-style i obre-la amb VS Code.

Comença amb aquesta plantilla:

html
index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <style type="text/tailwindcss">
  </style>
  <title>Estil</title>
</head>
<body class="prose p-5">
  <h1>Hola, estil!</h1>
</body>
</html>

El <script> porta Tailwind, com a Box.

El <style type="text/tailwindcss"> és nou, i és on escriuràs les regles.

Tailwind les compila dins del navegador, així que no has d’instal·lar res.

TODO. Captura de VS Code amb index.html obert al costat del navegador.

Regla

Aquest document repeteix les mateixes classes a cada <div>:

html
Les mateixes classes quatre vegades
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <style type="text/tailwindcss">
  </style>
  <title>La precària i habitual poesia</title>
</head>
<body class="p-5">
  <h1 class="text-2xl font-bold m-4">La precària i habitual poesia</h1>
  <div class="ms-4 font-semibold text-lg text-gray-500">La poesia té una cosa empipadora</div>
  <div class="ms-4 font-semibold text-lg text-gray-500">és la rima, la musiqueta,</div>
  <div class="ms-4 font-semibold text-lg text-gray-500">la música externa,</div>
  <div class="ms-4 font-semibold text-lg text-gray-500">la persistent, pesada musiqueta.</div>
</body>
</html>

Quatre elements, quatre còpies de la mateixa llista de classes.

Treu-les totes i escriu una regla dins del <style>:

html
Una regla per a tots els div
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://tailwind.xtec.dev/tailwind.js"></script>
  <style type="text/tailwindcss">
    h1 {
      @apply text-2xl font-bold m-4;
    }
    div {
      @apply ms-4 font-semibold text-lg text-gray-500;
    }
  </style>
  <title>La precària i habitual poesia</title>
</head>
<body class="p-5">
  <h1>La precària i habitual poesia</h1>
  <div>La poesia té una cosa empipadora</div>
  <div>és la rima, la musiqueta,</div>
  <div>la música externa,</div>
  <div>la persistent, pesada musiqueta.</div>
</body>
</html>

El document es veu igual, i ara el <body> no té ni un sol atribut class.

La regla comença amb el selector, que en aquest cas és div, i que tria tots els elements <div> del document.

Dins de { } hi van les utility classes de Tailwind, precedides de @apply.

Pots declarar tantes regles com vulguis: la de l’<h1> també és allà.

El document diu què és cada cosa, i les regles diuen com es veu.

TODO. Captura de VS Code amb la regla div i el navegador al costat.

Selector

Crea el document selector.html:

html
selector.html
<!DOCTYPE html>
<html lang="ca">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://tailwind.xtec.dev/tailwind.js"></script>
    <style type="text/tailwindcss">
    </style>
    <title>Selector</title>
</head>

<body class="prose p-5">
    <h1>Miquel Martí i Pol</h1>
    <p>Va néixer a <span>Roda de Ter</span> el 1929, i el pots llegir a <a href="https://ca.wikipedia.org/wiki/Miquel_Martí_i_Pol">la Viquipèdia</a>.</p>
    <p>Un dels seus poemes més coneguts és <em>El poble</em>.</p>
    <ul>
        <li>El poble és un vell <span>tossut</span>,</li>
        <li>és una noia que no té promès,</li>
        <li>és un petit comerciant en <em>descrèdit</em>.</li>
    </ul>
</body>

</html>

Estàs llegint una vista prèvia.

Inicia sessió amb Google per llegir la pàgina completa.

Inicia sessió amb Google

Amb qualsevol compte de Google. Només et demanarem que acceptis les condicions del servei.