Remerciez-le!

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

Partie Partie Partie Partie 2 : CSS 3 2 : CSS 3 2 : CSS 3 2 : CSS 3 1 Principe

Partie Partie Partie Partie 2 : CSS 3 2 : CSS 3 2 : CSS 3 2 : CSS 3 1 Principe de base Où écrit on le css? Formatage du texte La couleur du fond Les bordures et les ombres Les sélecteurs Notion de class et id Pseudo class et pseudo élément Les modèle de boîtes Flux et positionnement Plan de la présentation Plan 2 Principe de CSS Principe de CSS 3 Le CSS est un langage permettant la mise en page d’une page web. Attention à ne pas confondre : • Le HTML : dit le contenu de ce qu’il y a sur la page Je veux un titre, Je veux une image, Je veux un paragraphe qui dit ça, ça, ça… Je veux que les titres soient centrés, Je veux qu’une image soit encadrée en vert, Je veux que le fond soit rouge… • Le CSS : dit comment afficher ce qu’il y a sur la page Exemple Principe de CSS 4 Page sans CSS Page avec CSS 5 h2 {color: red; text-align: center ;} déclaration valeur identificateur de propriété sélecteur bloc de déclarations règle CSS ; séparateur entre déclarations ; facultatif à la fin accolades Syntaxe Principe de CSS Les sélecteurs Principe de CSS 6 Les sélecteurs sont des caractères alphanumériques qui identifient la règle. • Sélecteur HTML • La classe • L'ID Règle CSS : présentation du code Principe de CSS 7 Présentation possible : h2 {color: red; text-align: center ; } Présentation conseillée (avec indentation et passage à la ligne) : h2 { color: red; text-align: center ; } Bonne Pratique Les commentaires Principe de CSS 8 Comme en HTML, il est possible de mettre des commentaires. Pour faire un commentaire, on tape : /*suivi du commentaire */ Vos commentaires peuvent être sur une ou plusieurs lignes. Par exemple : /* essai.css Par Flen Fichier créé le jour j * / p { color: blue; /* Les paragraphes seront bleus */ } titre Où écrit on le CSS F 9 On peut introduire un code en langage CSS de 3 façons : Dans un fichier CSS ; Dans l’en-tête du fichier HTML (<head>) ; Directement dans les balises via l’attribut style. Du CSS à travers un fichier CSS Où écrit on le CSS F 10 Pour qu’une page HTML puisse utiliser un fichier CSS il faut le référencer dans la partie <head> avec la balise link <link rel="stylesheet" href="style.css" /> Du CSS dans le <head> du fichier HTML Où écrit on le CSS F 11 On peut intégrer à l’aide de la balise head du code CSS sans passer par une page CSS <head> <meta charset="utf-8" /> <style> h1 { color: red; } </style> </head> Du CSS directement dans les balises Où écrit on le CSS F 12 C’est la manière la moins recommandée <html> <body> <p style="color:red;">Je ne suis pas recommandé</p> </body> </html> Formatage du texte Formatage du texte F 13 La taille La police Styles du texte L’alignement Les flottants La taille : font-size Formatage du texte F 14 Balise { font-size : valeur} taille absolue : valeur en pixels, en centimètres ou millimètres. taille relative : valeur en pourcentage, « em » ou « ex », Taille absolue La taille 15 Balise{ font-size : valeur px} Exemple : font-size: 16px; Une lettre de 16 pixels de hauteur Une valeur relative La taille 16 C'est la méthode recommandée car le texte s'adapte alors plus facilement aux préférences de tous les visiteurs. valeur relative : xx-small : minuscule ; x-small : très petit ; small : petit ; medium : moyen ; large : grand ; x-large : très grand ; xx-large : gigantesque. Il existe que 7 tailles ?!!! Une valeur relative La taille 17 il existe d'autres moyens :. em : 1em, le texte a une taille normale. p { font-size: 0.8em; } ex : qui fonctionne sur le même principe que le em mais qui est plus petit de base le pourcentage : (80%, 130%…). La police : font-family La police 18 balise { font-family: police; } pour éviter les problèmes si l'internaute n'a pas la même police que vous, on précise en général plusieurs noms de police, séparés par des virgules : balise { font-family: police1, police2, police3, police4; } En général, on indique en tout dernier serif ou sans-serif (police par défaut) Liste des polices La police 19 liste de polices qui fonctionnent bien sur la plupart des navigateurs Arial ; Arial Black ; Comic Sans MS ; Courier New ; Georgia ; Impact ; Times New Roman ; Trebuchet MS ; Verdana. Exemple La police 20 p { font-family: Impact, "Arial Black", Arial, Verdana, sans-serif; } Entre " " car il y’a un espace si rien n'a marché, mets une police standard sans-serif Italique, gras, souligné Styles du texte 21 Mettre en italique font-style : normal| oblique| italic Mettre en gras font-weight : normal| bold Soulignement et autres décorations text-decoration : underline |line-through| overline| none Alignement : à gauche, centré, à droite et justifié Styles du texte 22 text-align : left| center| right| justify Valeur : left : le texte sera aligné à gauche (par défaut). center : le texte sera centré. right : le texte sera aligné à droite. justify : le texte sera « justifié ». Exemple : h1 { text-align: center; } p { text-align: justify; } Les flottants Les flottants 23 Le CSS nous permet de faire flotter un élément autour du texte. On dit aussi qu'on fait un « habillage ». Exemple : une image flottante entourée par du texte : Propriétés float et clear Les flottants 24 Float peut prendre deux valeurs très simples : left : l'élément flottera à gauche. right : l'élément flottera à droite Exemple img{ float : left } clear, une propriété qui permet de dire : « Stop, ce texte doit être en-dessous du flottant et non plus à côté ». Peut prendre tes trois valeurs : left : le texte se poursuit en-dessous après un float: left; right : le texte se poursuit en-dessous après un float: right; both : le texte se poursuit en-dessous, que ce soit après un float: left; ou après un float:right;. La couleur et le fond 25 La couleur du texte : color La couleur du fond : background-color Image du fond : background-image La couleur et le fond Les seize noms de couleurs utilisables en CSS La couleur et le fond 26 Color, background-color et background-image La couleur et le fond 27 background-color : définit la couleur de l'arrière-plan Body {background-image: image.gif} Body {background-image: image.gif} background-image : définit l'image de l'arrière-plan URL de l'image H1 {background-color: #000000} H1 {background-color: #000000} Color : définit la couleur du texte par exemple en hexadécimal H3 {color: #000080} H3 {color: #000080} Les bordures standards : border Les bordures et les ombres 28 Border peut utiliser jusqu’à 3 valeurs pour modifier l’apparence de la bordure : La largeur : en pixels (comme 2px). La couleur : nom de couleur (black, red,…), soit une valeur hexadécimale (#FF0000), soit une valeur RGB (rgb(198, 212, 37)). Le type de bordure : (none | solid| dotted|double…..) Exemple : h1 { border: 3px blue dashed; } Les différents types de bordure Les bordures et les ombres 29 Exercice d’application Les bordures et les ombres 30 Ecrire le propriétés css permettant de : Augmenter la taille des paragraphes à 150% Encadrer les titre de niveau 1 avec un trait simple de couleur rouge Souligner les titres de niveau 2 et changer la couleur du texte en vert. – border : en haut, à droite, à gauche, en bas Les bordures et les ombres 31 Les quatre cotés : border-top : bordure du haut ; border-bottom : bordure du bas ; border-left : bordure de gauche ; border-right : bordure de droite. Exemple : On peut modifier les bordures d’une image p { border-left: 2px solid black; border-right: 2px solid black; } Nouveauté de CSS3: Bordures arrondies Les bordures et les ombres 32 border-radius : arrondir facilement les angles de n'importe quel élément. Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en pixels : p { border-radius: 10px 5px 10px 5px; } Les valeurs correspondent aux angles suivants dans cet ordre :en haut à gauche ; en haut à droite ; en bas à droite ; en bas à gauche; en haut à gauche. p { border-radius: 10px;} Nouveauté de CSS3 : Les ombres des boîtes Les bordures et les ombres 33 La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant : le décalage horizontal de l'ombre ; le décalage vertical de l'ombre ; l'adoucissement du dégradé ; la couleur de l'ombre. Exemple p { box-shadow: 6px 6px 0px black; } Nouveauté de CSS3 : L’ombre du texte Les bordures et les ombres 34 text-shadow : l'ombre du texte Avec text-shadow, vous pouvez uploads/Ingenierie_Lourd/ cours-web-2-css3.pdf