A la nostra fict\u00edcia universitat, les investigadores s’han revelat. No estan d’acord amb l’est\u00e8tica dels seus treballs. Volen tenir llibertat per modificar l’aparen\u00e7a de la visualitzaci\u00f3 dels escrits al navegador. \u00abDe deb\u00f2 el fons ha de ser blanc?\u00bb, \u00abNo podem canviar la tipografia?\u00bb, \u00abAix\u00f2 no quedaria m\u00e9s bonic a dues columnes?\u00bb,… Tot s\u00f3n queixes. <\/p>\n\n\n\n
El consorci del 3WC es reuneix i decideix fer una concessi\u00f3. Les cient\u00edfiques podran estilar els seus treballs, per\u00f2:<\/p>\n\n\n\n
Dit aix\u00f2, l’equip de programadors i programadores es posen a treballar en un nou llenguatge que, finalment, anomenen CSS: Cascade Style Sheets (Fulles d’estil en cascada). El llenguatge s’anomena aix\u00ed perqu\u00e8 els estils s’aplicaran com aigua que cau d’una cascada:<\/p>\n\n\n\n
El que faran amb el CSS \u00e9s indicar al navegador quin element volen modificar i com el volen modificar. Hauran d’aprendre unes poques normes del CSS:<\/p>\n\n\n\n
Ben mirat, el CSS no \u00e9s una cosa tan estranya. A classe hem fet servir el s\u00edmil de les instruccions per pintar les cases d’un carrer. Imaginem per un moment que som les pintores encarregades de pintar i l’Ajuntament ens envia una llista d’ordres:<\/p>\n\n\n\n
Hi ha algunes ordres gen\u00e8riques (com pintar les portes de color blau fosc) i ordres m\u00e9s espec\u00edfiques (com pintar les portes de les cases antigues de color blau clar). Com a pintores, entendrem que hem de fer cas a les ordres m\u00e9s espec\u00edfiques (no valdr\u00e0 dir \u00abah, no! vau dir que les portes eren sempre de color blau fosc\u00bb). Si l’endem\u00e0 canvien d’opini\u00f3 sobre el color de les portes en general (ara les volen grogues.. quin malson), tamb\u00e9 entendrem que prevaldr\u00e0 l’ordre m\u00e9s recent.<\/p>\n\n\n\n
Tamb\u00e9 entendrem que podem classificar les cases segons la seva edat, tindrem diferents classes de casa (cases antigues, cases noves). I que a algunes cases s’hi podran referir per un nom \u00fanic (una identificaci\u00f3).<\/p>\n\n\n\n
Al llenguatge CSS:<\/p>\n\n\n\n
La sintaxis del CSS es pot resumir aix\u00ed:<\/p>\n\n\n\n
element o elements que volem modificar { (claud\u00e0tor que obre) \npropietat: valor; \npropietat: valor;\n} (claud\u00e0tor que tanca)\n\n<\/code><\/pre>\n\n\n\nEntre el claud\u00e0tor que obre i el que tanca, podem assignar valors a diferents propietats. Cada conjunt de valor i propietat el separarem amb punt i coma <\/strong>(;)<\/p>\n\n\n\nLa propietat sempre estar\u00e0 separada del valor per dos punts<\/strong> (:)<\/p>\n\n\n\nEl conjunt d’element\/s a modificar i propietats modificades entre claud\u00e0tors \u00e9s una regla de CSS<\/strong><\/p>\n\n\n\nPodem identificar un element per la seva etiqueta<\/strong>:<\/p>\n\n\n\np{\n}<\/code><\/pre>\n\n\n\nPodem indicar una llista<\/strong> d’elements:<\/p>\n\n\n\nh1, h2, h3, h4{\n}<\/code><\/pre>\n\n\n\nLes comes<\/strong> indiquen que parlem d’una llista d’elements<\/p>\n\n\n\nPodem indicar un element pel nom del seu atribut \u00abclass<\/strong>\u00ab<\/p>\n\n\n\n.title{\n}<\/code><\/pre>\n\n\n\nEn CSS, el punt fa refer\u00e8ncia a l’atribut class. En l’HTML un element de la classe \u00abtitle\u00bb t\u00e9 l’atribut class amb el valor \u00abtitle\u00bb:<\/p>\n\n\n\n
<h2 class=\"title\">...<\/h2><\/code><\/pre>\n\n\n\n<h2 class=\"title title-gran\">...<\/h2> <\/code><\/pre>\n\n\n\nFixeu-vos que un element pot tenir m\u00e9s d’una classe, nom\u00e9s cal separar-les amb un espai en blanc en l’html<\/p>\n\n\n\n
Podem indicar un element pel nom de l’atribut \u00abid<\/strong>\u00ab<\/p>\n\n\n\n#titol-principal{
}<\/code><\/pre>\n\n\n\nA l’html, un element identificat com a t\u00edtol principal t\u00e9 l’atribut \u00abid\u00bb amb el valor \u00abtitol-principal\u00bb<\/p>\n\n\n\n
<h1 id=\"titol-principal\">...<\/h1> <\/code><\/pre>\n\n\n\nUn element nom\u00e9s pot tenir una id; aquesta id no la pot tenir cap m\u00e9s element a la mateixa p\u00e0gina. NO \u00e9s recomenable fer servir la ID al CSS, per\u00f2 no est\u00e0 prohibit.<\/p>\n\n\n\n
Selectors contextuals<\/h3>\n\n\n\n
Si volem modificar tots els enlla\u00e7os, farem servir l’etiqueta a (a{ } ). Per\u00f2.. i si volem modificar nom\u00e9s els enlla\u00e7os de les llistes? Aleshores ho escriurem aix\u00ed:<\/p>\n\n\n\n
li a{ }<\/code><\/pre>\n\n\n\nEl que fem \u00e9s posar l’etiqueta (a) en un context (li). L’espai en blanc<\/strong> entre etiquetes significa enniuament.<\/p>\n\n\n\nSi volem modificar tots els element amb l’atribut class amb el valor \u00abtitle\u00bb ho farem aix\u00ed:<\/p>\n\n\n\n
.title{ }<\/code><\/pre>\n\n\n\nPer\u00f2 si volem modificar nom\u00e9s els h2 amb l’atribut class amb el valor title, ho farem aix\u00ed:<\/p>\n\n\n\n
h2.title{ }<\/code><\/pre>\n\n\n\nEn aquest cas, no hi ha espai entre els dos elements<\/strong>, per tant estem parlant del mateix element: els h2 amb l’atribut class igual a title.<\/p>\n\n\n\nA l’html trobarem aix\u00f2:<\/p>\n\n\n\n
<h2 class=\"title\">...<\/h2><\/code><\/pre>\n\n\n\nSi combinem totes aquestes normes, podrem fer refer\u00e8ncia a qualsevol element de la p\u00e0gina.<\/p>\n\n\n\n
Propietat background-color i color com a valor<\/h2>\n\n\n\n
Qualsevol element d’una p\u00e0gina web pot tenir un color de fons.<\/p>\n\n\n\n
La propietat del color de fons \u00e9s background-color (fixa’t que \u00abcolor\u00bb s’escriu en angl\u00e8s americ\u00e0)<\/p>\n\n\n\n
El color de fons el podem escriure amb diferents f\u00f2rmules<\/p>\n\n\n\n
\n- Podem fer servir el nom del color: white, black, red,…<\/em><\/li>\n\n\n\n
- Podem fer servir un n\u00famero hexadecimal: #RRGGBB (#A1A1A1, #333333,…)<\/li>\n\n\n\n
- Podem indicar el color en rgb: rgb(R,pG,B) . R, G, B tindran un valor entre 0 i 255.<\/li>\n\n\n\n
- Podem indicar el color en rgba: rgba(R,G,B,A). A fa refer\u00e8ncia a alpha, l’opacitat. Alpha \u00e9s un valor entre 0 (gens opac) i 1 (m\u00e0xima opacitat). 0.5 representa un 50% d’opacitat<\/li>\n<\/ul>\n\n\n\n
R fa refer\u00e8ncia a Red (vermell), G fa refer\u00e8ncia a green (verd) i B fa refer\u00e8ncia a blue (vermell). El valor 0 indica cap quantitat de llum. Per tant rgb(0,0,0) o #000000 representen el color negre. <\/p>\n\n\n\n
En un n\u00famero hexadecimal, el valor m\u00e9s alt que podem fer servir \u00e9s la lletra F . Per cada color podrem fer servir un valor entre 00 – gens- i FF – m\u00e0xim. El color #FFFFFF representa el blanc.<\/p>\n\n\n\n
On trobem el CSS?<\/h2>\n\n\n\n
El CSS pot estar:<\/p>\n\n\n\n
\n- A l’HTML del body<\/em>, a l’atribut style de qualsevol etiqueta (exemple: <p style=\u00bbbackground-color:red\u00bb>)<\/li>\n\n\n\n
- Al head<\/em> de l’html, dins les etiquetes \u00abstyle\u00bb (<head>..<style><\/style> …<\/head>)<\/li>\n\n\n\n
- En un document extern i vinculat al head<\/em> de l’html (<link href=\u00bbURL\u00bb rel=\u00bbstylesheet\u00bb).<\/li>\n<\/ul>\n\n\n\n
Sempre que puguem, evitarem els estils en l\u00ednia<\/p>\n\n\n\n
I sempre que pugem posarem els estils en un document extern.<\/p>\n\n\n\n
A l’exercici d’avui, per\u00f2, hem fet servir l’etiqueta style<\/em> del head<\/em> per a indicar els estils. El que hem fet \u00e9s estilar diferents elements de la p\u00e0gina, modificant el color de fons:<\/p>\n\n\n\n\n- Del body<\/li>\n\n\n\n
- Dels par\u00e0grafs,c<\/li>\n\n\n\n
- D’h1, h2, h3, h4<\/li>\n\n\n\n
- D’enlla\u00e7os<\/li>\n\n\n\n
- D’enlla\u00e7os a la llista<\/li>\n\n\n\n
- Dels h2 del footer<\/li>\n<\/ul>\n\n\n\n
Per cert! A trav\u00e9s de diferents errors, hem comprovat com n’\u00e9s d’important que les etiquetes html<\/em> estiguin correctament tancades…<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":"
A la nostra fict\u00edcia universitat, les investigadores s’han revelat. No estan d’acord amb l’est\u00e8tica dels seus treballs. Volen tenir llibertat per modificar l’aparen\u00e7a de la visualitzaci\u00f3 dels escrits al navegador. \u00abDe deb\u00f2 el fons ha de ser blanc?\u00bb, \u00abNo podem canviar la tipografia?\u00bb, \u00abAix\u00f2 no quedaria m\u00e9s bonic a dues columnes?\u00bb,… Tot s\u00f3n queixes. El… Continueu llegint Introducci\u00f3 al CSS<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-36","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":8,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/36\/revisions"}],"predecessor-version":[{"id":45,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/36\/revisions\/45"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}