CSS
CA SCA DI NG ST YL E SH EETS
DEFINITION
CSS(Cascading Style Sheets ou feuille de style en cascade) est un standard développé par le
CSS,
Le CSS est incrémenté par niveaux et non par versions
Le niveau 3 réutilise et étend les niveaux 1 et 2 ,
Le principe est de séparer le fond de la forme.
Une feuille de style en cascade va permettre la mise en forme de la page HTML
17/02/2023 Peter KIDOUDOU Cours CSS 2
ECRITURE D’UNE FEUILLE DE STYLE
Selecteur 1, selecteur 2 , . . .{
propriété 1: valeur1 ;
... . ..
propriété N: valeur N ;
}
On peut mettre autant de couples propriété/valeur que voulu, séparés par des ;
Exemple:
h1 , h2 { color :red ;}
17/02/2023 Peter KIDOUDOU Cours CSS 3
ECRITURE D’UNE FEUILLE DE STYLE
17/02/2023 Peter KIDOUDOU Cours CSS 4
INCLUSION CSS
Définition de la CSS dans le fichier via la balise <link>
On ajoute dans l’en-tete du fichier HTML la ligne suivante:
<link href=”[Link]” rel=”stylesheet” type=”text/css”>
Définition de la CSS dans le fichier via la balise <style>
<head>
<style type="text/css" >
déclaration de style
<style>
<head>
17/02/2023 Peter KIDOUDOU Cours CSS 5
FORMATAGE DU TEXTE
• font-family : police de caractere
• font-size : taille des caracteres.
• font-style : texte en italique ou non.
• font-weight : texte en gras ou non.
• text-align : alignement horizontal du texte (gauche, droit, centre, justifié)
• text-decoration : texte souligne, surligné (trait au dessus), barré, clignotant, normal.
• color : couleur du texte
17/02/2023 Peter KIDOUDOU Cours CSS 6
COULEURS
Il existe 3 façon de designer une couleur :
• par son nom :red, blue, green, orange
• par les fonctions rvb : rgb(r, g, b) avec valeurs de 0 à 255
rgb(r%, g%, b%) avec valeurs de 0 à 100
• par les fonctions rvb+ transparence : rgba(r, g, b, a) avec valeurs de 0 à 255, et transparence (a)
entre 0 et 1
• en hexidécimal : #FF0000, #0000FF, #ADD8E6
17/02/2023 Peter KIDOUDOU Cours CSS 7
L’ARRIERE-PLAN
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
17/02/2023 Peter KIDOUDOU Cours CSS 8
LES BORDURES, TABLEAUX
• border-width
• border-style (requis)
• border-color
• border-radius
• border-collapse
17/02/2023 Peter KIDOUDOU Cours CSS 9
LES LISTE
• list-style-type
• list-style-image
• ist-style-position
17/02/2023 Peter KIDOUDOU Cours CSS 10
IDENTIFIANTS ET CLASSES
Identifiants:
Syntaxe HTML : <h1 id=«titre »>
Syntaxe CSS : h1 #titre{ . . .}
Utilisation unique (un seul id=titre dans la page HTML)
Classes:
Syntaxe HTML : <h1 classe=« titre »>
Syntaxe CSS : [Link]{ . . }
Utilisation multiple (plusieurs class=titre autorisés dans la page HTML)
17/02/2023 Peter KIDOUDOU Cours CSS 11
IDENTIFIANTS ET CLASSES
Exemple:
Page HTML:
<h2 id=" premier" >As Tears Go By </h2>
<h2 >Nos années sauvages</h2>
<h2 class=" bleu" >Les Cendres du temps</h2>
<h2 >Chungking Express</h2>
<h2 class=" bleu" > Les Anges dé chus </h2>
17/02/2023 Peter KIDOUDOU Cours CSS 12
IDENTIFIANTS ET CLASSES
Feuille de style :
h2 {
font−styl e : i t a l i c ;
}
#premier {
color : red ;
}
.bleu {
color : blue ;
}
17/02/2023 Peter KIDOUDOU Cours CSS 13
HERITAGE
Les propriétés CSS héritent des propriétés parentes
Héritage par raffinement de propriété :
• h2 #premier hérite de h2
• h2 .bleu hérite de h2 (mais pas de h2 #premier)
Héritage par propriété sémantiquement parente :
h2 hérite de body
17/02/2023 Peter KIDOUDOU Cours CSS 14
MODELE DE BOITE
Tout élément HTML est considéré comme contenu dans une boîte, dont on peut définir :
• L'aire intérieure
• L'espace intérieur
• La bordure
• la marge extérieur
17/02/2023 Peter KIDOUDOU Cours CSS 15
MARGES ET BORDURES : EXEMPLE
< p class="boiteorange">Ce pétit exemple est tiré du Wikibook sur CSS ( Cascading Style Sheets ) .
<p>
[Link] {
border : 1px dotted black;
padding−top : 1 em;
padding−right : 2 em;
padding−bottom : 3 em;
padding−left : 4 em;
background−color :#fc9 ;
text−align : justify
}
17/02/2023 Peter KIDOUDOU Cours CSS 16
POSITIONNEMENT
Positionnement statique: Static
• Valeur par défaut,
• les éléments apparaissent dans le même ordre que dans le code HTML,
• cet ordre est appelé le flux de la page HTML,
• impossible d’utiliser les valeurs : top, left, right, bottom.
• la largeur par défaut d’un type block est la largeur du conteneur.
Positionnement relatif: relative :exemple(position: relative; top: x px; left: y px; )
• Les valeurs : top, left, right, bottom indiquent la position par rapport a` celle que l’elément
aurait du avoir dans le flux.
• ne modifie pas l’affichage des autres éléments dans le flux,
• garde les mêmes dimensions et marges que pour static.
17/02/2023 Peter KIDOUDOU Cours CSS 17
POSITIONNEMENT
Positionnement absolu: absolute exemple:(position: absolute; top: x px; left: y px;)
• l’élément est retiré du flux, l’affichage des autres éléments est effectué comme s’il n’existait
pas,
• Par défaut, l’ élément est affiché la où il aurait du être affiché dans le flux (risque de
superpositions)
• on utilise donc les valeurs : top, left, right, bottom,
• ces valeurs indiquent la position du premier ascendant qui n’est pas statique (au pire, le
navigateur),
• la largeur par defaut est la largeur minimum pour afficher le contenu.
Positionnement fixe : fixed exemple:(position: fixed; top: x px; left: y px; )
idem à absolute sauf pour deux choses
le positionnement se fait toujours par rapport aux bords du navigateur.
en cas de défilement de la page, l’ élément ne bouge pas.
17/02/2023 Peter KIDOUDOU Cours CSS 18
OBJET FLOTTANT
Un objet flottant que l’on peut placer a droite ou à gauche de son conteneur.
Le contenu des autres éléments évite alors de se superposer avec l’ élément flottant.
17/02/2023 Peter KIDOUDOU Cours CSS 19
LES PSEUDOS CLASSES
Permet de spécifier un état particulier d’une balise.
Quelques exemples:
• Interaction avec la souris:
❑:hover la souris passe sur la balise
❑:active clic maintenu sur la balise.
• Les liens hypertextes :
❑:link lien non visite.
❑:visited lien visite.
Les <input >des formulaires
❑:valid les valeurs sont valides.
❑:invalid les valeurs sont invalides.
17/02/2023 Peter KIDOUDOU Cours CSS 20
LES PSEUDOS ÉLÉMENTS
Permet de spécifier la mise en page de parties spécifiques d’une balise.
❑: :before permet d’insérer du contenu avant celui d’une balise.
❑: :after permet d’insérer du contenu après celui d’une balise.
❑: :selection zone selectionnée/surlignée par l’utilisateur.
❑: :first-line première ligne de texte du conteneur.
❑: :first-letter première lettre de texte du conteneur.
17/02/2023 Peter KIDOUDOU Cours CSS 21
COMBINAISONS DE SELECTEURS
.lol : : before , .lol : : after {
content : url ("lol,png ");
}
17/02/2023 Peter KIDOUDOU Cours CSS 22