4-CSS Partie 1

420-B16-RO : Techniques de
développement d’applications
hypermédia I
4 – CSS partie 1
Professeur : Sylvain Labranche
slabranche@crosemont.qc.ca
1
2 Avant les CSS
 Lors de l’apparition du web, les principaux utilisateurs étaient
des scientifiques, des enseignants et des militaires plus intéressés
par le contenu des documents que par la présentation.
 Conséquence:
 Le HTML visait à définir le contenu d'un document
 Le HTML n'a jamais été destiné à contenir des éléments de mise en forme
d'un document.
 À partir du HTML 3.2, on a ajouté des balises de gestion de la
présentation comme et des attributs de couleur.
 Conséquences:
 Le développement des pages web est devenu long et compliqué: les
mêmes informations de mise en forme sont ajoutées à chaque page.
 Exemple: utilisation de la balise font pour définir une police de
caractère. Nous devions écrire ceci pour chaque balise !
 
Utilisation de la balise dépréciée font

Apparition des feuilles de
3 style
 Les feuilles de style sont apparues en 1996 pour améliorer le
développement des pages Web. Elles visent à séparer la
structure d’un document HTML et sa présentation:
 prises en charge à partir de HTML4
 la structure dans un fichier .html, et idéalement la présentation
dans un fichier de style .css
 Les feuilles de style sont un langage de présentation des
pages web. Elles portent sur
 l’alignement;
 le positionnement des éléments;
 les polices de caractères;
 les couleurs;
 les marges et espacements;
 les bordures;
 les images de fond, etc.;
 Le langage de feuilles de style le plus fréquemment employé

est le CSS (en anglais “Cascading Style Sheets”) développé
parW3C (le World Wide Web Consortium).
 Les CSS ne font pas partie du langage HTML; c'est un
développement à part.
4 3 façons d’écrire des styles
 Feuilles de styles internes

 dans l’entête, ou <head>, du document HTML
 Feuilles de style externes au document
HTML(recommandé)
 fichier à part .css
 Style en ligne
 à l’intérieur d’une balise HTML via un attribut style (la
moins recommandée)
5 Feuille de style interne
 Le code de la feuille de style CSS sera regroupé dans l'entête du
document, soit entre <head> et </head>.
Exemple: Fichier HTML style_interne.html
Définir la couleur de fond et d’écriture du corps de la page HTML. Le syle
s'applique à la balise body :
 La ligne 7: <style type="text/css">

 indique qu'il s'agit d'une feuille de style et qu'elle est écrite en CSS
("text/css")
 La ligne 8: body {.. } indique que le style s’applique à l'élément "body".
 Tous les éléments p, li, h1,h2… hériteront des propriétés de body
6 Feuille de style externe au
document HTML
 L’avantage de mettre la feuille de style dans un fichier à part est que plusieurs pages du site
peuvent partager le même style.
 L’extension du fichier est .css
 Attention! Dans un fichier CSS, on ne doit trouver que les sélecteurs CSS (pas de balises HTML).
Fichier CSS: styles\style_bleu_jaune.css
Ligne1: @charset "utf-8" :
 Indique le codage de caractères utilisé.
 Elle est importante si les sélecteurs CSS utilisent des noms d'éléments contenant des caractères non ASCII.
 Cette instruction doit être la toute première instruction et ne doit être incluse que dans les feuilles de style
externes.
Ligne 2: /* CSS Document */
 est un commentaire
7 Feuille de style externe au
document HTML (suite)
 Lier la feuille de style à un document HTML
 Fichier HTML appliquer_style_bleu_jaune.html.html
 Pour lier la feuille de style à un document HTML, on utilise l’élément link. Voici la syntaxe
 <link rel= "stylesheet" type= "text/css" href= "styles/SsyleBleuJaune.css" />
 link indique au navigateur que ce qui suit est un lien

 rel="stylesheet" précise que le lien est relatif à une feuille de style
 href="styles/StyleBleuJaune.css" précise la localisation du fichier de la feuille de style à
appliquer.
8 Quelle méthode choisir?
Style interne: le
style est répété
dans chaque
document html
Style externe: défini

une seule fois dans
un document CSS
http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mettre-en-place-le-css
9 Syntaxe d'une règle CSS
 Les feuilles de styles CSS sont constituées de règles.

 Une règle CSS comporte 3 éléments: sélecteur, propriété et
valeur
 référencent : http://www.w3schools.com/css/css_syntax.asp
 Sélecteur(selector): indique au navigateur un élément du code

HTML affecté par la règle.
 Propriété(property): représente l’aspect de l’affichage que l’on
souhaite changer.
 Valeur(value): représente la valeur de la propriété de style.
 Chaque instruction (couple propriété/valeur) doit se terminer par un
point virgule .
1
0 Héritage
 Une règle css appliquée à une balise est appliquée

aussi à toutes les balises enfants.
 Ainsi, si background-color: blue; est appliquée à body,
toutes les balises à l’intérieur de body auront aussi leur
fond bleu.
 Par contre, si une balise enfant donne une valeur
différente pour une propriété, c’est cette dernière qui
l’emporte.
 Ainsi, si background-color: blue; est appliquée à body et
