Rappel sur CSS - Nouvelles Technologies - HEIG-Vd

Rappel sur CSS
Nouvelles Technologies
Thé Van LUONG
[email protected]
mistic.heig-vd.ch/luong
Université de Nice-Sophia Antipolis
3 décembre 2014
1/16
3 décembre 2014
1 / 16
CSS
Définition
Qu’est-ce que c’est ?
CSS (Cascading Style Sheets) est un langage qui sert à décrire la
présentation des documents HTML.
2/16
3 décembre 2014
2 / 16
CSS
Définition
Qu’est-ce que c’est ?
CSS (Cascading Style Sheets) est un langage qui sert à décrire la
présentation des documents HTML.
À quoi çà sert ?
Dans HTML on se concentrait essentiellement sur le contenu des
pages web, dans CSS on se concentre sur la mise en forme.
2/16
3 décembre 2014
2 / 16
CSS
Définition
Qu’est-ce que c’est ?
CSS (Cascading Style Sheets) est un langage qui sert à décrire la
présentation des documents HTML.
Utilités et avantages
Modifier l’aspect d’une page sans en modifier le contenu.
Facilité d’écriture : utiliser un même style sur plusieurs balises.
Facilité d’exportation : utiliser une feuille de style sur plusieurs
pages.
Permettre le positionnement précis de textes et d’images.
2/16
3 décembre 2014
2 / 16
CSS
Exemple de résultat CSS
Une page HTML sans CSS :
3/16
3 décembre 2014
3 / 16
CSS
Exemple de résultat CSS
Une page HTML avec une feuille de style CSS :
3/16
3 décembre 2014
3 / 16
CSS
Syntaxe d’un style
Syntaxe d’un style
nomBalise { attribut1 : valeur1 ; attritut2 : valeur2 ; etc. . . }
Exemples de styles :
h3 { font-family : Arial ; font-style : italic }
body { font-family : Verdana ; background : url(image.jpg) no-repeat ;
color :green}
4/16
3 décembre 2014
4 / 16
CSS
Inclusion simple de code dans <style>...</style>
Inclusion de code css dans fichier html
Code css dans une balise <style>...</style> (inclus dans
<head>...</head>)
5/16
3 décembre 2014
5 / 16
CSS
Fichier css séparé
Inclusion dans fichier html
Toutes les règles de style dans un fichier css spécifique.
6/16
3 décembre 2014
6 / 16
CSS
Fichier css séparé
Inclusion dans fichier html
Toutes les règles de style dans un fichier css spécifique.
L’inclusion de la feuille de style monFichier.css se fait ensuite dans le
fichier html dans <head>...</head>.
6/16
3 décembre 2014
6 / 16
CSS
Fichier css séparé
Inclusion dans fichier html
Toutes les règles de style dans un fichier css spécifique.
L’inclusion de la feuille de style monFichier.css se fait ensuite dans le
fichier html dans <head>...</head>.
6/16
3 décembre 2014
6 / 16
CSS
Fichier css séparé
Inclusion dans fichier html
Toutes les règles de style dans un fichier css spécifique.
L’inclusion de la feuille de style monFichier.css se fait ensuite dans le
fichier html dans <head>...</head>.
6/16
3 décembre 2014
6 / 16
CSS
Fichier css séparé
Exemple de plusieurs fichiers de style :
7/16
3 décembre 2014
7 / 16
CSS
Fichier css séparé
Exemple de plusieurs fichiers de style :
7/16
3 décembre 2014
7 / 16
CSS
Intérêts d’un fichier css séparé
Intérêt d’une feuille de style
Utiliser le même fichier .css sur plusieurs pages HTML.
Utiliser plusieurs fichiers .css sur plusieurs pages HTML.
8/16
3 décembre 2014
8 / 16
CSS
Notion de classe
Dans certains cas, on veut identifier une balise précise.
9/16
3 décembre 2014
9 / 16
CSS
Notion de classe
Dans certains cas, on veut identifier une balise précise.
9/16
3 décembre 2014
9 / 16
CSS
Notion de classe
Classe
Dans html par exemple : <h2 class="practical"> Informations pratiques
</h2>
Puis dans CSS : h2.practical {font-weight :bold ; color :red}
10/16
3 décembre 2014
10 / 16
CSS
Notion de classe
Classe
Dans html par exemple : <h2 class="practical"> Informations pratiques
</h2>
Puis dans CSS : h2.practical {font-weight :bold ; color :red}
10/16
3 décembre 2014
10 / 16
CSS
Balise de regroupement
Dans certains cas, on veut sélectionner tout un paragraphe de texte,
dans lequel on veut appliquer un style :
11/16
3 décembre 2014
11 / 16
CSS
Balise de regroupement
Balise <div> de regroupement
Dans html par exemple : <div class="groupe1"> blabla sur plusieurs
lignes </div>
Dans CSS : div.groupe1 {font-family :Arial}
12/16
3 décembre 2014
12 / 16
CSS
Balise de regroupement
Balise <div> de regroupement
Dans html par exemple : <div class="groupe1"> blabla sur plusieurs
lignes </div>
Dans CSS : div.groupe1 {font-family :Arial}
12/16
3 décembre 2014
12 / 16
CSS
Placement précis de textes et image
Position
position : absolute
position : relative
Déplacements
top : valeur ; valeur en (px, cm, %)
left : valeur ; valeur en (px, cm, %)
13/16
3 décembre 2014
13 / 16
CSS
Placement précis de textes et image
14/16
3 décembre 2014
14 / 16
CSS
Style css pour le texte en colonne
Exemple de style de texte encadré en colonne.
15/16
3 décembre 2014
15 / 16
16/16
3 décembre 2014
16 / 16

Download Report