{"id":98,"date":"2023-05-15T16:05:48","date_gmt":"2023-05-15T14:05:48","guid":{"rendered":"https:\/\/user0.gesem.es\/blog\/?page_id=98"},"modified":"2023-05-15T16:05:48","modified_gmt":"2023-05-15T14:05:48","slug":"vincular-els-fulls-destils-en-un-arxiu-css","status":"publish","type":"page","link":"https:\/\/user0.gesem.es\/blog\/vincular-els-fulls-destils-en-un-arxiu-css\/","title":{"rendered":"Vincular els fulls d’estils en un arxiu .css"},"content":{"rendered":"\n

Fins ara hem treballat el CSS posant-lo a l’etiqueta <style> del head<\/p>\n\n\n\n

Aquesta opci\u00f3 \u00e9s poc pr\u00e0ctica si volem crear v\u00e0ries p\u00e0gines web que facin servir els mateixos estils (el que passa en un lloc web)<\/p>\n\n\n\n

Per aix\u00f2, hem apr\u00e9s a col\u00b7locar els estils en un document a part.<\/p>\n\n\n\n

Per fer-ho, hem crear un arxiu anomenat \u00abestils\u00bb amb l’extensi\u00f3 .css (estils.css) i l’hem guardat al costat de l’HTML.<\/p>\n\n\n\n

Hem copiat el CSS que ten\u00edem dins de l’etiqueta style<\/em> i l’hem enganxat al document estils.css (important, no cal copiar tamb\u00e9 l’etiqueta, nom\u00e9s el contingut)<\/p>\n\n\n\n

Un cop fet aix\u00f2, hem pogut eliminar l’etiqueta <style> i hem afegit una nova etiqueta:<\/p>\n\n\n\n

<link href=\"estils.css\" rel=\"stylesheet\"><\/code><\/pre>\n\n\n\n
href<\/strong> indica la ruta fins l’arxiu
rel<\/strong> indica la relaci\u00f3 amb el document html d’all\u00f2 que vinculem, en aquest cas \u00e9s \u00abstylesheet\u00bb (fulla d’estils)<\/p>\n\n\n\n
Podem afegir un tercer atribut: media<\/strong><\/p>\n\n\n\n
<link href=\"estils.css\" rel=\"stylesheet\" media=\"screen\"><\/code><\/pre>\n\n\n\n
En aquest cas, l’arxiu de CSS nom\u00e9s modificar\u00e0 l’arxiu HTML a la pantalla (screen<\/em>), no quan imprimim.<\/p>\n\n\n\n
<link href=\"estils.css\" rel=\"stylesheet\" media=\"print\"><\/code><\/pre>\n\n\n\n
En aquest cas, l’arxiu de CSS nom\u00e9s modificar\u00e0 l’arxiu HTML a la impressora (print<\/em>), no quan el veiem a la pantalla.<\/p>\n\n\n\n
Per defecte, el valor de l’atribut media \u00e9s \u00aball\u00bb. \u00c9s a dir: si no posem res, o si posem media=\u00bball\u00bb, els estils es veuran a tot arreu.<\/p>\n","protected":false},"excerpt":{"rendered":"
Fins ara hem treballat el CSS posant-lo a l’etiqueta <style> del head Aquesta opci\u00f3 \u00e9s poc pr\u00e0ctica si volem crear v\u00e0ries p\u00e0gines web que facin servir els mateixos estils (el que passa en un lloc web) Per aix\u00f2, hem apr\u00e9s a col\u00b7locar els estils en un document a part. Per fer-ho, hem crear un arxiu… Continueu llegint Vincular els fulls d’estils en un arxiu .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-98","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/98","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=98"}],"version-history":[{"count":1,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/98\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/pages\/98\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/user0.gesem.es\/blog\/wp-json\/wp\/v2\/media?parent=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}