Web Css

Programmation Web
Samuel Murail
Master BIB - 2020-2021
1
Plan
2
Plan
HTML
2
Plan
HTML
CSS
2
Plan
HTML
CSS
Javascript
2
CSS
3
CSS
Intro
3
CSS
Intro
Syntaxe
3
CSS
Intro
Syntaxe
Selecteur
3
CSS
Intro
Syntaxe
Selecteur
Propriétés CSS
3
CSS
Intro
Syntaxe
Selecteur
Propriétés CSS
Positionnement
3
CSS
Intro
Syntaxe
Selecteur
Propriétés CSS
Positionnement
Flexbox
3
Feuille de style CSS (1)
CSS for Cascading Style Sheet
de nit un style global pour un site web
sépare la structure (HTML) de sa présentation (CSS)
structure une ou plusieurs page web
meilleur lisibilité du code HTML
facilite la mise à jour graphique
example:
This is my page
It would be so much more beautifull with css.
Trust me...
But it has to be implemented and tested first.

You'll see...
Sans css.
4
CSS for Cascading Style Sheet
de nit un style global pour un site web
sépare la structure (HTML) de sa présentation (CSS)
structure une ou plusieurs page web
meilleur lisibilité du code HTML
facilite la mise à jour graphique
example:
This is my page This is my page

Trust me...

You'll see... It would be so much more But it has to be
beautifull with css. implemented and tested
Trust me... first.
Sans css. Avec css.

4
Excellent example sur http://www.csszengarden.com/
This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission
guidelines), but we ask you release your CSS under a Creative Commons license identical to the one on this site so that others may learn from your
work.
By Dave Shea. Bandwidth graciously donated by mediatemple. Now available: Zen Garden, the book.
HTML CSS CC A11y GH
Select a Design:
Mid Century Modern by Andrew Lohman
Garments by Dan Mall
Steel by Steffen Knoeller
Apothecary by Trent Walton
Screen Filler by Elliot Jay Stocks
Fountain Kiss by Jeremy Carlson
A Robot Named Jimmy by meltmedia
Verde Moderna by Dave Shea
Archives:
Next Designs ›
View All Designs
Resources:
View This Design’s CSS
CSS Resources
FAQ
Submit a Design
Translations
5
le style peut être dé ni directement dans le <head>:
<head>
...
<style type="text/css">
p{
color:green;
text-align:center;
}
</style>
</head>
elle peut aussi être indiqué directement dans les attribut

des balises html:
<p style="color:green; text-align:center;">
6
l'utilisation se fait principalement par le biais des chier
.css, l'import de ce chier est indiqué dans la balise
<head>:
<head>
...
<link rel="stylesheet" href="example.css">
</head>
avec dans example.css:

p{
color:green;
text-align:center;
}
Et Voila ! 7
Syntaxe
La syntaxe dans le chier .css est dé nit par un selecteur
(balises, classes afféctés), puis entre accolades les attributs
et leur valeurs, séparés par des point virgule :
selecteur{
attribut_1: valeur_1;
attribut_2: valeur_2;
}
example pour mettre tout les paragraphes <p> en vert et

centré:
p{
color: green;
text-align: center;
}
8
Commentaires CSS
Les commentaires dans un chiers .css sont indiqué par les
balises /* et */
/* paragraphes*/
p {
text-align: center;
color: red;
/*margin-bottom: 0;*/
}
/*Titres*/
h1, h2, h3, h4, h5, h6{
text-decoration: underline;
}
Ces commentaires sont invisible dans le navigateur

Utiles aux developpeurs
9
Selecteur
On peut utiliser différents types de selecteurs:
les balises, h1, div, p, ...
div {text-align:center;}
on peut affecter plusieurs balises en même temps:

h1, div {color:red}
les classes <p class="small">

.small {size=0.5em}
les classes d'une balise <p class="small">

