Cours m1106 Css

CSS
COURS
Sommaire
Références bibliographiques
Introduction à CSS
Sélecteurs
Propriétés et valeurs
Responsive design
Conclusion
Références bibliographiques
 Cours de Philippe Renevier, MCF à l’UNS

 Cours de Karima Boudaoud, Unice
 Site du zéro tutoriel de Mathieu Nebra
 CSS du débutant
 http://www.cssdebutant.com/
 Tutoriel du site HTML Dog
 http://www.htmldog.com/guides/html/
 W3 schools qui n’a aucun lien avec W3C
 http://www.w3schools.com/
Introduction à CSS
 Rappels :
 Créé par Bert Boss et Hakon Lie en 1996
 Gère la mise en forme (i.e. l’apparence d’une page Web)
 Gère le positionnement, la couleur, la taille du texte,…
 Type de fichier :
 Une feuille de style a l’extension «.css »
 Peut être utilisée par différentes pages Web
 Pas nécessaire d’enregistrer dans le même répertoire que la page web
 Validation
 Un document CSS doit toujours être validé : http://jigsaw.w3.org/css-validator/
 Ce qu’il faut rajouter dans la page HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="ma_Feuille_Style.css" />
<title>Ceci est le titre de ma 1ère page Web</title>
</head>
<body>
Ceci est le contenu de ma 1ère page Web
</body>
</html>
Sélecteurs
DES BALISES, MAIS AUTREMENT…
Sélecteurs (1)
 Qu’est ce qu’un sélecteur ?
 Balise : La balise dont on veut modifier l’apparence
 Propriété : La propriété que l’on veut appliquer à la balise (exemple : la couleur du
texte, le style de la police, la taille de la police, etc.)
 Valeur : la valeur que l’on veut appliquer (exemple : la valeur de la taille de la police,
le nom de la police, etc.)
 Représentation :
balise1
{
propriete1: valeur1;
propriete2: valeur2;
}
Sélecteurs (2)
 Exemples :
 Changer couleur des titres de niveau 1 :
h1
{
color: red;
}
 Changer taille de la police et style du texte des paragraphes :
p
{
font-style: italic;
font-size: medium;
}
Sélecteurs (3)
 Attributs class & id
 Les attributs id et class peuvent être utilisés indifféremment pour appliquer des
styles CSS à des éléments d'une page.
 un attribut id est unique dans une page HTML.
 un attribut class peut avoir la même valeur plusieurs fois dans une même
page HTML.
 Exemple pour class, on peut écrire :
 <div class="chocolat"></div>
 <p class="chocolat"></p>
 Exemple pour id, on ne peut pas écrire :
 <div id="chocolat"></div>
 <p id="chocolat"></p>
Sélecteurs (4)
 Sélecteurs de base
• e {propriete1: valeur1;} : Appliquer la propriete1 à toutes les balises e
• .foo {propriete1: valeur1;} : Appliquer la propriete1 à toutes les balises ayant un
attribut class="foo"
• e.foo {propriete1: valeur1;} : Appliquer la propriete1 à toutes les balises e ayant un
attribut class="foo"
• #bar{propriete1: valeur1;} : Appliquer la propriete1 à toutes les balises ayant un
attribut id="bar"
• e#bar{propriete1: valeur1;} : Appliquer la propriete1 à toutes les balises e ayant un
attribut id="bar"
• e,f,g {propriete1: valeur1;} : Appliquer la propriete1 à toutes les balises e,f ou g
Sélecteurs (5)
 Différents types de sélecteurs
• e f {propriete1: valeur1;} : Appliquer la propriete1 à toutes les balises f qui se trouvent
dans e
• Exemple : <e><f>Hello</f></e> mais pas <e>Hello</e><f>bird</f>
• e + f {propriete1: valeur1;} : Appliquer la propriete1 à la 1ère balise f se trouvant après
la balise e
• *{propriete1: valeur1;} : Appliquer la propriete1 à toutes les balises (Sélecteur
universel)
• e[toto] {propriete1: valeur1;} : Appliquer la propriete1 à toutes les balises e qui ont un
attribut toto
• Exemple : a[title] { } : appliquer à tous les liens qui ont l’attribut title
• e[toto=val1] {propriete1: valeur1;} : Appliquer la propriete1 à toutes les balises e qui
ont un attribut toto=val1
• Exemple : a[title=lienCours] { } : appliquer à tous les liens qui ont l’attribut
title="lienCours"
Propriétés &
Valeurs
ET SI ON REGARDAIT DE PLUS PRÈS…
Propriétés (1)
 Texte
• font-size: taille
 Taille relative: pourcentatge, em, ex
 Taille absolue: pixels, centimètres ou millimètres
