Estils de les capçaleres
Després d'especificar en la pràctica anterior els aspectes generals de l'estil del text del document, en la pràctica següent definireu un conjunt de propietats visuals que afectaran a les diferents capçaleres del document.
Un estil per la capçalera de primer nivell
Obriu l'arxiu m3p3_4.html, que és el resultat final de la pràctica anterior, i identifiqueu la capçalera de primer nivell:
<h1>Lorem Ipsum</h1>
Ara incorporareu una sèrie de propietats CSS a aquest element. Començareu afegint un color al text i al fons:
h1 {
color: #5050b8;
background-color: #b8b74f;
}
Comproveu el resultat. Sense entrar en la discussió de si és o no encertat utilitzar un color de fons, que no facilita la legibilitat del text, us permetrà veure la caixa que ocupa, en aquest cas, l'element h1.
Per defecte, els elements són representats pels navegadors amb un cert valor de marge (margin) de la caixa que ocupa i farcit (padding). Els podeu eliminar de la següent manera:
h1 {
color: #5050b8;
background-color: #b8b74f;
margin: 0;
padding: 0;
}
Donant el valor 0 a les propietats margin i padding, heu eliminat el marge i el farcit interior. D'altra banda, el padding ve marcat pel valor de la distància vertical entre línies del text, que també s'ha declarat previament al cos del document. Si el volguéssiu modificar, hauríeu d'incorporar un nou valor a l'element en qüestió:
h1 {
color: #5050b8;
background-color: #b8b74f;
margin: 0;
padding: 0;
line-height: 1;
}
Si actualizeu la pàgina podreu comprovar que no existeix separació entre el contingut de la caixa h1 i els seu marges. Ara determinareu que el contigut de la capçalera de primer nivell quedi desplaçat lateralment a la dreta:
h1 {
color: #5050b8;
background-color: #b8b74f;
margin: 0;
padding: 0;
line-height: 1;
padding-left: 35px;
}
Per fer-ho heu d'afegir la propietat: padding-left, és a dir, establir que hi hagi un espai entre el límit esquerre de la caixa i el seu contingut, en aquest cas de 35 px. Actualitzeu per veure el resultat.
Ara modificareu el valor del fons. Elimineu-lo perquè heredi el valor de fons anteriorment decidit en el cos (body) del document. Perquè la propietat deixi de fer efectiva no cal esborrar-la, n'hi ha prou amb comentar-la i quedarà deshabilitada:
/* background-color: #b8b74f;*/
Recordeu que, mitjançant l'ús dels símbols /* i */, qualsevol element que es trobi dins dels seus límits deixarà de tenir efecte.
Finalment, incorporareu a la capçalera de primer nivell una línia inferior d'1 px de gruix i d'una tonalitat oposada a la de la paleta cromàtica al color seleccionat per la font:
h1 {
color: #5050b8;
/* background-color: #b8b74f;*/
margin: 0;
padding: 0px;
line-height: 1;
padding-left: 35px;
border-bottom: 1px solid #cdcd83;
}
La sintaxi de la propietat border-bottom no és complicada. A l'exemple s'han determinat els següent valors a la propietat border-bottom: el gruix de línia (1 px), el tipus de línia (sólida -solid-) i, finalment, el color de la línia (#cdcd83).
A més de la línia contínua o sòlida, es poden determinar d'altres tipus de línia com la puntejada (dotted) o la discontínua (dashed).
Obriu l'arxiu m3p4_1.html per comprovar els canvis.
Vista de l'arxiu m3p4_1.html
Proveu de canviar els valors de les diferetns propietats de la capcalera de primer nivell i comproveu els seus efectes. Aquí teniu algunes propostes de canvis:
- Modifiqueu el valor del padding inferior (
padding-bottom) per fer que hi hagi una distància entre la línia de la vora i el text. - Modifiqueu el tipus de línia, el gruix,...
- Modifiqueu els colors del text i/o del fons.
Un estil per les capçaleres de segon nivell (h2)
Modificant l'estil de les capçaleres de segon nivell, veureu la manera d'incorporar un motiu ornamental o un símbol que les representi. D'aquesta manera, quedaran identificades visualment totes les capçaleres de segon nivell (h2) del document. Utilizareu la següent icona:
trebol.png
En primer lloc pinteu el fons de la caixa de h2 amb l'arxiu trebol.png enlloc de definir un color pla:
h2 {
background: url(trebol.png);
}
El valor url(trebol.png) crida a la iamtge trebol.png. És important recordar la possició de l'arxiu gràfic en relació a la ubicació de l'arxiu que el crida. En aquest cas, practica_3.html i trebol.png es troben al mateix directori.
Si actualitzeu l'arxiu practica_3.html, veureu que la imatge trebol.png es repeteix per tota la superfície que ocupa la caixa de l'element h2, però el que us interessa és que aparegui només un cop a cada capaçalera de segon nivell. Per aconseguir-ho heu de posar un nou argument: no-repeat.
h2 {
background: url(trebol.png) no-repeat;
}
Torneu a actualizar l'arxiu practica_3.html i comproveu que ara el gràfic trebol.png apareix només un cop i se situa a l'origen de la caixa: cantonada superior esquerra. Si volguéssiu desplaçar l'arxiu al llarg de la caixa només caldria posar dos nous valors de possició prenent com a referència l'origen de coordenades de la caixa. Veieu un exemple:
h2 {
background: url(trebol.png) no-repeat 50% 50%;
}
El primer valor representa un desplaçament horitzontal cap a la dreta, prenent com a origen el límit esquerre de la caixa. El segon valor representa un desplaçament vertical del gràfic vertical, on un valor positiu desplaça el gràfic cap a dalt i, un valor negatiu, cap avall. Per tant, si poseu el valor anterior (50% 50%), el gràfic trebol.png quedaria centrat en la caixa h2.
Per acabar, determinareu que la ubicació del gràfic, com a fons, estigui centrat verticalment i subjecte a la cantonada esquerra de la caixa h2. Després desplaçareu (30px) cap a la dreta, mitjançant l'ús de la propietat padding-left, el contingut de la caixa h2:
h2 {
background: url(trebol.png) no-repeat 0% 50%;
padding-left: 30px;
}
Però el gràfic trebol.png, pel fet de tenir unes dimensions més grans que les dimensions verticals de la caixa h2 no es veu en la seva totalitat. L'alçada de l'arxiu trebol.png és de 62px, per tant augmentant verticalment l'espai de la caixa en uns 15px, podeu solucionar el problema:
h2 {
background: url(trebol.png) no-repeat 0% 50%;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
}
Ara ja es veu en la seva totalitat el gràfic trebol.png com a ornament o com a fons de l'element h2. Fixeu-vos què, qualsevol nou element h2 quedarà afectat visualment per la propietat que heu definit. A la pràctica següent veureu com assignar diferents propietats als paràgrafs.
Podeu veure el resultat de tot el que s'ha fet a aquesta pràctica a l'arxiu m3p4_2.html.
Vista de l'arxiu m3p4_2.html
