TronWeb

Il Web Developing a portata di studente

CSS3

Benvenuto nella pagina del corso di CSS3. Qui troverai gli argomenti svolti a lezione. Cerca quello che ti interessa qui sotto:

Padding in CSS

div {
  padding-top: 50px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 40px;
}

Le padding sono proprietà CSS che vengono utilizzate per generare spazio attorno al contenuto di un elemento, all’interno di qualsiasi bordo definito. Con  CSS, hai il pieno controllo del padding. Ci sono proprietà per l’impostazione del padding per ciascun lato di un elemento (in alto = “top”, a destra = “right”, in basso = “bottom” e a sinistra = “left”).

Margin in CSS

p {
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 50px;
  margin-bottom: 30px;
}

Le margin sono proprietà CSS che vengono utilizzate per creare lo spazio attorno agli elementi, al di fuori dei confini definiti. Con CSS, hai il pieno controllo sui margini. Ci sono proprietà per l’impostazione del margine per ciascun lato di un elemento (in alto = “top“, a destra = “right“, in basso = “bottom” e a sinistra = “left“).

Bordi in CSS

p {
  border-style: solid;
  border-width: 5px;
  border-color: black;
}

h3 {
  border-top-style: dotted;
}

h5 {
  border-style: solid;
  border-radius: 5px;
}

Le border sono proprietà CSS che consentono di specificare lo stile, la larghezza e il colore del bordo di un elemento. Questo grazie a “border-style“, “border-width“, “border-color“.  Possiamo anche definire queste caratteristiche a tratti “border-top-style“. Infine, abbiamo anche la possibilità di conferire rotondità agli angoli dei bordi “border-radius“.

Lo sfondo in CSS

body {
  background-image: url("NomeFile.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

La proprietà background-image è una funzione che permette di impostare come sfondo, una immagine che abbiamo scaricato da Internet. Quest’ultima, se troppo piccola, viene ripetuta fino a riempire tutto lo schermo. Quindi, se non si vuole questa caratteristica, possiamo inserire la linea “background-repeat: no-repeat”. Inoltre, possiamo definirne anche la posizione con “background-position: center”, possiamo anche immettere “right”, “left”, “up”, “bottom”.

Il font-family

#vetrina{
  font-family: "Arial";
}
#vetrina.prodotto1{
  background-image: url("./p1.jpg");
}

 

I font installati sui PC degli utenti non sono gli stessi per ognuno. Il set di caratteri a disposizione dipende da molte variabili, come ad esempio il sistema operativo (Windows, Mac, Unix, …), eventuali software installati (Office e pacchetto Adobe su tutti) e caratteri installati manualmente.

Quando bisogna scegliere il carattere per alcune pagine, quindi, bisogna tener conto che non tutti gli utenti avranno installato un certo font sul proprio PC. La prima soluzione a questo problema consiste nell’utilizzare i cosiddetti caratteri “web-safe” (Verdana, Georgia, Times New Roman, etc.), ovvero un set di caratteri compatibili con tutti i sistemi operativi. Questo soluzione già garantisce buona compatibilità della pagina con la maggior parte dei sistemi.

Per garantire, invece, alternative valide a tutti i sistemi in maniera da rendere compatibile la pagina in qualunque situazione, è consigliato fare uso della tecnica denominata font-stack.

Come ben sappiamo, la proprietà font-family del CSS consente di inserire più di un solo font al suo interno, come nel seguente esempio: