M08 fulls d'estil

MP08 SMX
Aquesta obra està subjecta a una llicència de Reconeixement No Comercial-
CompartirIgual 2.5 Espanya de Creative Commons
UF2 Fonaments d'XHTML i fulls d'estil
NF3 Fulls d'estil (CSS)
Josep Antoni Sanz

MP08 SMX
 W3C també permet la validació dels fulls
d'estil
 Possibilitat de mantenir el codi
 CSS és més potent que XHTML pel disseny
 Possibilitat de diferents fulls d'estil per a un
sol document XHTML. (v. navegador, v
impressió)
 Es poden reutilitzar des de diferents
documents XHTML
El CSS avantatges

MP08 SMX
 No tots els navegadors es comporten igual
davant el mateix full d'estil
 Bàsicament degut a que alguns navegadors no
compleixen els estandards establerts
 Aquest fet obliga a codificar diferents fulls
d'estil per als diferents navegadors
El CSS inconvenients

MP08 SMX
 Dues especificacions del W3C: CSS1
I CSS2
 http://www.w3.org/TR/REC-CSS1
 http://www.w3.org/TR/REC-CSS2
 La majoria de navegadors suporten CSS1
 No tots els navegadors suporten CSS2 i
només alguns suporten CSS3
Especificacions CSS

MP08 SMX
 En l'etiqueta amb l'atribut «style»
 <p style=''text-align:center; color:red''>Paragraf
centrat vermell</p>
 En la capçalera del document XHTML:
 ...<head>
 ...
 <style>
 P {text-align:center;
 Color:red}
 </style></head>
 <body>...
Ubicació dels estils

MP08 SMX
 Totes les propietats en un doc amb extensió
.css. Enllacem aquest full al doc XHTML:
 <head>
 Link rel=''stylesheet'' href=''estils.css''
type=''text/css'' />
 </head>
 <body>
 <p>Paràgraf centrat vermell</p>
 ...
Ubicació dels estils. Document extern

MP08 SMX
 P {
 Text-align:center;
 Color:red;
 }
 Aquest fitxer pot servir per múltiples
documents XHTML
Contingut fitxer estils.css:

MP08 SMX
 Conjunt de regles que defineixen l'estètica
final dels documents
 Cada regla està formada per un selector i
per un conjunt de declaracions
 Una declaració esta formada per una
propietat amb el seu valor associat
Sintaxi bàsica de CSS

MP08 SMX
 Ens serveix per definir a quin o quins
elements volem aplicar les declaracions de
la regla. Sintaxi:
 Selector{
 Declaracio_1
 ...
 declaració_n
 }
Sintaxi bàsica de CSS. Selector

MP08 SMX
 propietat_i: valor_i;
 Exemple:
 P {
 Font-size: 10pt;
 Background-color: gray;
 }
 «p» és el selector, i té dues declaracions.

1a
declaració: «font-size» és la propietat i
«10pt» és el valor
Sintaxi bàsica de CSS. Declaració i valor

MP08 SMX
 Regla @import: Serveix per incloure fulls d'estil
externs. Exemple: @import ''mesestils.css'';
 Regla @font-face: especifica una font no inclosa
en el navegador que l'usuari es descarregarà:
 @font-face {
 Font-family: DeliciiosuRoman;
 Src: url(''Delicious-Roman.otf''); }
 P { font-famili: DeliciousRoman, Helvetica...;
 }
 Si la font no esta disponible, usara la següent
Les regles arrova

MP08 SMX
 Serveix per diferenciar per quin mitjà
s'ofereixen les propietats que conté, on
mitjà pot ser print o screen entre d'altres.
Exemple:
 @media print {
 Body{ font-size: 10pt }
 }
 @media screen { body { font...
 @media screen, print {
 Body {line-height: 1.2 }...
 Regla @media

MP08 SMX
 Si volem afegir comentaris destinats a l'aclariment
del codi CSS:
 /* comentaris */
 /* Estil per a totes les capceleres del document */
 H1 {
 Text-align: center; /* Text centrat per destacar...*/
 Color: red; /* Color de lletre...*/
 }
Comentaris

MP08 SMX
 «Cascada» significa que podem combinar
diferents fulls d'estil i que les propietats de
tots ells es van acumulant
 Pot passar que diferents propietats es
contradiguin?
 Solució: Jerarquia d'estils
CSS (Cascading Style Sheets)

MP08 SMX
 Propietats establertes per l'autor de la web:
 a) Propietats establertes en l'atribut style d'un element.
 b) Propietats establertes en l'element <style> del
document XHTML
 c) Propietats establertes en un full d'estil extern
 Propietats establertes per l'usuari. Permet a
l'usuari establir diferents propietats d'estil
 Propietats establertes pel navegador. Els
navegadors tenen un estil predeterminat
CSS Jerarquia en ordre de prevalència

MP08 SMX
 <head>...
 <link> rel=''stylesheet'' href=''estils.css'' type=...
 <style> p { color: red; } </style> </head>
 <body>
 <h1>Encapçalament</h1>
 <p style=''color: blue''> Un paràgraf</p>
 <p> Un altra paràgraf</p>
 </body></html>
CSS Exemple de jerarquia

MP08 SMX
 El fitxer estils.css
 P {
 Color: green;
 }
 H1 {
 Color: violet;
 }
CSS Exemple de jerarquia II

MP08 SMX
 P {
 Color: red;
 }
 p {
 Color: green;
 }
 Preval l'última regla escrita
CSS Dues regles en el mateix nivell

MP08 SMX
 Tots els elements d'una pàgina estan continguts en
un altre element (menys l'element <html>)
 Tot element hereta les propietats dels seus
elements antecessors
Herència

MP08 SMX
 No totes les propietats s'hereten. Aquesta
característica esta descrita en l'especificació CSS
 Si volem forçar l'herència en una propietat, podem
introduir-hi el valor «inherit»
 Si posem un valor a una propietat, aquest valor
preval sobre el valor heretat
 Els elements hereten el valor computat, no el valor
especificat
Herència. A tenir en compte

MP08 SMX
 <head> ... <style>
 Body { font-size: small; }
 P { color: gray; }
 Strong { font-style: italic; }
 </style></head>
 <body>
 <p> Un paràgraf amb una <strong> text emfatitzat
</strong></p>
 </body></html>
Herència. Exemple

M08 fulls d'estil

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Similar to M08 fulls d'estil

Similar to M08 fulls d'estil (20)

Recently uploaded

Recently uploaded (10)

M08 fulls d'estil