Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

{CSS} Cascading Style Sheets o La création de styles CSS (Cascading Style Sheet

{CSS} Cascading Style Sheets o La création de styles CSS (Cascading Style Sheets ou feuilles de style en cascade) est le complément indispensable du langage (X)HTML. o Ce procédé correspond parfaitement à la séparation du contenu (Fond) et de la présentation (Forme) d’un document. CSS ? Pourquoi CSS ? o Permet de choisir la couleur de votre texte. o Permet de sélectionner la police utilisée sur votre site. o Permet de définir la taille du texte, les bordures, le fond... o Permet de faire la mise en page de votre site. o Permet d’appliquer une même mise en forme à plusieurs pages Avec et sans CSS HTML (sans CSS) HTML + CSS Un style homogène pour tout le site CSS : Les règles de style p {color: blue;} h1 {font-style: italic; font-family: Arial, sans-serif;} Sélecteurs Blocs de déclaration o Sélecteur : Balises HTML concernées par la règle CSS. o Bloc de déclaration : Propriétés CSS à appliquer au sélecteur : {propriété: valeur;} Exemple : CSS : Les commentaires o Il est utile de commenter les feuilles de style, pour s’y retrouver plus tard lorsqu’il s’agira d’apporter des modifications. o Il suffit de placer les commentaires entre les signes /* et */ : Exemple : /* Voici un commentaire */ /* Et en voilà un autre, mais sur deux lignes */ Emplacements des styles o Comme attributs de balises : Styles en ligne <h2 style= "text-align: center; color: red;"> ...Titre... </h2> o Dans l’entête de la page HTML : Feuille de style interne <head> ... <style type="text/css">  </style> ... </head> Emplacements des styles o Dans un fichier distinct: Feuille de style externe (appelée dans l’entête de la page HTML) <head> ... <link rel="stylesheet" type="text/css" href="style.css" /> ... </head> Ou <head> ... <style type="text/css"> @import url(style.css); </style> ... </head> Les sélecteurs de style oSélecteurs simples Exemples : div { color: blue; } p { color: red; }  La première règle s’applique à toutes les balises <div> de la page web,  La deuxième à toutes les balises <p> Les sélecteurs de style oLes Classes (class) Appliquer un style particulier à certaines balises de même type ou de types différents Exemple : class <p class="nom_classe">...</p> //code HTML p.nom_classe { text-align: center; } //code CSS Les classes oUne même classe pour plusieurs types de balises Exemple : <h1 class="menu">, <a class="menu"> //code HTML .menu { font-style: italic; } //code CSS Les identifiants (id) oIl ne peut y avoir qu’une seule utilisation dans la page oExemple : <p id="auteur">...</p> p#auteur { color: blue; } ou #auteur { color: blue; } Les pseudo-classes Pour les liens hypertextes • :link = lien hypertexte qui n’a pas été visité ; • :visited = lien visité (et encore présent dans l’historique du navigateur) ; • :hover = élément survolé par la souris ; • :active = élément activé (la souris pointant ce lien, son bouton est enfoncé). Exemple a:hover { color: red; } Ou <a class="menu" ...> a.menu:hover { color: red; } Les pseudo-éléments • :first-letter = première lettre du bloc ; • :first-line = première ligne du bloc ; • :before = avant la balise spécifiée ; • :after = après la balise spécifiée. Exemple p:first-letter { font-size: 40pt; } agrandir la taille de la première lettre pour chaque paragraphe <p> Regroupement de propriétés h1 { border-width: 2px; border-style: solid; border-color: blue; } Ou h1 { border: 2px solid blue; } Hiérarchie et imbrication des sélecteurs o Pour justifier seulement le texte des paragraphes <p> qui sont inclus dans un bloc <div>, il faut écrire la règle suivante : div p { text-align: justify; } o Pour mettre en gris uniquement les liens contenus dans l’élément d’identifiant « sommaire », la règle à utiliser est : #sommaire a { color: gray; } Hiérarchie et imbrication des sélecteurs Imbrication directe div > h1 { font-style: italic; } Cette règle s’applique aux balises <h1> qui sont dans le premier niveau d’imbrication à l’intérieur d’une balise <div> (enfant direct) Juxtaposition h1 + h2 { margin-top: 10px; } Cette règle s’applique à chaque balise <h2> qui suit une balise de fermeture </h1> Sélecteur universel * • * { text-align: center; } • * { margin: 0; } /*souvent utilisée*/ • div * { color: blue; } /* concerne toutes les balises qui sont incluses dans un bloc donné*/ Priorités des styles Priorités des styles Exemple 1 div p { color: blue; } p { color: green; } Dans ce cas, les paragraphes <p> seront écrits en vert, sauf ceux inclus dans un bloc <div>, qui resteront en bleu. Exemple 2 div.ma_classe { background-image:url(image1.png) !important; background-image:url(image2.gif); } Quelques propriétés CSS o Formatage du texte (taille, police, Alignement) o Couleurs et fond o Bordures et ombres o Mise en page Formatage du texte o Taille du texte (font-size) Taille absolue Formatage du texte o Taille du texte (font-size) Taille relative Code : CSS o Taille du texte (font-size) Taille en (em, ex, %) Formatage du texte font-size: 0.8ex; font-size: 80%; o Police (font-family) Formatage du texte o Ajouter une police personnalisée : @font-face - Formats : .ttf, .eot, .otf, .svg, .woff h1 /* Utilisation de la police qu’on vient de définir sur les titres */ { font-family:'MaSuperPolice', Arial, serif; } o Italique, Gras, Soulignement.. Formatage du texte Italique Gras text-decoration o Alignement (text-align) [left, right, center, justify] Formatage du texte o Les flottants Formatage du texte Couleurs o Notation par nom de couleur o Notation hexadécimale o Notation RGB o Notation RGBa o Notation par nom de couleur h1 { color: maroon; } o Notation hexadécimale (#000000 - #FFFFFF) P { color: #FFFFFF; } o Notation RGB P { color: rgb(240,96,204); } o Notation RGBa P { color: rgba(240,96,204,0.5); } Couleur de fond body /* On travaille sur la balise body, donc sur TOUTE la page */ { background-color: black; /* Le fond de la page sera noir */ color: white; /* Le texte de la page sera blanc */ } background-color Image de fond body { background-image: url("neige.png"); } Image de fond o Fixer le fond (background-attachment) - fixed : l'image de fond reste fixe. - scroll : l'image de fond défile avec le texte (par défaut). body { background-image: url("neige.png"); background-attachment: fixed; /* Le fond restera fixe */ } o Répéter le fond (background-repeat) - no-repeat : le fond ne sera pas répété. L'image sera donc unique sur la page. - repeat-x : le fond sera répété uniquement sur la première ligne, horizontalement. - repeat-y : le fond sera répété uniquement sur la première colonne, verticalement. - repeat : le fond sera répété en mosaïque (par défaut). body { background-image: url("soleil.png"); background-repeat: no-repeat; } Image de fond o Position de l’image de fond (background-position) - En pixel { …… background-position: 30px 50px;} - Par nom de position • top : en haut. • bottom : en bas. • left : à gauche. • center : centré. • right : à droite. { …… background-position: top right;} Image de fond body { background-image: url("soleil.png"); background-attachment: fixed; /* Le fond restera fixe */ background-repeat: no-repeat; /* Le fond ne sera pas répété */ background-position: top right; /* Le fond sera placé en haut à droite */ } o Plusieurs images de fond body { background: url("soleil.png") fixed no-repeat top right; } o Notation abrégée body { background: url("soleil.png") fixed no-repeat top right, url("neige.png") fixed; } o Exemple complet Bordures o border-width (Largeur en pixel) o border-color (Couleur de la bordure) o border-style (Type de bordure) • none : pas de bordure • solid : un trait simple. • dotted : pointillés. • dashed : tirets. • double : bordure double. • groove : en relief. • ridge : autre effet relief. • inset : effet 3D enfoncé. • outset : effet 3D surélevé. h1 { border: 3px dashed blue; } Bordures o Position de la bordure • border-top : bordure en haut. • border-bottom : bordure en bas. • border-left : bordure à gauche. • border-right : bordure à droite. p{ border-left: 2px solid black; border-right: 2px solid black; } o Bordure arrondies (border-radius) : CSS 3 p{ border-radius: 10px; } p{ border-radius: 10px 2px 10px 2px; } Ordre des coins : En haut à gauche, En haut à droite, En bas à droite, En bas à gauche Ombres o Ombre des boites (box-shadow) : CSS 3 1. Le décalage horizontal de l'ombre 2. Le décalage vertical de l'ombre 3. L'adoucissement du dégradé 4. La couleur de l'ombre p{ box-shadow: 6px 6px 0px black; } o Ombre du texte (text-shadow) : CSS 3 p{ text-shadow: 2px 2px 4px black; } Dimensions o Largeur et hauteur • width : Largeur du bloc. en pixels (px) ou en pourcentage (%). • height : Hauteur du block. en pixels (px), ou en pourcentage (%). p{ width: 50%; } p{ width: 250px; } o Minimum et Maximum • min-width : largeur minimale • min-height : hauteur minimale • max-width : largeur maximale • max-height : hauteur maximale p{ width: 50%; min-width: uploads/s3/ cascading-style-sheets.pdf