Html / Css

Elenco guide gratuite da noi selezionate nella rete (contenuto guide in italiano)

 

EJ Media - CSS Layout Tutorial

 

inserita 21/04/2016 (Stati Uniti)
Playlist Youtube 2014 - 2016
guide analizzate 7 su 24

Canale Youtube || Vai alle guide

 

Principianti | Livello intermedio | Livello avanzato | Esperti



CSS Layout Tutorial - 01 - Introduction

Contenuto guida:

  • prima di seguire questa playlist dovete vedere quelle su Html e Css per beginners
  • cosa vedreme nel corso (presentazione corso)

CSS Layout Tutorial - 02 - Styling the body

Contenuto guida:

  • crea una cartella e ci salva il file .html e il file .css
  • nel file html si trova il collegamento con il file css
  • prende in considerazione il tag body che comprende tutta la pagina web (tutti gli altri tag sono figli "child" del body)
  • su body imposta background-color - colore di sfondo ... che interessera, quindi, tutta la pagina
  • se inseriamo una nuova sezione interna al body senza impostare un suo colore di sfondo .... questo verrà ereditato dal body
  • poi sempre su body mette i margini a zero per sovrascrivere i margini che i browsers mettono di default
  • ora imposta font-family (famiglia caratteri per tutto il testo) - anche il font-family sarà ereditato da tutti i "figli" (salvo modifiche specifiche ad uno o più figli)

CSS Layout Tutorial - 03 - Adding header and navigation section

Contenuto guida: 

  • continua ad usare il codice della precedente guida ed aggiunge un "div" per creare una sezione della pagina
  • usa un "id" collegato al "div" in quanto è una sezione unica (trattasi dell'intestazione della pagina)
  • crea un altro "div" per la sezione della navigazione
  • ora i Css del "div" intestazione .... margini a 10 e colore sfondo diverso, poi altezza "height" a 90px
  • compare un rettangolo di colore diverso con un margine intorno (i margini sono trasparenti quindi si vede tutto intorno il colore del "body")
  • adesso css per il "div" della navigazione - tutto come l'intestazione ma alta 35px
  • compare altro rettangolo sotto al precedente (in base alla posizione del "div" nel file Html)
  • aggiunge la proprietà "border-radius" al rettangolo dell'intestazione e anche a quello del nav (arrotonda gli angoli)
  • [ndr. ecco un codice simile da copiare]
#intestazione {background-color: #930;
margin:15px;
height:90px;
border-radius: 20px; }
#menu {background-color: #C90;
margin:10px;
height:35px;
border-radius: 20px; }

 


CSS Layout Tutorial - 04 - Adding the main content section

Contenuto guida:

  • continua sulla stessa pagina... crea la classe main per il contenuto principale (collegata a stili per un div)
  • imposta sfondo e margini e padding
  • dimensioni font al 110% rispetto alla dimensione impostata sopra nel body
  • [ndr. ecco un codice simile]
#principale {background-color: #C5C589;
margin:10px;
padding:20px;
border-radius: 20px;
font-size:110% }
  • qui non mette l'altezza cosi si adatta al contenuto
  • poi aggiunge contenuti testuali (H1 + P) al div
  • adesso altri stili per H1 (dimensione e colore)

CSS Layout Tutorial - 05 - Adding the sidebar

Contenuto guida:

  • aggiungiamo una barra laterale
  • aggiunge un div con classe sotto al div principale
  • stili simili a sopra ma con float right per spostare la barra a destra ed una larghezza necessaria (width)
  • ora però la barra va si a destra ma sotto a tutto... per risolvere sposta il div della barra sopra al principale (su Html) ma cosi si fonde 
  • allora lo rimette sotto e gioca con i margini nel div principale poi lo risposta ancora sopra [yell]
  • adesso il principale e la barra non sono allineati... margin-top messo a zero per risolvere

CSS Layout Tutorial - 06 - Adding additional content panels

Contenuto guida:

  • inserisce una copia del div barra laterale subito sotto al primo il risultato è una sovrapposizione con il principale
  • per risolvere (farlo venire fuori sotto al primo) aggiunge sugli stili della barra un clear-right

CSS Layout Tutorial - 07 - Image sidebar

Contenuto guida:

  • ora ha un immagine e vuole piazzarla sempre di lato come fosse un banner pubblicitario
  • crea un div sotto le barre laterali con una classe
  • per la classe copia gli stili della barra e li adatta ad esempio togliendo il padding
  • [ndr. ecco un codice simile]
.immagine {background-color: #F9F;
margin-left:10px;
margin-bottom:10px;
margin-right:10px;
margin-top:0px;
padding:15px;
border-radius: 20px;
float:right;
width:260px;
clear:right; }

CSS Layout Tutorial - 08 - Add effects to the Image sidebar

Contenuto guida:

  • aggiunge qualche effetto speciale... opacità su immagine
opacity: 1.0;
  • aggiunge una pseudoclasse hover all'immagine.... quando passi sopra l'immagine..... opacità inferiore
  • poi anche transition: opacity 0.5s ease-in-out; per rallentare il passaggio da normale a opaco