Les bases du HTML et du CSS Partie 2
Ajouter du CSS
Le CSS sera écrit dans un fichier nommé style.css, qui sera rangé dans le dossier CSS.
On appellera notre fichier de cette façon :
<!DOCTYPE html>
<html>
<head>
<title>Le titre de ma page web</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
Les sélecteurs
1- Sélecteurs universels : Sélectionne toutes les balises
*{}
2- Une balise contenue dans une autre : Sélectionne toutes les balises em situées à l’interieur d’une balise h3
h3 em
{
}
3- Une balise qui en suit une autre : Sélectionne la première balise p située après un titre h3
h3 + p
{
}
4- une balise qui possède un attribut : sélectionne tous les liens a qui possèdent un attribut title
a[title]
{
}
5- une balise, un attribut et une valeur exacte :
a[title="Cliquez ici"]
{
}
Les pseudo-classes
Ils permettent d’appliquer des propriétés CSS à un moment donné et à une action précise
-Hover
-Focus
-Click
-Sélection de certains enfants (:first child , :last child et : nth child
Les différents pseudo-éléments
::after permet de créer un pseudo-élément qui sera le dernier enfant de l’élément sélectionné
::before permet de créer un pseudo-élément qui sera le premier enfant de l’élément sélectionné
::selection permet d’appliquer des règles à la sous-partie sélectionnée par l’utilisateur
::first-line permet d’appliquer des règles à la première ligne d’un élément
::first-letter permet d’appliquer des règles à la première lettre de la première ligne d’un élément
Les effets en CSS
1- LINEAR-GRADIENT : permet de créer une image représentant un dégradé de couleurs.
2- BOX ET TEXT SHADOW : permet d’ajouter un ou plusieurs ombres à la boîte d’un élément ou au texte.
3- FILTRE ET OPACITÉ : filter permet d’appliquer des filtres sur des éléments. Ils sont principalement utilisés pour les images :
– blur : effet flou
– brightness : luminosité
– contrat : contrast
– drop-shadow : ombre portée
– grayscale : conversion au niveau de gris
– hue-rotate : rotation de teinte
– invert : inversion des couleurs
– saturate : saturation des couleurs
La propriété opacity définit la transparence d’un élément.
4- TRANSITIONS : permet de modifier progressivement la valeur d’une ou de plusieurs propriétés
– Transition-property : définit le nom des propriétés CSS pour lesquelles nous souhaitons appliquer des transitions
– Transition-duration : définit la durée de la transition
– Transition-delay : définit le temps à attendre avant le début
– Transition-timing-function : définit la façon dont les valeurs intermédiaires sont calculées
5- TRANSFORM : Cette propriété modifie les coordonnées d’un élément sur les axes X, Y et Z ainsi qu’en 3D). Elle permet de créer des :
– Déplacements : translate
– Rotations : rotate
– Changement d’échelle : scale
– Distorsions : skew
6- ANIMATIONS : Elles permettent de créer des transitions complexes entre deux états de mise en forme. Elle est configurée par deux éléments :
1- Les propriétés de l’animation
2- Les étapes (appelées keyframes) qui indiquent un état initial, un état final et éventuellement des états intermédiaires.
Contrairement aux transitions, les animations se déclenchent automatiquement (et non avec le hover, le click…).
• Animation-name : nom utilisé comme référence pour les @keyframes
• Animation-delay : délai avant le début de l’animation
• Animation-direction : aller-retour ou reprise du cycle entre le from et le to
• Animation-duration : durée du cycle d’animation
• Animation-fill-mode : valeurs à appliquer avant et après l’exécution
• Animation-iteration-count : la répétition de l’animation
• Animation-play-state : permet de gérer l’exécution de l’animation
• Animation-timing-function : la fonction de chronométrage
(accélération)
Mise en pratique
Exercice
L'animation
Créer un carré qui se déplace sur la page en CSS
La transformation
Transformer un carré en losange en CSS
