Scribd
Importer
45 vues25 pages

Programmation Web AvancéeCSS

Transféré par

sufyanalthawri1
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
45 vues25 pages

Programmation Web AvancéeCSS

Transféré par

sufyanalthawri1
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 25

Programmation Web

Avancée
PWA

[email protected]
2020-2021

1
Cascading Style Sheets
(CSS)
 Il y a trois méthode pour introduire CSS dans un document HTML :
1. Directement dans les balises du fichier HTML via un attribut style;
<h1 style="color:blue;">This is a Blue
Heading</h1>
2. Dans l'en-tête <head> du fichier HTML ;
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
3
3. Dans un fichier .css (méthode la plus recommandée) ;
<head>
<link rel="stylesheet" href="styles.css">
</head>
L’attribut rel va préciser le type de fichier ( « stylesheet » pour feuille de style)
et href va indiquer l’adresse relative du fichier CSS.
Le fichier styles.css: Sélecteur { propriété : valeur ;}
Un sélecteur qui détermine à quel élément les styles correspondant seront
appliquées
Une propriété qui détermine le style qui sera appliquée à un élément
Une valeur qui détermine le comportement d’une propriété
body {background-color: powderblue;}
h1,h2 {color: blue;}
p {color: red;}
4
Les sélecteurs les plus utilisés comprennent des éléments, des identifiants et des
classes:

1. Les sélecteurs de type : le style sera appliqué à l’ensemble des éléments du même
type
p {color: red;}

2. Les sélecteurs de classe: appliquer le même style à un groupe d’éléments en leur


donnant le même attribut de class
.error{ color : red; }
<p class="error">Ce texte sera affiché en rouge </p>
<p> Ce texte ne le sera pas </p>
<h1 class="error"> et moi ! </h1>

5
3. Les sélecteurs d’ID sont utilisés pour cibler un élément UNIQUE
sur le document
#p01 {
color: blue;
}
<p id="p01">I am different</p>

6
On peut sélectionner les éléments auxquels un style s'applique :
*: tous les éléments
x: tous les éléments dont la balise est x
.foo: tous les éléments dont l'attribut class contient foo
x.foo: (sans espace) tous les éléments dont l'attribut class contient foo
et dont la balise est x
#foo: l'élément dont l'attribut id vaut foo (les id doivent être uniques)
X Y: tous les éléments selectionnés par Y qui sont des descendants
des éléments sélectionnés par X
X,Y: tous les éléments sélectionnés par X ou par Y
X>Y: tous les éléments dont sélectionnés par Y qui sont des fils
d'éléments sélectionnés par X 7
• Dans un document HTML, chaque élément est représenté par une boîte
rectangulaire qui peut être ajustée grâce à des propriétés CSS spécifiques.

• Padding: la marge intérieur d'une boîte.

• Margin: La marge (extérieure) représente


la distance qui doit
séparer deux boîtes. Exemple:
margin: 2px 0 3px 1px; signifie « 2 px de marge
en haut, 0 px à droite, 3 px en bas, 1 px
à gauche ».
margin: 2px 1px;signifie « 2 px de marge en
haut et en bas, 1 px de marge à gauche et à droite ».
border: 5px solid black; (épaisseur, style, couleur ).

8
• La propriété display contrôle le mode d'affichage d'un élément:
• none : l'élément n'est pas dessiné et n'occupe pas d'espace.
• inline : l'élément est placé sur la ligne courante.
• block : l'élément est placé seul sur sa ligne

• Inline-block: positionné comme inline mais la taille peut être modifiée comme
pour block.

