Les Propriétés CSS

Filière : Développement Web Module : HTML / CSS Proposé par le Formateur : Rachid EL-FAJJY
Le CSS
Syntaxe CSS
La syntaxe CSS se compose de 3 parties : un sélecteur, une propriété et une valeur. Sélecteur {
Le sélecteur est l'élément HTML que vous voulez styler telle que <h1>, <p>, etc. Chaque Propriété : valeur ;
sélecteur peut avoir une ou plusieurs propriétés. }
La propriété est l’élément basic du CSS. Chaque propriété a sa valeur.
La valeur est assignée à la propriété.
<h1 style=" Propriété : valeur ; ">
Où on écrit le CSS
Dans l’attribut style, ici on n’y pas besoin d’un sélecteur ;
<style>
Dans la balise style ; on y obliger de préciser l’élément HTML à styler Sélecteur {
Propriété : valeur ;
Dans un fichier CSS séparer - la méthode le plus recommandée- on y
}
obliger de préciser l’élément HTML à styler (c’est pareil pour la balise
….etc
style sauf on n’indique pas la balise style on écrit directement le code
</style>
CSS dans le fichier).
Exemple
HTML CSS Résultat
<body> body{
<h1>Un titre de niveau 1</h1> background-color: orange;
<p>Un paragraphe</p> }
<p>Un deuxième paragraphe</p> p{
</body> color: blue;
font-size: 16px;
}
Les types de secteurs

Sélecteur Signification
* Sélectionner tous les éléments
E,F Sélectionner tous les éléments de types E et de type F
EF Sélectionner tous les éléments F à l’intérieur de éléments E
E> F Sélectionner les éléments F enfants directs des éléments E
E+F Sélectionner tout les élément F placé directement après un élément E
E~F Sélectionner tout élément F placé après un élément E dans la page
#valeur Sélectionner l’élément ayant la valeur dans l’attribut id
. valeur Sélectionner les éléments ayant la valeur dans l’attribut class
1
Propriétés de mise en forme du texte

Propriété Valeurs (exemples) Description
color nom, rgb(rouge,vert,bleu), Couleur du texte
rgba(rouge,vert,bleu,transparence), #CF1A20...
font-family police1, police2, police3, serif, sans-serif, Nom de police
monospace
font-size 1.3em, 16px, 120%... Taille du texte
font-weight bold, normal Gras

font-style italic, oblique, normal Italique
text- underline, overline, line-through, blink, none Soulignement, ligne au-dessus, barré ou
decoration clignotant
font-variant small-caps, normal Petites capitales
text- capitalize, lowercase, uppercase Capitales
transform
font Super propriété de police. Combine : font-weight, font-style, font-size, font-variant, font-family.
text-align left, center, right, justify Alignement horizontal
vertical- baseline, middle, sub, super, top, bottom Alignement vertical (cellules de tableau ou
align éléments inline-block uniquement)
line-height 18px, 120%, normal... Hauteur de ligne
text-indent 25px Alinéa
text-shadow 5px 5px 2px blue Ombre de texte
(horizontale, verticale, fondu, couleur)
Propriétés des listes

list-style- disc, circle, square, decimal, lower-roman, upper- Type de liste
type roman, lower-alpha, upper-alpha, none
list-style- inside, outside Position en retrait
position
list-style- url('puce.png') Puce personnalisée
image
list-style - Super-propriété de liste. Combine list-style-
type, list-style-position, list-style-image.
Propriétés de couleur et de fond

background-color Identique à color Couleur de fond
background-image url('image.png') Image de fond
Background-attachment fixed, scroll Fond fixe
background-repeat repeat-x, repeat-y, no-repeat, repeat Répétition du fond
background-position (x y), top, center, bottom, left, right Position du fond
background -Super propriété du fond. Combine : background-image, background-
repeat, background-attachment, background-position
opacity 0.5 Transparence
Propriétés des tableaux

border-collapse collapse, separate Fusion des bordures
empty-cells hide, show Affichage des cellules vides
caption-side bottom, top Position du titre du tableau
2
Propriétés des boîtes

Propriété Valeurs Description Propriété Valeurs Description
(exemples) (exemples)
width 150px, 80%... Largeur height 150px, 80%... Hauteur
min-width 150px, 80%... Largeur min-height 150px, 80%... Hauteur
minimale minimale
max-width 150px, 80%... Largeur max-height 150px, 80%... Hauteur
maximale maximale
margin-top 23px Marge en haut margin-bottom 23px Marge en bas
margin-left 23px Marge à gauche margin-right 23px Marge à droite
margin 23px 5px 23px Super-propriété padding 23px 5px 23px Super-propriété
5px de marge. 5px de marge
(haut, droite, (haut, droite, intérieure
bas, gauche) bas, gauche)
padding-top 23px Marge intérieure padding-bottom 23px Marge intérieure
en haut en bas
padding-left 23px Marge intérieure padding-right 23px Marge intérieure
à gauche à droite
border-width 3px Épaisseur de border-color nom, rgb, rgba, , Couleur de
bordure #CF1A20... bordure
border-style solid, dotted, Type de bordure border 3px solid black Super-propriété
dashed, double, de bordure.
groove, ridge,
inset, outset
border-radius 5px Bordure arrondie box-shadow 6px 6px 0px Ombre de boîte
(selon le black
navigateur) (horizontale,
verticale, fondu,
couleur)
Existe aussi en version border-top, border-right, border-bottom, border-left.
Propriétés de positionnement et d'affichage

