Costruire un sito web da zero Parte II:. L'aggiunta di stile (CSS).
Cosa faremo
In questo capitolo:
- Creare un foglio di stile CSS per il sito
- Aggiungere un collegamento al foglio di stile nelle nostre pagine
Creare un foglio di stile CSS
Nella cartella demoweb, creare un nuovo file chiamato site.css.
Inserire il seguente codice all'interno del file CSS:
site.css
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #ffffff;
border-radius:
0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px
solid #cc9900;
color: #996600;
font-size: 30px;
}Il file CSS sopra definisce gli stili da utilizzare per:
- L'elemento del corpo HTML <body>
- L'elemento HTML con id = "principale"
- L'elemento di intestazione HTML <h1>
Modificare la pagina
Nella cartella demoweb, modificare il file index.html.
Modificare il contenuto del file al seguente:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients</h2>
<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and
Databases)</p>
</div>
</body>
</html>
Prova tu stesso "La home page di cui sopra, è una copia della home page del capitolo precedente.
Abbiamo aggiunto un collegamento a un foglio di stile, e un <div id = "principale"> elemento per definire una "sezione" nel contenuto.
Le modifiche sono contrassegnati in rosso.
Modificare la pagina About
Per completare il lavoro, fare le stesse modifiche in about.html.
1. Aggiungere un collegamento al foglio di stile.
2. Aggiungere un <id = "principale" div> elemento.
about.html
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>
</body>
</html>
Prova tu stesso "Leggi di più
Per saperne di più nel nostro CSS Tutorial CSS .