Salta el contingut

Desenvolupament web estàtic amb HTML + CSS
Conceptes

Sessió 5: Fulls d'estils CSS

Objectiu Sessió 5

L'objectiu d'aquesta 5a sessió és descobrir com aplicar estils al format de pàgina web generat i formatat amb HTML.

CSS

Amb l'aplicació d'un full d'estils aplicarem un disseny web personalitzat a la interfície html que hem formatat fins ara

La idea és passar d'aquesta visualització:

HTML navegació sense CSS

A aquesta altra:

HTML navegació amb CSS

Com ho aconseguim?

Aplicant estils CSS als elements HTML

Què és CSS?

Cascading Style Sheets, Fulles d'estil en Cascada. CSS bàsicament és un llenguatge d'estils per aplicar a format d'interficies HTML.

El consorci W3C defineix les especificacions estandaritzades. D'aquesta manera tots els elements que l'usin defineixen un mateix comportament i resultat. Actualment la versió CSS3 és la que està activa.

Warning

A 2n curs de DAW hi ha el mòdul de Disseny d'Interfícies WEb que es tractarà en profunditat i de manera complerta.

Sintaxi

La sintaxi bàsica és:

selector {
  atribut: valor;  
  ...
}

Veiem-ne un exemple simple

.negreta {
  font-size: 14px;
  font-weight: bold;
}

Això ens defineix un estil de negreta amb tamany 14. Quan ho apliquem a un text, el navegador ho visualitzarà d'aquesta manera.

Com s'estructura?

  • Full d'estils extern

És la manera més habitual i correcte actualment. Això implica la creació d'un arxiu amb extensió .css on a dins té tota la definició dels estils del lloc web o arxiu vinculat.

Per fer-ho usarem l'etiqueta <link> a dins del <head>

<link rel="stylesheet" href="styles.css">

Seria bona pràctica ubicar a una carpeta d'estils aquest arxiu, per tenir-ho tot ben endreçat.

<link rel="stylesheet" href="estils/styles.css">

I un exemple de contingut podria ser:

/* Estils generals */
body {
  font-family: 'Open Sans Condensed', sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
}

On tenim directament la definició dels estils

  • Full d'estils intern

Això és quan no tenim cap arxiu extern .css i definim els estils directament a dins de les etiquetes <style> … </style> a dins de <head> del HTML

<style>
  h1 {
    color: blue;
    background-color: yellow;
    border: 1px solid black;
  }

  p {
    color: red;
  }
</style>

Com que això només ho tindrem associat directament a un arxiu .html, només s'aplicarà els estils als elements html d'aquesta interfície generada.

  • Estils en línia

Un estil en línia només afectarà a l'element a on es defineix l'atribut. Per fer-ho usarem l'atribut <etiqueta style=' ' a l'etiqueta de lelement html que ens interessi.

Certament no és una bona pràctica fer-ho així sobretot pels problemes de manteniment, tot i ser útil per aplicar-ho directament a l'element html.

Exemple de paràgraf color vermell

Això genera un paràgraf amb el text de color vermell

  <p style="color:red"> Text color vermell </p>

Text color vermell

Comentaris

Els comentaris a CSS serveixen per explicar l'objectiu de l'estil o bé per documentar l'estil generat

Per fer-ho usarem /* i */

/* Create your test CSS here */

p {
  color: red;
}

Selectors

El selector és el que ens indica quin és l'element on s'aplica l'estil, anirà situat a la primera part de la definició

selector {
  atribut: valor
  …
}

