Embed Size (px)
Citation preview
CSS
Karima Boudaoud IUT- R&T
Plan
Karima Boudaoud IUT R&T - Sophia Antipolis 3
Plan
● Références bibliographiques ● Introduction à CSS ● Sélecteurs ● Propriétés et valeurs ● Responsive design ● Conclusion
Karima Boudaoud IUT R&T - Sophia Antipolis 4
Références bibliographiques
● Cours de Philippe Renevier, MCF à l’UNS ● Site du zéro tutoriel de Mathieu Nebra ● Tutoriel du site HTML Dog
u http://www.htmldog.com/guides/html/
● CSS du débutant u http://www.cssdebutant.com/
● W3 schools qui n’a aucun lien avec W3C u W3 Schoolshttp://www.w3schools.com/
Karima Boudaoud
IUT R&T - Sophia Antipolis 5
Introduction à CSS (1/2) ❍ Rappel
● 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 doc. CSS doit être validé http://jigsaw.w3.org/css-validator/
Karima Boudaoud R&T Sophia Antipolis
6
Introduction à CSS (2/2) ❍ 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>
Selecteurs
Karima Boudaoud
IUT R&T - Sophia Antipolis 8
Sélecteurs(1/4) ❍ 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
u Exemple: la couleur du texte, le style de la police, la taille de la police, etc.
● Valeur : la valeur que l’on veut appliquer u Exemple la valeur de la taille de la police, le nom de la police, etc.
● Représentation balise1 {
propriete1: valeur1; propriete2: valeur2; }
Karima Boudaoud
IUT R&T - Sophia Antipolis 9
Sélecteurs(2/4) ❍ 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; }
Karima Boudaoud
IUT R&T - Sophia Antipolis 10
Sélecteurs(2/4) ❍ 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=”gateau"></div> <div id=”gateau"></div>
Karima Boudaoud
IUT R&T - Sophia Antipolis 11
Sélecteurs(3/4) ❍ Sélecteurs de base
● e {propriete1: valeur1;} u Appliquer la propriete1 à toutes les balises e
● .foo {propriete1: valeur1;} u Appliquer la propriete1 à toutes les balises ayant un attribut class="foo"
● e.foo {propriete1: valeur1;} u Appliquer la propriete1 à toutes les balises e ayant un attribut class="foo"
● #bar{propriete1: valeur1;} u Appliquer la propriete1 à toutes les balises ayant un attribut id=”bar"
● e#bar{propriete1: valeur1;} u Appliquer la propriete1 à toutes les balises e ayant un attribut id=”bar »
● e,f,g {propriete1: valeur1;} u Appliquer la propriete1 à toutes les balises e,f ou g
u
u
Karima Boudaoud
IUT R&T - Sophia Antipolis 12
Sélecteurs(4/4) ❍ Différents types de sélecteurs
● e f {propriete1: valeur1;} u Appliquer la propriete1 à toutes les balises f qui se trouvent dans e u Exemple: <e><f>Hello</f></e> mais pas <e>Hello</e><f>bird</f>
● e + f {propriete1: valeur1;} u Appliquer la propriete1 à la 1ère balise f se trouvant après la balise e
● *{propriete1: valeur1;} u Sélecteur universel u Appliquer la propriete1 à toutes les balises
● e[toto] {propriete1: valeur1;} u Appliquer la propriete1 à toutes les balises e qui ont un attribut toto u Exemple: a[title] { } : appliquer à tous les liens qui ont l’attribut title
● e[toto=val1] {propriete1: valeur1;} u Appliquer la propriete1 à toutes les balises e qui ont un attribut toto=val1 u Exemple: a[title=lienCours] { } : appliquer à tous les liens qui ont l’attribut
title="lienCours"
u
u
Propriétés & Valeurs
Karima Boudaoud
IUT R&T - Sophia Antipolis 14
Propriétés (1/5) ❍ Texte
● font-size: taille u Taille relative: pourcentatge, em, ex u Taille absolue: pixels, centimètres ou millimètres
● font-family: police u Arial, Arial Black, Courier New, Times New Roman, etc.
● font-style: style u normal, italic, oblique
● font-weight: weight u normal, bold
● text-decoration: type u underline, line-through(barré), overline (au dessus), blink (clignotant), none
● text-align: alignement u center, left, right, justify
Karima Boudaoud
IUT R&T - Sophia Antipolis 15
Propriétés (2/5) ❍ Couleur
● color: couleur u Nom de la couleur : blue, green, purple, red, yellow, etc. u Valeur hexadécimale : #FFFFFF, #000000, etc. u Valeur RGB: rgb(val1, val2,val3)
● background-color: couleur u Mêmes valeurs que la propriété color
❍ Image de fond ● background-image: url(“image.png”) ● background-attachment: valeur
u fixed, scroll (image défile avec texte) ● background-repeat: valeur
u repeat, no-repeat, repeat-x (sur 1ère ligne), repeat-y (sur 1ère colonne) ● background-position: position
u top, bottom, right, left, center
Karima Boudaoud
IUT R&T - Sophia Antipolis 16
Propriétés (3/5) ❍ Bordures
● border-width: taille ● border-color: couleur ● border-style: style
u none, solid, dotted, dashed, double, groove, ridge, inset, outset ● border: taille couleur style
u border: 4px blue solid ● border-YYYY
u border-top, border-bottom, border-left, border-right u border-top: 2px white dotted
Karima Boudaoud
IUT R&T - Sophia Antipolis 17
Propriétés (4/5) ❍ Apparence dynamique
● Prop. généralement utilisées pour changer l’apparence des liens ● :hover
u Changer l’apparence quand l’on passe la souris dessus u Exemple : a:hover {color: blue;}
● :active u Changer l’apparence quand l’on clique sur la souris u Exemple : a:active {color: green;}
● :focus u Changer l’apparence quand l’on sélectionne l’élément u Exemple : a:focus {color: red;}
● :visited u Changer l’apparence quand un lien est consulté u Exemple : a:visited {color: purple;}
Karima Boudaoud
IUT R&T - Sophia Antipolis 18
Propriétés (5/5) ❍ Marges (marges externes + marges internes)
● Margin u Marge externe u Valeur pourcentatge, pixels, auto u Ordre: haut, droite, bas, gauche u margin-top, margin-left, margin-right, margin-bottom u margin u Exemple1: nav {margin-top: 10px; margin-bottom: 10px;} u Exemple2: nav {margin: 10px 10px 10px 10px;}
● padding u Marge interne u Valeur pourcentatge, pixels, auto u Ordre: haut, droite, bas, gauche u padding-top, padding-left, padding-right, padding-bottom u Exemple: nav {padding: 10px 10px 10px 10px;}
Responsive design
Karima Boudaoud
IUT R&T - Sophia Antipolis 20
Responsive design (1/3) ❍ 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, tablettre, 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 }
Karima Boudaoud
IUT R&T - Sophia Antipolis 21
Responsive design (2/3) ❍ 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
u all, screen (écran classique), tv, print, handled (mobile), projection (vidéo projecteur)
● min-, max- : minimal, maximal u Exemple : min-height indique hauteur minimale
● Combinaison des règles u only, and, not: uniquement, et, non
Karima Boudaoud
IUT R&T - Sophia Antipolis 22
Responsive design (3/3) ❍ Exemple
@media screen and (max-width: 1280px) { nav { text-align: right;} nav li { display: block;} p { font-size: 1.1em;} }
Conclusion
Karima Boudaoud
IUT R&T - Sophia Antipolis 24
Conclusion ❍ CSS
● CSS1, CSS2 & CSS3 ● Définition de sélecteurs
u élément { propriété: valeur;} u Définition des propriétés et des valeurs
● Responsive design u Adapter l’affichage des pages Webs 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 !!!
