Introduction au langage CSS - Polytech`Lille, page Olivier Caron

Transcription

PEIP 2
Bureau d’étude GIS
Introduction au langage CSS
Olivier Caron
Polytech Lille
Avenue Paul Langevin Cité Scientifique Lille 1
59655 Villeneuve d’Ascq cedex
http://ocaron.plil.fr
[email protected]
Olivier Caron
January 4, 2017
1/17
PEIP 2
La technologie CSS
• Acronyme pour ”Cascading Style Sheet”
Olivier Caron
January 4, 2017
2/17
PEIP 2
La technologie CSS
• De HTML 1 à HTML 5 : vers un meilleur découpage
contenu/affichage (charte graphique)
Olivier Caron
January 4, 2017
2/17
PEIP 2
La technologie CSS
• Styles visuels réutilisables
Olivier Caron
January 4, 2017
2/17
PEIP 2
La technologie CSS
• Styles visuels réutilisables
• Qualités évolutives (un seul fichier à évoluer pour un site web
complet)
Olivier Caron
January 4, 2017
2/17
PEIP 2
Syntaxe Générale
• Syntaxe ultra simple :
sélecteur {
nomPropriété: valeur ;
nomPropriété: valeur ;
...
}
sélecteur ...
• la complexité réside dans la richesse des propriétés et des effets de
bord des propriétés entre elles (placement des objets)
Olivier Caron
January 4, 2017
3/17
PEIP 2
Petite illustration de règles CSS
• h1 { color :
Olivier Caron
red } → les balises <h1> sont en rouge
January 4, 2017
4/17
PEIP 2
• h1 { color :
• div h1 { color :
red ; } → les balises <h1>
contenues dans une balise <div> sont en rouge
Olivier Caron
January 4, 2017
4/17
PEIP 2
• h1 { color :
• .attention { border:
solid blue 1px;
background-color: cyan} → classe de style applicable
à toute balise html (exemple <div class="attention">
...
Olivier Caron
January 4, 2017
4/17
PEIP 2
• h1 { color :
solid blue 1px;
...
• Un tutoriel : http://www.w3.org/Style/Examples/
011/firstcss.fr.html
Olivier Caron
January 4, 2017
4/17
PEIP 2
• h1 { color :
solid blue 1px;
...
• Un tutoriel : http://www.w3.org/Style/Examples/
011/firstcss.fr.html
• et pour finir une démo :
http://www.csszengarden.com/tr/francais/
Olivier Caron
January 4, 2017
4/17
PEIP 2
Comment appliquer un style
• Au niveau de le la balise :
<p s t y l e = ” c o l o r : b l u e ; ”>
• Au niveau du fichier html :
<head>
<s t y l e>
p {
c o l o r : blue ;
}
< / s t y l e>
...
<p> . . . < / p>
• Dans une feuille de style (recommandé) :
<head> . . .
<l i n k r e l = ” s t y l e s h e e t ” h r e f = ” . / css / s t y l e . css ” />
Olivier Caron
January 4, 2017
5/17
PEIP 2
Les sélecteurs
• Les sélecteurs de base :
Nom de la balise, Nom de l’id (’#’), Nom de la classe (’.’).
Olivier Caron
January 4, 2017
6/17
PEIP 2
Les sélecteurs
• Les sélecteurs avancés :
* : désigne toutes les balises
sél1 sél2 : les sélecteurs sél2 situés à l’intérieur de sél1
A[B] : une balise A qui possède un attribut B
A[B=”value”] : une balise A qui possède un attribut B de valeur value
Olivier Caron
January 4, 2017
6/17
PEIP 2
Les sélecteurs
• Les sélecteurs avancés :
* : désigne toutes les balises
sél1 sél2 : les sélecteurs sél2 situés à l’intérieur de sél1
A[B] : une balise A qui possède un attribut B
A[B=”value”] : une balise A qui possède un attribut B de valeur value
• Et bien plus encore
Olivier Caron
January 4, 2017
6/17
PEIP 2
Qui s’occupe des feuilles de style
• Absolument pas le développeur !
Olivier Caron
January 4, 2017
7/17
PEIP 2
• Réservé au concepteur graphique multimédia
Olivier Caron
January 4, 2017
7/17
PEIP 2
• Cependant, des assistants :
http://css-tricks.com/examples/ButtonMaker/
http://cssmenumaker.com/
Olivier Caron
January 4, 2017
7/17
PEIP 2
• Cependant, des assistants :
http://css-tricks.com/examples/ButtonMaker/
http://cssmenumaker.com/
• ou bien des frameworks CSS, ex:
framework bootstrap (twitter) http://getbootstrap.com/
Olivier Caron
January 4, 2017
7/17
PEIP 2
Le framework Twitter Bootstrap
• Une charte graphique épurée
• Beaucoup de règles pour de multiples composants graphiques
• S’appuie sur la notion de classe pour utiliser la charte
<button>un bouton< / button> < !−− pas de s t y l e a p p l i q u é −−>
<button class= ” b t n btn−p r i m a r y ”>un j o l i bouton< / button>
• Du code javascript permet d’associer du comportement aux
composants
• Le placement des composants est simplifié grâce au concept de grille
• Règles dédiées aux mobiles/smartphones.
Olivier Caron
January 4, 2017
8/17
PEIP 2
Installation du framework Twitter Bootstrap
• Télécharger bootstrap sur
http://www.getbootstrap.com
• Télécharger jquery sur http://www.jquery.com
• Polytech: procédure d’installation :
cd p u b l i c h t m l / c o v o i t u r a g e /
t a r x v f z ˜ ocaron / p u b l i c / s o f t s . t g z
Olivier Caron
January 4, 2017
9/17
PEIP 2
Configuration de bootstrap
< !DOCTYPE html>
<html>
<head>
<meta charset= ” UTF−8”> < t i t l e>Bureau Etude PEIP< / t i t l e>
<meta name=” v i e w p o r t ” c o n t e n t =” w i d t h =device−width , i n i t i a l −s c a l e =1.0” >
< l i n k h r e f = ” . / css / b o o t s t r a p . min . css ” r e l =” s t y l e s h e e t ” t y p e =” t e x t / css”>
< l i n k h r e f = ” . / css / b o o t s t r a p −theme . min . css ” r e l =” s t y l e s h e e t ” t y p e =” t e x t / css”>
< s c r i p t t y p e =” t e x t / j a v a s c r i p t ” s r c = ” . / j s / j q u e r y . min . j s ”></ s c r i p t >
< s c r i p t t y p e =” t e x t / j a v a s c r i p t ” s r c = ” . / j s / b o o t s t r a p . min . j s ”></ s c r i p t >
< / head>
<body> . . . < / body>
< / html>
Olivier Caron
January 4, 2017
10/17
PEIP 2
Exercices (1/2)
• Consultez la documentation sur
Olivier Caron
January 4, 2017
11/17
PEIP 2
Exercices (1/2)
Exercice 1
Dans le fichier index.html du projet ”covoiturage”, ajoutez un titre
avec la classe page-header.
Olivier Caron
January 4, 2017
11/17
PEIP 2
Exercices (1/2)
Exercice 1
Dans le fichier index.html du projet ”covoiturage”, ajoutez un titre
avec la classe page-header.
Exercice 2
Modifiez votre menu en utilisant les classes nav et (nav-tabs ou
nav-pills).
(pour sous-menu : classes dropdown, dropdown-toggle et
dropdown-menu)
Olivier Caron
January 4, 2017
11/17
PEIP 2
Exercices (2/2)
Exercice 3
Procédez à ”l’habillage twitter” de votre table HTML
Olivier Caron
January 4, 2017
12/17
PEIP 2
Exercices (2/2)
Exercice 3
Procédez à ”l’habillage twitter” de votre table HTML
Exercice 4
Limitez la largeur de l’image à 400 pixels, donnez une forme ronde à
l’image
Olivier Caron
January 4, 2017
12/17
PEIP 2
Les Grilles CSS
• Le placement des objets dans une page se fait dans une grille de 12
colonnes
Olivier Caron
January 4, 2017
13/17
PEIP 2
Les Grilles CSS
colonnes
• La grille est définie à l’aide de la classe container
Olivier Caron
January 4, 2017
13/17
PEIP 2
Les Grilles CSS
colonnes
• Une ligne de la grille est définie par la classe row
Olivier Caron
January 4, 2017
13/17
PEIP 2
Les Grilles CSS
colonnes
• Une ligne de la grille est définie par la classe row
• Chaque colonne est spécifiée à l’aide des classes col-xx-xx
Olivier Caron
January 4, 2017
13/17
PEIP 2
Les tailles des grilles CSS
• Plusieurs formats selon l’équipement :
Equipement
Largeur
Nom classe CSS
Taille max col
Extra small-devices
Small devices
Medium devices
Large devices
<768px
>=768px
>=992px
>=1200px
.col-xs-nb
.col-sm-nb
.col-md-nb
.col-lg-nb
auto
60px
78px
95px
Olivier Caron
January 4, 2017
14/17
PEIP 2
Les tailles des grilles CSS
• Plusieurs formats selon l’équipement :
Equipement
Largeur
Nom classe CSS
Taille max col
Extra small-devices
Small devices
Medium devices
Large devices
<768px
>=768px
>=992px
>=1200px
.col-xs-nb
.col-sm-nb
.col-md-nb
.col-lg-nb
auto
60px
78px
95px
• nb indique le nombre de colonnes (entre 1 et 12)
Olivier Caron
January 4, 2017
14/17
PEIP 2
Exemples grilles (1/2)
• 2 colonnes de même taille sur mobile et desktop :
<div class= ” row ”>
<div class= ” c o l −xs−6”> . c o l −xs−6< / div>
<div class= ” c o l −xs−6”> . c o l −xs−6< / div>
< / div>
• 1ère colonne (moitié de la grille pour mobiles, 33%pour desktop):
<div class= ” c o l −xs−6 c o l −md−4”> . c o l −xs−6 . c o l −md−4< / div>
< / div>
Olivier Caron
January 4, 2017
15/17
PEIP 2
Exemples grilles (2/2)
• colonnes inutilisées, notion d’offset :
<div class= ” c o l−md−4”> . c o l−md−4< / div>
<div class= ” c o l−md−4 c o l−md−o f f s e t −4”> . c o l−md−4 . c o l−md−o f f s e t −4< / div>
< / div>
• Autre exemple:
< / div>
Olivier Caron
January 4, 2017
16/17
PEIP 2
Exercice
Exercice
Dans votre projet ”covoiturage”, modifiez la page ”index.html” afin que la
table et l’image soient affichées sur une même ligne. La table occupe 3
colonnes, l’image occupe 5 colonnes. Table et image sont séparées par
deux colonnes. La table se trouve à une colonne du bord gauche, l’image
se trouve à une colonne du bord droit.
Olivier Caron
January 4, 2017
17/17

Introduction au langage CSS - Polytech`Lille, page Olivier Caron

Transcription

Documents pareils

Télécharger la fiche PDF

DANIEL J. CARON

Prochaines dates clés pour l`école des DJ UCPA : Lyon : 27 janvier

section sportive - Page d`accueil du lycée

Olivier BERNARD - Tel : 03.80.23.69.75 Courriel : ol.bernard@gmail

Stages - Tennis de Table du Grésivaudan

Marjolaine Caron, cette « messagère de l`au

Credit Line © Nathalie Caron et Charles Guilbert Artist Caron

studio - ti6 - Placeman Pascal