display block, inline, inline-block, table, table-cell, Type d'élément (block, inline, inline-block, none…)
none...
visibility visible, hidden Visibilité
clip rect (0px, 60px, 30px, 0px) Affichage d'une partie de l'élément
rect (haut, droite, bas, gauche)
overflow auto, scroll, visible, hidden Comportement en cas de dépassement
float left, right, none Flottant
clear left, right, both, none Arrêt d'un flottant
position relative, absolute, static Positionnement
top 20px Position par rapport au haut
bottom 20px Position par rapport au bas
left 20px Position par rapport à la gauche
right 20px Position par rapport à la droite
z-index 10 Ordre d'affichage en cas de superposition.
La plus grande valeur est affichée par-dessus les
autres.
Autres propriétés
Propriété Valeurs (exemple) Description
cursor crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, Curseur de
auto... souris
3
Propriétés de flex
Ces propriétés CSS permettent de définir l’alignement des blocs dans leurs conteneurs. On applique sur le conteneur un
display:flex après on indique les propriété suivantes :

flex-direction row : organisés sur une ligne (par défaut) ; column : une Indiquer si les éléments sont
colonne ; row-reverse : sur une ligne ordre inversé ; agencés horizontalement (par
column-reverse : sur une colonne ordre inversé défaut) ou verticalement
flex-wrap nowrap : pas de retour à la ligne (par défaut) ; on peut autoriser les éléments à
wrap : les éléments vont à la ligne lorsqu'il n'y a plus la revenir à la ligne s'ils n'ont plus
place ; wrap-reverse : en sens inverse. d'espace
On déterminer Axe primaire et secondaire selon la valeur de la propriété flex-direction
Si flex-direction : row (par défaut) alors Axe principale = horizontale Axe secondaire = verticale
Si flex-direction : column alors Axe principale = verticale Axe secondaire = horizontale
flex-start : alignés au début (par défaut) ; flex-end : alignés à
la fin ;center : alignés au centre ;
Alignement des éléments sur
justify-content space-between : les éléments sont étirés sur tout l'axe (il y a
l'axe principal
de l'espace entre eux) ; space-around : idem, mais ils
laissent aussi de l'espace sur les extrémités.
stretch : les éléments sont étirés sur tout l'axe (valeur par
défaut) ; flex-start : alignés au début ; flex-end : alignés à la Alignement des éléments sur
align-items
fin ; center : alignés au centre ; baseline : alignés sur la ligne l'axe secondaire
de base (semblable à flex-start).
flex-start : les éléments sont placés au début ; fle -end : les
éléments sont placés à la fin ; center : les éléments sont
S'il y a plusieurs lignes, on
placés au centre ; space-between : les éléments sont
peut indiquer comment les lignes
align-content séparés avec de l'espace entre eux ; space-around : idem,
doivent se répartir entre elles
mais il y a aussi de l'espace au début et à la fin ; stretch (par
avec
défaut) : les éléments s'étirent pour occuper tout l'espace.
aligner Chaque élément qui

prend comme valeur même que
flex-start : alignés au début (par défaut) ; flex-end : alignés à
justify-content
la fin ;center : alignés au centre ;
align-self space-between : les éléments sont étirés sur tout l'axe (il y a
on utilise le seudo class nth-
de l'espace entre eux) ; space-around : idem, mais ils
child(x) qui nous permet de
laissent aussi de l'espace sur les extrémités.
sélectionner l’élément de l’ordre
x dans le conteneur
Pour réagencer Chaque élément
order L’order de l’ élément On utilise le seudo class nth-
child(x)
Le nombre indique dans quelle mesure il peut grossir par
On peut autoriser nos éléments
rapport aux autres.
à occuper plus ou moins
La propriété flex est en fait une super-propriété qui
flex d'espace restant
combine flex-grow (capacité à grossir), flex-
On utilise le seudo class nth-
shrink (capacité à maigrir) et flex-basis (taille par défaut).
child(x)

Les Propriétés CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Les Propriétés CSS

Uploaded by

Copyright:

Available Formats

Filière : Développement Web Module : HTML / CSS Proposé par le Formateur : Rachid EL-FAJJY

Les types de secteurs

E,F Sélectionner tous les éléments de types E et de type F

EF Sélectionner tous les éléments F à l’intérieur de éléments E

E> F Sélectionner les éléments F enfants directs des éléments E

E+F Sélectionner tout les élément F placé directement après un élément E

E~F Sélectionner tout élément F placé après un élément E dans la page

#valeur Sélectionner l’élément ayant la valeur dans l’attribut id

. valeur Sélectionner les éléments ayant la valeur dans l’attribut class

Propriétés de mise en forme du texte

font-weight bold, normal Gras

Propriétés des listes

Propriétés de couleur et de fond

Propriétés des tableaux

Propriétés des boîtes

Propriétés de positionnement et d'affichage

Propriété Valeurs (exemples) Description

aligner Chaque élément qui

You might also like