Un box model CSS è la tipica struttura che prevede quattro elementi principali: intestazione (header), main (contenuto principale), aside (barra laterale) e piè di pagina (footer).
Fonti
Esperienza personale e W3CSchool.
Struttura HTML
Per creare la box model CSS creare un file con estensione .html, poi inserire il file CSS all’interno dei tag <head></head> con il tag:
<link href=”nomefile.css” rel=”stylesheet”>
Mentre, all’interno di <body></body> vanno dichiarati i quattro tag.
Come ogni tag va aperto e chiuso.
Per l’intestazione usare <header></header>.
Per il contenuto utilizzare <main></main>.
Per la barra laterale, detta anche siderbar, <aside></aside>.
Per le piè di pagina, infine, <footer></footer>.
Inoltre, può risultare particolarmente utile, inserire una barra dei menu sotto l’header. Lo si può fare definendo una classe che dovrà esser richiamata dal css apponendo il punto.
<html>
<head>
<title>Titolo della Pagina</title>
<link href="nomefile.css" rel="stylesheet">
</head>
<body>
<header>...</header>
<div class="box"</div>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
</body>
</html>Struttura CSS
CSS non è CASE-SENSITIVE non fa differenza tra maiuscolo e minuscolo. Inoltre, il posizionamento delle caratteristiche e degli elementi è libero.
CSS non è un linguaggio di programmazione ma come l’HTML è un linguaggio di makeup.
In un file CSS è possibile definire la grafica di qualsiasi tag HTML, racchiudendo il tutto tra parentesi graffe {}.
I principali tag sono:
- <p> in css diventa p{}
- <table><th><tr><td> table{}
- <ol><li> ol{}
- <ul><li> ul{}
- <h1>…<h6> h1{}
- <a> a{}
- <img> img{}
Seppur non obbligatorio è importante definire la struttura generale del documento tramite body{} qui si può impostare: il colore di sfondo (background-color), il colore del testo (color), il tipo e la dimensione del carattere (font-family e font-size) nonché margini esterni (margin) e margini interni (padding) oltre a definire un bordo (border-style e border-size). Le dimensioni si possono esprimere in varie unità come pt o px.
body
{
background-color:silver;
color:white;
font-family:Courier;
font-size:10px;
}La configurazione dei tag che costituiscono la box model deve tenere conto della larghezza(width) e dell’altezza (heigth).
La larghezza è data dalla somma di tutti i suoi elementi dichiarati:
width + padding left + padding right + margin left + margin right + border-size
L’altezza è anch’essa data dagli elementi ma posti verticalmente:
height + padding top + padding bottom + margin left + margin right + border size
Nel caso in cui non venga impostata né la larghezza né l’altezza essa verrà definita automaticamente.
I valori di width ed height possono essere ridimensionati percentualmente.
Sia <header> sia <footer> potrebbero mantenere le stesse caratteristiche.
Le caratteristiche degli elementi possono essere dichiarati anche in una sola riga, così margin diventa margin: 10px 10px 10px 0px oppure border diventa -> border: 3px solid gold.
body
{
background-color:silver;
color:black;
font-family:Courier;
font-size:14px;
}
header
{background-color:white;
color:black;
margin-left:10px;
margin-right:10px;
margin-top:50px;
padding-left:20px;
padding-right:10px;
padding-top:20px;
padding-bottom:20px;
border-style:solid;
border-size:3px;
border-color:gold;
width:1250px;
}
.menu
{background-color:black;
color:white;
margin-left:10px;
margin-right:10px;
padding-left:20px;
padding-right:10px;
padding-top:20px;
border-style:solid;
border-size:3px;
border-color:gold;
width:1250px;
font-size:15px;
padding-bottom:20px;
}
main {
background-color:white;
color:black;
margin-left:10px;
padding-top:20px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
border-style:solid;
border-size:3px;
border-color:gold;
display: inline-block;
width:69.5%;
height:1000px;
float:left;
}
aside {
background-color:white;
color:black;
margin-right:10px;
padding-left:20px;
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
border-style:solid;
border-size:3px;
border-color:gold;
display: inline-block;
width:20%;
height:1000px;
}
footer
{background-color:white;
color:black;
margin-bottom:50px;
margin-left:10px;
margin-right:10px;
padding-left:20px;
padding-right:10px;
border-style:solid;
border-size:3px;
border-color:gold;
width:1250px;
padding-top:20px;
padding-bottom:20px;
}
sblocare bancoposta come posso fare
Io non sono riuscito mai ad associarlo tramite le sue app ma comunque non ho capito se l'ora si può…
Rivolgetevi alla Redazione di Fuori dal Coro visto che oramai si occupano di qualsiasi problema..
Tra le chat nominate salvo solo puntochat che è inattiva da anni...
Il tablet è lentissimo. Si può mettere una versione di android più recente e magari leggera? E se invece ci…