24 octobre 2012 Grégory Petit

La semaine dernière… L’élément HTML Passage en revue des éléments Web essentiels

Et donc on fait quoi aujourd’hui? Les feuilles de styles, ça sert à quoi? Les règles CSS Gestion dans Dreamweaver Attributs de formatage

Les feuilles de styles, ça sert à quoi?

Les feuilles de styles On en a déjà parlé sans jamais expliquer ce que c’est. Elles permettent le formatage et la mise en page de la page Web. Le langage utilisé est le CSS : Cascading Style Sheets. Une feuille de style contient plusieurs règles CSS.

Dans un site Web Plusieurs fichiers HTML Contenu du site Un ou deux fichiers CSS Format et mise en page du site

Trois emplacements différents Dans un fichier CSS à part. À l’intérieur d’un fichier HTML. Dans l’éléments HTML.

Les règles CSS

Une règle CSS permet d’appliquer un formatage et une mise en page à plusieurs éléments Web du même type. Une règle CSS contient : Un ou plusieurs sélecteurs Un bloc CSS

Syntaxe selecteur(s) { bloc CSS } Exemple: h1 { margin: 10px px; padding: 0; font-size : 12px; }

Le sélecteur C’est ce qui permet de savoir à quels éléments s’applique la règle CSS. Exemple: h1 { Bloc CSS } Ici, la règle s’applique à tous les entêtes de premier niveau de la page Web. sélecteur

Le sélecteur Un sélecteur peut contenir une balise, une classe et un id Balise : a  s’applique à tous les liens Classe :.externe  s’applique à tous les éléments Web appartenant à la classe "externe" (class = "externe") Id : #pied-de-page  s’applique à tous les éléments ayant un id "pied-de-page » (id="pied-de-page")

Le sélecteur Le sélecteur peut combiner les 3 facteurs de la diapo précédente en même temps. a#pied-de-page.externe  s’applique à tous les liens ET ayant un attribut classe "externe" ET ayant un id "pied-de-page"  a#pied-de-page / a.externe / #pied-de-page.externe

Le sélecteur Le sélecteur peut aussi inclure les éléments Web parents. #menu a  s’applique à tous les liens qui s’ont à l’intérieur d’un élément Web ayant l’id "menu". Accueil On sépare les éléments de parenté avec un espace dans le sélecteur.

Ordre de priorité des sélecteurs Certains sélecteurs vont avoir la priorité sur d’autres Code HTML Accueil Un règle CSS ayant comme sélecteur #menu a l’emportera sur une règle CSS ayant comme sélecteur a

Ordre de priorité des sélecteurs Si une règle contient plus d’éléments parents qu’une autre, elle est prioritaire. Si 2 règles ont le même nombre d’éléments parents, on regarde le dernier élément et l’ordre de priorité est le suivant: tag#id.class #id.class tag#id #id tag.class.class tag

Le bloc CSS Il contient les différents attributs CSS qui vont s’appliquer aux éléments Web identifiés par le sélecteur. h1 { margin: 10px px; padding: 0; font-size : 12px; } Chacun de ses 3 attributs s’applique aux entêtes de niveau 1.

Le bloc CSS Syntaxe margin: 10px px; attribut valeur de l’attribut

Gestion dans Dreamweaver

Le fichier CSS Dreamweaver demande où créer le fichier CSS lors de la création de la première règle. Comme pour les images, il est conseillé de mettre les fichiers CSS dans un répertoire à part sous l’arborescence principale du site.

Ajouter une règle CSS Sélectionnez l’élément Web sur lequel vous voulez appliquer une règle

Ajouter une règle CSS

Type de sélecteur sélecteur simple sélecteur complexe

Sélecteur complexe

Nouveau fichier CSS

Fichier CSS existant Dans l’entête du fichier HTML, la liaison se fait comme suit: Dans Dreamweaver, il faut penser à mettre la nouvelle règle dans le fichier existant.

Bloc CSS  attributs

Boite d’outils Styles CSS Double-cliquez sur un sélecteur pour le modifier.

Code CSS

Trois emplacements différents Dans un fichier CSS à part. À l’intérieur d’un fichier HTML. Dans l’éléments HTML.

CSS à l’intérieur du fichier HTML (à éviter) Balise à l’intérieur de l’entête du fichier HTML …. h1 {color:red;} p {color:blue;} La même chose qu’on retrouve dans les fichiers CSS

CSS à l’intérieur d’un élément HTML (à éviter) Attribut "style" à l’intérieur de la balise d’ouverture de l’élément HTML Ceci est une entête! La même chose qu’on retrouve dans le bloc CSS d’une règle CSS

Attributs de formatage

Attributs CSS Vous pouvez les modifier directement dans la boite à outils Styles CSS. Ou alors en éditant le sélecteur en double- cliquant dessus

Catégorie Type

Catégorie Fond

Catégorie Bloc

Autres catégories Les autres catégories font parties de la mise en page. On verra donc ça la semaine prochaine.

Atelier

Vous devez me faire un truc qui ressemble à ça mais avec seulement 5 règles CSS

Des questions??? Merci de votre attention! A la semaine prochaine!