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

  • 20
  • 0
  • 0
Afficher les détails des licences
Licence et utilisation
Gratuit pour un usage personnel Attribution requise
Partager