Tenim diversos tipus de selector:

  • Universal

    Sintaxi:    * { atribut: valor }

    Això farà que s’apliqui a tots els elements de la pàgina.

    Exemple:    * { color: green }
    L’estil de color verd s’aplicarà a tots els elements del document.

  • etiqueta

    Sintaxi:    etiqueta { atribut: valor }

    L'estil s'aplicarà a tots els elements d'aquesta etiqueta

    Exemple:    p { color: green }
    L'estil de color verd s'aplicarà a tots els elements <p> del document.

  • classe

    Sintaxi:    .classe { atribut:valor }

    L'estil s'aplicarà només a l'element que indiquem a l'atribut class de l'etiqueta.

    exemple:    .vermell {color: blue }

    L'estil de color blau s'aplicarà específicament a l'etiqueta que volguem: 

    <p class="vermell"> bla bla bla </p>

  • identificador

    Sintaxi:    #id { atribut:valor }

    L'estil s'aplicarà només a l'element que indiquem a l'atribut id de l'etiqueta.

    exemple:    #groc {color: yellow}

    L'estil de color groc s'aplicarà específicament a l'etiqueta que volguem: 

    <p id="groc"> bla bla bla </p>

  • atribut

    Sintaxi:    etiqueta[atribut] { atribut:valor }

    L'estil s'aplicarà només a l'element que tingui l'atribut o valor de l'atribut a l'etiqueta.

    exemple:    a[title] {color: yellow}

    L'estil de color groc s'aplicarà específicament a l'etiqueta que volem: 

    <img title="imatge">

I podem aplicar tècniques de combinació:

  • descendent 

    Sintaxi:    #selector1 selector2 selectorN { atribut:valor; }

    L'estil s'aplica només a l'element selector intern d'unes etiquetes anidades a qualsevol nivell.

    exemple:    div p { color: verd }

    L'estil de color verd només s'aplicarà a les etiquetes <p> quan estiguin a dins d'un <div>

  • combinació 

    Sintaxi:    #selector1, selector2 { atribut:valor; }

    L'estil s'aplicarà a totes les etiquetes indicades, separades per coma.

    exemple:    div, p { color: pink}

    L'estil de color rosa s'aplicarà a totes les etiquetes <p> i <div>, independentment de si estan anidades o no.

  • fills

    Sintaxi:    #selector1 > selector2 { atribut:valor; }

    L'estil s'aplica només a l'element selector intern d'unes etiquetes anidades a primer nivell

    exemple:    div > p { color: verd }

    L'estil de color verd només s'aplicarà a les etiquetes <p> quan estiguin a dins d'un <div> a primer nivell d'anidament.

  • adjacents

    Sintaxi:    #selector1 + selector2 { atribut:valor; }

    L'estil s'aplica només a l'element selector intern d'unes etiquetes que estiguin seguides

    exemple:    div + p { color: verd }

    L'estil de color verd només s'aplicarà a les etiquetes <p> quan estiguin a dins d'un <div> a primer nivell d'anidament.

Alguns aspectes avançats

Note

Ara és un concepte elevat d'aplicació i ho deixem per a un nivell més avançat.

https://www.eniun.com/pseudo-clases-pseudo-elementos-css/
https://developer.mozilla.org/es/docs/Web/CSS/:active
https://www.w3schools.com/css/css_pseudo_classes.asp
https://developer.mozilla.org/es/docs/Web/CSS/@media

  • pseudo-classe 

    Sintaxi: selector:pseudo-classe { atribut: valor; }

    Els estils s'aplicaran segons unes condicions d'estat

    Exemple: a:hover { color: @00FF00; }

    L'estil s'aplicarà a un enllaç etiqueta <a> quan passi el cursor per sobre

  • pseudo-element

    Sintaxi: selector::pseudo-element {atribut: valor;}

    Els estils s'aplicaran segons uns estats dels elements o etiquetes.

    Exemple: p::selection { color: @00FF00; }

    L'estil s'aplicarà quan fem selecció amb el cursor d'un text


Com funciona?

