Partie III CSS3 Les notions de base Création de sites WEB statiques 1 Réalisé p
Partie III CSS3 Les notions de base Création de sites WEB statiques 1 Réalisé par Mme N .MGHARBI Plan Introduction Où écrire le code CSS? Indentation et commentaires Sélecteurs simples Sélecteur complexes Création de sites WEB statiques 2 Réalisé par Mme N .MGHARBI Introduction Le CSS permet de mettre en page un contenu en lui appliquant des styles Un sélecteur permet de cibler un ou plusieurs éléments HTML. Il existe des sélecteurs simples et complexes. Une propriété permet de choisir l’aspect d’un élément HTML qu’on souhaite modifier. Création de sites WEB statiques 3 Réalisé par Mme N .MGHARBI Où écrire le code CSS? Il existe 3 manières pour écrire le code: En se servant de l’élément<Style> au sein de l’ élément <Head> En ajoutant l’attribut style directement dans la balise de l’élément qu’on souhaite modifier En l’écrivant sur un fichier séparé d’extension .css, c’est la méthode la plus recommandée. Pour lier la feuille de style au fichier html, il faut ajouter à ce dernier un nouvel élément <link> dans <Head> avec les attributs REL et HREF. Création de sites WEB statiques 4 Réalisé par Mme N .MGHARBI Indentation et commentaires Pour la clarté et la propreté du code, l’indentation et les commentaires sont également conseillés pour le langage CSS Les commentaires en CSS n’impactent pas le style. On écrit les commentaires entre les deux symboles suivants: /* et */. Exemple: /* commentaire */ Création de sites WEB statiques 5 Réalisé par Mme N .MGHARBI Sélecteurs simples Pour appliquer le style, on peut: Préciser des aspects (styles) pour chaque sélecteur Ou appliquer les mêmes modifications à plusieurs sélecteurs en les séparant par des virgules p, h1{ color: red; } Création de sites WEB statiques 6 Réalisé par Mme N .MGHARBI Sélecteurs complexes les sélecteurs #id et .class permmettent de cibler un élément en particulier plutôt qu’un type d’élément. Méthode: Partie HTML: Ajouter les attributs id et /ou class à l’intérieur de la balise de l’élément cible en lui affectant une valeur Partie CSS: cibler cet élément en l’appelant par son id ou sa classe. Création de sites WEB statiques 7 Réalisé par Mme N .MGHARBI Sélecteurs complexes Différences entre id et class: On ne peut trouver deux éléments avec la même valeur de l’attribut id. En revanche, on a le droit d’affecter la même valeur de l’attribut class à plusieurs éléments du même document HTML Création de sites WEB statiques 8 Réalisé par Mme N .MGHARBI uploads/s3/ bases-css3.pdf
Documents similaires
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/g1r5XkKqAcWLCLKaB3j1GjL3uncFQznt5F9uyyagCJhkUjj2jrFKbVj8xDXih8YdWFUFeqv13SigTWRsONiJk1np.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/Dc3wMSuOGVrPMsM06cr4qHu978pcCvrABhrWli1zgTmBkY6yuqEDyKv0KZTZZtFWeC27kcXyy93OuYLFDzGVIySX.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/U0Y8YnhcxfRQjuUI2BCozDlI3lUIIjmgEbmsxvuuTNsZHwWlAJzn2V9f3PzEKahIa3NzQ2dVrfFoB9gKFlxEedOO.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/CCReGGChwIlASB2PSAJkyBAX27FGgdYZj5IGExg2xkN9JjAi2ybcmHSmSSYEi9FaTiVDFf9MRay62PxXeM4S8YVf.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/39lWJR1u3hoB466wrchUZwyjs7AlYawgihQCuMvRmvyn6hoiILtH5AuyRVfqhQVQUuq4mLvSE1WV5NzrasXJrwt2.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/RvSfuobugJqYF9ONyN31SkL4BfkBSU3Eyetw4x2YdIOZ5AzLUPrVvnutnMelDyrbIzG3yrht0OMmatxsmvwUgV88.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/ZdaisrwMmJGYSAD4SS5wzHz5clFthAy2IyEF0jElvIERqsPVfBYWIusXM8NYvU51DSPCm1uAHah8f8JjUUg5WKs7.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/ElQSAXu0xQfrCIJssNpWZ8yLESfDvUVWZe6UHVPqxg60kOiWPAOyzZwLngBOdkThuyZPkEAW65382PgwzvetRMSk.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/GtBxUkQygY8BKnNwawNDqL5GI6juOIiZtOSwSqyUOXhF87n4M2WTqT4SHSHeVV86BHxAaDdLuLZYGUju5PIgrBK6.png)
![](https://b3c3.c12.e2-4.dev/disserty/uploads/preview/YIIgMTdy8nsfWlzVmGuRvY81FUPwh4o0r0fYejZo3zj7Ws8Xv4JoNkMBZTsDSJSczFKrwJ2agjeozZlIinne4oTC.png)
-
20
-
0
-
0
Licence et utilisation
Gratuit pour un usage personnel Attribution requise- Détails
- Publié le Mar 10, 2022
- Catégorie Creative Arts / Ar...
- Langue French
- Taille du fichier 0.1617MB