Tél.: 05 32 92 09 16 Email: contact@sagexa.com

Tutoriel


Taux global de satisfaction Client : 4.8 sur 5 pour 457 formations

Accueil / Tutoriels / Web / Client

C.S.S.::Tutoriel CSS Accéléré - 2ème partie

Cascading Style Sheets

Par • • programmation client

Tutoriel CSS Accéléré - 2ème partie

Dans cette leçon vous apprendrez...
  1. à utiliser des feuilles de styles embarquées
  2. à utiliser des feuilles de styles externes
  3. à utiliser des styles en ligne.

La Cascade

Les règles de style peuvent être définies à 3 endroits différents :

  1. dans une feuille de style embarquée.
  2. dans une feuille de style externe (ou liée ou importée).
  3. en ligne dans un élément.

Feuilles de style Embarquées

Les feuilles de style embarquées (Embedded style sheets) sont définies dans l'élément HEAD / STYLE de la page HTML. Le code suivant montre une page avec une css embarquée.

Exemple de Code: /Demos/CssEmbarquee.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Embarquée</title>
<style type="text/css">
 .attention {color:#ff0000}
 h1.attention {text-decoration:underline}
 p.attention {font-weight:bold}
</style>
</head>
<body>
<h1 class="attention">Attention</h1>
<p class="attention">Ceci est un message de Xavier</p>
</body>
</html>
Explication du Code

Comme vous pouvez le voir, la balise <style> possède un attribut type qui indique qu'il s'agit d'une feuille de style. Cette page sera présentée comme suit :

Exercice: Créer une CSS embarquée

Durée: 20 à 30 minutes.

Dans cet exercice, vous allez ajouter une CSS embarquée au fichier www.sagexa.com/tutoriels/css/ressources/CSS_embarquee_01.html. Vous ajouterez les règles CSS spécifiées au fichier html. Ne vous préoccupez pas de la syntaxe des règles CSS à ce niveau, le but étant uniquement de vous familiariser avec la création d'une CSS.

  1. Ouvrez www.sagexa.com/tutoriels/css/ressources/CSS_embarquee_01.html dans un navigateur, la page doit apparaître comme suit :.
  2. Ouvrez www.sagexa.com/tutoriels/css/ressources/CSS_embarquee_01.html dans un éditeur.
  3. Ajoutez un bloc STYLE dans le HEAD de la page. N'omettez pas l'attribut TYPE.
  4. Ajoutez une règle pour le body, avec les paires propriétés-valeurs suivantes :
    • background-image:url('Images/bas_fond.gif');
    • background-repeat:repeat-x;
    • background-position:bottom;
    • margin-left:50%;
    • margin-top:20px;
  5. Ajoutez une règle pour les div, avec les paires propriétés-valeurs suivantes :
    • padding:10px;
    • border:10px groove gold;
    • width:300px;
    • background-image:url('Images/bdp_fond.gif');
    • margin-left:-170px;
  6. Ajoutez une règle pour h1 , avec les paires propriétés-valeurs suivantes :
    • text-align:center;
    • font-size: 12pt;
    • color:#000099;
    • margin-bottom:5px;
    • text-decoration:underline;
  7. Ajoutez une règle pour table , avec les paires propriétés-valeurs suivantes :
    • margin:5px;
    • width:290px;
  8. Ajoutez une règle pour th , avec les paires propriétés-valeurs suivantes :
    • margin:5px;
  9. Ajoutez une règle pour td , avec les paires propriétés-valeurs suivantes :
    • padding-left:8px;
    • padding-right:8px;
    • border:1px solid #990000;
    • background-color:#ffffcc;
  10. Assignez un id "trEnTete" à la première ligne du tableau et créez la règle correspondante avec :
    • text-decoration:underline;
    • color:#990000;
  11. Assignez une classe"cellMilieu" aux cellules du centre du tableau, et créez la règle suivante pour cette classe:
    • text-align:center;
  12. Rouvrez www.sagexa.com/tutoriels/css/ressources/CSS_embarquee_01.html dans un navigateur.
    La page doit avoir cet aspect :
Où est la solution?

Feuille de Style Externe

Une feuille de styles externe est créée dans un documents séparé, portant l'extension ".css". Ce document ne contient que des règles CSS, aucune balise html.
www.sagexa.com/tutoriels/css/Demo/style01.css est un exemple de css externe.

Exemple de Code: /Demos/style01.css

.attention {color:#ff0000}
h1.attention {text-decoration:underline}
p.attention {font-weight:bold}
Explication du Code

Le fichier css ci-dessus peut être utilisé par plusieurs fichiers html différents. La balise <link>, qui se place dans le head de la page html, définit le lien vers la feuille de style externe.

Exemple de Code: /Demos/CssExterne_01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Feuille de Style Externe</title>
<link href="style01.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="attention">Attention</h1>
<p class="attention">Xavier Braive vous prévient</p>
</body>
</html>
Attributs de <link>
Attribut Description
href adresse de la css
rel doit valoir "stylesheet" pour lier une css
type doit valoir "text/css" pour lier une css

Il n'y a pas de limite au nombre de feuilles de styles que l'on peut lier à une page html (mais attention au nombre de requêtes générées sur le serveur).
D'autre part, les css externes peuvent être combinées avec la css embarquée.

Exo: Créer une feuille de style CSS externe

Durée: 5 à 10 minutes.

Dans cet exercice, vous allez extraire la css embarquée que vous avez créée dans l'exercice précédent, et en faire une css externe. Il faudra également adapter le fichier html pour le lier à cette nouvelle css externe.

  1. Ouvrez www.sagexa.com/tutoriels/css/ressources/CSS_embarquee_02.html dans votre éditeur et sauvez-le sous CSS_externe_01.html.
  2. Créez un nouveau fichier style02.css dans un nouveau sous-répertoire styles/.
  3. Déplacez toutes les règles de CSS_externe_01.html dans style02.css.
  4. Dans CSS_externe_01.html, supprimer les balises style et ajouter une balise link qui pointe vers style/style02.css
  5. Ouvrez CSS_externe_01.html dans le navigateur . La page doit être exactement la même que CSS_embarquee_01.html.
Où est la solution?

Styles en Ligne

Les styles en ligne sont créés en ajoutant un attribut STYLE à une balise. La plupart des balises supportent l'attribut STYLE.
La valeur de l'attribut STYLE est une liste de paires propriété:valeur, séparées par poit-virgule (;).
Le code suivant montre un exemple de style en ligne:

Exemple de Code: /Demos/styleEnLigne01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Styles en ligne</title>
</head>
<body>
<p style="color:blue; font-weight:bold; font-size:12pt">Auteurs</p>
<ul style="margin-top:-20px; font-size:10pt">
 <li style="list-style-type:square">Leloup</li>
 <li style="list-style-type:disc">Tran</li>
 <li style="list-style-type:circle">Yann / Conrad</li></ul>
</body>
</html>
Explication du Code

Cette page donnera .

Exercice: Ajouter des styles en ligne

Durée: 10 à 20 minutes.

Dans cet exercice, vous ajouterez quelques styles en ligne à la dernière page sur laquelle vous avez travaillé.

  1. Ouvrez CSS_externe_01.html et sauvez-la sous stylesEnLigne_02.html.
  2. Ajoutez un style en ligne à la cellule contenant "Dupuis", avec les valeurs suivantes :
    • font-style: italic;
    • color: #ff00ff;
  3. Ajoutez un style en ligne à la cellule contenant "Tucson TMC ", avec les valeurs suivantes :
    • font-style: italic;
    • color: #00ff33;
  4. Ajoutez un style en ligne à la cellule contenant "Glenat", avec les valeurs suivantes :
    • font-style: italic;
    • color: #003300;
  5. Ouvrez stylesEnLigne_02.html dans le navigateur. La page devrait apparaître comme suit:

SAGEXA

La bienveillance numérique à vos côtés,

en Nouvelle-Aquitaine et partout ailleurs.

information actualisée le 21/11/2024

Nous contacter

Adresse: St Georges des Agoûts

Téléphone: Tél.: 05 32 92 09 16

Fax: 00 71 50 20 17

Email: contact@sagexa.com

Clients & Témoignages

avatar
"Le stage s'est très bien déroulé, dans une bonne ambiance, et bien mené par le formateur."
E.P., DRASS Caen
avatar
"Excellente formation sur la découverte de PHP/MySql"
R.A., Cetelem
avatar
"Bon prof, bonne formation"
C.P., Crédit Agricole
avatar
"Formation très efficace"
M.D., Dassault Systèmes
avatar
"Très condensé avec des exercices pertinents"
I.B., Orange
avatar
"Une très bonne approche pour évaluer la potentialité de PHP."
S.C., La Documentation Française
avatar
"Bonnes bases pour retravailler seul et approfondir."
Y.C., DRASS Caen
avatar
"Formation très complète, et de nombreux exercices à difficultés dosées ce qui permet de bien assimiler."
H.S., DRASS Caen
avatar
"Très bien !"
B.A., ALCATEL
avatar
"Un peu court pour tout voir, mais la doc permet de compléter."
C.C., Philips
avatar
"Très bien. Correspond exactement à ce que je suis venu chercher."
B.R., Etat-Major des Armées
avatar
"Il y a beaucoup de manipulations. Bon cours."
L.H., Etat-Major des Armées
avatar
"Rythme intense. Méthode efficace."
F.C., France Télécom
avatar
"Formateur très disponible à toutes les questions et difficultés rencontrées au cours des exercices."
C.J-P., Préfecture de Police
avatar
"Très dense et très riche, mais trop court !"
C.P., Ministère de l'Intérieur
avatar
"Cours très complet qui permet de voir énormément de points.Les exercices sont pertinents et permettent de voir des cas concrets.Beaucoup d’infos à absorber en 4 jours qui nécessitent de beaucoup pratiquer pour bien assimiler.La doc fournie est complète et sera très utile."
L.S., Camaieu
avatar
"Contenu approprié à mes besoins"
V.M., Normand Info
avatar
"Le contenu de la formation est à la hauteur de mes attentes, très bon sur la pédagogie."
D.M., IHEDN
avatar
"Très bonne formation, assez approfondie pour de la "prise en main"."
P.J., Safran Aircraft Engines
avatar
"Cette formation est très bien conçue avec une très bonne pédagogie du formateur."
M.L.J., RATP
avatar
"Formation correspondant à mes attentes"
G.L.G., CRAMIF
avatar
"Très satisfait - Formateur maitrisant parfaitement le sujet."
B.A., EDF
avatar
"Très satisfait - Le formateur était pédagogue, patient et expérimenté. De plus, le groupe comprenait peu de personnes. Je suis donc très satisfait de cette formation."
B.F., Alten SIR
avatar
"Très satisfait - Je suis particulièrement satisfait de la formation surtout par la disponibilité du formateur et par le contenu du programme."
E.Y.Z., CGI
avatar
"Très satisfait - Super formation avec un super formateur !"
J.B., Devoteam
avatar
"Très satisfaite - vraiment ravie de cette formation, j’ai pu mieux appréhender l’orientation objet. Xavier a toujours su répondre à mes questions et remarques!"
C.A., BRED Banque Populaire
avatar
"Très satisfaite - Approche pas à pas avec une alternance pratique et théorie fortement appréciée"
F.M., Invensense Movea France
avatar
"Très satisfait - Explications toujours pertinentes et très claires. Formateur ayant une approche très pédagogique et très compétent sur le sujet"
L.S., Collins Aerospace
avatar
"Très satisfait - Très bon formateur, très compétent et expliquant de manière graduelle les concepts mis en jeu."
V.N., SNAO

© Sagexa.com