div.small {font-family: serif;}
10
Selecteur (2)
les id <div id="debut">
#debut{
color: gray;
}
les id d'une balise <div id="debut">

div#debut{
color: gray;
}
les id et classe d'une balise <div id="debut"

class="small">
div#debut.small{
color: gray;
font-family: serif;
}
11
Selecteur (3)
Il est possible et recommandé d'utiliser plusieurs classes:
p.centre {text-align: center}
p.rouge {color: red}
<p class="centre rouge"> Texte centré rouge </p>
résultat:
Texte centré rouge
12
Selecteur (4)
des combinaison peuvent être éffectués comme
l'imbrication, dans l'example suivant on affecte uniquement
les balises <strong> inclue dans des balises <div>
div strong {color: red}
<div>
<em> Texte 1</em> <strong> Texte 2 </strong> Texte 3
</div>
<strong> Texte 4 </strong>
Texte 1 Texte 2 Texte 3

Texte 4
13
Selecteur (5)
ou les consécutifs, dans l'example suivant on affecte
uniquement les balises <strong> situé apres des balises
<div>
div + strong {color: red}
<div>
<em> Texte 1</em> <strong> Texte 2 </strong> Texte 3
</div>
<strong> Texte 4 </strong>
Texte 1 Texte 2 Texte 3

Texte 4
14
Résumé
CSS HTML ciblé
p {} <p> ... </p>
.classe_1 {} <div class="classe_1">...</div>
#id_1 {} <div id="id_1">...</div>
p.classe_1 {} <p class="classe_1">...</p>
p .classe_1 <p> <span class="classe_1">...</span>
{} </p>
p + span {} <p>...</p> <span>...</span>
h1, h2 {} <h1>...</h1> <h2>...</h2>
la régle la plus spéci que l'emporte.

dans le cas de deux règles de mêmes spéci citées, la dernière lue l'emporte
15
Selecteur avancés
exercice pour les séléctions CSS : https:// ukeout.github.io/
16
Prioritées, examples:
code HTML: résultats:
<p id="premier">
<strong class="carotte">C</strong>ascading
<strong class="epinard">S</strong>tyle
<strong class="epinard">S</strong>heets
</p>
<p id="second">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
code CSS:
strong {color: red;}
.carotte {color: orange;}
.epinard {color: green;}
#premier {font-style: italic;}
17
<p id="premier">
Cascading Style Sheets
</p>
<p id="second">
</p>
code CSS:
17
<p id="premier">
</p>
<p id="second">
</p>
code CSS:
17
<p id="premier">
</p>
<p id="second">
le dernier déclaré l'emporte
<strong>S</strong>heets !important, permet de surpasser
</p>
les règles
code CSS: strong {color: red !important;}

.carotte {color: orange;} si plusieur !important on
#premier {font-style: italic;} retrouve les règles de cascade et
spéci cités
17
CSS, example:
<body>
<h1>This is my page</h1>
<p class="left"> It would be so much more beautifull with css. <br>
Trust me...</p>
<p class="right"> But it has to be implemented and tested first. <br>

You'll see...</p>
</body>
This is my page This is my page

Trust me...

