L'estil visual i el disseny del lloc web estan dictats per CSS o Fulls d'estil en cascada. Aquests són documents que configuren el marcat HTML d'una pàgina web, proporcionant als navegadors web instruccions sobre com mostrar les pàgines que resulten d'aquest marcat. CSS controla el disseny d'una pàgina, així com el color, les imatges de fons, la tipografia i molt més.
Si observeu un fitxer CSS, veureu que, com qualsevol llenguatge de marcatge o codificació, aquests fitxers tenen una sintaxi específica. Cada full d'estil es compon d'una sèrie de regles CSS. Aquestes regles, quan es prenen en la seva totalitat, són quins són els estils del lloc.
Les parts d'una regla CSS
Una regla CSS es compon de dues parts diferents: el selector i la declaració. El selector determina el que s'està dissenyant en una pàgina i la declaració és com s'ha de dissenyar. Per exemple:
p {
color: # 000;
}
Aquesta és una regla CSS. La part del selector és la "p", que és un selector d'elements per a "paràgrafs". Per tant, seleccionaria tots els paràgrafs d'un lloc i els proporcionés aquest estil (a menys que hi hagi paràgrafs orientats per estils més específics en altres parts del vostre document CSS).
La part de la regla que diu "color: # 000"; És el que es coneix com la declaració. Aquesta declaració es compon de dues peces: la propietat i el valor.
La propietat és l'element "color" d'aquesta declaració. Determina quin aspecte del selector es canviarà visualment.
El valor és el que canviarà la propietat CSS escollida. En el nostre exemple, estem utilitzant el valor hexadecimal de # 000, que és la taquigrafia CSS per a "negre".
Per tant, utilitzant aquesta regla CSS, la nostra pàgina tindria paràgrafs en un color de font de color negre.
Fonaments de la propietat CSS
Quan escriviu propietats CSS, no n'hi ha prou de fer-les com calgui. Per a les instàncies, "color" és una propietat CSS real, de manera que la podeu utilitzar. Aquesta propietat determina el color del text d'un element. Si heu provat d'utilitzar "text-color" o "font-color" com a propietats CSS, aquests fracassarien perquè no són parts reals de l'idioma CSS.
Un altre exemple és la propietat "background-image". Aquesta propietat estableix una imatge que es pot utilitzar per a un fons, com aquest:
.logo {
background-image: url (/images/company-logo.png);
}
Si proveu d'utilitzar "fons" o "fons gràfic" com a propietat, fracassarien perquè, una vegada més, aquestes no són propietats CSS reals.
Algunes propietats CSS
Hi ha diverses propietats CSS que podeu utilitzar per dissenyar un lloc. Alguns exemples són:
- Frontera (incloent l'estil de vora, el color de la vora i l'amplada de la vora)
- Encoixinat (incloent el farciment superior, farcit-dreta, farcit inferior i farciment-esquerra)
- Marges (incloent el marge superior, el marge dret, el marge inferior i el marge esquerre)
- Font-família
- Mida de la font
- Color de fons
- Ample
- Alçada
Aquestes propietats CSS són excel·lents per utilitzar-les com a exemples, ja que són molt senzilles i, encara que no coneixeu CSS, probablement endevineu el que fan en funció dels seus noms.
Hi ha altres propietats de CSS que trobareu, que potser no siguin tan evidents com funcionen segons els seus noms:
- Flotador
- Clar
- Desbordament
- Text-transform
- Índex Z
A mesura que aprofundeixis el disseny web, trobaràs (i usareu) totes aquestes propietats i molt més!
Les propietats necessiten valors
Cada vegada que utilitzeu una propietat, heu de donar-li un valor, i certes propietats només poden acceptar certs valors.
En el nostre primer exemple de la propietat "color", hem d'utilitzar un valor de color. Això podria ser un valor hexadecimal , un valor RGBA, o fins i tot paraules clau de color . Qualsevol d'aquests valors funcionaria, però, si utilitzeu la paraula "ombrívola" amb aquesta propietat, no faria res perquè, tal com és descriptiu, no és un valor reconegut en CSS.
El nostre segon exemple de "imatge de fons" requereix una ruta d'imatge que s'utilitzi per obtenir una imatge real dels fitxers del vostre lloc. Aquest és el valor / sintaxi que es requereix.
Totes les propietats CSS tenen valors que esperen. Per exemple:
- El color de la vora espera un valor de color
- La mida de la vora espera un valor de mida, com píxels o percentatges
- Els estils de vora esperen que un dels estils reservats utilitzats per a aquesta propietat, com "sòlid"
Si passeu per la llista de propietats CSS, descobrireu que cadascun d'ells té valors específics que utilitzaran per crear els estils als quals estan destinats.
Editat per Jeremy Girard