Etiquetes

9 de gener del 2013

CSS


Els estils CSS ( Cascade Style Sheets), o sigui fulls d'estil en cascada, diguem que representen els estils que trobarem en els elements d'una web, per dir-ho d'una altra manera, una pàgina web es composa de:
-HTML: L'estructura del document.
-CSS: Els estils del document.

De pares a fills.
 A més els estils CSS funcionen més o menys com un arbre genealògic, la informaciò es transmet de pares a fills, amb això vull dir que jo per exemple tinc un document amb fons blanc, i aquest document contè dintre seu tres elements, una capçalera, una caixa de text i una imatge, aquests tres serien els fills del document, doncs tots tres hereden el fons blanc del pare. Igualment sempre podem canviar els estils d'alguns elements.

L'estructura
Ara explicaré l'estructura que ha de tenir un estil CSS escrit desde la part del codi.p { font-size: 14px; font-color: #000; line-heigth: 16px;} Ara explico, primer de tot he posat el nom de l'estil, en aquest cas p, que es refereix a paràgraf i que llavors generalment s'aplicarà a tots els paràgrafs del document, el nom va seguit d'un espai i desprès obrim un { on a dins hi ficarem totes les caracteristiques de p, no cal que expliqui les caracteritiques que hi he ficat, ja que ja ho vam tractar en temes anteriors, he ficat un color de font, un tamany i un interlineat, això si, tots separats entre si per punt i coma.Un consell per ordenar millor aquesta informaciò ès trencar lìnia just desprès del punt i coma i tambè deixar aïllat el nom de l'estil, i fer tabulacions en cada una de les caracteristiques, exactament aixì:
p {
font-size: 14px;
font-color: #000;
line-height: 16px;
}

Tambè una cosa que cal saber es que no importa en quin ordre posem les caracteristiques, nomès cal que tot estigui PERFECTAMENT ben escrit, respectant els espais i tot separat per punt i coma.

Com aplicar un estil CSS a una pàgina web

Tambè podriem dir-ho, com "fusionar" estil i estructura o CSS i HTML. Primer de tot obrim desde el Dreamweaver un document .css  (no HTML) i en el codi i escrivim l'estil CSS tal i com he explicat mès amunt, pero tambè hi afegirem un tipus de font, el codi es font-family: la font que volguem posar-hi.
Ara fem un "copiar pegar" de manera que a sota del primer estil n'hi ha un altre d'idèntic, a aquest segon li canviarem la p de paràgraf per h1 de titular 1, i com que es tracta d'un titular aumentarem el tamany de font, l'interlineat i tambè farem algún retoc a les altres caracteristiques.
Ho guardem i creem un document .html (ara si) i hi fiquem un text qualsevol que tingui un tìtol, ara seleccionem el tìtol i en la finestra Propiedades, on generalment hi posa Pàrrafo, hi posem 
Encabezado 1, amb aixó estem dient que associi l'estil h1 (encabezado 1) al text seleccionat, igualemnt, encara no s'aplicarà l'estil creat anteriorment, perque allò està en un altre document. Ara ens assegurem que la resta de text estigui amb estil Pàrrafo, o sigui que s'hi haurà d'associar l'estil p.
I ara finalment farem possible que els estils que hem creat s'associin al text, ès hora de vincular el full d'estils (.css) amb el document .html.
Ara anem a Ventana> Estilos CSS, això ens obrirà una finestra de treball que ens servirà per vincular els fulls d'estil amb el html. Busquem el simbolet d'infinit en la nova finestra i el cliquem. Ara triem el document. css que abans hem creat i que hauria d'estar al costat del .html. En principi ara la part de text on li hem posat Encabezado1 tindri que sortir amb el format que hem creat per a h1, i el text amb estil Pàrrafo tindria que sortir amb l'estil p.
Aquesta és la finestra de vincular un fulls d'estils CSS al document HTML.
 

Cap comentari:

Publica un comentari a l'entrada