It ld b h B t it h t b
This is without css
This is with css, in the <head> part add:
<link rel="stylesheet" href="simple.css">
18
CSS, example:
Contenu de simple.css: <body>
<h1>This is my page</h1>
<p class="left"> It would be so much
body {
font-family: "Helvetica", serif; Trust me...</p>
margin: 0;
padding: 0; <p class="right"> But it has to be
}
You'll see...</p>
h1 { </body>
background-color: lightgray;
font-family: sans-serif;
margin: 0;
padding-top: 30px;
text-align: center;
}
height: 100px;
This is my page
p{
border-bottom: 1px lightgray solid;
}
.left {
float: left; It would be so much more But it has to be
width: 40%; beautifull with css. implemented and tested
margin-left: 10px; Trust me... first.
}
You'll see...
.right {
float: right;
width: 40%;
margin-left: 10px;
19
CSS, les liens:
a:link , liens non visités
a:visited , liens visités
a:hover lien survolé (pas que sur les liens)
a:active lien cliqué
examples:
a:link {color: black;}
a:visited {color: red;}
a:hover {font-size: 4rem;}
a:active {color: white;}
Diapo Précedent
Liens mort
20
CSS, les formulaires:
:focus, liens, input ou boutons
examples:
<input class="prenom" value="Rouge=focus">
<input class="nom" value="Vert=focus">
.prenom:focus {
background: yellow;
color: red}
.nom:focus {
background: yellow;
color: lime}
Rouge=focus Vert=focus
21
Propriétés CSS, les couleurs
Il existe plusieur notations:
hexadecimal #ffffff
hexadcimal court #fff (doublé pour obtenir la longue)
RGB (Red, Green, Blue): rgb(255, 255, 255) ou avec
l'opacité rgb(255, 255, 255, 1)
HSL (Hue, Saturation, Lightness): hsl(0, 0%, 100%) ou
avec l'opacité rgb(0, 0%, 100%, 1)
mot clés: white
22
Propriétés CSS, les couleurs (2)
On peut l'utiliser sur :
color
background ou background-color
border ou border-color
...
23
Propriétés CSS, les tailles
Différentes unités peuvent être utilisées:
le px ou pixel, de taille xe
relative em à la taille de l'élément parent
relative rem (root em) à la taille de la page
le pourcentage %
<div style="font-size: 30px;">Parent
<span style="font-size: 0.5em;">1<sup>er</sup> Fi
Parent 1er Fils 2ième Fils
<span style="font-size: 2em;"> 2<sup>ième</sup> F
</div>
24
Propriétés CSS, les polices
font-family, la ou les polices (disponibilité ici):
.example { font-family: Roboto, Helvetica, sans-serif;}
font-size taille en px ou em
font-weight avec bold, normal ou valeur numérique
font-style avec italic, normal ou oblique
line-height interligne
color
25
Propriétés CSS, les polices
text-align avec : left, right, center, justify
text-transform avec : none, capitalize, uppercase,
lowercase
font-variant avec normal, small-caps
text-decoration avec none, overline, underline,
line-through
text-indent décalage de la première ligne
26
Rappel(Html): Les éléments
inline
Les éléments inline sont différent des éléments présentés précédement
de type block.
Placé autour du contenu a mettre en valeur.
n'entraine pas de retour à la ligne.
peut être dé nis en css:
span {
display:block;
}
p {
display:inline;
background:#ff5733;
}
<span> Début du block <p> inline </p> fin du block</span>
Début du block inline n du block

27
Les éléments inline
par default les éléments suivant sont inline:
span, em, strong, a, ...
et ceux ci de type block:

p, div, h*,
les éléments de type block prennet toute la largeur du bloc

parents et sont suivit d'un retour à la ligne
les élément inline n'ont pas de largeur
28
Les éléments inline
les élément inline-block sont hybrides:
pas de retour à la ligne
propriétés d'un bloc comme les dimensions et marges
éléments display:none pas af chés
29
Marges, padding et bordures
30
Marges, padding et bordures (2)
dimensions peuvent être dé nies de plusieurs manières:
avec 4 valeurs : top right bottom left
avec 3 valeurs : top (right/left) bottom
avec 2 valeurs : (top/bottom) (right/left)
avec 1 valeur : (top/bottom/right/left)
ou spéci quement:
margin-top, margin-bottom, margin-left,
margin-right
padding-top, padding-bottom, ...
border-top, border-bottom, ...
31
valeurs en px, %, etc ...
possibilité quand width est dé nis de centrer dans le bloque parent avec
margin: 0 auto:
div{
margin:0;
width:600px;
background:#ff5733;
}
.center{
margin:0 auto;
}
<div> Bloque non centré</div> <br>

<div class="center"> Bloque centré </div>
Bloque non centré
Bloque centré
32
pas de margin-top ou margin-bottom pour un élément inline
par contre possibilité d'utiliser margin-left ou margin-right
par défault le navigateur utilise des marges et padding non nuls
le padding et la bordure entrent dans le calcul de la dimension de l'objet
la valeur af ché est :
width + margin-left + margin-right + border-left + border-right
possibilité de controurner avec box-sizing: border-box;
example:
div {
width:400px;
padding: 20px:
border:solid 10px black;
}
La vrai largeure est : 400 + 2*20 + 2*10 = 460 px
33
Dimensions
width or height speci ed either in html: <div
width=150px> or in css:
div {
width:150px;
}
unit: px pixel, em relative, % pourcentage du parent.

Valeur par défaut: auto (Taille du parent)
taille minimum et maximum: min-width, max-width,
min-height et max-height
34
Border
possibilité de dé nir speci quement le style, width et
color:
border-top-style, border-bottom-style, ...
border-top-width, border-bottom-width, ...
border-top-color, border-bottom-color, ...
ou l'ensemble des propriétés avec border, border-top,
border-bottom
35
Border, example
div.all_border {
width:600px;
background:#ff5733;
border:solid 10px black;
}
div.bottom_border {
width:600px;
background:#ff5733;
border-bottom:dashed 5px gray;
}
<div class="all_border"> Bloque entouré</div> <br>

<div class="bottom_borde"> Bloque entouré en bas</div>
Bloque entouré
Bloque entouré en bas

36
Border, styles
none
dotted
dashed
solid
double
groove
ridge
inset
outset
37
Border, radius
With CSS3
border-radius : 0; (Default)
border-radius : 20px;
border-radius : 0 20px;
border-radius : 0 10px
20px 30px;
38
Positionnement
<div class="parent">
<img src="./img/DJ-Kool-Herc.jpg" height=150px/>
<p class="position">
<strong>DJ Kool Herc</strong> developed the style that was
</p></div>
DJ Kool Herc developed the style that was the blueprint for hip hop music. Herc used the record to focus on a
short, heavily percussive part in it: the "break". Since this part of the record was the one the dancers liked best,
Herc isolated the break and prolonged it by changing between two record players. As one record reached the
end of the break, he cued a second record back to the beginning of the break, which allowed him to extend a
relatively short section of music into " ve-minute loop of fury".
39
Positionnement, float
img {
float:right;
}
DJ Kool Herc developed the style that was the blueprint for hip hop music. Herc used
the record to focus on a short, heavily percussive part in it: the "break". Since this part of
the record was the one the dancers liked best, Herc isolated the break and prolonged it
by changing between two record players. As one record reached the end of the break,
he cued a second record back to the beginning of the break, which allowed him to
extend a relatively short section of music into " ve-minute loop of fury".
Problème : L'image dépasse du cadre.
40
Positionnement, overflow
Solution : utiliser l'attribut overflow: hidden;
.parent{
overflow: hidden;
}
img {
float:right;
}
DJ Kool Herc developed the style that was the blueprint for hip hop music. Herc used
the record to focus on a short, heavily percussive part in it: the "break". Since this part of
the record was the one the dancers liked best, Herc isolated the break and prolonged it
by changing between two record players. As one record reached the end of the break,
he cued a second record back to the beginning of the break, which allowed him to
extend a relatively short section of music into " ve-minute loop of fury".
41
cependant overflow: hidden; peut entrainer une perte d'information
si la cellule est trop petite:
.parent{
overflow: hidden;
height:100px;
}
img {
float:right;
}
DJ Kool Herc developed the style that was the

blueprint for hip hop music. Herc used the record to
focus on a short, heavily percussive part in it: the
"break". Since this part of the record was the one the
dancers liked best, Herc isolated the break and
prolonged it by changing between two record
players As one record reached the end of the break
42
cependant overflow: hidden; peut entrainer une perte d'information
si la cellule est trop petite:
.parent{
overflow: hidden;
height:100px;
}
img {
float:right;
}
DJ Kool Herc developed the style that was the peut être "résolu" avec le
parametre overflow:auto:
dancers liked best, Herc isolated the break and DJ Kool Herc developed the style that was the
prolonged it by changing between two record blueprint for hip hop music. Herc used the record to
players As one record reached the end of the break focus on a short, heavily percussive part in it: the
prolonged it by changing between two record
players As one record reached the end of the break
42
float pour la mise en page
<div class='head'> Header </div>
Header
<div
<div
class='side'> Side </div>
class='main'> Main </div> Main Side
<div class='footer'> Footer </div>
.head {
background: blue;
}
.side {
height:150px;
Footer
width:20%;
float:right;
}
.main{
background:red;
height:150px;
width:80%;
}
.footer{
clear: both;
background: green;
}
cette technique a été beaucoup été utilisée, mais les

nouvelles techniques utilisent flexbox et grid-layout
permettant des mises en pages plus uides.
43
Sortir de float
<img src="./img/DJ-Kool-Herc.png" height="250px"
Avec clear (valeurs : none,
style="float: left;"/> right, left, both)
<ul style="float: left; ">
<li> <a href=""> Home </a></li>
p {
<li> <a href="">Part I </a></li>
clear:both;
<li> <a href="">Part II</a></li>
}
<li> <a href="">About </a></li>
</ul>
<div style='text-align: justify;'>
<p > <strong>DJ Kool Herc</strong> developed the
</p>
</div>
Entraine un texte qui coule:

prolonged it by changing between two record players.
As one record reached the end of the break, he cued a
second record back to the beginning of the break,
which allowed him to extend a relatively short section
of music into " ve-minute loop of fury".
Home
PArt I
Part II
About
44
Sortir de float
<img src="./img/DJ-Kool-Herc.png" height="250px"
Avec clear (valeurs : none,
style="float: left;"/> right, left, both)
<ul style="float: left; ">
<li> <a href=""> Home </a></li>
p {
<li> <a href="">Part I </a></li>
clear:both;
<li> <a href="">Part II</a></li>
}
<li> <a href="">About </a></li>
</ul>
<div style='text-align: justify;'>
<p > <strong>DJ Kool Herc</strong> developed the
Home
</p>
</div>
PArt I
Part II
Entraine un texte qui coule: About
prolonged it by changing between two record players. DJ Kool Herc developed the style that was the
As one record reached the end of the break, he cued a blueprint for hip hop music. Herc used the record to
second record back to the beginning of the break, focus on a short, heavily percussive part in it: the
which allowed him to extend a relatively short section "break". Since this part of the record was the one the
Home dancers liked best, Herc isolated the break and
prolonged it by changing between two record players.
PArt I As one record reached the end of the break, he cued a
Part II second record back to the beginning of the break,
About which allowed him to extend a relatively short section
44
Background
Possible de changer la couleur d'un bloc avec
background-color
Possible de mettre une ou plusieurs images en fond en
utilisant background-image:
example DJ Kool Herc

.back_pic { developed the style
that was the blueprint
background-image: url('./img/DJ-
height:400px;
for hip hop music. Herc

width:400px;
}
<div class='back_pic'> used the record to

<strong>DJ Kool Herc</strong>
</div> focus on a short,
heavily percussive part
in it: the "break". Since
this part of the record
was the one the
dancers liked best,
Herc isolated the
break and prolonged it
by changing between
two record players. As
one record reached
the end of the break,
he cued a second
record back to the
beginning of the break,
which allowed him to
extend a relatively
short section of music
into " ve-minute loop
of fury".
45
Background (2)
.back_pic {
DJ Kool Herc
background-image: url(./img/chapter_1.png),
url('./img/DJ-Kool-Herc.png
height:400px;
width:400px;
}
.back_pic {
background-image: linear-gradient(rgba(255, 2
rgba(0, 0,
,url(./img/chapter_1.png),
url('./img/DJ-Kool-Herc.png DJ Kool Herc
height:400px;
width:400px;
}
possible d'ajouter un gradient de

couleurs
Attention à l'ordre des
image/gradient
46
Background (2)
background-position permet DJ Kool Herc
de centrer l'image
.back_pic {
background-image: url('./img/DJ-Kool-Herc.png
background-position: 40% 15%;
height:400px;
width:400px;
}
background-size permet DJ Kool Herc

d'ajuster la taille de l'image
.back_pic {
background-image: url('./img/DJ-Kool-Herc.png
background-size: 50px;
height:400px;
width:400px;
}
background-repeat pour gérer les répetitions (no-repeat, repeat-

x, space, ...)
47
Positionnement, position
par défault la valeur est position: static
l'élément est dans le ux et non positionné
un élément peut être positionné de 4 manières:
relative
absolute
fixed
sticky
48
Positionnement, relative
positionné dans le ux mais peut être décalé par rapport à sa position en
utilisant les balises top, bottom, right, left
<div class='boite'> Ex 1</div>
<div class='boite middle'> Ex 2</div>
.boite { .middle {
width: 200px; position: relative;
display: inline-block; top: 20px;
background: red; right: 20px;
margin: 10px; }
}
Ex 1 Ex 2 Ex 3
49
Positionnement, relative
positionné dans le ux mais peut être décalé par rapport à sa position en
utilisant les balises top, bottom, right, left
<div class='boite middle'> Ex 2</div>
.boite { .middle {
width: 200px; position: relative;
display: inline-block; top: 20px;
background: red; right: 20px;
margin: 10px; }
}
Ex 1 Ex 3
Ex 1 Ex 2 Ex 3 Ex 2
49
Positionnement, absolute
élément retiré du ux
aucun espace créé pour cet élément
Se postionne par rapport au dernier parent positionné:
50
.middle {
position: absolute;
}
Ex 1 3
Ex 2
50
.middle { .middle {
position: absolute; position: absolute;
} top: 20px;
left: 20px;
}
Ex 1 3
Ex 2
50
Ex 2 Positionnement, absolute
.middle { .middle {
position: absolute; position: absolute;
} top: 20px;
left: 20px;
}
Ex 1 3
Ex 2
Ex 1 Ex 3
50
Positionnement, absolute (2)
- il est donc souvent utile de le positionner par rapport à un parents:
<figure width=300>
<img src="./img/biggie.jpg" alt="Biggie" >
<figcaption>Notorious Big</figcaption>
</figure>
figcaption {
position: absolute;
bottom:30px;
left:0;
right:20px;
background: rgb(223, 223, 223, 0.3);
text-align: center;
}
51
Positionnement, absolute (2)
- il est donc souvent utile de le positionner par rapport à un parents:
<figure width=300>
<img src="./img/biggie.jpg" alt="Biggie" >
<figcaption>Notorious Big</figcaption>
</figure>
figcaption {
position: absolute;
bottom:30px;
left:0;
right:20px;
background: rgb(223, 223, 223, 0.3);
text-align: center;
}
figure:hover {
position: relative;
}
51
Positionnement, fixed
Sort du ux et se positionne au dessus des autres éléments
Ne bouge pas lors du dé lement de la page
ex: Barre de navigation
Comme absolute mais toujours par rapport au viewport
(navigateur)
52
Sort du ux et se positionne au dessus des autres éléments
Ne bouge pas lors du dé lement de la page
ex: Barre de navigation
Comme absolute mais toujours par rapport au viewport
(navigateur)
.entete {
position: fixed;
top:0;
left:100px;
right:100px;
background: rgb(223, 223, 223, 0.5);
text-align: center;
color: red;
font-size: 2em
}
<div class="entete">Je suis Dessus, et alors ?</div>

52
53
Positionnement, sticky or
web-sticky
positonné de facon relative (dans le DJ Kool Herc
ux) jusqu'à ce que son bloc
englobant dépasse un seuil donné DJ Kool Herc developed
(eg. top), il se comporte ensuite the style that was the
blueprint for hip hop
comme un élément xe music. Herc used the
img {
record to focus on a
float: right; short, heavily percussive
margin-left: 10px; part in it: the "break". Since this
position: sticky;
top: 20px part of the record was the one the
} dancers liked best, Herc isolated
54
Positionnement, sticky or
web-sticky
aussi utilisé en en-tête:
Dr. Samuel Murail

Molecular Dynamic Simulations
‹ Protein, Membrane and Peptide ›
Data Analysis & Visualisation
Pentameric Channels
 Dr.Murail
HOME RESEARCH PUBLICATIONS CONGRESS TEACHING
CONTACT
Protein-Peptide Interactions
Proteins play a key role in almost all cellular functions. These macromolecules rarely act in isolation, but within
complex interaction networks. Recent methods of characterizing protein-protein interactions (PPI) have made it
possible to obtain high-throughput data on these interaction networks. These protein-protein interactions act
usually via large interfaces (1500-3000 Å2) with no well-defined binding pocket.
The modulation of these PPIs has many therapeutic applications, but the physical characteristics of these
55
interfaces make the rational design of inhibitors difficult. The use of peptide ligands mimicking a portion of the
Flexbox
Le Flexbox Layout permet de mettre en page de
maniere dynamique des items dans un containeur.
permet de changer la taille et l'orgnisation des items en
fonction de l'éspace disponible.
très utile pour mettre en page des containeurs de tailles
moyennes ou petites.
Grid Layout plus propice pour la mise en page d'une page
complète.
Non traité dans ce cours
Information sur Css tricks
56
Flexbox container:
<div class='container'> .container {
<div class='item'> Item 1 </div> display: flex;
<div class='item'> Item 2 </div> background: rgb(240, 240, 2
<div class='item'> Item 3 </div> }
<div class='item'> Item 4 </div> .item {
</div> min-width: 80px;
min-height: 40px;
font-size: 0.8em;
background: rgb(240, 128,
border: outset 5px pink;
text-align: center;
}
Item 1 Item 2 Item 3 Item 4
57
flex-direction (1)
.container { Item 1 Item 2 Item 3 Item 4
display: flex;
flex-direction: row;
}
.container {
display: flex;
flex-direction: row-reverse;
}
58
flex-direction (2)
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column-reve
} }
Item 1 Item 4
Item 2 Item 3
Item 3 Item 2
Item 4 Item 1
59
flex-wrap:
wrap
Item 1 Item 2 Item 3
Item 4
nowrap
Item Item Item Item
1 2 3 4
wrap-reverse
Item 4
60
flex-flow
Possible de dé nir flex-direction et flex_wrap en
utilisant flex-flow:
.container {
display: flex;
flex-flow: column wrap-reverse;
/*flex-direction: column;
flex_wrap: wrap-reverse; */
}
Item 4 Item 1
Item 2
Item 3
61
justify-content:
ex-start
ex-end
center
space-between
space-around
space-evenly
don't use margin: 0 auto; for items

62
align-items:
stretch (Default value) center

Item 2 Item 3
Item 2
Item 4 Item 4
flex-start baseline
Item 1 Item 3
Item 2
Item 4 Item 1 Item 2 Item 3 Item 4
flex-end
Item 1
63
Flexbox items:
<div class='container'> Pour chaque item ex on
<div class='item item_1'> Item 1 </div>
<div class='item item_2'>
<div class='item item_3'>
Item
Item
2
3
</div>
</div>
peut de nir plusieurs
arguments
<div class='item item_4'> Item 4 </div>
</div>
div.container { l'agument order peut

display: flex;
flex-wrap: wrap;
background:rgb(240, 240, 240, 0.2); dé nir l'ordre d'af chage:
}
div.item {
min-width:80px;
min-height: 40px;
font-size: 0.8em;
background:rgb(240, 128, 128, 0.2);
border:outset 5px pink;
text-align: center;
Item 2
}
div.item_1 {order: 2}
64
Flexbox items: (2)
On peut de nir un rapport de taille entre objet en utilisant
flex-grow:
div.item_1 {flex-grow: 1}
1 2 3 4
Dependant, le rapport sera respecté uniquement si l'espace

est disponible
65
Flexbox
Plus d'information concerant les exbox ici:
Présentation tres claire sur Css tricks

Plus d'informations sur developer.mozilla.org:
concepts de bases
aligner les items
66
Ajuster à la résolution
Example :
https://www.cornell.edu/
67
Requetes media
modi e l'apparence en fonction du type d'appareil (portable,
tablette, ordinateur)
en fonction de la résolution ou de la largeur d'af chage
utilise @media et une ou plusieur conditions
example:
/* If the screen size is 600px wide or less, hide the elem
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
68
Requetes media
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
@media (400px <= width <= 700px) {

body { line-height: 1.4; }
}
69
Références
Course de Gauthier Moroy
Initiation HTML et CSS (Stephanie Walter)
https://developer.mozilla.org
https://www.w3schools.com
Aller plus loin

http://razvancaliman.com/fowd-london-2014
70
Plan
HTML
CSS
Javascript
71

Web Css

Transféré par

Informations du document

Titre original

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

Web Css

Transféré par

Droits d'auteur :

Formats disponibles

Programmation Web

But it has to be implemented and tested ﬁrst.

This is my page This is my page

But it has to be implemented and tested ﬁrst.

Sans css. Avec css.

HTML CSS CC A11y GH

elle peut aussi être indiqué directement dans les attribut

avec dans example.css:

example pour mettre tout les paragraphes <p> en vert et

Ces commentaires sont invisible dans le navigateur

on peut affecter plusieurs balises en même temps:

les classes <p class="small">

les classes d'une balise <p class="small">

les id d'une balise <div id="debut">

les id et classe d'une balise <div id="debut"

<p class="centre rouge"> Texte centré rouge </p>

Texte 1 Texte 2 Texte 3

Texte 1 Texte 2 Texte 3

la régle la plus spéci que l'emporte.

strong {color: red;}

<p class="right"> But it has to be implemented and tested first. <br>

This is my page This is my page

But it has to be implemented and tested ﬁrst.

<span> Début du block <p> inline </p> fin du block</span>

Début du block inline n du block

et ceux ci de type block:

les éléments de type block prennet toute la largeur du bloc

<div> Bloque non centré</div> <br>

Bloque non centré

La vrai largeure est : 400 + 2*20 + 2*10 = 460 px

unit: px pixel, em relative, % pourcentage du parent.

<div class="all_border"> Bloque entouré</div> <br>

Bloque entouré en bas

Problème : L'image dépasse du cadre.

DJ Kool Herc developed the style that was the

cette technique a été beaucoup été utilisée, mais les

Entraine un texte qui coule:

example DJ Kool Herc

for hip hop music. Herc

<div class='back_pic'> used the record to

possible d'ajouter un gradient de

background-size permet DJ Kool Herc

background-repeat pour gérer les répetitions (no-repeat, repeat-

<div class="entete">Je suis Dessus, et alors ?</div>

Dr. Samuel Murail

Item 1 Item 2 Item 3 Item 4

don't use margin: 0 auto; for items

Item 1 Item 3 Item 1

div.container { l'agument order peut

Dependant, le rapport sera respecté uniquement si l'espace

Présentation tres claire sur Css tricks

@media (400px <= width <= 700px) {

Aller plus loin

Vous aimerez peut-être aussi

La vrai largeure est : 400 + 220 + 210 = 460 px