Content Màrqueting

Què són els fulls d'estil en cascada (CSS)?

Llegiu a continuació per obtenir una explicació completa de com funcionen els fulls d'estil en cascada. Mostrem les nostres aplicacions a la part superior de la pàgina perquè sigui fàcil de trobar i utilitzar. Si esteu llegint aquest article per correu electrònic o feed, feu clic a comprimiu el vostre CSS.

A menys que estigueu desenvolupant llocs, és possible que no entengueu completament els fulls d'estil en cascada (CSS). CSS és un llenguatge de fulls d'estil utilitzat per descriure l'aparença i el format d'un document escrit HTML or XML. El CSS es pot utilitzar per especificar els estils de diversos elements com el tipus de lletra, el color, l'espaiat i el disseny. CSS us permet separar la presentació del vostre document HTML del seu contingut, facilitant el manteniment i l'actualització de l'estil visual del vostre lloc web.

Estructura del llenguatge CSS

El selector és l'element HTML que voleu estilitzar i el propietat i valor definiu els estils que voleu aplicar a aquest element:

selector {
  property: value;
}

Per exemple, el següent CSS ho farà tot <h1> els elements d'una pàgina tenen un color vermell i una mida de lletra de 32 píxels:

CSS

h1 {
  color: red;
  font-size: 32px;
}

sortida

Títol

També podeu especificar CSS per a un ID únic en un element:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

sortida

Retorn

O apliqueu una classe a diversos elements:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

sortida

Vull destacar una paraula a l'etiqueta span.

Podeu incloure CSS al vostre document HTML de tres maneres:

  1. CSS en línia, utilitzant el style atribut en un element HTML
  2. CSS intern, utilitzant a <style> element en el <head> del vostre document HTML
  3. CSS extern, utilitzant un fitxer .css independent enllaçat al vostre document HTML mitjançant l' <link> element en el <head> del vostre document HTML

CSS responsiu

CSS és increïblement flexible i es pot utilitzar per ajustar la visualització d'elements en funció de la resolució de la pantalla, de manera que podeu tenir el mateix HTML però crear-lo sensible a la resolució del dispositiu:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

Compressió CSS

Podeu veure a l'exemple anterior que hi ha un comentari, una consulta multimèdia i diversos estils que utilitzen espais i fluxos de línia per organitzar la vista del CSS. És una bona pràctica reduir o comprimir el vostre CSS al vostre lloc per reduir la mida dels fitxers i, posteriorment, el temps que triga a sol·licitar i representar el vostre estil. No és poca cosa... podeu veure un estalvi de més del 50% en alguns dels exemples anteriors.

Moltes configuracions de servidor ofereixen eines que comprimiran automàticament CSS sobre la marxa i emmagatzemaran a la memòria cau el fitxer minificat perquè no hagis de fer-ho manualment.

Què és SCSS?

CSS descarat (SCSS) és un preprocessador CSS que afegeix funcionalitats i sintaxis addicionals al llenguatge CSS. Amplia les capacitats de CSS permetent l'ús de variables, mixins, funcions i altres característiques que no estan disponibles en CSS estàndard.

Avantatges de SCSS

  • Mantenibilitat millorada: amb l'ús de variables, podeu emmagatzemar valors en un sol lloc i reutilitzar-los al llarg del vostre full d'estil, facilitant el manteniment i l'actualització dels vostres estils.
  • Millor organització: amb mixins, podeu agrupar i reutilitzar conjunts d'estils, fent que el vostre full d'estil sigui més organitzat i més fàcil de llegir.
  • Funcionalitat augmentada: SCSS inclou moltes característiques no disponibles en CSS estàndard, com ara funcions, estructures de control (per exemple, if/else) i operacions aritmètiques. Això permet un estil més dinàmic i expressiu.
  • Millor rendiment: els fitxers SCSS es compilen en CSS, cosa que pot millorar el rendiment reduint la quantitat de codi que ha de ser analitzat pel navegador.

Desavantatges de SCSS

  • Corba d'aprenentatge: SCSS té una sintaxi diferent de la CSS estàndard, i haureu d'aprendre aquesta nova sintaxi abans de poder utilitzar-la de manera eficaç.
  • Complexitat addicional: tot i que SCSS pot fer que el vostre full d'estil sigui més organitzat i més fàcil de mantenir, també pot introduir complexitat addicional a la vostra base de codi, especialment si no esteu familiaritzat amb les noves característiques i sintaxi.
  • Eines: per utilitzar SCSS, necessitareu un compilador per traduir el vostre codi SCSS a CSS. Això requereix una configuració i eines addicionals, que poden ser una barrera d'entrada per a alguns desenvolupadors.

En aquest exemple següent, el codi SCSS fa ús de variables per emmagatzemar valors ($primary-color i $font-size) que es poden reutilitzar a tot el full d'estil. El codi CSS que es genera a partir d'aquest codi SCSS és equivalent, però no inclou les variables. En canvi, els valors de les variables s'utilitzen directament al CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Una altra característica de SCSS que es demostra en aquest exemple són els estils imbricats. Al codi SCSS, el h1 els estils estan imbricats dins de body estils, cosa que no és possible en CSS estàndard. Quan es compila el codi SCSS, els estils imbricats s'amplien en estils separats al codi CSS.

En general, SCSS ofereix molts avantatges respecte a CSS estàndard, però és important tenir en compte els avantatges i triar l'eina adequada per al vostre projecte en funció de les vostres necessitats i limitacions.

Douglas Karr

Douglas Karr és CMO de OpenINSIGHTS i el fundador de la Martech Zone. Douglas ha ajudat a desenes d'empreses d'èxit de MarTech, ha ajudat en la diligència deguda de més de 5 mil milions de dòlars en adquisicions i inversions de Martech i continua ajudant les empreses a implementar i automatitzar les seves estratègies de vendes i màrqueting. Douglas és un expert i conferenciant de MarTech en transformació digital reconegut internacionalment. Douglas també és autor publicat d'una guia de Dummie i d'un llibre sobre lideratge empresarial.

Articles Relacionats

Torna al botó superior
a prop

Adblock detectat

Martech Zone és capaç de proporcionar-vos aquest contingut sense cap cost perquè monetitzem el nostre lloc mitjançant ingressos publicitaris, enllaços d'afiliats i patrocinis. Agrairem que elimineu el bloquejador d'anuncis mentre visualitzeu el nostre lloc.