: On considère la règle CSS ci-dessous. Lister les éléments concernés par cette règle.\n",
" \n",
"```css\n",
"a, nav ul li, .a-retenir, #titre1, p:hover {\n",
" color: red;\n",
"}\n",
"``` \n"
]
},
{
"cell_type": "raw",
"id": "a12c451c",
"metadata": {},
"source": [
"Votre réponse :\n",
"\n"
]
},
{
"cell_type": "markdown",
"id": "e586cc68",
"metadata": {},
"source": [
"# IV. Cascade, spécificité et Héritage\n",
"## 1) Cascade et spécificité\n",
"Le CSS signifie : Feuille de Style en Cascade. Pourquoi Cascade ? Car ll faut régler le problème des règles contradictoires. Imaginons que je déclare les deux règles suivantes. De quel couleur est le paragraphe ? \n",
"\n",
"```css\n",
"p {\n",
" color: red;\n",
" background-color: yellow;\n",
"}\n",
" \n",
"p {\n",
" color:green;\n",
"}\n",
"```\n",
"\n",
"**Le principe de Cascade signifie qu'à spécificité égale, les règles les plus récentes l'emportent sur les plus anciennes, en cas de conflit.** Ainsi, les paragraphes seront écrits en vert sur fond jaune (la propriété de fond jaune n'est pas contredite par la règle suivante). \n",
"\n",
"Sans rentrer dans les détails, **la spécificité indique le degré de généralité d'une règle.** Plus la spécificité est élevée, plus elle s'applique à un élément précis (et donc moins elle est générale). **Les règles les plus spécifiques l'emportent sur les règles générales, en cas de conflit.**\n",
"\n",
"* Un sélecteur d'identifiant (#) est très spécifique : l'identifiant est unique. \n",
"* Un sélecteur de classe (.) est un peu moins spécifique : il cible un groupe d'éléments auxquels on a attribué cette classe\n",
"* Un sélecteur d'élément est très général : il s'applique à tous les éléments d'un certain type. \n",
"\n",
"En résumé : **identifiant (#) > classe (.) > élément**. \n",
"\n"
]
},
{
"cell_type": "markdown",
"id": "d346e39e",
"metadata": {},
"source": [
"
Exercice : Prédire de quelle couleur sera un paragraphe ayant pour classe rouge et pour identifiant
#a-retenir. Le vérifier sur son site web (ou dans JSBin)\n",
" \n",
"1. Cas 1:\n",
" ```css \n",
" .rouge {\n",
" color: red;\n",
" }\n",
" \n",
" #a-retenir{\n",
" color: blue;\n",
" }\n",
" \n",
" p {\n",
" color:green; \n",
" }\n",
" \n",
" #a-retenir{\n",
" color: pink;\n",
" }\n",
" \n",
" ```\n",
"\n",
"2. Cas 2:\n",
" ```css \n",
" p.rouge {\n",
" color:green; \n",
" }\n",
" \n",
" p {\n",
" color: blue;\n",
" }\n",
" \n",
" .rouge {\n",
" color: red;\n",
" }\n",
" \n",
" ```\n",
"\n"
]
},
{
"cell_type": "raw",
"id": "74abd3e5",
"metadata": {},
"source": [
"Votre réponse :\n",
"\n",
"1)\n",
"\n",
"2)"
]
},
{
"cell_type": "markdown",
"id": "0f3cdace",
"metadata": {},
"source": [
"## 2) Héritage"
]
},
{
"cell_type": "markdown",
"id": "9d86caee",
"metadata": {},
"source": [
"Puisqu'on parle de parents et d'enfants, il est normal de parler d'héritage. **Certaines propriétés fixées pour un parent peuvent se transmettre par défaut aux enfants si l'on ne leur spécifie aucune valeur**. Si on spécifie une valeur à l'enfant, alors elle l'emporte celle du parant. \n",
"\n",
"Mais toutes les propriétés ne sont pas héritables. Il faut consulter la documentation pour savoir précisément lesquelles. \n",
"\n",
"Par exemple : si on spécifie une couleur à l'élément HTML `body`, les paragraphes, les listes, les titres... bref, tous les noeuds descendants hériteront par défaut de cette couleur. \n",
"\n",
"Par contre, la propriété `width` n'est pas héritable : si l'on spécifie qu'un `article` à pour largeur 50% (de la place maximale qu'il peut occuper), alors les éléments qu'il contient n'auront pas pour autant leur taille réduite de moitié par rapport à la place maximale qu'ils peuvent occuper."
]
},
{
"cell_type": "markdown",
"id": "09485164",
"metadata": {},
"source": [
"
\n",
" \n",
"**A retenir** : \n",
" \n",
"Avec ces concepts de **spécificité**, de **cascade** et d'**héritage**, le CSS donne un moyen au navigateur pouvoir décider pour tout élément quelle règle CSS lui appliquer, même si des règles sont conflictuelles ou que certaines règles ne sont pas spécifiées pour certains éléments.\n",
" \n",
" \n",
"
"
]
},
{
"cell_type": "markdown",
"id": "489a0aac",
"metadata": {},
"source": [
"# V. Pour aller plus loin"
]
},
{
"cell_type": "markdown",
"id": "e43216dd",
"metadata": {},
"source": [
"Si le sujet vous intéresse, lisez la documentation sur le **modèle de boite (box-model)** qui explique comment tout élément html du `` est assimilable graphiquement à une boite possèdant des marges extérieures (`margin`) et des marges internes (`padding`), ainsi que des bords (`border`). Agencer de manière élégante ces boîtes est ce qui permet d'obtenir de jolis sites web. Par défaut, les boites s'empilent verticalement les unes sous les autres, en occupant toute la largeur disponible. \n",
"\n",
"C'est le réglage des marges, des bords et du style d'empilement de ces boites qui permet d'obtenir des thèmes élégants et lisibles. D'où le fait que vous rencontrez énormement de balises `
` sur les sites web crées par des outils de création de site web. Ce sont des conteneurs purs, qui n'auront que comme but d'avoir les bonnes dimensions, les bonnes marges et le bon type d'empilement pour présenter votre contenu.\n",
"\n",
"
Documentation ici"
]
},
{
"cell_type": "markdown",
"id": "eda03b9c",
"metadata": {},
"source": [
"Source :
MDN Web Docs - CSS"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "c0e49bf7",
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.9.13"
}
},
"nbformat": 4,
"nbformat_minor": 5
}