Per a què serveixen els fulls d'estil en cascada i per a què serveix CSS?

Per a què serveixen els fulls d'estil en cascada i per a què serveix CSS?

CSS pertany a un triplet de tecnologies web bàsiques al costat de HTML i JavaScript. Amb una planificació acurada, CSS contribueix a separar les preocupacions. Els recursos independents controlen l’estructura, la presentació i el comportament d’un contingut.





Els fulls d’estil tenen un paper important en l’accessibilitat, l’escalabilitat i fins i tot el rendiment web. Com a autor de contingut o dissenyador de pàgines web, us donen control sobre com els dispositius renderitzen contingut. Des del disseny fins a la mida i el color de la lletra, CSS transforma el contingut en pàgines d’aspecte preciós.



Com és CSS?

CSS és un llenguatge important: hi ha moltes coses diferents per estilitzar. Però la seva sintaxi és senzilla, amb només algunes regles per aprendre.





Els elements HTML tenen diverses propietats que CSS pot dissenyar. El color La propietat defineix el color del primer pla (per exemple, text). La mida del tipus de lletra depèn del format mida de la font propietat.

Cada propietat es pot establir en un valor admès. L'assignació d'un valor a una propietat és una 'declaració'. En general, tenen aquest aspecte:



property: value

Per exemple:

acceleració de maquinari crom activada o desactivada
color: red

Els valors de diferents propietats poden tenir un aspecte molt diferent, fins i tot els valors de la mateixa propietat. Per exemple, hi ha dues maneres més d’escriure la declaració anterior:



color: #ff0000
color: rgb(255, 0, 0)

Com es combinen els fulls d’estil HTML i estil

Podeu combinar HTML i CSS de diverses maneres diferents, cadascuna amb els seus avantatges.

Estils d'escriptura en línia

El mètode més senzill és adjuntar declaracions d'estil directament a un element del fitxer HTML. Podeu fer-ho mitjançant el fitxer estil atribut així:




Most of this text is red …


… but this isn’t!


Tot i que els elements d’estil en línia com aquest poden ser convenients, té diversos inconvenients. Per començar, complica l’HTML, cosa que dificulta la lectura d’un cop d’ull. També és incòmode de mantenir: imaginem un document llarg en què vulguem establir el color de cada paràgraf. Es tracta de CSS, però no són 'Fulls d'estil'.

Inserció d’estils al cap

Podeu començar a veure l'aspecte d'un full d'estil amb el segon mecanisme, incrustació . Mitjançant aquest enfocament, reunim totes les declaracions d’estil dins d’un fitxer estil element a la cap del nostre document. Es veurà així:





/* style instructions go here */



...

Tot i això, les nostres instruccions d’estil necessiten una mica més de detalls que abans. Com que les hem mogut al cap, cada regla ja no està associada a cap element. Podríem haver declarat color: vermell , però, què hauria de tenir aquest color?

Aquí entren els selectors CSS. Ens permeten orientar parts específiques de la pàgina i definir el seu estil en un sol lloc, mitjançant aquesta sintaxi:

com reduir l'ús de RAM a Windows 10
selector {
declaration1;
declaration2;
/* etc. */
}

Per exemple, per estilitzar el text dels paràgrafs en blau, podem especificar el següent:

p {
color: blue;
}

En aquest exemple, el selector és simplement pàg , que coincideix amb tots els elements del paràgraf del nostre document. Acolorirà tot el text en blau, sempre que estigui inclòs

Enllaç d'un full d'estil extern

El mètode final a cobrir és l’enllaç. Aquest és, amb diferència, l’enfocament més útil i que heu d’optar per la major part del temps. En lloc d 'incrustar regles CSS a estil directament al document, podeu moure-les a un fitxer separat.


Enganxeu aquest codi dins del fitxer etiquetes del fitxer HTML per enllaçar el full d'estil extern.

El poder de CSS

Amb el mètode vinculat, aprofitem un poder central de CSS: la separació de preocupacions. Tota la informació semàntica, què significa el contingut, es troba al document HTML. L'estil, com és, es troba en un fitxer separat, el full d'estil.

