01/06/2026 22:40 CSS3 - Annexe 2025 (Sélecteurs & Propriétés) | Lycée Cité Des Journalistes

📘 CSS3 — Annexe 2025

Sélecteurs, propriétés textes, listes, arrière‑plan, transformations, images, tableaux, boîtes,
bordures, transitions & animations
✔ Annexe 2025 | Unités utilisées : px et %

🎯 1. Sélecteurs CSS (extraits de l'annexe)

* | element | #id | .class | element[attr] |

element[attr=valeur] | a:link, a:visited, a:hover,
a:active

/* Sélecteur universel : tous les éléments */

* {
margin: 0;
}
/* Sélecteur de type (element) */
p {
color: #1e4660;
}
/* #id et .class */
#unique { background: #ffe5b4; }
.card-highlight { border: 2px solid gold; }

/* Sélecteur d'attribut simple */

input[disabled] { opacity: 0.5; }
/* Sélecteur attribut + valeur exacte */
input[type="text"] { width: 100%; }

/* [Link] (combinaison) */
[Link] { background: #fff0db; }

/* Pseudo-classes pour liens */

a:link { color: #2c7da0; } /* lien non visité */
a:visited { color: #6c3483; } /* visité */
a:hover { color: #e67e22; } /* survol souris */
a:active { color: #c0392b; } /* clic actif */

/* Regroupement avec virgules : h1, h2, h3 même règle */

h1, h2, h3 { font-family: 'Segoe UI', sans-serif; }

localhost/2025-2026/resume/CSS_3.html 1/7
01/06/2026 22:40 CSS3 - Annexe 2025 (Sélecteurs & Propriétés) | Lycée Cité Des Journalistes

🔍 APERÇU DES SÉLECTEURS

✔ élément avec ID "unique"

✔ .card-highlight (class & border)

Champ désactivé (attr)

[Link] → fond crème

Lien non visité | Lien visité (exemple) | Survolez-moi (hover)

Remarque : Grouper plusieurs sélecteurs avec des virgules « , ».

✍️ 2. Propriétés de mise en forme du texte

font-family, font-weight, font-style, font-size, font

(super), text-align, text-shadow, text-transform,
color

/* Propriétés typographiques */
.texte-style {
font-family: 'Segoe UI', Arial, sans-serif;
font-weight: bold; /* normal, bold, bolder, lighter */
font-style: italic;
font-size: 20px;
font: italic bold 20px 'Segoe UI'; /* super-propriété font */
text-align: center;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
text-transform: uppercase; /* lowercase, capitalize */
color: #1f5e7e;
}

📄 APERÇU TEXTE

EXEMPLE
EXEMPLE DE
DE STYLE
STYLE TEXTE
TEXTE

lowercase Capitalize Each Word ombre portée

📃 3. Propriétés des listes

localhost/2025-2026/resume/CSS_3.html 2/7
01/06/2026 22:40 CSS3 - Annexe 2025 (Sélecteurs & Propriétés) | Lycée Cité Des Journalistes

list-style-type, list-style-position, list-style-

image, list-style (super)

[Link]-css {
list-style-type: square;
// circle | square | upper-roman | lower-alpha
list-style-position: inside;
list-style-image: url('[Link]');
/* image comme marqueur */
list-style: circle inside;
/* super-propriété */
}

📌 TYPES DE LISTES

Type square I. upper-roman a. lower-alpha & inside

Deuxième élément II. Second item b. marqueur à l'intérieur

🖌️ 4. Propriétés d’arrière‑plan

background-color, background-image, background-

repeat, background-size, background (super)

.fond {
background-color: #d9eef5;
background-image: url('[Link]');
background-repeat: repeat-x;
background-size: contain;
background: #d9eef5 url('[Link]') no-repeat center/cover;
}

🌟 Arrière-plan avec dégradé (background-color + image simulée)

background-repeat / background-size : motif répété

localhost/2025-2026/resume/CSS_3.html 3/7
01/06/2026 22:40 CSS3 - Annexe 2025 (Sélecteurs & Propriétés) | Lycée Cité Des Journalistes

🔄 5. Transformation (transform)

transform : rotate(), skew(), scale(), translate()

.transform-demo {
transform: rotate(10deg) scale(1.05) translate(10px, 0);
}
.transform-demo:hover {
transform: skew(5deg, 2deg) scale(1.1);
}

🔁 SURVOLEZ L A CARTE

⚡ transform: rotate(2deg) + scale au hover

✓ rotate, scale, translate, skew disponibles

🖼️ 6. Propriétés des images (filter)

filter : blur(), grayscale(), invert()

[Link]-filtre {
filter: grayscale(0.8) blur(1px);
}
img:hover {
filter: invert(0.9);
}

grayscale() blur(2px) invert(0.8)

localhost/2025-2026/resume/CSS_3.html 4/7
01/06/2026 22:40 CSS3 - Annexe 2025 (Sélecteurs & Propriétés) | Lycée Cité Des Journalistes

📊 7. Propriétés des tableaux

table-layout, border-collapse

table {
table-layout: fixed;
border-collapse: collapse;
}

Nom CSS
border-collapse:collapse fusion des bordures

📦 8. Propriétés des boîtes

width, height, position, float, padding, margin, box-

shadow, display, top/bottom/left/right, overflow,
opacity

.boite-demo {
width: 200px; height: 100px;
position: relative;
float: left;
padding: 12px;
margin: 8px;
box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
display: inline-block;
overflow: auto;
opacity: 0.9;
}

⚡ position relative, float:left

padding, margin,
box-shadow

overflow: auto, opacity 0.9, display inline-block

localhost/2025-2026/resume/CSS_3.html 5/7
01/06/2026 22:40 CSS3 - Annexe 2025 (Sélecteurs & Propriétés) | Lycée Cité Des Journalistes

🖍️ 9. Propriétés des bordures

border-color, border-style, border-radius, border-

width, border (super)

.bordure-rond {
border-color: #f39c12;
border-style: solid;
border-width: 3px;
border-radius: 20px;
border: 3px dashed #2980b9;
}

border-color: orange, radius 24px

border: dashed + border-radius

⏱️ 10. Transition

transition-delay, transition-duration, transition-

property, transition (super)

.transition-card {
transition-property: all;
transition-duration: 0.4s;
transition-delay: 0.1s;
transition: background 0.3s ease 0s, transform 0.2s;
}

Survolez : transition (couleur + scale)

localhost/2025-2026/resume/CSS_3.html 6/7
01/06/2026 22:40 CSS3 - Annexe 2025 (Sélecteurs & Propriétés) | Lycée Cité Des Journalistes

🎬 11. Animation (@keyframes, animation-*)

@keyframes, animation-name, animation-delay,

animation-duration, animation-iteration-count,
animation-direction, animation (super)

@keyframes slideGlow {
0% { opacity: 0.3; transform: translateX(0); }
100% { opacity: 1; transform: translateX(20px); }
}
.anim-box {
animation-name: slideGlow;
animation-duration: 1.2s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation: slideGlow 0.8s infinite alternate;
}

✨
animation

animation-iteration-count: infinite, alternate direction

📚 Résumé CSS3 strictement conforme à l'annexe — Lycée Cité Des Journalistes (Ariana)
Exemples, aperçus visuels et code couleur (VS Code style) — M. Ben Amor Walid © 2026

localhost/2025-2026/resume/CSS_3.html 7/7