background-color: red aux paragraphes, les
paragraphes seront en rouge.
 Une règle CSS appliqué inline l’emporte sur toutes les
autres.
11 Appliquer le même style à
un groupe de balises
Un groupe est composé de plusieurs balises
séparées par des virgules
Appliquer des styles différents à
12 une même balise
 Pour affecter des styles différents à une
même balise, on utilise:
 l'attribut class (avec le .)
Ou bien
 l'attribut id (avec le #)
Exemple:
 Certains paragraphes en gras, d'autres
en italiques
13
Sélecteur de classe
14
 L'attribut class peut être utilisé dans n'importe quelle balise.
Sa valeur sert à identifier la balise comme appartenant à
un groupe. Ce nom doit commencer par une lettre.
 Paragraphe en gras
 Pour définir le style d'une classe, on met un point devant le
nom:
 .gras{ font-weight:bold; }
 La syntaxe est:
 .nomDeClasse{ propriétéDeStyle: valeur;}
Fichier: selecteur_class1.html
 Les éléments p des classes gras et italic héritent du style
défini pour l’élément générique p:
Ils ont les mêmes règles CSS que p et celles définies par une
class ou un id se rajoutent.
15 Sélecteur de classe
 On peut également utiliser le sélecteur
de classe pour spécifier un style à des
balises HTML différentes.
 Exemple : tous les éléments HTML avec
class = "center" seront alignés au centre.
 Fichier: selecteur_class2.html
16 Question
 Comment appliquer les deux classes gras et italic au

paragraphe ci-dessous?
 Paragraphe en gras et en italique
 Nous ferons le test dans le fichier

utilisation_classe.html
17 Réponse
paragraphe en gras et
italique
Sélecteur d'identifiant: id
18
 Le sélecteur id permet de définir un style pour un
seul et unique élément de la page. Cet id doit
être bien entendu unique.
 La syntaxe est:
 #identifiant{ propriété: valeur;}
 Exemple: selecteur_id.html
19 Récapitulatif
 class et id servent tous deux pour définir

des styles.
 Une class est définie par .nom{} et peut
s’appliquer à plusieurs balises du même
type ou de types différents.
 Un id est défini par #nom{} et ne
s’applique qu’à une seule balise.
20 La balise universelle: div
 class et id sont des attributs, donc ne sont applicables que sur
des balises. Comment, alors, appliquer un style à un bloc qui
n'est pas entouré par des balises?
 Réponse: la balise div crée des blocs particuliers de balises qui
ne sont pas entourés de balises pour appliquer une
présentation particulière.
 Exemple: balise_div.html
21 La balise universelle: span
 La balise span fonctionne comme une balise div mais pour
une partie d’un texte.
 Exemple: mettre en forme des mots
 Exemple: balise_span.html
2
2 Sélecteurs avancés
Il est possible de combiner des sélecteurs pour avoir un
comportement plus spécifique
 * : sélecteur universel
 S’applique à toutes les balises
 A B : une balise contenue dans une autre
 ul li : Toutes les balises li contenues dans une ul.
 ul ul: Seules les listes contenues dans une liste!
 A + B : une balise qui en suit une autre
 h1+p: Seulement les p suivant un h1
 A[attribut] : une balise qui possède un attribut
 p[id]: Juste les paragraphes qui ont un id;
 A.classe: Une balise A qui est de la classe classe
 li.test: Les balises li, mais seulement celles de la classe test
 Voir selecteursAvances.html
2
3 Propriétés communes
 font-size: taille en pixel (30px) ou relative (small, large,

etc.)
 font-family: police de caractère
 font-style: italic, font-weigth:bold
 text-decoration: blink, underline, line-through, overline
 text-align: center, justify, right
 background-color:
 color:
 background-image: url("image.png");
2
4 Sources
 Les diapositives du cours sont fortement inspirées des

cours suivants sur OpenClassrooms:
 http://openclassrooms.com/courses/comprendre-le-web
 http://openclassrooms.com/courses/apprenez-a-creer-
votre-site-web-avec-html5-et-css3
 http://openclassrooms.com/courses/dynamisez-vos-sites-
web-avec-javascript
 http://openclassrooms.com/courses/concevez-votre-
site-web-avec-php-et-mysql

4-CSS 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

4-CSS Partie 1

Transféré par

Droits d'auteur :

Formats disponibles

420-B16-RO : Techniques de

Professeur : Sylvain Labranche

 Le langage de feuilles de style le plus fréquemment employé

 Feuilles de styles internes

 La ligne 7: <style type="text/css">

Ligne1: @charset "utf-8" :

 Indique le codage de caractères utilisé.

Ligne 2: /* CSS Document */

 link indique au navigateur que ce qui suit est un lien

Style externe: défini

 Les feuilles de styles CSS sont constituées de règles.

 Sélecteur(selector): indique au navigateur un élément du code

 Une règle css appliquée à une balise est appliquée

 Comment appliquer les deux classes gras et italic au

 Nous ferons le test dans le fichier

 class et id servent tous deux pour définir

 font-size: taille en pixel (30px) ou relative (small, large,

 Les diapositives du cours sont fortement inspirées des

Vous aimerez peut-être aussi