9
Le type de positionnement est donné par la propriété position
• static : positionnement « automatique »
• fixed : positionnement fixé par rapport a la fenêtre du navigateur
(l’élément reste
à la même place, même si l’un des visiteurs "scroll" dans la page.
Ex: les contacts (Facebook).
• relative : positionnement « relatif » par rapport à sa position normale. Si on positionne
un
élément HTML de façon relative et qu’on lui ajoute left:50px, l’élément sera
déplacé de
50 pixels vers la droite par rapport à sa position par défaut.
• absolute : nous permet de positionner un élément de façon relative par rapport à son
parent
le plus proche auquel on a appliqué un positionnement spécifique (relative, fixed ou
absolute)
10
• Lorsque deux éléments se chevauchaient, il y a toujours un au-dessus de l’autre.

Dans ce cas, on peut utiliser la propriété z-index pour définir l'ordre d'empilement

(plus elle est élevée, plus la boite est en avant plan). Le z-index par défaut vaut zéro,

on a donné la propriété z-index:2; à la boîte contenant du texte.

11
• La propriété float nous permet de « flotter » des éléments HTML à gauche ou à

droite dans une page web selon qu'on lui ait attribué la valeur left ou right. Les
éléments suivants un élément flottant vont se positionner à côté de celui-ci par
défaut.

• Nous pouvons annuler ce comportement grâce à la propriété clear.

• Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS
float sortent du flux de leur conteneur, celui-ci va déborder de son conteneur
verticalement.

12
• Afin d’éviter ce comportement, on peut utiliser la propriété overflow. Cette
propriété peut prendre les valeurs suivantes :

– Visible : valeur par défaut (rien ne sera coupé) ;

– Hidden : ce qui dépasse sera coupé ;

– Scroll : coupe ce qui dépasse et ajoute une barre de défilement afin d’avoir
accès à tout le contenu ;

– Auto : Laisse le navigateur décider du meilleur choix ;

13
• Les pseudo classes (commencent tous par le symbole :) vont nous permettre de
changer le style d’un élément HTML selon son état. Par exemple, nous allons pouvoir
afficher un paragraphe en gras lorsque l’utilisateur passe sa souris dessus ou changer la
couleur d’un lien une fois celui-ci cliqué.
• :visited va nous permettre de styliser un lien une fois celui-ci visité.
• :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le
survole avec le pointeur;
h1:hover {
color: blue;
}
• :active va nous permettre de modifier l’aspect d’un lien lors du clic.
• :first-child: permet de cibler un élément qui est le premier élément fils par
rapport à son élément parent.
• :last-child: permet de cibler un élément qui est le dernier enfant de son parent.
• :first-letter et :first-line correspondent respectivement au premier
caractère et à la première ligne de texte au sein d’un élément.
14
p:first-child {
color: blue;
}
p:last-child {
background: #ff0000;
}
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>
<p>This is some text.</p>

15
• ::before et ::after permettent d’ajouter du contenu directement après ou directement

avant un élément via CSS, sans que celui-ci ne soit présent dans le document HTML . Ces

pseudo éléments vont devoir être utilisés avec la propriété CSS content qui va nous

permettre d’ajouter toute sorte de contenu (du texte, des images, etc.).

p::after {

content: " - Remember this";

<p>My name is Ali</p>

• Nous pouvons laisser la propriété content vide et traiter le pseudo-élément comme une

boîte vide :

p::after {

content: "";

display: block;

width : 100px; 16
La fonction attr() est utilisée afin de récupérer la valeur d'un attribut d'un élément
pour l'utiliser dans la feuille de style.
Dans l'exemple suivant on illustre ::after avec l'expression CSS attr() et un
attribut de données personnalisé data-descr afin de créer une bulle d'information de
type glossaire en CSS pur.

<p>Voici l’exemple en action du code ci-dessus.<br />

Ce <span data-descr="collection de mots et de


ponctuation">texte</span> a quelques <span data-descr="petites
fenêtres surgissantes qui s’affichent au survol d’un élément">
bulles d’information</span>.<br /> Ne soyez pas timide,
survolez le texte pour <span data-descr="à ne pas prendre au
sens propre">jetez un œil</span>. </p>

span[data-descr]{
position: relative; 17
span[data-descr]:hover::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000; font-size: 14px; z-index: 1;
}

18
• Les transitions CSS permettent un passage en douceur de l’ancienne vers la
nouvelle valeur d’une propriété CSS lorsqu’un événement est déclenché :

 soit via une pseudo-classe telle que :hover, :focus ou :active ;

 soit via JavaScript.

Pour définir une nouvelle transition animée, il est nécessaire de préciser au


minimum :

 les propriétés à animer ()

 La durée de l'animation
• Propriété à animer : transition-property
cette propriété accepte trois valeurs :
1. all (valeur par défaut) : toutes les propriétés possibles seront animées ;
2. propriété : le nom d’une propriété pouvant être animée ;
3. none : aucune propriété ne sera animée. 19
• Durée de l’animation : transition-duration

La propriété transition-duration indique la durée de la transition. Si


plusieurs propriétés ont été définies à l’aide cette proprité, il est possible de préciser
leurs valeurs en les séparant d’une virgule.

Les deux unités de temps acceptées sont : s , la seconde et ms, la milliseconde.

20
• la notation raccourcie transition cumule tous ces aspects.

transition: <property> <duration> ….


.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s;
}

.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
}
21
 <canvas> est un nouvel élément HTML qui peut être utilisé pour dessiner des
éléments graphiques 2D en Javascript à la volée.
<canvas id="myCanvas" width="200" height="100">Your browser does not
support the canvas tag </canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
moveTo(x, y) : Déplace le stylo aux coordonnées x et y.
lineTo(x, y): Dessine une ligne de la position de dessin courante à la position
spécifiée par x et y.
stroke(): Dessine le trajet en traçant son contour. 22
<script>
var canvas = document.getElementById('"myCanvas"');
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
</script>

fillRect(x, y, largeur, hauteur)


Dessine un rectangle rempli.
strokeRect(x, y, largeur, hauteur)
Dessine les contours d'un rectangle.
clearRect(x, y, largeur, hauteur)
Efface l'espace rectangulaire spécifiée, devenant complètement transparent.

23
• SVG est un format de données conçu pour décrire des ensembles de graphiques
vectoriels et basé sur XML. On peut inclure une image SVG directement dans le
code du document.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-
width="4" fill="yellow" />
</svg>

SVG est un format d'image léger lorsqu'il s'agit de représenter des formes simples, car
seules les informations décrivant ces formes sont stockées (coordonnées, couleurs,
effets) contrairement aux images bitmap (JPG, PNG, GIF) qui doivent mémoriser le
contenu pixel par pixel.

24
• L'élément <video>, offre en HTML5 une solution simple pour l'intégration
d'une vidéo dans une page web. On peut également proposer plusieurs sources
dans plusieurs formats différents en indiquant les types grâce à l'attribut type :
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
L’attribut controls donne accès aux contrôles de lecture (boutons
de navigation, volume, etc, selon les possibilités du navigateur)

25

Vous aimerez peut-être aussi