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;
}
Ho comprato questo smartwatch lo connesso ma non mi arrivano chiamate e messaggi all' orologio.qualcuno mi può dire qualcosa grazie
windtre?? windtre ha cambiato apn, che adesso è internet.it il comando è (usa la tua password al posto di 123456):…
Non esiste un manuale in rete. Per installare l'app può far riferimento a ciò che abbiamo descritto e testato correttamente.
Chiedo dove posso trovare il manuale AKAI per orologio K_FIT 300, per installare il software tra telefono e orologio Ringrazio…
non riesco a fare niente mi dice che è ofline. mi date qualche dritta, grazie