1 - Intégration d'un style en langage CSS dans une page html 2 - Syntaxe du langage CSS 3 - Principales propriétés du CSS Styles applicables au texte Styles applicables à l'arrière plan 4 - Utilisation de style CSS prédéfini

CSS 3 : PRINCIPALES PROPRIETES DU CSS DANS UNE PAGE html

1. Styles applicables au texte
Propriété font-
Propriété Fonction Notations/Remarque
font-size Modifier la taille du texte px (pixel), pt (point), % (pourcentage)
font-style Fixer l’inclinaison d’un texte italic, oblique (penche le texte)
font-weight Fixer le poids d’un texte lighter (version allégée de la police), bold (police en gras), bolder (police encore plus gras), une centaine compris entre 100 et 900 (du plus léger au plus gras)
line-height Fixer l’écartement entre deux lignes de texte. px (pixel) (en général, réglé à 1,5 fois la taille en pixel du texte)
font-family Choisir la police du texte Retrouver le nom de la police souhaité sur Internet ou sur les logiciels de traitement de texte.
Mettre plusieurs polices successivement, séparées par une virgule au cas où la police ne soit pas supportée par le navigateur.
color Changer la couleur d’un texte Renseigner la couleur par le nom.
Définir votre propre couleur par un nombre hexadécimal en (R, V, B), sous le format : #044404 ; ou par des nombres décimaux sous le format : rgb(004, 102, 004).
opacity Fixer l’opacité d’un texte. Nombre entre 0 et 1 (du moins au plus opaque).
Propriété text-
Propriété Fonction Notations/Remarque
text-align Gérer l’alignement d’un texte left, center, right, justify
text-decoration Décorer un texte underline, overline, line-through, blink (clignotant)
text-indent Gérer l’indentation d’un texte px (pixel), pt (point), % (pourcentage)
text-transform Modifier l’aspect des caractères d’un texte (majuscules ou minuscules) uppercase (majuscule), lowercase (minuscule), capitalize
letter-spacing ou word-spacing Ajuster l’espace entre les lettres et entre les mots px (pixel), pt (point), % (pourcentage)
text-shadow Ajouter des effets d’ombre 4 valeurs sont nécessaires en px, séparés par un espace :
  • 1ère valeur : déplacement horizontal de l’ombre
  • 2ème valeur : déplacement vertical de l’ombre
  • 3ème valeur : rayon de propagation de l’ombre
  • 4ème valeur : couleur de l’ombre (voir propriété « color »)
2. Styles applicables à l'arrière plan
Propriété background-
Propriété Fonction Notations/Remarque
background-color Ajouter une couleur de fond Voir propriété « color ».
background-image Ajouter une image de fond Donner l'url de l'image
background-position Contrôler la position de notre image Deux valeurs sont nécessaires : une coordonnée horizontale et une coordonné verticale, exprimés en px.