Quan un navegador mostra un document, s'ha de combinar el contingut amb la informació d'estil del document. Processa el document en una sèrie d'etapes, que enumerarem a continuació:

  1. El navegador carrega l'HTML (per exemple, el rep de la xarxa).

  2. Converteix l'HTML en un DOM ( Model d'objectes del document ). El DOM representa el document a la memòria de l'ordinador. Ho explicarem més detalladament a la secció següent.

  3. Aleshores, el navegador cercarà la major part dels recursos vinculats al document HTML, com les imatges i els vídeos incrustats... i també el CSS vinculat! JavaScript apareix una mica més endavant en el procés, però no en parlarem encara per evitar complicar les coses.

  4. El navegador analitza el CSS i ordena en diferents cubs les diferents regles segons el tipus de selector. Per exemple, element, classe, ID, i així successivament. Per a cada tipus de selector que trobeu, calcula quines regles s'han d'aplicar ia quins nodes al DOM se'ls aplica l'estil segons correspongui (aquest pas intermedi s'anomena arbre de renderització).

  5. L'arbre de renderització presenta l'estructura en què els nodes han d'aparèixer després d'aplicar-hi les regles.

  6. A la pantalla es mostra l'aspecte visual de la pàgina (aquesta etapa s'anomena pintura).

El diagrama següent ofereix una visió senzilla d'aquest procés.

DOM estils document

Què és el DOM? MDN →?

És un tema avançat que veurem al segon bloc → sobre dinamitzar frontend. Veiem-ne una pinzellada.

DOM (Document Object Model) és una interfície de programació per a documents HTML i XML. Proporciona una representació estructurada d'un document, permetent als llenguatges de programació com JavaScript accedir i modificar el contingut, l'estructura i els estils d'una pàgina web en temps real.
És el Model d'Objectes del Document i connecta els elements Web de la pàgina HTML amb scripts de programació per a dinamitzar continguts.

Com funciona el DOM: Quan un navegador carrega una pàgina web, converteix el document HTML en una estructura jeràrquica que reflecteix els elements del document com a nodes en un arbre. Aquesta estructura s'anomena l'arbre DOM. Cada element HTML, atribut o text es converteix en un node d'aquest arbre.