• font-family: police
 Arial, Arial Black, Courier New, Times New Roman, etc.
• font-style: style
 normal, italic, oblique
• font-weight: weight
 normal, bold
• text-decoration: type
 underline, line-through(barré), overline (au dessus), blink (clignotant), none
• text-align: alignement
 center, left, right, justify
Propriétés (2)
 Couleur
• color: couleur
 Nom de la couleur : blue, green, purple, red, yellow, etc.
 Valeur hexadécimale : #FFFFFF, #000000, etc.
 Valeur RGB: rgb(val1, val2,val3)
• background-color: couleur
 Mêmes valeurs que la propriété color
 Image de fond
• background-image: url(“image.png”)
• background-position: position
 top, bottom, right, left, center
• background-repeat: valeur
 repeat, no-repeat, repeat-x (sur 1ère ligne), repeat-y (sur 1ère colonne)
• background-attachment: valeur
 fixed, scroll (image défile avec texte)
Propriétés (3)
 Bordures
• border-width: taille
• border-color: couleur
• border-style: style
 none, solid, dotted, dashed, double, groove, ridge, inset, outset
• border: taille couleur style
 border: 4px blue solid
• border-YYYY
 border-top, border-bottom, border-left, border-right
 border-top: 2px white dotted
Propriétés (4)
 Apparence dynamique
• Prop. généralement utilisées pour changer l’apparence des liens
• :hover
 Changer l’apparence quand l’on passe la souris dessus
 Exemple : a:hover {color: blue;}
• :active
 Changer l’apparence quand l’on clique sur la souris
 Exemple : a:active {color: green;}
• :focus
 Changer l’apparence quand l’on sélectionne l’élément
 Exemple : a:focus {color: red;}
• :visited
 Changer l’apparence quand un lien est consulté
 Exemple : a:visited {color: purple;}
Propriétés (5)
 Marges (marges externes + marges internes)
• Margin
 Marge externe
 Valeur pourcentage, pixels, auto
 Ordre: haut, droite, bas, gauche
 margin-top, margin-left, margin-right, margin-bottom
 Margin
 Exemple1: nav {margin-top: 10px; margin-bottom: 10px;}
 Exemple2: nav {margin: 10px 10px 10px 10px;}
• padding
 Marge interne
 Valeur pourcentage, pixels, auto
 Ordre: haut, droite, bas, gauche
 padding-top, padding-left, padding-right, padding-bottom
 Exemple : nav {padding: 10px 10px 10px 10px;}
Responsive
design
ET SI ON CONTINUE…
Responsive design (1)
 Qu’est ce que c’est ?
• Spécificité de CSS3
• Permet d’adapter la page web en fonction du type de terminal
• Plus précisément en fonction de l’écran du terminal
• Exemple: téléphone mobile, tablette, ordinateur portable
• Permet de modifier la feuille de style (.CSS) sans modifier code HTML
• Utilisation des Media Queries : règles qui permettent de spécifier quand l’on doit appliquer certaines
propriétés CSS
• 2 façons de le faire :
 Changer feuille de style en fonction de la règle (dans fichier « .html »)
<link rel="stylesheet" href=" feuille_Style1.css" />
<link rel="stylesheet" media="screen and (max-width: 1280px)“href=" feuille_Style2.css" />
 Ecrire règle dans feuille de style (dans fichier « .css »)
@media screen and (max-width: 1280px) {selecteur1;selecteur2 }
 Règles de base
• color, orientation (portrait/paysage)
• height, width: hauteur et largeur de la zone d’affichage
• device-height, device-width: hauteur et largeur du terminal/périphérique
• media: type d’écran
 all, screen (écran classique), tv, print, handled (mobile), projection (video projecteur)
• min-, max- : minimal, maximal
 Exemple : min-height indique hauteur minimale
• Combinaison des règles
 only, and, not: uniquement, et, non
 Exemple
@media screen and (max-width: 1280px)
{
nav { text-align: right;}
nav li { display: block;}
p { font-size: 1.1em;}
}
Conclusion
CSS…
Conclusion
 CSS
• CSS1, CSS2 & CSS3
• Définition de sélecteurs
 élément { propriété: valeur;}
 Définition des propriétés et des valeurs
• Responsive design
 Adapter l’affichage des pages Web en fonction du type d’écran
• Pour apprendre à créer des feuilles de style en CSS, il ne vous reste plus qu’à modifier
votre page Web personnelle/ vos autres sites et à vous entraîner !!!

Cours m1106 Css

Transféré par

Informations du document

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

Cours m1106 Css

Transféré par

Droits d'auteur :

Formats disponibles

CSS

 Cours de Philippe Renevier, MCF à l’UNS

Vous aimerez peut-être aussi