Css 3 Partie 1

Création de
site web
CSS3
Cascading Style Sheets
Les feuilles de styles
Partie 1
Introduction:
L’un des objectifs majeurs des feuilles de style CSS est de séparer la
structure d’un document de ses styles de présentation
Une feuille de style CSS externe doit avoir l'extension .css

C'est dans la feuille de style CSS que l'on va déclarer toute la mise en forme
des pages : le positionnement des éléments, l'image de fond, les polices de
caractère, les couleurs, etc.
Celle-ci sera liée à chaque page html. Ainsi, lorsqu'on en modifiera un élément,
cela se répercutera immédiatement sur toutes les pages html.
Avantage :
 Obtenir une présentation homogène sur tout un site en faisant appel sur
toutes les pages à une même définition de style

 Simplifie le code.
 Une maintenance de site beaucoup plus facile.
 Meilleure accessibilité : permet de produire des pages web respectueuses

des normes du W3C, les pages seront donc accessibles pour la majorité des
navigateurs (ordinateurs, tablettes, smartphones, smart TV, …).
Application n°1:
1- Lancer le logiciel BlueGriffon
2- Créer une nouvelle page ‘’page1.html’’ puis saisir le code suivant :
<! DOCTYPE html>

<HTML>
<HEAD>
<meta charset="utf-8" />
<TITLE>application 1 css</TITLE>
<link rel="stylesheet" href="f1.css" />
</head>
<body>
<h1>Un titre de niveau 1 (en bleu)</h1>
<p>Un paragraphe (en rouge)</p>
</body>
</html>
3- Créer une nouvelle page ‘’f1.css’’ puis saisir le code suivant :
4- Ajouter les lignes suivantes au code :
Syntaxe:
Exemple:
Schématiquement, une feuille de style CSS
ressemble donc à cela :
Quelques propriétés CSS
La propriété font:
Les attributs des polices sont :
font-family : Arial, Times, Verdana, serif, ... Il est possible de positionner plusieurs
polices.
font-style : normal, italic, oblique
font-weight : lighter, normal, bold, bolder ou encore valeur numérique de dimension

La propriété font:
font-size : small, medium, large, x-large ou encore valeur numérique de dimension
font-variant : small-caps, normal
font : permet d'agréger l'ensemble des attributs en une seule déclaration.
Exemple :
p{
font: Verdana, Arial, bold italic 8px;
}
La propriété background (arrière-plan):
Couleur de fond
background-color: pink;
Image de fond
background-image: url(http://lorempixel.com/400/200/);
position de fond
background-position: 30px 30px;
Pour simplifier le code pour ces propriétés, nous pouvons utiliser

ces attributs sont combinés dans la même propriété.
Exemple:
background:#ffffff url('img_tree.png') no-repeat right top;

La propriété text-align:
La propriété border:
Elle permet de définir les propriétés liées à la bordure
Exemple:
/* largeur | style | couleur */

border: medium dashed green;
La propriété border-width
La propriété border-style:
La propriété color:
Quelques propriétés CSS:
Application n°2:
2- Créer une nouvelle page ‘’page2.html’’ puis saisir le code suivant :
<! DOCTYPE html>
<HTML>
<HEAD>
<meta charset="utf-8" />
<TITLE>application css</TITLE>
<link rel="stylesheet" href="f2.css" />
</head>
<body>
<p>CSS 3 : c'est la dernière version, qui apporte des fonctionnalités
particulièrement attendues <br>comme les bordures arrondies, les dégradés, les
ombres, etc.
</p>
</body>
</html>
-3- Créer le fichier f2.css et ajouter les propriétés adéquates pour arriver au résultat suivant:
Correction appl2:
Application n°3:
2- Créer une nouvelle page ‘’page3.html’’ puis saisir le contenu suivant :
3- Changer la couleur du texte de tous les paragraphes

4- Changer la couleur de fond de tous les titres de niveau 2
Application n°3:
Solution (code la page page3,html)
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title></title>
</head>
<body>
<article>
<h1>Mon article</h1>
<section>
<h2>Première section</h2>
<p>Premier paragraphe</p>
</section>
<section>
<h2>Deuxième section</h2>
<p>Deuxième paragraphe</p>
<p>Troisième paragraphe</p>
</section>
</article>
</body>
</html>
Application n°4:
2- Créer une nouvelle page ‘’page4.html’’ puis saisir le tableau suivant :
3-Créer la page ‘’p4.css’’ pour mettre en forme le tableau

Application n°4 (solution CSS):
La page ‘’p4.css’’ contient le code suivant:
table {
border:2px solid black;
margin:auto;
}
td, tr{
border:1px solid #f02485;
text-align:center;
width:150px;
height:50px;
vertical-align:middle;
text-align:center;}

Css 3 Partie 1

Transféré par

Droits d'auteur :

Formats disponibles

Css 3 Partie 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Css 3 Partie 1

Transféré par

Droits d'auteur :

Formats disponibles

Création de

Une feuille de style CSS externe doit avoir l'extension .css

 Une maintenance de site beaucoup plus facile.

 Meilleure accessibilité : permet de produire des pages web respectueuses

<! DOCTYPE html>

Les attributs des polices sont :

font-style : normal, italic, oblique

font-weight : lighter, normal, bold, bolder ou encore valeur numérique de dimension

font-variant : small-caps, normal

font : permet d'agréger l'ensemble des attributs en une seule déclaration.

Pour simplifier le code pour ces propriétés, nous pouvons utiliser

background:#ffffff url('img_tree.png') no-repeat right top;

Elle permet de définir les propriétés liées à la bordure

/* largeur | style | couleur */

3- Changer la couleur du texte de tous les paragraphes

3-Créer la page ‘’p4.css’’ pour mettre en forme le tableau

Vous aimerez peut-être aussi