Embedded Files
LLENGUATGE CSS
LLENGUATGE CSS
Els fulls d'estil en cascada, anomenats CSS, són un llenguatge dissenyat simplement per simplificar el procés de fer presentables les pàgines web.
CSS ens permet aplicar estils a les pàgines web, i, més importantment, ens permet fer això independentment de l'HTML que compon cada pàgina web. Descriu com hauria de ser una pàgina web: prescriu colors, tipus de lletra, espaiat i molt més. En resum, ens ajuda a fer que el nostre lloc web sembli el que vulguem, i permet als desenvolupadors i dissenyadors definir com es comporta, incloent com es col·loquen els elements al navegador.
Mentre que l'HTML utilitza etiquetes, CSS utilitza conjunts de regles. És fàcil d'aprendre i entendre, i proporciona un control potent sobre la presentació d'un document HTML.
atributs bàsics
model de caixa CSS: box model
El "model de caixa CSS"/Box model és un conjunt de regles que defineixen com es representa cada pàgina web a Internet. CSS tracta cada element del document HTML com una "capsa"/box amb un munt de propietats diferents que determinen on apareix a la pàgina.
Una gran part de la feina com a desenvolupador web és aplicar regles del model de caixa CSS per convertir una maqueta de disseny en una pàgina web.
box model: comportaments bàsics
Els blocs tenen un comportament default determinat:
Els quadres de bloc sempre apareixen a sota de l'element de bloc anterior.
L'amplada de les caixes de bloc s'estableix automàticament en funció de l'amplada del seu contenidor principal.
L'alçada predeterminada dels quadres de bloc es basa en el contingut que conté.
Els quadres en línia no afecten l'espaiat vertical. No serveixen per determinar el disseny, sinó per dissenyar coses dins d'un bloc.
L'amplada dels quadres en línia es basa en el contingut que conté, no en l'amplada de l'element principal.
I nosaltres podem substituïr el tipus de quadre predeterminat dels elements HTML amb la propietat display, de manera que el quadre d'un <em> el podriem canviar per un bloc amb tots els comportaments que s'acaben d'esmentar.
box model: content, padding, border i margin
El "model de capsa CSS" (box model) és un conjunt de regles que determinen les dimensions de cada element d'una pàgina web. Dona a cada capsa (tant en línia com en bloc) quatre propietats:
Content : el text, la imatge o un altre contingut multimèdia de l'element.
Padding : l'espai entre el contingut de la caixa i la seva vora.
Border : la línia entre el farciment i el marge de la caixa.
Margin : l'espai entre la caixa i les caixes circumdants.
box model: padding
Com he dit, la propietat padding defineix el farciment per a l'element seleccionat.
Es pot estilitzar tots els costats amb el mateix amb la propietat padding a soles (i després posant la quantitat de px que vols), però si vols estilitzar cada costat de manera diferents, pots emprar padding-top, padding-bottom, padding-left i padding-right, o, de forma abreujada, padding: vertical, horizontal o padding: top, right, bottom, left.
Amb els exemples es pot entendre millor:
Tots els costats tenen un padding de 50px.
Paddings diferents pels farciments vertical (20px) i horitzontal (10px).
Manera abreujada de tindre paddings de 20px pel farciment vertical i 10px per l'horitzontal.
Paddings d'amunt i d'avall són de 20px, el de la dreta de 0, i el de l'esquerra de 10.
box model: border
És una línia dibuixada al voltant del contingut i el farciment d'un element.
La propietat border requereix una nova sintaxi que no hem vist encara. Primer, definim l'amplada del traç de la vora, després el seu estil, seguit del seu color.
Com al padding, amb la propietat border tenim les variants
-top, -bottom, -left, i -right.
box model: margin
Els marges defineixen l'espai fora de la vora d'un element (és a dir, l'espai entre una caixa i les caixes que l'envolten), i tenen com a "curiositat" que si li poses un a un quadre de línia, aquest ignora totalment els marges verticals.
Una altra peculiaritat del model de caixa CSS és el "col·lapse del marge vertical". Quan tens dues caixes amb marges verticals l'una al costat de l'altra, es col·lapsaran. En lloc de sumar-se els marges, només es mostra el més gran.
I, en cas que no volguem que es col·lapsin, l'únic que hem de fer és posar un altre element invisible entre ells, com un <div>.
capses genèriques: <div> i <span>
Són elements contenidors que no tenen cap efecte sobre l'estructura semàntica d'un document HTML.
Tanmateix, proporcionen un ganxo per afegir estils CSS a seccions arbitràries d'una pàgina web. Per exemple, de vegades cal afegir un quadre invisible per evitar un col·lapse del marge, o potser es vol agrupar els primers paràgrafs d'un article en una sinopsi amb un format de text lleugerament diferent, o es vol col·locar un paràgraf a l'esquerra i l'altre a la dreta.
capses de contingut i capses de vora
Les propietats width i height només defineixen la mida del contingut d'una capsa, i no tenen en compte el seu padding i la border.
Això pot ser molt molest a l'hora de dissenyar una pàgina. Imagineu-vos que intenteu omplir un contenidor de 600px amb tres caixes que són totes width: 200px, però no encaixen perquè totes tenen una vora de 1px (que fan que la seva amplada real sigui de 202px).
Afortunadament, CSS ens permet canviar com es calcula l'amplada d'un quadre mitjançant la propietat box-sizing. Per defecte, té un valor de content-box, que ens porta al comportament descrit abans, però si afegim el valor border-box, les propietats width i height s'aplicaran exactament.
Vegem les diferències:
restablir estils
Normalment és una bona idea substituir els estils predeterminats a un valor previsible mitjançant el selector CSS universal ( * ). De manera que al principi de cada full d'estil hauria d'estar afegit un codi semblant al de l'imatge de la dreta.
Aquest selector coincideix amb tots els elements HTML, restablint les propietats margin i padding de la nostra pàgina web. També hem convertit totes les nostres caixes a border-box, que, de nou, és una bona pràctica.
selectors de classe
Els selectors de classe ens permeten aplicar estils CSS a un element HTML específic. Permeten diferenciar entre elements HTML del mateix tipus, com quan es tenen dos elements <div>, però només es vol canviar l'estil d'un. Els selectors de classe requereixen dues coses:
Un atribut class de l'element HTML en qüestió.
Un selector de classes CSS coincident al vostre full d'estil.
Es piquen de la següent manera:
Afegeixes un atribut class a l'element que vulguis en el teu document HTML, en el cas de l'exemple a un paràgraf <p>.
2. Declares aquest element (en aquest cas <p class="synopsis">) al teu CSS, i l'estilitzes de la manera que vulguis.
És important tornar a recalcar que l'atribut class no es limita només als elements <p> o <h1>, sinó que es pot definir en qualsevol element HTML, i (com ho veig) són especialment útils pels <div> i <span>
selectors/estils de classe: reutilització
Una cosa molt útil amb els estils de classe és que la mateixa classe es pot aplicar a diversos elements d'un sol document HTML.
Això ens pot permetre crear un element (com un botó) que s'assembla a un altre, sense escriure una sola línia nova de CSS!
Organitzar elements gràfics similars en regles CSS reutilitzables facilita molt la vida com a desenvolupador web. Si alguna vegada volguéssim, per exemple, canviar el color d'un botó, només hauríem de fer-ho en un lloc i tots els nostres botons s'actualitzaran automàticament.
selectors/estils de classe: modificació
També podem aplicar diverses classes al mateix element HTML (és a dir, podem tenir una classe base i després anar afegint en funció d'aquesta).
Amb aquest codi, per exemple, tant els estils de la classe "button" com de la classe "call-to-action" s'aplicaran a l'element.
Els estils compartits pels dos botons poden viure a la classe .button, i els estils específics del segon botó residirien a la classe .call-to-action (amb això sempre ens hauriem d'assegurar d'afegir els específics després de la regla .button, ja que la primera és la que s'agafa com a base, i per la jerarquia CSS, si hi ha una font-style diferent per ambdues regles, sempre s'agafarà la de l'última afegida, en aquest cas del "call-to-action").
Per tot això, diem que l'ordre importa, perquè quan hi ha dues propietats en conflicte en un fitxer CSS, l'última sempre és la que s'aplica.
selectors/estils de classe: selectors descendents
El selectors descendents —normalment representats per un únic caràcter (" ")— combinen dos selectors de manera que els elements coincidents amb el segon selector són seleccionats si tenen un element avantpassat que coincideixi amb el primer selector.
Aquesta definició és bastant rara, però el concepte bàsic és que ens permet alterar elements, bàsicament, orientant elements que es troben dins d'un altre element.
Per exemple, per exemple, si volem seleccionar només elements <em> dins dels encapçalaments, podríem utilitzar alguna cosa com això:
Pseudoclasses per a enllaços
Com a desenvolupador web, si crees un element <a href>, quan es mostra al navegador, l'usuari pot interactuar amb aquest enllaç: pot passar-hi el cursor per sobre, fer-hi clic i visitar l'URL.
Però en aquest procés, podem fer que la web es comporti de maneres diferents, i és per això que serveixen les pseudoclasses CSS, que proporcionen un mecanisme per connectar-se a aquest tipus d'informació temporal d'usuari.
En un moment donat, un element <a href> pot estar en diversos estats diferents, i podem utilitzar pseudoclasses per estilitzar cadascun d'ells individualment. Les pseudoclasses d'enllaç més habituals són les següents:
:link – Un enllaç que l'usuari no ha visitat mai.
:visited – Un enllaç que l'usuari ha visitat abans.
:hover – Un enllaç amb el ratolí de l'usuari a sobre.
:active– Un enllaç que està sent premut amb un ratolí (o un dit).
Tenint en compte que els pseudoclasses comencem sempre amb dos punts seguits del nom de la classe d'enllaç desitjada, el codi hauria de quedar tal que així:
També podem combinar i fer que una pseudoclasse s'apliqui per més d'una classe amb una mateixa regla. Vegeu aquí l'exemple:
Això aplica el mateix estil (en aquest cas un color de lletra taronja) tant als enllaços visitats com per als que tenen el cursor a sobre.
selectors d'identificació
Els selectors d'identificació són una alternativa més estricta als selectors de classe. Funcionen pràcticament de la mateixa manera, excepte que només es pot tenir un element amb el mateix identificador per pàgina, el que significa que no es pot reutilitzar els estils en absolut. En lloc d'un atribut class, requereixen un atribut id, i, per picar-los, es faria una cosa tal que així:
Com a característica tenen que, al full d'estil CSS, en comptes de començar amb un punt o sense res, començen amb un signe hash (#).
I són útils per usar com a objectius per als fragments d'URL, perquè, en ser únics, és fàcil dirigir a l'usuari a aquella part específica de la web.
Aqui en tenim un exemple, on fem un codi per portar a l'usuari a un botó, des de la mateixa pàgina i des d'una diferent:
Page updated
Report abuse