Estils en Cascada, a partir d'ara, css

El primer és tenir una idea, encara que sigui vagament que són els Estils i perquè ens serviran en el disseny de pàgines web. Us copio part d'un article que lleugerament ens donarà una idea, l'autor d'aquest article és el director de la pàgina desarroWeb.com

Entrem en matèria amb els antecedents d'aquesta tecnologia, les raons per les quals s'han desenvolupat els fulls d'estil en cascada, i els objectius que tracta de complir. El llenguatge HTML està limitat a l'hora d'aplicar-forma a un document. Això és així perquè va ser concebut per a altres usos (científics sobretot), diferent dels actuals, molt més amplis. Per solucionar aquests problemes els dissenyadors han utilitzat tècniques com ara la utilització de taules imatges transparents per ajustar-les, utilització d'etiquetes que no són estàndards del HTML i altres. Aquestes "trampes" han causat sovint problemes en les pàgines a l'hora de la seva visualització en diferents plataformes. A més, els dissenyadors s'han vist frustrats per la dificultat amb la que, tot utilitzant aquests trucs, es trobaven a l'hora de maquetar les pàgines, ja que molts d'ells venien maquetant pàgines sobre el paper, on el control sobre la forma del document és absolut. Finalment, un altre antecedent que ha fet necessari el desenvolupament d'aquesta tecnologia és que les pàgines web tenen barrejat en el seu codi HTML el contingut del document amb les etiquetes necessàries per donar-li forma. Això té els seus inconvenients ja que la lectura del codi HTML es hece pesada i difícil a l'hora de buscar errors o depurar les pàgines. Encara que, des del punt de vista de la riquesa de la informació i la utilitat de les pàgines a l'hora d'emmagatzemar el seu contingut, és un gran problema que aquests textos estan barrejats amb etiquetes incrustades per donar forma a aquests: es degrada la seva utilitat. Informe de Miguel Ángel Álvarez Director de DesarrolloWeb.com

Hi ha diverses formes d'usar els estils i encara que potser no ho sapiguem, ja hem estat

usant-los des de fa temps, fins i tot aquí, vam veure no fa gaire, en voler posar un

scroll amb colors determinats, un exemple de com usar-los. I també sol veure en

la vista del codi font en els mail de l'OE.

de los documentos y que tiene este aspecto: És un codi que apareix en el Head dels documents i que té aquest aspecte:

> L'etiqueta <style> amb el paràmetre type = "text / css">

P

{

font-family: "Times New Roman", Times, serif;

font-size: 12px;

font-style: italic;

font-weight: bold;

text-transform: capitalitza;

color: # CC3300;

}

Tancant l'etiqueta de la manera que ja coneixem:

</ Style>

P = a paràgraf

Entre claus {}

les instruccions perquè s'apliquessin a l'etiqueta <p>

Això vol dir que inserirem un text qualsevol en un document Nou:

Aquest és un exemple d'estil, Aquest és un exemple d'estil,

Aquest és un exemple d'estil, Aquest és un exemple d'estil,

Aquest és un exemple d'estil, Aquest és un exemple d'estil,

Aquest és un exemple d'estil, Aquest és un exemple d'estil,

: Seleccionar el text, anem a l'Inspector de Propietats i en Format:

convertim tot el text en un paràgraf. Automàticament, l'estil serà aplicat al text quedant així:

Per anar veient el seu funcionament, el millor és que obriu un document totalment nou, sense plantilla ni res, un full en blanc total. Millor ni tan sols centrar ... i introduir el text. : Copiar l'estil que us vaig posar més amunt i enganxar al codi font:

Ampliar

i convertir el vostre text en un paràgraf. Veureu el resultat tal com us indico en la captura. : Podeu, per comprovar anar canviant el codi de colors, la mida de la font:

el color ara és # 00A000 i la mida 20px (sempre posar px, o pt, px = píxels, pt = punts)

Així crearíem diferents estils i els aniríem aplicant de forma manual. Però amb el Dream hi ha una forma més còmoda de fer-ho.

etc.. ) insertamos un texto cualquiera: Obrim un nou document totalment en blanc (o el mateix un cop net de l'anterior) i procurant no inserir cap etiqueta, (recordar, <div> <span> etc ..) inserim un text qualsevol:

Al menú principal, anem a finestra / Estil CSS:

A la columna de la dreta, s'obre una nova finestra, que si treballem sobre un document que encara no té vinculada una fulla d'estils, apareixerà així:

Clic a la icona de Nou estil per crea un:

I s'obre una nova finestra, que inicialment, és possible ja porti per defecte altres seleccions marcades i que nosaltres anem a canviar així:

Crearem el mateix estil que vam veure abans:

I acceptem. que esta exactamente igual que el que habíamos puesto manualmente. Si com ja vaig dir, tenim el text dins d'una etiqueta paràgraf, automàticament s'aplicaria i podem comprovar en el codi font que aquesta exactament igual que el que havíem posat manualment.

, pero todas quedaría igual, es decir, todos los párrafos serian igual, si lo aplicásemos a <td> todas las celdas tendrían el mismo color de fondo , si lo habíamos puesto, mismo color de texto …etc, etc. Així podríem crear estils per a totes les etiquetes, però totes quedaria igual, és a dir, tots els paràgrafs serien igual, si ho apliquéssim a <td> totes les cel · les tindrien el mateix color de fons, si ho havíem posat, mateix color de text ... etc, etc. Estaríem condemnant les etiquetes.

, que quizás si queramos hacerlo, pero si es para una misma pagina, seguro que habrá muchos que serán básicos y ya los tendríamos en el primero y no habría necesidad de volver a crearlos. També, d'aquesta manera, només els aplicarem a el document que estiguem creant en aquell moment, de manera que en el pròxim, haurem de crear altres estils, que potser si vulguem fer-ho, però si és per a una mateixa pàgina, segur que hi haurà molts que seran bàsics i ja els tindríem en el primer i no hi hauria necessitat de tornar a crear-los.

Pel que si bé, s'aplica automàticament, i ens estalviés un gran treball, al final, no ens serà molt rendible

Per tant, continuarem en el proper tutorial ja d'una forma definitiva que anirem veient per aplicar a tota una plantilla d'una pàgina web o qualsevol altre document que anem a necessitar.