Construire un site web à partir de la deuxième partie de zéro. Ajout de style (CSS).
Qu'allons nous faire
Dans ce chapitre, nous allons:
- Créer une feuille de style CSS pour le site
- Ajouter un lien vers la feuille de style dans nos pages
Créer une feuille de style CSS
Dans le dossier Demoweb, créez un nouveau fichier nommé site.css.
Placez le code suivant dans le fichier 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;
}Le fichier CSS ci-dessus définit les styles à utiliser pour:
- L'élément de corps de HTML <corps>
- L'élément HTML avec id = "main"
- L'élément de titre HTML <h1>
Modifier la page d'accueil
Dans le dossier Demoweb, modifiez le fichier index.html.
Modifiez le contenu du fichier à ce qui suit:
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>
Essayez - le vous - même »La page d'accueil ci-dessus, est une copie de la page d'accueil du chapitre précédent.
Nous avons ajouté un lien vers une feuille de style, et un <div id = "main"> pour définir une "section" dans le contenu.
Les changements sont marqués en rouge.
Modifier la page A propos
Pour terminer votre travail, faire les mêmes changements dans about.html.
1. Ajouter un lien vers la feuille de style.
2. Ajoutez un <div id = "main"> élément.
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>
Essayez - le vous - même »Lire la suite
En savoir plus sur CSS dans notre Tutoriel CSS .