Anem a crear i definir uns estils adequat a la feina que desitgem realitzar.

Vam veure el els tutorials anteriors, com aplicar un estil a unes determinades etiquetes i que per defecte s'apliquessin a aquestes mateixes etiquetes. Ho vam fer amb els enllaços, i text, però podríem fer-ho amb totes elles, però clar, vèiem que en cada paràgraf, hi hauria el mateix estil, que tots els enllaços tindrien la mateixa decoració, format de text, etc ..

Per tant si bé això té l'avantatge que es van aplicant automàticament en anar inserint el text, o enllaços, el millor és crear un estil i definir-lo, tal com desitgem i aplicar nosaltres mateixos.

Obrirem un document htm, nou (totalment en blanc) i guardem amb un nom:

* Nota: Normalment aquesta és la forma en què començarem el disseny d'una pàgina web, de manera que aquest document, el guardaríem amb el nom de 'plantilladisenio' per exemple. O qualsevol altre al que més tard convertirem en l'autèntica plantilla de la web.

Activem el panell d'estils en Finestra / Estils CSS

Clic la icona crear nova regla:

Marquem Avançats i seleccionarem les etiquetes body, td

* Nota: podem posar diverses per cada regla d'estils, separades per comes. Definirem en aquesta regla, la font, la mida, el color .. i s'aniran aplicant de forma automàtica en tots els documents que realitzem amb aquest estil.

Recordar, que aquest full d'estils, l'hem vinculat, amb el document del qual més tard (en teoria, en construir una Web) farem la plantilla.

Comencem així:

Aquí ens va a demanar que el guardem:

Es pot tenir en un mateix lloc més d'un full d'estils, només n'hi hagués prou que recordem i sapiguem amb quals documents està vinculada una i amb quals una altra, o altres

Definim la font, el color d'aquesta, la mida .. etc:

Ara els marges del document. És important disposar de tot l'espai possible per començar a dissenyar. Per tant posarem 0 a tot:

Acceptem i tots aquests valors, s'aplicaran de manera automàtica cada vegada que, un cop convertida en una autèntica plantilla, obrim un nou document. Creem una altra regla d'estil, només per l'etiqueta body:

Categoria Fons:

posem el color de fons i acceptem.

Per definir els estils dels enllaços, procedim de la mateixa manera, tal com ja ho havíem fet en el tutorial anterior.

* Nota: I us explico un truc que faig jo i que em estalvia temps.

Jo sòl definir tots aquests estils quan creo un document nou, des del Inspector de Propietats, Com recordareu, aquests estils s'insereixen en el mateix codi del document. Així doncs, els copio, esborro les etiquetes:

<stylo> i </ stylo>.

Crec un nou full d'estils en cascada, en la qual no defineixo cap estil, un cop creada i oberta pego els que creu en el document htm, des del Inspector de Propietats. Guardo el full i em resulta més ràpid i còmode

Però això és un truc, el seu seria fer-ho així tal com us he indicat abans. Fet això, començarem a crear estils que anirem inserint així com ens convingui.

Nova regla d'estil:

observar que el nom de l'estil va precedit d'un punt (.) i després un nom que li vaig posar per reconèixer més tard. Defineixo el color del fons:

i acceptem.

el ancho, la alineación: En el document htm, crearem una nova taula, en la qual, configurem com sempre l'amplada, l'alineació:

Situem el cursor del ratolí a la taula i fem clic a l'etiqueta que apareix just a sobre de l'Inspector

així quedés aquesta seleccionada i anem a aplicar l'estil que hem creat abans:

veurem que el color de fons de la taula canviés al qual hàgim triat.

D'aquesta manera anirem aplicant els estils a partir d'ara. Per treure un estil, veieu que la primera opció serà sempre 'Cap' doncs de la mateixa manera que ho hem aplicat abans, seleccionem ara Cap i desapareixerà o fent qualsevol altre, canviarem d'estil per al fons de la taula.

De la mateixa manera podrem definir el fons d'un td. Primer, des del inspector, definim l'alineació de la cel · la, i Nova regla d'estil / Categoria fons:

I definim un fons per a la cel · la:

Per aplicar a una cel · la l'estil, primer clic a l'etiqueta, igual que amb la taula:

Inserir una imatge com a fons:

y desde examinar, busco una imagen en la carpeta imágenes del Sitio en el cual estoy trabajando: Nova regla d'estil: com a nom de l'estil jo vaig posar. Fondotabla2 i des examinar, busco una imatge a la carpeta imatges del lloc en el qual estic treballant:

Creem ara l'estil. Fondoimgtd i posarem aquests valors:

Veure Aquí exemple

Podrem fer diferents combinacions amb aquests valors, així doncs provar i investigar fins a trobar el que més us agradi val? Una altra forma d'aplicar els estils és:

Mmm .... el mateix trobeu que ara seria més fàcil crear el portal no? Inserint els colors dels fons de les taules i cel · les, amb estils, no?

Doncs si chiquis, però tot el que vam aprendre llavors .. encara que ens costés ... ens ho hauríem perdut I ara aniran sortint tot allò i ens serà molt més fàcil

I això que em salti el fer-ho tot directament des del codi font eh? Guardem el full d'estils i la pugem al servidor juntament amb la resta dels documents i imatges.

ni espacios en blanco . Recordar que el nom dels estils, pot ser qualsevol, però ha d'anar un punt (.) Al començament d'ells, no tenir caràcters especials ni espais en blanc.

Per últim, a la columna de panells, veiem que van quedant reflectits els estils que anem creant i en l'ordre que ho anem fent:

Per modificar-les, seleccionem un, i premem la icona del llapis, apareix llavors la finestra on podrem canviar els valors. S'aplicaran automàticament, és a dir, que podem variar els colors de fons de les taules, cel · les, formats de text, color del text, etc ... guardar el document d'estils, pujar-lo al servidor i tota la pàgina tindrà els nous estils