Components del DOM:

  1. Nodes: Cada part del document (etiquetes HTML, atributs, text, comentaris) es converteix en un node.

    • Nodes d'element: Representen les etiquetes HTML com <div>, <p>, etc.
    • Nodes de text: Contenen el text dins dels elements.
    • Nodes d'atribut: Representen els atributs dels elements com class, id, etc.
    • Nodes de document: Representen el document complet.

  2. Relacions jeràrquiques:

    • Els nodes en el DOM segueixen una estructura jeràrquica d'arbre:
      • Un node pot tenir nens (nodes dins d'ell, com un <div> que conté un <p>).
      • Cada node pot tenir un pare (l'element que el conté).
      • Els nodes en el mateix nivell són germans.

Exemples de la representació DOM: Per exemple, aquest codi HTML: 

<html>
  <body>
    <h1>Títol de la pàgina</h1>
    <p>Primer paràgraf</p>
    <p>Segon paràgraf</p>
  </body>
</html>
Es convertiria en una estructura DOM que es veu així: 

Document
└── <html>
      └── <body>
          ├── <h1>
          │    └── "Títol de la pàgina"
          ├── <p>
          │    └── "Primer paràgraf"
          └── <p>
                └── "Segon paràgraf"

Manipulació del DOM amb JavaScript: Gràcies al DOM, pots utilitzar JavaScript per accedir als elements d'una pàgina i modificar-los. Alguns exemples de funcions comunes per manipular el DOM inclouen:

  • Accedir a elements:
document.getElementById("id_element"); // Troba un element per ID
document.getElementsByClassName("nom_classe"); // Troba elements per classe
document.getElementsByTagName("p"); // Troba elements per etiqueta
  • Modificar el contingut:
document.getElementById("id_element").innerHTML = "Text nou"; // Canvia el contingut d'un element
  • Modificar estils:

document.getElementById("id_element").style.color = "red"; // Canvia el color del text

Estils per caixes

Tot a CSS té una caixa al voltant, i comprendre aquestes caixes és clau per poder crear dissenys amb CSS o per alinear elements amb altres elements. Fem una ullada més de prop al model de caixes en CSS amb el que podràs crear dissenys de paginació més complexos amb una comprensió de com funciona i la terminologia relacionada.

A CSS, en general, hi ha dos tipus de caixes: caixes en bloc i caixes en línia . Aquestes característiques es refereixen a la manera com es comporta la caixa en termes de flux de pàgina i en relació amb altres caixes de la pàgina. (MDN →)

El model de caixa CSS és essencialment una caixa que envolta tots els elements HTML. Consta de: contingut, farciment, vores i marges. La imatge següent il·lustra el model de caixa:

CSS-Model de caixa

Explicació de les diferents parts:

  • Contingut [Content] : el contingut del quadre, on apareixen text i imatges
  • Encoixinat [Padding]: esborra una àrea al voltant del contingut. El farciment és transparent
  • Vores [Border]: una vora que envolta el farciment i el contingut
  • Marge [Margin]: neteja una àrea fora de la frontera. El marge és transparent

Veiem-ne un exemple

El model de caixa ens permet afegir una vora al voltant dels elements i definir l'espai entre elements.

  div {
    width: 400px;
    border: 15px solid green;
    padding: 30px;
    margin: 20px;
  }

Aplicat a un <div> es veurà

This text is the content of the box. We have added a 30px padding, 20px margin and a 15px green border.2

Amplada i alçada d'un element

Per configurar correctament l'amplada i l'alçada d'un element en tots els navegadors, cal saber com funciona el model de caixa. (MDN →)

Per Exemple, aquest element <div> tindrà una amplada total de 350 píxels i una alçada total de 80 píxels: 

    div {
      width: 320px;
      height: 50px;
      padding: 10px;
      border: 5px solid gray;
      margin: 0;
    }
Aquí teniu el càlcul:

  320 px (amplada de l'àrea de contingut)
+  20 px (encoixinat esquerre + farciment dret)
+  10 px (vora esquerra + vora dreta)
= 350 px (amplada total)

   50 px (alçada de l'àrea de contingut)
+  20 px (encoixinat superior + farciment inferior)
+  10 px ( vora superior + vora inferior)
=  80 píxels (alçada total)

L'amplada total d'un element s'ha de calcular així:

Amplada total de l'element = amplada + farciment esquerre + farciment dret + vora esquerra + vora dreta

L'alçada total d'un element s'ha de calcular així:

Alçada total de l'element = alçada + farciment superior + farciment inferior + vora superior + vora inferior

Nota

la propietat del marge també afecta l'espai total que ocuparà el quadre a la pàgina, però el marge no s'inclou a la mida real del quadre. L'amplada i l'alçada totals de la caixa s'aturen a la vora.

DevTools

Podeu veure sempre l'aplicació del disseny de model de caixa aplicat a cada element seleccionat a l'Inspector

CSS DevTools

flex

Realment el disseny per model de caixes és tot un món.

Usarem model de caixes en bloc i en línia amb les característiques de cada una.

Usarem l'atribut display per indicar-ho

  display: block;
  display: inline;
  display: flex;
  display: grid;
Realment hi ha moltes possibilitats.

A la Sessió 6 →, treballarem el model Flex, que és un dels models més usat actualment.

Estils per text

Amb els conceptes bàsics del llenguatge CSS coberts, el següent tema de CSS per concentrar-se és estilitzar text, una de les coses més comunes que es farà amb CSS. Aquí observem els fonaments per estilitzar text, incloent-hi la configuració de font, negreta, cursiva, línia i espais entre lletres, ombres paral·leles i altres funcions de text.

Com ja haureu experimentat en el vostre treball amb l'HTML i el CSS, el text inclòs en un element es disposa dins de la caixa de contingut de l'element.

Les propietats CSS que es fan servir per aplicar estil al text poden classificar-se generalment en dues categories:

  • Estils del tipus de lletra : Propietats que afecten el text (quin tipus de lletra es fa servir, la mida, si és negreta, itàlica, etc.).
  • Estils de disposició del text : Propietats que afecten l'espaiat i altres característiques relatives a la disposició del text, cosa que permet l'elecció de, per exemple, l'espai entre línies i lletres, i la manera com el text s'alinea dins de la caixa contenidora.

Veiem-ne algunes:

  • Color

    Estableix el color

      p {
    color: red;
  }
    Això faria text de color vermell

  • Tipus de lletra

    Defineix la família del tipus de lletra

      p {
    font-family: arial;
  }
    Això seria usar la font Arial. Hi ha un munt de possibilitats i conceptes a aprendre. Certament és la part més visual desprès de les imatges i que defineix la interfície. MDN →

  • Tamany de la lletra

    Defineix el tamany de la lletra de la web. Expressada en:

    • Unitats px: píxels d'alçada. Valor absolut.
    • Unitats em: 1 em té com a referència la mesura font-size de l'element actual.
    • Unitats rem: 1 rem té com a referència la mesura font-size de l'element root (html).

      p {
    font-size: 10px;
  }
    Això faria que tot el paràgraf es veies en text de tamny 10px.

  • Estil, cos, efectes i decoració

    • cursiva:

      p {
    font-style: italic;
  }
    Això faria el text en cursiva

    • negreta: 

        p {
    font-weight: bold;
  }
      Això faria que el text es veies en negreta.

    • Transformem: 

        p {
    text-transfom: uppercase;
    text-transfom: lowercase;
    text-transfom: capitalize;
    text-transfom: full-width;
  }
      Aplicant cada un dels estils a un text fariem tot en Majúscula, tot en minúscula, la primera majúscula o tots els caràcters mateixa amplada.

    • Decorem: 

        p {
    text-decoration: underline;
    text-decoration: overline;
    text-decoration: line-through;
  }
      Aplicant cada un dels estils a un text fariem un text subratllat, línia superosada o text ratllat.

    • Alinear 

        p {
    text-align: left;
    text-align: right;
    text-align: center;
    text-align: justify;
  }
      Aplicant cada un dels estils a un text fariem un text alineat a l'esquerra, a la dreta, centrat o justificat.

    • Interlineat 

        p {
    line-height: 1.5;
  }
      Aplica un espai entre línes d'un 50% més del normal.

    Exemple de formatar text

    div {
    border: 1px solid gray;
    padding: 8px;
  }

  h1 {
    text-align: center;
    text-transform: uppercase;
    color: #4CAF50;
  }

  p {
    text-indent: 50px;
    text-align: justify;
    letter-spacing: 3px;
  }

  a {
    text-decoration: none;
    color: #008CBA;
  }

    <!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="p1-s5-ex0.css"> 
</head>
<body>

  <div>
    <h1>text formatting</h1>
    <p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
    The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored
    <a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>
  </div>

</body>
</html>

    Tenim aquest resultat:

    Tenim un format html amb text molt simple. I un fitxer d'estils .css associat al <head>.

    • A l'element <div> hi aplicarem un estil de caixa amb marge 1px i color gris. Amb un farciment de 8px per separar.

    • A l'element <h1> el centrem, majúscules i color verd

    • A l'element <p>el justifiquem, identem l'inici 50px i espai de 3px entre caràcters.

    • A l'element <a> desactivem els colors per defecte i que es vegi blau clar.

    p1-s5-ex0.html p1-s5-ex0.html :fontawesome-solid-download: p1-s5-ex0.css p1-s5-ex0.css :fontawesome-solid-download:

    enllaços

    N'hi ha molts atributs a aplicar per a diferents efectes

Exemples

Exemple 1: Diferents casos

Provem diverses aplicacions de combinació de selectors i estils

CSS:
p1-s5-ex1.css
1
2
3
4
5
6
7
8
p { background-color: grey; } /* Selector etiqueta */ 
.clase { color: red; } /* Selector classe */
#ident { color: green; } /* Selector Identificador */
* { font-style: italic; } /* Selector universal */ 
p a { background-color: orange; } /* Selector descendente  */
h3, small { color: blue;} /* Combinació de selectores */ 
div>span { color: pink; } /* Selector de fills */ 
span+small { background-color: yellow; }  /* Selector adjacent*/

Explicació: 

p { background-color: grey; } /* Selector etiqueta */

Aquest estil farà que el fons dels paràgrafs sigui de color gis

.clase { color: red; } /* Selector classe */

Aquest estil de classe, aplicarà el color vermell al text

#ident { color: green; } /* Selector Identificador */

Aquest estil d'identificador farà que l'element amb id='ident', sigui de color verd

* { font-style: italic; } /* Selector universal */

Aquest estil s'aplica a tot els elements del document i marca la font italic

p a { background-color: orange; } /* Selector descendente  */

Aquest estil s'aplicarà a una etiqueta <a> a dins d'un paràgraf

h3, small { color: blue;} /* Combinació de selectores */

Aquest estil s'aplicarà a <small> i <h3>

div>span { color: pink; } /* Selector de fills */

Aquest estil s'aplicarà només si és un fill <span> a dins d'un <div>

span+small { background-color: yellow; }  /* Selector adjacent*/

Aquest estil s'aplicarà a un <small> just després d'un <span>

Per aplicar els estils veiem un cas de les etiquetes HTML afectades

<p>
  <a href="#">Enllaç</a><br>
  <span>
    <a href="#">Enllaç</a>
  </span>
</p>

L'enllaç es veu taronja, color blau (per defecte) i itàlic perquè s'aplica:

l'estil d'enllaç <a> dins de <p>. I font-style: italic de tot el contingut

Observem que no tenim aplicat cap mena de marge.

DevTools

Ho podeu visualitzar clarament amb l'inspector

DevTools

p1-s5-ex1.html p1-s5-ex1.html :fontawesome-solid-download: p1-s5-ex1.css p1-s5-ex1.css :fontawesome-solid-download:

Exemple2: Analitzem el CSS de l'exemple complert inicial

p1-s3-ex2.css
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/* Estils generals */
body {
    font-family: 'Open Sans Condensed', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
  }

  /* Estil per a l'encapçalament */
  header {
    background-color: #333;
    color: white;
    padding: 20px 0;
    text-align: center;
  }

  header h1 {
    margin: 0;
    font-family: "Lucida" Grande, sans-serif, cursive;
    font-size: 3em;
  }

  /* Navegació */
  nav {
    background-color: #444;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  nav ul li {
    display: inline;
    margin-right: 20px;
  }

  nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
  }

  nav ul li a:hover {
    text-decoration: underline;
  }

  /* Formulari de cerca */
  form input[type="search"] {
    padding: 5px;
    font-size: 16px;
  }

  form input[type="submit"] {
    padding: 5px 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    cursor: pointer;
  }

  form input[type="submit"]:hover {
    background-color: #4cae4c;
  }

  /* Contingut principal */
  main {
    display: flex;
    margin: 20px;
  }

  article {
    flex: 3;
    padding-right: 20px;
  }

  article h2 {
    color: #333;
  }

  article h3 {
    color: #666;
  }

  article p {
    margin-bottom: 10px;
  }

  /* Contingut relacionat */
  aside {
    flex: 1;
    background-color: #f9f9f9;
    padding: 20px;
    border-left: 3px solid #ddd;
  }

  aside h2 {
    color: #333;
  }

  aside ul {
    list-style: none;
    padding: 0;
  }

  aside ul li {
    margin-bottom: 10px;
  }

  aside ul li a {
    color: #3498db;
    text-decoration: none;
  }

  aside ul li a:hover {
    text-decoration: underline;
  }

  /* Peu de pàgina */
  footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
    font-size: 0.9em;
  }

Provem diverses aplicacions de combinació de selectors i estils

Explicació:

El codi CSS organitza la pàgina de manera neta i coherent. L'ús de Flexbox facilita la distribució del contingut i es manté un disseny responsiu amb elements ben espaiats

Estils general per a la pàgina (body). Definim un estil de text i color per a tota la pàgina web.

body {
    font-family: 'Open Sans Condensed', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

Explicació detall:

body

  • font-family: Defineix la font principal de la pàgina, que és 'Open Sans Condensed'. En cas que aquesta font no estigui disponible, usarà qualsevol font sans-serif (fonts sense serifes com Arial).
  • line-height: 1.6: Defineix l'alçada de la línia (l'espai entre línies de text). Aquesta unitat és relativa a la grandària del text, i 1.6 fa que l'espai entre línies sigui bastant còmode per llegir.
  • margin: 0 i padding: 0: Això elimina qualsevol marge o farciment per defecte del cos de la pàgina, cosa que ajuda a alinear millor els elements dins del layout.
  • background-color : Fixa el color de fons de la pàgina a un gris clar (#f4f4f4).
  • color: Estableix el color del text a un gris fosc (#333), que és fàcil de llegir sobre un fons clar.

Estil per a l'encapçalament (header). Definim un estil únic per l'etiqueta <header>, que serà l'encapçalament de la web.
Estil per al títol dins de l'encapçalament (header h1). Definim el text de dins l'etiqueta <h1> a dins del <header>

header {
    background-color: #333;
    color: white;
    padding: 20px 0;
    text-align: center;
}

header h1 {
    margin: 0;
    font-family: "Lucida" Grande, sans-serif, cursive;
    font-size: 3em;
}

Explicació detall:

header

  • background-color: Defineix un color fosc (#333) per al fons de l'encapçalament.
  • color: El text serà blanc, per a contrastar amb el fons fosc.
  • padding: 20px 0: Aplica un farciment de 20 píxels a la part superior i inferior de l'encapçalament, però sense afectar els costats.
  • text-align: center: Centra el contingut dins de l'encapçalament.

header h1

  • margin: 0: Elimina els marges per defecte del títol, per ajustar millor l'espai.
  • font-family: Especifica una font més decorativa, Lucida Grande, i com a alternativa usa fonts sans-serif o cursive.
  • font-size: 3em: Defineix una grandària de lletra gran per al títol, on 1em és la grandària del text normal. Així, 3em triplica aquesta grandària.

Estil per Navegació (nav). Estil pel menú <nav> i elements llista <ul>, <li> i <a> a dins de <nav>

nav {
    background-color: #444;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 20px;
}
nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}
nav ul li a:hover {
    text-decoration: underline;
}

Explicació detall:

nav

  • background-color: #444: El fons de la navegació és un gris encara més fosc.
  • color: white: Tot el text dins de la navegació serà blanc.
  • padding: 10px: Afegeix un farciment de 10 píxels a tots els costats del contenidor de la navegació.
  • display: flex: Fa que els elements dins de la navegació es disposin amb el model de caixa flexible (Flexbox), que facilita l'organització horitzontal.
  • justify-content: space-between: Distribueix els elements dins de la barra de navegació amb espai entre ells, col·locant els extrems als costats oposats.
  • align-items: center: Alinea verticalment tots els elements al centre.

av ul, nav ul li, nav ul li a

  • list-style: none: Elimina les bales (punts) de la llista de navegació.
  • display: inline: Fa que els elements de la llista (li) es mostrin en línia, és a dir, un al costat de l'altre.
  • margin-right: 20px: Afegeix un espai de 20 píxels entre els elements de la llista.
  • text-decoration: none: Els enllaços no tindran subratllat per defecte.
  • font-weight: bold: Els enllaços es mostraran en negreta.
  • hover: Quan es passa el ratolí per sobre dels enllaços, es subratllaran per millorar la interactivitat.

Formulari de cerca (form input)

form input[type="search"] {
    padding: 5px;
    font-size: 16px;
}
form input[type="submit"] {
    padding: 5px 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    cursor: pointer;
}
form input[type="submit"]:hover {
    background-color: #4cae4c;
}

Explicació detall:

form input (cerca):

  • padding: 5px: farciment per espai intern de 5 px
  • font-size: 16px: Tamany de text a 16 pixels

form input (botó submit):

  • padding: 5px 10px; Espai de farciment intern per ample i alçada
  • background-color: #5cb85c; Color verd de fons
  • color: white; Color de text blanc
  • border: none; Sense contorn per defecte al botó
  • cursor: pointer; Canvia el cursor a mà quan es passa el ratolí per sobre

form input (botó submit hover):

  • background-color: #4cae4c; Canvia el color del botó quan s'hi passa el ratolí

Contingut principal (main i article)

main {
    display: flex;
    margin: 20px;
}
article {
    flex: 3;
    padding-right: 20px;
}
article h2 {
    color: #333;
  }

  article h3 {
    color: #666;
  }

  article p {
    margin-bottom: 10px;
  }

Explicació detall:

main

  • display: flex: Els elements dins de main es disposen amb Flexbox
  • margin: 20px: marge de 20 píxels

article

  • flex: 3: Fa que l'article principal ocupi tres vegades més espai que l'aside.
  • padding-right: 20px; Espai a la dreta de l'article de 20 px.

article h2 h3

  • color: Color del text per h2 i h3

article p

  • margin-bottom: 10px; marge inferior per al paràgraf de l'article.

Barra lateral (aside). Ocupa menys espai a la dreta de la visualització, té un fons clar i una línia a l'esquerra per separa-lo visualment del contingut principal

aside {
    flex: 1;
    background-color: #f9f9f9;
    padding: 20px;
    border-left: 3px solid #ddd;
  }

  aside h2 {
    color: #333;
  }

  aside ul {
    list-style: none;
    padding: 0;
  }

  aside ul li {
    margin-bottom: 10px;
  }

  aside ul li a {
    color: #3498db;
    text-decoration: none;
  }

  aside ul li a:hover {
    text-decoration: underline;
  }

Explicació detall:

aside:

  • flex: 1 Fa que el contingut opcupi 1 espai
  • background-color: #f9f9f9; Color de fons gris molt clar
  • padding: 20px; Farciment dins del contingut del lateral
  • border-left: 3px solid #ddd; Afegeix una línia de separació a l'esquerra

aside h2

  • color: Definim el color

aside ul, li, a i hvover

  • list-style: none; Elimina les bales de la llista
  • padding: 0; Elimina el farciment
  • margin-bottom: 10px; Espai entre els elements de la llista
  • color: #3498db; Enllaços de color blau
  • text-decoration: none; Elimina el subratllat dels enllaços
  • color: #3498db; Enllaços de color blau
  • text-decoration: none; Elimina el subratllat dels enllaços

Estil per al peu de pàgina (footer). Volem aconseguir un peu de pàgina més fosc, amb text centrat.

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
    font-size: 0.9em;
}

Explicació detall:

footer:

  • background-color: #333; Fons fosc per al peu
  • color: white; Text blanc
  • text-align: center; Text centrat
  • padding: 10px 0; Farciment superior i inferior
  • margin-top: 20px; Afegeix espai a la part superior del peu
  • font-size: 0.9em; Fa el text una mica més petit

p1-s3-ex2.html p1-s3-ex2.html :fontawesome-solid-download: p1-s3-ex2-css.html p1-s3-ex2-css.html :fontawesome-solid-download: p1-s3-ex2.css p1-s3-ex2.css :fontawesome-solid-download: