Tipus d'estils CSS

Són tres, i es defineixen per la manera sobre com s'aplicaràn.

Etiqueta: S'aplica a elements HTML, com ara paràgrafs (p), capçaleres (h1,2,..7), body, table,il.. etc. Al crear un estil per a un d'aquests elements s'aplicarà automàticament a tots els elements d'aquest tipus que contingui la pàgina, per exemple si faig un estil per a un paràgraf p {font-style: Arial;}, a tots els paràgrafs que contingui la pàgina se m'aplicarà una font Arial.

ID: Molt fàcil dentendre, moltes vegades al crear un element HTML; ens demanarà donar-li un nom que el defineixi, una Identitat, el que fem al crear un estil ID és crear un estil que porti el nom de l'element, i l'estil s'aplicarà unicament a aquest. Jo ara creo una caixa anomenada caixa1, tambés ens creo 3 mès (caixa2, caixa3, caixa4), ara creo un estil que s'anomenarà #caixa1(el # ha d'anar just davant per definir qie un estil ès un ID),  #caixa1 {font-style: Arial;}, tot els text de la caixa 1 pasarà a ser Arial.

Classe: Aquest possiblement sigui el mès simple i fàcil d'entendre, s'ans aplicarà allà on volguem, nomès cal seleccionar o senyalar la part o element on volem aplicar aquest estil, i clickar damunt del nom de l'estil. Per crear-ne un .elnomquelivulguisposar {font-style: Arial;}, aqui és imprescindible posar el punt davant, de la mateixa manera que ID necessita #.


Ara que ja he explicat tant bè com he poguts els tres tipus estils CSS que hi han, explicarè com crear-los i aplicar-los.

Crear-los

 En la finestra de CSS, en la finestreta on va la llista d'estils fem click dret i Nuevo... , ara de la llista desplegable triem quin tipus d'estil farem i li donem un nom, recordant sempre que:

- Si ès etiqueta no li podem inventar un nom sinò que hem d'escriure un element HTML.
 (p,h1,body,ul, etc).

- Que si ès clase sigui el nom que sigui, al davant sempre hi va un punt (.exemple).

-I si ès ID anirà amb un # al davant (#exemple).

-Per norma general cap etiqueta ha d'anar amb accents, comes, espais o caràcters especials com ara ñ o ç, per separar paraules podem utilitzar _ (exemple-d_etiqueta).

Un cop explicat com començar a crear una etiqueta no cal explicar com aplicar-li caracterìstiques ja que el cuadre de diàleg de Dreamweaver pper crear estils ès sencillisim d'utilitzar, en tot cas puc dir que les caràcteritiques bàsiques es troben a la primera pestanya  (Tipo), les alineacions de text i sangries a Bloque i que cal donar a Aplicar perque s'apliquin els canvis. I tambè que fent doble click sobre el nom de l'estil podem tornar a obrir el cuadre de diàleg per aixì fer algùn canvi.

Aplicar-los






Això ho farem desde la finestra Propiedades, però en l'apartat CSS, com podem veure en la imatge de dalt, ens mostra els diferents tipus d'estil.

-Formato: Ès refereix a etiqueta. Per defecte Dreamweaver pot reconeixer tot el text com a paràgraf, i per tant aplicarà automaticament les caracterìsqiques que tinguem a l'estil p a tot el text, si per exemple hem creat un estil d'etiqueta per a un titular (per exemple h2), nomès cal seleccionar el titular, desplegar la llista de la pestanya i seleccionar Encabezado 2.

-ID: O bè s'aplica automàticament als elements que tinguin la ID o bè si encara no hi ha cap element amb la ID podem fer com amb l'estil etiqueta.

-Classe: Seleccionar i triar estil de la llista desplegable.

Finestra CSS

La finestra CSS, és una altra manera d'afegir caracterìstiques a un estil CSS, però dede la interfìcie, molt mès sencill, ja que allà ja ens venen donades les caracterìstiques i nosaltres nomès ens hem d'encarregar de donar uns valors en cas de voler-les,  no ès com en el codi, que ens hem de coneixer el codi especìfic i no cometre cap errada. Encara aixì el codi ens seguirà sent ùtil per percebre erros amb mès facilitat que ho fariem desde la interfècie.

Ès molt fàcil d'utilitzar, per visualitzar-lo només hem d'anar a Ventana > Estilos CSS. Llavors ens sortirà el que a partir d'ara anomenarem Finestra CSS.



Aquesta ès la finestra CSS, a partir d'ara serà un altre element indispensable, per cert hem de procurar que estigui en la pestanya Todo, tal i com es mostra en la imatge superior.
Aqui, com podem veure, tenim 3 estils, i ens està mostrant les caracterìstiques d'un d'ells, podem canaviar una de les caracterìstiques existents fent doble click al damunt d'aquesta, o afegint-ne de noves fent doble click damunt de l'estil on volem afegir les caracterìstiques.

Aquesta ès la finestra que ens apareix al fer doble click damunt d'un estil.

Editar un llibre

Aquest treball serà una mica llarg i per tant he creat una etiqueta especìfica per a aquest treball.
Es tracta de editar un llibre, un treball que m'interessa molt ja que resulta que tinc un llibre descarregat d'internet que m'agrada molt, i seria una idea estupenda editarlo i convertir-lo en llibre de veritat.
Aquest treball es divideix en diverses parts, i per tant les pujarè en diverses entrades, totes amb l'etiqueta llibre.

Traçats: Separació de colors

És un traçat sens dubte imprescindible,
ja que ens serveix per identificar quina tinta correspon a la forma impressora.

Sense aquesta marca diria que es
impossible (o molt dìficil) esbrinar quina tinta pertany a cada tinta pertany a cada forma impressora, les planxes per exemple, no ens surtirà la planxa del Cian en color cian, o la del Groc en groc, totes surten del mateix color, llavors en aquest bloc, la C de cian està feta només de 100% de Cian i res més que cian, llavors al fer la planxa del Cian, només surtirà la C, perque de la mateixa manera que C només porta cian, Y només porta groc, K només porta negre i M només porta magenta, ès bastant senzill no?

Traçats: Tira de control (buscar més informació i explicar)

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.

 

Agrupacions de families de fonts en Web

Aquestes agrupacions creades prederminadament per Dreamweaver serveixen basicament per que en el cas d'un ordinador on s'estigui executant la pàgina web hi falti la primera font de l'agrupaciò, s'utilitzi la següent de l'agrupaciò·
Explicat d'una altra manera, si una pàgina web, un dels seus estils tè la següent agrupaciò: Arial, Genova, Verdana, el text es visualitza en Arial; llavors una persona entra a la pàgina i resulta que en el seu ordinador no té la font Arial, doncs llavors visualitzarà el text en Genova. En cas de no tampoc la segona font, llavors seria aconsellable que es descarregués algunes fonts, ja que normalment, aquesres agrupacions estàn composades de fonts bastant bàsiques i generals, a mès les fonts d'una mateixa agrupaciò sòn bastant semblants entre si, es clar, perque es noti el menys possible el canvi d'una font a una altra.

La paleta de colors de Netscape

La paleta de colors Netscape s'origina a l'època de les pantalles de 8 bits, quan les pantalles només podien reproduir fins a 256 tons, llavors Netscape el primer navegador va crear una paleta comuna entre els colors de Mac i els de PC.