Scribd
Importer
93 vues24 pages

4-CSS Partie 1

Ce document décrit les techniques de développement d'applications hypermédia avec CSS. Il présente les différentes façons d'écrire des styles CSS, dont les feuilles de style internes, externes et en ligne, ainsi que la syntaxe et les sélecteurs CSS comme les classes et ID.

Transféré par

Constan Tino
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
93 vues24 pages

4-CSS Partie 1

Ce document décrit les techniques de développement d'applications hypermédia avec CSS. Il présente les différentes façons d'écrire des styles CSS, dont les feuilles de style internes, externes et en ligne, ainsi que la syntaxe et les sélecteurs CSS comme les classes et ID.

Transféré par

Constan Tino
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 24

420-B16-RO : Techniques de

développement d’applications
hypermédia I
4 – CSS partie 1

Professeur : Sylvain Labranche

[email protected]
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 <font> 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 !
 <p><font face= "Comic Sans MS" color= "#0000dd" size= "4" >
Utilisation de la balise dépréciée font
</font></p>
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.
 <p class= "gras" >Paragraphe en gras</p>
 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?
 <p> Paragraphe en gras et en italique</p>

 Nous ferons le test dans le fichier


utilisation_classe.html
17 Réponse
<p class= "italic gras">paragraphe en gras et
italique</p>
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

Vous aimerez peut-être aussi