![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-36.png\")
<\/p>\nCSS \u00e9s un est\u00e0ndard dissenyat principalment per separar els atributs d\u2019estil<\/b> (com el color de fons, la mida de la font o el sagnat) del contingut<\/b>. Encara que aquest pot treballar amb molts tipus de documents, \u00e9s majorment utilitzat com una forma de proveir informaci\u00f3 d\u2019estil en p\u00e0gines web.<\/p>\n
La separaci\u00f3 entre contingut i presentaci\u00f3 millora la flexibilitat<\/b>, permetent als autors definir un \u00fanic conjunt d’estils per a milers de documents, reduint aix\u00ed el temps i treball que s’ha d’invertir en cada actualitzaci\u00f3. Aix\u00ed mateix, la implementaci\u00f3 de CSS permet a un document ser exclusivament sem\u00e0ntic, a l’alliberar-lo de la necessitat d’usar elements d\u2019estil.<\/p>\nDeclaracions, propietats i valors<\/h1>\n
Una declaraci\u00f3<\/b> consisteix, b\u00e0sicament, en l’assignaci\u00f3 d’un valor a una propietat<\/b>.<\/p>\n
En altres paraules, una declaraci\u00f3 \u00e9s la resposta a una pregunta. Com d\u2019ample hauria de ser aquesta taula? Quin gruix aquesta vora? De quin color hauria de ser aquest fons? Com de gran la font en aquest par\u00e0graf? I \u00e9s exactament aix\u00ed com defineixes l’aspecte de la teva document: establint declaracions, una per a cada propietat que necessites definir.<\/p>\n
Per\u00f2 CSS t\u00e9 un format<\/b> espec\u00edfic<\/b> que ha de seguir tota declaraci\u00f3. Aquest consisteix en el nom de la propietat seguit de dos punts “:” i el valor que li ser\u00e0 assignat. Quan es proveeix m\u00e9s d’una declaraci\u00f3 en el mateix bloc, cada declaraci\u00f3 ha de ser separada de la seva pr\u00f2xima per un punt i coma “;”. Aquest \u00e9s el motiu pel qual els autors normalment usen un punt i coma al final de cada declaraci\u00f3, independentment de la pres\u00e8ncia de declaracions seg\u00fcents. El proper esquema descriu les parts d’una declaraci\u00f3 CSS.<\/p>\n
<\/p>\n
HTML presenta tres m\u00e8todes per afegir informaci\u00f3 d\u2019estil a un document; l\u2019atribut style<\/b>, l\u2019element style<\/b> i a trav\u00e9s d\u2019un arxiu extern<\/b>.<\/p>\nAtribut style<\/h2>\n
L’\u00fas de l’atribut style \u00e9s la forma m\u00e9s f\u00e0cil i directa<\/b> d’aplicar declaracions d’estil a un element. Aquest atribut pot tenir com a contingut, qualsevol nombre de declaracions d’estil, separades unes de les altres per un punt i coma “;”. Com que style \u00e9s un atribut global, pot ser usat en qualsevol element d’HTML.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-37.png\")
<\/p>\n
Per\u00f2 malgrat tota la seva simplicitat i immediatesa, l’\u00fas d’aquest m\u00e8tode trenca d’alguna manera un dels principals beneficis de CSS<\/b>: la possibilitat de crear declaracions d’estil que poden ser reutilitzades en tants elements com sigui possible, cosa que es tradueix en flexibilitat i portabilitat. Nom\u00e9s imagina’t havent de aplicar aquest mateix estil a centenars d’elements en els teus documents.<\/p>\n
Aix\u00f2 no vol dir que aquest enfocament no sigui \u00fatil. De fet, pot ser molt pertinent fer-lo servir quan necessites aplicar un estil a un sol element i per \u00fanica vegada.<\/p>\n
L’element style \u00e9s un contenidor per declaracions d’estil<\/b>. Dins d’aquest element podem tenir qualsevol nombre de declaracions d’estil<\/b>, sempre que estiguin correctament organitzades en grups de selectors.<\/p>\n
Aquest element t\u00e9 la particularitat que nom\u00e9s pot ser declarat en la secci\u00f3 de la cap\u00e7alera<\/b> (head) del document.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-38.png\")
<\/p>\n
L’avantatge d’utilitzar un arxiu extern per emmagatzemar informaci\u00f3 d’estil resideix en la possibilitat de compartir aquest arxiu entre un gran nombre de documents<\/b>. Quan un document \u00e9s carregat, el navegador detecta la refer\u00e8ncia a l’arxiu de fulls d’estil, carregant i aplicant els estils com si fossin part del document.<\/p>\n
Un arxiu extern de fulls d’estil pot ser inserint en el document amb l’element link<\/b>, tenint el valor “text\/css” en l’atribut type, i l’URL de l’arxiu de fulls d’estil en l’atribut href. Igual que l\u2019element style, aquest element nom\u00e9s pot estar ubicat en el bloc de cap\u00e7alera<\/b> (head) del document.<\/p>\n
Sobre els continguts de l’arxiu de fulls d’estil, ha de presentar el mateix tipus d’informaci\u00f3 que en un element style<\/b>, \u00e9s a dir, qualsevol nombre de declaracions d’estil organitzades en grups de selectors.<\/p>\n
Document html amb l\u2019element link apuntant al full d\u2019estils:<\/i>![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-39.png\")
<\/p>\n
Full d\u2019estils:<\/i>![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-40.png\")
<\/p>\n
Visualitzaci\u00f3 del document HTML:<\/i>![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-41.png\")
<\/p>\nSelectors<\/h1>\n
Un selector \u00e9s el mitj\u00e0 per fer una refer\u00e8ncia<\/b> a un grup d’un o m\u00e9s elements HTML, per tal d’aplicar a aquest un conjunt de declaracions CSS.<\/p>\n
Hi ha una estructura amb la que s\u2019ha de complir per a usar un selector i est\u00e0 composta pel selector seguit del conjunt de declaracions tancades per claus “{}”. El seg\u00fcent exemple, en el qual espais i trenquis de l\u00ednia han estat agregats per millorar la lectura, reflecteix aquesta estructura.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-42.png\")
<\/p>\n
El selector universal s’indica mitjan\u00e7ant un asterisc (*). Malgrat la seva senzillesa, no s’utilitza habitualment<\/b>, ja que \u00e9s dif\u00edcil que un mateix estil es pugui aplicar a tots els elements d’una p\u00e0gina.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-43.png\")
<\/p>\n
Selecciona tots els elements de la p\u00e0gina que l’etiqueta HTML coincideix amb el valor del selector. Per exemple, tots els par\u00e0grafs <p>, tots el \u00edtems d\u2019una llista <li>, tots els enlla\u00e7os <a>, etc.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-44.png\")
<\/p>\n
El selector de ID es correspon amb tots els elements que tenen el valor especificat en el seu atribut id. Com, per definici\u00f3, els valors de id han de ser \u00fanics,<\/b> aquest selector pot afectar nom\u00e9s a un element en el document<\/b>. En la seva declaraci\u00f3, l’ID especificat ha d’estar precedit pel signe numeral (“#”).<\/p>\n
HTML:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-45.png\")
<\/p>\n
CSS:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-46.png\")
<\/p>\n
RESULTAT:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-47.png\")
<\/p>\n
Una classe \u00e9s un concepte introdu\u00eft per CSS amb el prop\u00f2sit d’agrupar declaracions<\/b> i aplicar-les a un conjunt personalitzat d’elements, independentment del seu tipus o naturalesa. Des d’un altre punt de vista, una classe \u00e9s una o m\u00e9s declaracions CSS, agrupades sota un nom que els elements poden utilitzar per accedir a les seves definicions i ser afectats per elles.<\/p>\n
Dit aix\u00f2, un selector de classe aplica un conjunt de delcaracions a tots els elements que tenen el nom de classe especificat en el seu atribut class<\/b>. En la seva construcci\u00f3, un punt (“.”) ha de precedir al nom de la classe.<\/p>\n
Exemple: un conjunt de declaracions per la classe anomenada \u201cimportant\u201d.<\/i><\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-48.png\")
<\/p>\n
CSS permet realitzar combinacions amb els quatre selectors b\u00e0sics<\/b> descrits a dalt, fent refer\u00e8ncia a les relacions entre pares, fills, germans, descendents i m\u00e9s<\/b>. Amb algunes d’aquestes eines podries, per exemple, aplicar declaracions a tots els par\u00e0grafs que s\u00f3n fills directes del cos (body) (body > p).<\/i> A m\u00e9s, proveeix altres selectors basats en la composici\u00f3 dels atributs o els estats<\/b> que un element presenta, permetent als autors aplicar declaracions a, per exemple, tots els elements input que s\u00f3n de tipus “r\u00e0dio”<\/i> (atribut type) (input[type=\u201dradio\u201d]).<\/i><\/p>\nHer\u00e8ncia<\/h1>\n
L’her\u00e8ncia \u00e9s un concepte pel qual els elements descendents hereten les propietats declarades per als seus ancestres<\/b>. Aix\u00f2 no \u00e9s altra cosa m\u00e9s que el comportament desitjat, i evita haver de redefinir les mateixes propietats en els fills d’un element.<\/p>\n
Exemple: definint l\u2019estil de l\u2019element body, els elements que estan dins el body hereten les seves propietats d\u2019estil.<\/i><\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-49.png\")
<\/p>\n
Resultat:![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-50.png\")
<\/p>\n
En els full d\u2019estils m\u00e9s complexes, \u00e9s habitual que varies regles CSS s\u2019apliquin a un mateix element HTML. El problema d\u2019aquestes regles m\u00faltiples \u00e9s que poden provocar col\u00b7lisions.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-51.png\")
<\/p>\n
De quin color es mostrar\u00e0 el par\u00e0graf?<\/i><\/b><\/p>\n
Els estils de diferents or\u00edgens i selectors s\u00f3n aplicats en un ordre espec\u00edfic i un\u00edvoc<\/b>. Aquest ordre d’especificitat ajuda a resoldre conflictes i fa al sistema m\u00e9s predictible, el que permet als autors plantejar el seu esquema d’estils amb certesa.<\/p>\n
Com m\u00e9s espec\u00edfic sigui un selector, m\u00e9s import\u00e0ncia t\u00e9 la seva regla associada. En el cas d\u2019arribar a igual especificitat, es considera la \u00faltima regla indicada.<\/b><\/p>\n
La seg\u00fcent llista mostra l’ordre d’especificitat que s’aplica en CSS. Cada forma d’aplicar estils en aquesta llista preval quan competeixi amb aquells sota de si.<\/p>\n
![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-52.png\")
<\/p>\n![\"\"](\"http:\/\/tutorial.bernatcortina.cat\/wp-content\/uploads\/2019\/01\/1-53.png\")
<\/p>\n","protected":false},"excerpt":{"rendered":"