CSS, cosa sono, principali utilizzi ed esempi

Fabio Compagnoni
19-04-2020 20.00
74 visualizzazioni

Cosa sono i CSS

I css sono dei fogli di stile proprio come suggerisce il suo acronimo Cascading Style Sheet
I fogli di stile in una pagina web servono per definire le proprietà del punto di vista estetico della pagina.
Proprio come l'HTML non è un linguaggio di programmazione.
In una pagina i fogli di stile non sono indispensabili ma sono utili per rendere la pagina più attraente e accattivante, e poi se si tratta di un sito web, un sito carino è più visitato rispetto ad uno brutto.

Come si inseriscono i css in una pagina HTML

Iniziamo col dire che i CSS possono essere di tre tipi.

Come si definiscono e inseriscono

Linked

Un foglio di stile linked non è altro che una pagina con estensione ".css".
Come si aggiunge ad una pagina HTML?
Semplice
Basta scrivere una riga di codice nel "<head>" della pagina.
La riga da scrivere è la sequente:

<link rel="stylesheet" href="percorso relativo/assoluto del foglio di stile .css" type="text/css">

Inline

Uno stile inline è uno stile che viene dato direttamente a quell'elemento della pagina sulla stessa riga.

<div stile="qui all'interno vanno inserite le proprietà che vedremo dopo">....... < /div>

Interni

I CSS interni vengono inseriti tramite il tag <style>
Proprio per questo teoricamente si possono inserire in qualunque posizione della pagina, in particolare vanno inseriti dove vuoi che vengano caricati.
Esistono due posizioni strategiche per inserirle nel <head> e in fondo alla pagina fuori dal tag <body>.
Perchè in queste posizioni?
Nella prima posizione verranno caricati subito appena aperta la pagina, questo può incidere sulla velocità di caricamento della stessa, perchè verranno caricati gli stili ancora prima di aver caricato il "succo" della pagina.
Mentre nella seconda, quindi in fondo, vorrà dire che prima verrà caricata tutta la pagina poi alla fine gli stili, questo vuol dire che anche se la pagina non è completamente carica si inizierà già a vedere il contenuto della pagina però senza gli stili; questo può essere utile nel caso di connessioni lente o hardware del dispositivo non al massimo.

Utilizzi dei css, proprietà fondamentali/più utili

Prima di dirvi delle proprità e giusto sapere come si utilizzano le classi e gli identificatori
Le classi sono definite dal parametro class="nomeDellaClasse", come ho scritto non ci vanno gli spazi un po' come le variabili nei linguaggi di programmazione.
Essendo dei parametri vanno inserite all'interno dei tag, esempio:

<div class="sezAlDx">
Le classi come gli identificatori servono per i css, in particolare per definire quell'elemento in particolare
La differenza tra classi e id è che la prima serve per definire più elementi che devono avere dedgli stili simili o uguali, quindi può considerare più elementi, mentre id serve per identificare un elemento specifico.
<img src="//smanettone.eu/media/smanettone.webp" alt="smanettonelogo" id="immLogo">

Propietà più utili/fondamentali

    Gestione del font

  • font
    • Stile del font font-style:
      • normal
      • italic
      • oblique
    • Larghezza del font font-weight:
      • normal
      • bold
      • valore numerico
    • Dimensione del font font-size
      • Dimensione in px
      • Dimensione in pt (punti)
      • Dimensione in wh (dimensione relativa rispetto all'oggetto superiore es. p)
    • Font utilizzato (famiglia di font) font-family:
      • se definito con @font 'nome font'
      • nome font
      • sans serif (font standard senza grazie (decorazioni))
      • serif (font con grazie)

    Allineamento dell'elemento

  • float
    • left
    • right

    Margine estrerno dell'elemento

  • (margine generale) margin:
  • (margine a sinistra) margin-left:
  • (margine a destra) margin-right:
  • (margine in basso) margin-bottom:
  • (margine in alto) margin-top:
  • parametro dimensione:
    • Dimensione fissa
      • dimensione in px
    • Dimensione relativa
      • dimensione in %
      • dimensione in wh

    Margine interno all'elemento

  • padding
  • padding-left:
  • padding-right:
  • padding-bottom:
  • padding-top:
    • Le dimensioni si indicano come per il margine

    Colore del testo

  • color
    • Il colore si può definire
    • nome del colore (se quel colore specifico ha un nome html) es blue
    • con il valore esadecimale del colore es #ffffff (corrisponde al bianco) è la modalità più usata
    • valore rgb si esprime con la funzione rgb(red,green,blue) es rgb(255, 255, 255) bianco
    • valore rgba si esprime tramite la funzione rgba(red,green,blue,alpha) es rgba(255, 255, 255,255) bianco
    • valore hsl si esprime con la funzione hsl(hue, saturation, lightness) es hsl(0, 100%, 100%) bianco

    Dimensione di un elemento

  • LARGHEZZA width:
    • Larghezza fissa in px
    • Larghezza relativa in % o vh
    • Larghezza automatica se definita altezza con auto
  • ALTEZZA height:
    • Altezza fissa in px
    • Altezza relativa in % o vh
    • Altezza automatica se definita larghezza con auto

    Sfondo

  • background:
  • background-color:
    • colore hex,rgb,rgba,hsl,nome colore
  • background-image:
    • url("link web dell'immagine o link relativo dell'immagine locale")
    • si possono accodare più url così url("prova.png"),url("pippo.jpg") per dare più sfondi all'elemento
  • background-repeat:
    • no-repeat (per non ripetere lo sfondo)
    • repeat (per ripetere lo sfondo n volte fino a quando non riempie l'elemento
  • background-size:
    • cover per riempire l'elemento con quello sfondo
    • dimensione larghezza e altezza es 300px 100px oppure 20% 15%
  • background-position:
    • center (sfondo centrato)
    • left top
    • left center
    • left bottom
    • center top
    • center center
    • center bottom
    • dimensione con misure px o relative

    Posizione di un elemento

  • position:
    • relative (posizione relativa rispetto al foglio);
    • absolute (posizione assoluta rispetto alla pagina e rimane fissa durante lo scroll)
      • Bisogna definire la sua posizione con almeno due cordinate usando:
      • top: posizione in px o relativa %
      • bottom: posizione in px o relativa %
      • left: posizione in px o relativa %
      • right: posizione in px o relativa %
    • sticky (funziona come la posizione assoluta solo che non rimane fissa durante lo scroll e non è supportata da tutti i browser)
    • inherit (la posizione è data dall'emenento in cui è inserito
    • initial (la posizione è fissata a quella iniziale)

    Visibilità di un elemento

  • display:
    • inline gli elementi vengono disposti sulla stessa riga es <span>
    • block gli elementi vengono disposti come dei blocchi, quindi uno sotto l'altro
    • contents
    • flex
    • grid
    • inline-block
    • inline-flex
    • inline-grid
    • inline-table
    • list-item
    • run-in
    • table
    • table-caption
    • table-colum-group
    • table-header-group
    • table-footer-group
    • table-row-group
    • table-cell
    • table-column
    • table-row
    • none l'elemento verrà nascosto
    • initial
    • inherit
    • Per capire meglio come funzionano vi consiglio di vedere questi esempi

Esempi di pagine con CSS

Commenti