Embedded Files
Què són els CSS?
Què són els CSS?
Els CSS, també anomenats full d'estil de cascada, són un llenguatge dissenyat per controlar l'estètica d'una pàgina web.
Diferenciant-lo de les etiquetes característiques de l'HTML, on també es poden controlar alguns estils de pàgina, però de forma molt incòmoda, el CSS és un llenguatge que ens permet canviar colors, tipus de lletra, espaiat i molt més.
Mentre que l'HTML utilitza etiquetes, CSS utilitza conjunts de regles, i tots dos conviuen de manera fructuosa.
La versió actual que utilitzem de CSS és la 3, i HTML és la 5.
Fulls d'estil CSS
Fulls d'estil CSS
Una "regla" CSS sempre comença amb un selector que defineix a quins elements HTML s'aplica. En aquest cas, estem intentant estilitzar l'element <body>. Després del selector, tenim el "bloc de declaracions" entre claus { }. Qualsevol "propietat" que establim aquí afectarà al <body>.
Configuració de propietats
Configuració de propietats
Per voler aplicar estils, les següents regles són importants, ja que ens permetrà canviar la mida dels encapçalaments, el color de la lletra, el color de fons…
Enllaçar un full d'estils CSS
Enllaçar un full d'estils CSS
Si comencem a programar amb CSS i veiem que la pàgina HTML no sofreix cap canvi, és perquè aquest no està enllaçat al full d'estils, i per evitar aquest error, al fitxer HTML cal afegir al <head> les següents instruccions:
Unitats de mesura
Unitats de mesura
Al full d'estils CSS, podem mesurar elements com la lletra, aquests elements es poden mesurar en px (píxels) o bé en em. Ambdós són vàlids, però el més acceptat són els píxels.
Els comentaris a CSS
Els comentaris a CSS
Els comentaris en CSS diferents dels d'HTML. En lloc de la sintaxi <!-- -->, CSS ignora tot entre els caràcters /* i */.
Definició de fonts
Definició de fonts
font-family és un element CSS que serveix per definir el tipus de lletra. Aquesta instrucció serveix perquè si a l'usuari no li carrega un tipus de lletra, es vegi un altre.
Selecció de diversos elements
Selecció de diversos elements
Perquè les instruccions al full d'estils no siguin redundants, podem afegir només d'una que adjunti el mateix estil a un conjunt d'elements. És a dir, en lloc d'adjudicar el tipus de lletra a l'h1, h2, h3, h4, h5, h6, podem afegir només una instrucció que seleccioni tots els encapçalats i els puguem adjudicar en aquest cas el tipus de lletra a tots en conjunt.
La Cascada
La Cascada
La part de la cascada de CSS, es deu que les regles davallen en cascada de variades fonts.
Això significa que s'ordena de menys a més precedència, cosa que els estils definits en passos posteriors anul·len els anteriors.
La jerarquia CSS de cada pàgina té el següent aspecte:
El full d'estil predeterminat del navegador
Fulls d'estil definits per l'usuari
Fulls d'estil externs (que són, amb diferència, el millor lloc per definir l'aspecte de la nostra web)
Estils específics de pàgina (s'apliquen al <head> de la pàgina, però el problema amb ells és que són díficils de mantenir)
Estils en línia (s'escriuen a l'atribut style d'un element HTML, i no són per res recomanables)
Estils específics de pàgina
Estils específics de pàgina
L'element <style> s'utilitza per afegir instruccions de CSS dins d'una pàgina HTML, així, aquests estils són bàsics i específics de pàgina.
Estils en línia
Estils en línia
L'element <style> s'utilitza per afegir instruccions de CSS dins d'una pàgina HTML, així, aquests estils són bàsics i específics de pàgina.
Múltiples fulls d'estils
Múltiples fulls d'estils
El model de caixes a CSS
El model de caixes a CSS
Una gran part de la feina com a desenvolupador web és afegir el contingut a diferents caixes a CSS per convertir una maqueta de disseny en una pàgina web.
Aquest model ens aporta molta més facilitat de lectura, ja que separa el contingut HTML en aparença, i també és necessari que es mostri bé a tota classe de pantalles.
Alineació de text
Alineació de text
Si comencem a programar amb CSS i veiem que la pàgina HTML no sofreix cap canvi, és perquè aquest no està enllaçat al full d'estils, i per evitar aquest error, al fitxer HTML cal afegir al <head> les següents instruccions:
Elements en bloc i en línia
Elements en bloc i en línia
Els quadres de bloc sempre apareixen a sota de l'element anterior. Aquest és el flux “natural” o “estàtic” d'una pàgina HTML
L'amplada de les caixes de bloc
Content, padding, border i margin
Content, padding, border i margin
Cada capsa (a CSS) conté aquestes 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.
Capses de contingut i capses de vora
Capses de contingut i capses de vora
Les propietats width i height només defineixen la mesura del contingut d'una capsa, i no tenen en compte el seu padding i la border.
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.
Selectors de classe
Selectors de classe
Els selectors de classe ens permeten aplicar estils CSS a un full 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. Cosa que ens permet tenir un sol full d'estils que regeixi tota una pàgina HTML amb diferents estils segons l'apartat. Els selectors de classe requereixen dos aspectes:
atribut class
selector de classes
Restablir estils
Restablir estils
Al principi de cada full d'estil és recomanable que estigui afegit aquest seguit de codi:
Page updated
Report abuse