Un full d'estil en cascada (CSS) és un sistema de codificació de llocs web que permet als dissenyadors manipular diverses funcions alhora assignant determinats elements a grups. Per exemple, mitjançant un codi per al fons del lloc web, els dissenyadors poden canviar el color o la imatge de fons a totes les pàgines del lloc web amb un canvi al fitxer CSS. A continuació s’explica com crear CSS per a un lloc web bàsic.
Passos
Primera part de 4: escriure CSS en línia
Pas 1. Assegureu-vos que teniu un coneixement bàsic de les etiquetes HTML
Hauríeu de saber com funcionen les etiquetes i el fitxer
src
i
href
atributs.
Pas 2. Apreneu algunes de les propietats bàsiques de CSS
Trobareu que hi ha moltíssimes propietats. Tot i això, no cal aprendre-les totes.
-
Algunes bones propietats bàsiques de CSS que cal conèixer són
color
i
font-family
- .
Pas 3. Obteniu informació sobre els valors de cada propietat respectiva
Totes les propietats necessiten un valor. Per al
color
propietat, per exemple, podeu posar el fitxer
vermell
valor.
Pas 4. Més informació sobre el
estil
Atribut HTML.
S'utilitza dins d'un element com
href
o bé
src
. Per utilitzar-lo, entre les cometes després del signe igual, poseu l'atribut CSS, dos punts i, a continuació, el valor de la propietat. Això es coneix com una regla CSS.
Pas 5. Compreneu que els desenvolupadors web professionals no solen utilitzar CSS en línia per a llocs web
El CSS en línia pot afegir un desordre innecessari a un document HTML. Tot i això, és una bona manera d’introduir-vos en el funcionament del CSS.
Part 2 de 4: Escriure CSS bàsic
Pas 1. Inicieu el programa que voleu utilitzar
Us hauria de permetre crear fitxers HTML i CSS.
Si no teniu instal·lat un programa especial, podeu utilitzar el Bloc de notes o un altre editor de text. Només cal que deseu el fitxer com a fitxer de text i CSS
Pas 2. Obriu el fitxer HTML del vostre lloc web
Hauríeu d'obrir-ho també amb un editor HTML, si en teniu un instal·lat.
Els editors HTML us permeten editar HTML i CSS alhora
Pas 3. Creeu una etiqueta dins del capçal HTML
Això us permetrà escriure CSS sense necessitat d’un fitxer independent.
Pas 4. Trieu un element al qual vulgueu afegir l'estil i escriviu el nom de l'element seguit d'un conjunt de claus ({})
Per fer que el vostre codi sigui més llegible, col·loqueu sempre el segon aparell arrissat a la seva pròpia línia.
Pas 5. Entre els claudàtors, escriviu les regles CSS tal com faríeu amb
estil
atribut.
Cada línia ha d’acabar amb un punt i coma (;). Per fer que el vostre codi sigui llegible, cada regla ha d’iniciar-se per la seva pròpia línia i s’ha de sagnar cada línia.
És molt important tenir en compte que aquest estil afectarà tots els elements del tipus seleccionat a la pàgina. A la secció següent es tractarà un estil més específic
Part 3 de 4: CSS més avançat
Pas 1. Creeu un fitxer CSS, no un fitxer HTML i deseu-lo mitjançant
.css
extensió.
Obriu també el fitxer HTML.
Pas 2. Creeu una etiqueta al capçal HTML
Això us permetrà enllaçar un fitxer CSS separat al vostre document HTML. L'etiqueta d'enllaç necessita tres atributs:
rel
tipus
i
href
-
rel
significa "relació" i indica al navegador quina relació té amb el document HTML. Aquí hauria de tenir un valor de
"full d'estil"
- .
-
tipus
indica a quin tipus de suports es vincula. Aquí hauria de tenir un valor de
"text / css"
-
href
- aquí s'utilitza de manera similar a com s'utilitza en un element, però aquí ha d'enllaçar a un fitxer CSS. Si el fitxer CSS es troba a la mateixa carpeta que el fitxer HTML, només cal escriure el nom del fitxer entre cometes.
Pas 3. Seleccioneu elements de diferents tipus als quals vulgueu afegir el mateix estil
Afegiu un
classe
atribuïu-los a aquests elements i establiu-los igual al nom de classe que trieu. Això donarà als vostres elements el mateix estil.
Pas 4. Assigneu l'estil que rebrà una classe
Escriviu el nom de la classe al fitxer CSS amb un punt (.) Anterior (és a dir,
.classe
).
Pas 5. Seleccioneu elements individuals als quals vulgueu afegir un estil especial i afegiu-ne un
identificador
atribut.
Els identificadors es creen a CSS mitjançant un símbol de lliura (#) en lloc d'un punt.
Els identificadors són més específics que les classes, de manera que un identificador substituirà qualsevol estil de classe si té un atribut amb un valor diferent que la classe
Part 4 de 4: Aprendre més
Pas 1. Visiteu les escoles del w3
És un lloc web oficial dirigit a ensenyar habilitats de desenvolupament web. El w3 té moltes referències llistades per a HTML i CSS, així com altres llenguatges web.
Pas 2. Cerqueu altres llocs específicament dirigits a aprendre i ensenyar HTML i CSS
Llocs com CSS tricks.com estan específicament dirigits a ensenyar habilitats de disseny web i CSS. Trobar fonts de bona reputació us ajudarà en el vostre viatge d’aprenentatge.
Pas 3. Poseu-vos en contacte amb dissenyadors i desenvolupadors web
La seva experiència i coneixement us poden ensenyar coneixements i habilitats valuoses.
Pas 4. Vegeu el codi font dels llocs web que us trobeu
Veure el CSS de llocs web ben desenvolupats us pot mostrar maneres de dissenyar parts de llocs web. Copiar-lo com a pràctica i jugar amb el codi us pot ajudar a aprendre a utilitzar diferents atributs CSS.