Aquests són alguns dels avantatges d’aquesta separació:

  • Podeu canviar un full d'estil només canviant la referència del fitxer. Fins i tot això pot passar de forma dinàmica. En un sol pas, podeu modificar l’aspecte i la sensació sencers d’una pàgina.
  • Moltes pàgines poden compartir els mateixos fulls d'estil que es requereixen. Si canvieu un sol fitxer, podeu actualitzar l’aspecte de tot un lloc web.
  • La divisió d'una pàgina en 'contingut' i 'estil' té avantatges tècnics. Els proxies i els navegadors poden emmagatzemar memòria cau de fitxers individuals per separat. Això significa que un lloc pot enviar la seva informació d'estil una vegada, en lloc d'incloure-la a cada pàgina.
  • Quan col·laboren, diferents equips poden treballar al màxim, creant i editant fitxers separats sense afectar-se els uns als altres.

Explicant la cascada

Heu après moltes coses sobre estils i fulls d’estil, però i la part en cascada de CSS?

La cascada és el que decideix quins estils utilitzar quan hi ha diversos fulls d'estil. Heu vist com un autor pot especificar estils per al seu contingut. Però una altra característica de CSS és que alguns lectors i fabricants de navegadors també en diuen en la matèria.

És possible que ja us hàgiu preguntat sobre els estils predeterminats. Per exemple, com funciona un fitxer H1 L'element sembla gran i en negreta, fins i tot sense fulls d'estil d'autor? Això és gràcies a un conjunt de regles especials que conformen el full d'estil de l'agent d'usuari. Aquestes regles són aplicades inicialment pel navegador web a totes les pàgines que visiteu.

La cascada especifica que s'aplica un full d'estil d'autor després dels estils agent-usuari. Si el nostre navegador diu que els encapçalaments són en negreta, però l’autor de la pàgina declara que els encapçalaments d’aquesta pàgina són poc clars, acabaran clar.

Hi ha una altra font de full d’estil que lliura cert control al lector. Qualsevol usuari web pot, en teoria, mantenir un full d’estil d’usuari amb regles personalitzades. Aquests se situen al mig: les regles de l'usuari anul·laran la configuració predeterminada del navegador, però seran anul·lades per ells mateixos pels estils d'autor. Malauradament, el suport per als fulls d’estil de l’usuari mai s’ha estès.

Orientació a diferents suports

Podeu utilitzar Fulls d'estil en diferents contextos, més enllà de la pantalla. El mitjana atribut de la enllaç L'element defineix a quins tipus de suports s'aplica el full d'estil. Per exemple, podeu definir un fitxer full d'estil per imprimir utilitzant el marcatge com el següent:

Podeu reunir estils comuns en un full d'estil global i estils específics de suports en fitxers separats. Fins i tot hi ha tipus de suports per atendre presentacions sonores o en braille del vostre contingut. CSS és una eina vital per millorar l'accessibilitat.

Relacionat: Com navegar pel web si sou cecs o amb discapacitat visual

fer un arrencada usb windows 7

Llocs com Wikipedia fan servir CSS per controlar el seu estil d’impressió, amagar elements no desitjats i simplificar el disseny.

CSS fa que l'HTML tingui un bon aspecte

Els fulls d'estil en cascada cobreixen molt: la cascada, l'herència, els selectors, les fonts, els mitjans de comunicació, etc. Però el seu poder permet la xarxa moderna. Es tracta d’un mitjà que proporciona funcions de reutilització, flexibilitat i accessibilitat integrades.

Per veure tota la potència de CSS i quant pot oferir, consulteu el nostre full de trucs que cobreix totes les propietats essencials de CSS3.

Compartir Compartir Tweet Correu electrònic Full de trucs de les propietats essencials de CSS3

Domina la sintaxi CSS essencial amb el nostre full de trucs de propietats CSS3.

Llegiu a continuació Temes relacionats
  • Programació
  • Desenvolupament web
  • CSS
Sobre l'autor Bobby Jack(58 articles publicats)

Bobby és un entusiasta de la tecnologia que va treballar com a desenvolupador de programari durant gairebé dues dècades. És un apassionat dels jocs, treballa com a editor de ressenyes a Switch Player Magazine i està immers en tots els aspectes de la publicació en línia i el desenvolupament web.

Més de Bobby Jack

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us