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
|
---
title: Comprensió CSS fonamental
slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
tags:
- Assessment
- Beginner
- CSS
- CodingScripting
- Selectors
- Style
- Syntax
- box model
- comments
- rules
translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
original_slug: Learn/CSS/Introducció_a_CSS/Comprensió_CSS_fonamental
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div>
<p class="summary">Heu cobert molt en aquest mòdul, de manera que us heu de sentir bé d'haver arribat al final!. El pas final abans de continuar és intentar l'avaluació del mòdul: això implica una sèrie d'exercicis relacionats que s'han de completar per crear el disseny final - un perfil de targeta de visita/targeta de jugador/perfil social.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Requisits previs:</th>
<td><span id="result_box" lang="ca"><span>Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.</span></span></td>
</tr>
<tr>
<th scope="row">Objectiu:</th>
<td><span id="result_box" lang="ca"><span>Comprovar la comprensió de la teoria CSS fonamental, la sintaxi i la mecànica</span></span></td>
</tr>
</tbody>
</table>
<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2>
<p><span id="result_box" lang="ca"><span>Per començar aquesta avaluació, heu de:</span></span></p>
<ul>
<li>Aneu i agafeu el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">fitxer HTML per a l'exercici</a>, i el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">fitxer d'image associat</a>, i deseu-los en un directori nou a l'ordinador local. Si voleu utilitzar el vostre propi fitxer d'imatge i ompliu el vostre nom, podeu fer-ho: simplement assegureu-vos que la imatge sigui quadrada.</li>
<li>Agafa el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">fitxer de text de recursos CSS</a> - aquest conté un conjunt de selectors i regles que necesitaràs estudiar i combinar per respondre part d'aquesta avaluació.</li>
</ul>
<div class="note">
<p><strong>Nota</strong>: D'altra banda, podeu utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">aquest URL</a> per indicar a l'element <img> el fitxer d'imatge. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <code><style></code> al capdavant del document.</p>
</div>
<h2 id="Resum_del_projecte"><span id="result_box" lang="ca"><span>Resum del projecte</span></span></h2>
<p>Se us ha proporcionat un mica d'HTML sense processar i una imatge, i heu d'escriure el CSS necessari per d'introduir una mica d'estil bonic en una targeta de negocis en línia, que potser es pot duplicar com a targeta de jugador o perfil de xarxes socials. <span id="result_box" lang="ca"><span>Les següents seccions descriuen el que heu de fer.</span></span></p>
<p><span id="result_box" lang="ca"><span>Configuració bàsica:</span></span></p>
<ul>
<li>En primer lloc, creeu un nou fitxer al mateix directori que el vostre fitxer HTML i d'imatge. Nomeneu-ho alguna cosa realment imaginativa com <code>style.css</code>.</li>
<li>Enllaceu el vostre CSS al vostre fitxer HTML a través d'un element <code><link></code>.</li>
<li>Els dos primers conjunts de regles del fitxer de recursos CSS són vostres, GRATIS! Després d'haver acabat d'alegrar-se amb la vostra bona fortuna, copieu-los i enganxeu-los a la part superior del vostre nou fitxer CSS. Utilitzeu-les com a prova per assegurar-vos que el vostre CSS s'apliqui correctament al vostre HTML.</li>
<li>A sobre de les dues regles, afegiu un comentari CSS amb algun text dins d'ell per indicar que es tracta d'un conjunt d'estils generals per a la pàgina general. Faríeu "Estils de pàgina general". També afegiu tres comentaris més a la part inferior del fitxer CSS per indicar els estils específics de la configuració del contenidor de la targeta, els estils específics del encapçalament i el peu de pàgina, i els estils específics per el contingut principal de la targeta de visita. A partir d'ara, els estils posteriors afegits al full d'estils s'han d'organitzar en un lloc adequat.</li>
</ul>
<p>Tingueu cura dels selectors i els conjunts de regles proporcionats:</p>
<ul>
<li>A continuació, ens agradaria que consultéssiu els quatre selectors i calculéssiu l'especificitat de cadascun d'ells. Escriviu-les en algun lloc on es pugui trobar més endavant, com ara un comentari a la part superior del vostre CSS.</li>
<li>Ara és el moment de posar el selector adequat al conjunt de regles correctes! Teniu quatre parells de selector i un conjunt de regles perquè coincideixin amb els vostres recursos CSS. Feu això ara i afegiu-los el vostre fitxer CSS. Necessitareu:
<ul>
<li>Doneu al contenidor principal de la targeta una amplada/alçada fixa, un color de fons sòlid, una vora i un radi de vora (cantonades arrodonides), entre d'altres.</li>
<li>Doneu a la capçalera un degradat de fons que va des de més fosc a més clar, a més cantonades arrodonides que encaixen amb les cantonades arrodonides establertes al contenidor principal de la targeta.</li>
<li>Doneu al peu de pàgina un degradat de fons que va des de més clar a més fosc, a més de cantonades arrodonides que encaixen amb les cantonades arrodonides establertes al contenidor principal de la targeta.</li>
<li>Floteu la imatge a la dreta per tal que s'adhereixi al costat dret dels continguts principals de la targeta de visita i li proporcioneu una alçada màxima (max-height) del 100% (un truc intel·ligent que assegura que creixerà/disminuirà per mantenir la mateixa alçada que el seu contenidor principal, independentment de l'alçada que es faci).</li>
</ul>
</li>
<li><span id="result_box" lang="ca"><span>Aneu amb compte!</span> <span>Hi ha dos errors en els conjunts de regles proporcionats.</span> <span>Usant qualsevol tècnica que coneixeu, seguiu-los i solucioneu-los abans de continuar</span></span>.</li>
</ul>
<p>Nou conjunt de regles que necessiteu escriure :</p>
<ul>
<li>Escriviu un conjunt de regles que apunti tant a l'encapçalat de la targeta com al peu de la targeta, donant-los una alçada total de 50 px, que inclou una alçada de contingut de 30px i un farcit de 10px en tots els costats. Però expressat en <code>em</code>s.</li>
<li>El marge predeterminat aplicat als elements <code><h2></code> i <code><p></code> per el navegador interfereix amb el nostre disseny, així que escriviu una regla que apunti a tots aquests elements i estableixi el seu marge a 0.</li>
<li>Per evitar que la imatge es vessi fos del contingut principal de la targeta de visita (l'element <code><article></code>), hem de donar-li una alçada específica. Establiu l'alçada de <code><article></code> a 120px, expressada en <code>em</code>s. A més, doneu-li un color de fons negre semitransparent, resultant una ombra lleugerament més fosca, que permet que el color vermell de fons resplendeixi molt més.</li>
<li>Escriviu un conjunt de regles que doni a <code><h2></code> una mida efectiva de font de 20px (però expressat en <code>em</code>s) i una alçada de línia adequada per col·locar-la al centre de la caixa de contingut del encapçalament. Recordeu que anteriorment, l'alçada de contingut de la caixa hauria de ser de 30px - això us proporcionarà tots els números que necessiteu per calcular l'alçada de la línia.</li>
<li>Escriviu un conjunt de regles que doni a <code><p></code> dins del peu de pàgina una mida de font efectiva de 15px (però expressat en <code>em</code>s) i una alçada de línia adequada per col·locar-la al centre de la caixa de contingut del peu de pàgina. Recordeu que anteriorment, l'alçada de la caixa de contingut hauria de ser de 30px - això us proporcionarà tots els números que necessiteu per calcular l'alçada de la línia..</li>
<li>Com a últim toc, doneu el paràgraf dins de <code><article></code> un valor de farcit adequat de manera que la seva vora esquerra s'alineï amb el paràgraf <code><h2></code> i el peu de pàgina, i establiu el seu color per que sigui prou clar per facilitar la seva lectura.</li>
</ul>
<p>Altres coses a pensar:</p>
<ul>
<li>Obtindreu bonificacions si escriviu el vostre CSS amb la màxima llegibilitat, amb una declaració independent en cada línia.</li>
<li>Haureu d'incloure <code>.card</code> al principi de la cadena del selector a totes les vostres regles, de manera que aquestes regles no interfereixin amb l'estil de qualsevol altre element si la targeta de visita es col·loqués en una pàgina amb una càrrega d'un altre contingut</li>
</ul>
<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2>
<ul>
<li>No cal que editeu l'HTML de cap manera, excepte per aplicar el CSS a l'HTML.</li>
<li>Per tractar d'esbrinar el valor <code>em</code>, que necessiteu, per representar una determinada longitud de píxels, penseu en la mida de font base que té l'element arrel (<code><html></code>) i el que necessita ser multiplicat per obtenir el valor desitjat. Això us donarà el seu valor <code>em</code>, almenys en un cas senzill com aquest.</li>
</ul>
<h2 id="Exemple">Exemple</h2>
<p><span id="result_box" lang="ca"><span>La següent captura de pantalla mostra un exemple del que hauria de tenir el disseny acabat:</span></span></p>
<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p>
<p> </p>
<h2 id="Avaluació"><span id="result_box" lang="ca"><span>Avaluació</span></span></h2>
<p>Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema en el <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">fil de conversa en l'àrea d'aprenentatge</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenteu primer l'exercici - no es guanya res fent trampes!</p>
<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p>
|
