IPW Course 3 CSS

Plan du course Qu'est-ce que CSS CSS niveaux Attacher un fichier CSS au HTML Syntaxe CSS Couleurs en HTML Exemples

CSS CSS = Cascading Style-Sheets Style = la façon dont les balises HTML sont affichés Style-sheets = documents où l'information de style est stockée - le plus souvent des documents externes Cascade = il ya plusieurs niveaux sur lesquels on peut définir le style d'une page

Utilisation de CSS Le style peut être joint dans la page HTML à chaque élément => Problèmes dans le maintien de la page => Problèmes dans les grands sites contenant beaucoup de pages Beaucoup plus facile si le style de tous les éléments sont stockés séparément - les modifications apportées à 1 place sont répartis à l'ensemble des pages automatiquement

CSS niveaux Style information peut être défini à plusieurs niveaux niveau Browser - le style par défaut du navigateur la manière dont la page est affichée si aucune information de style est présent

CSS Browser level example Default browser style; no style specified in html After we modified the default browser style

CSS niveaux niveau document externe - le style est spécifié dans un fichier .css. Ce fichier est inclus dans le document HTML en utilisant l'élément link <link rel="stylesheet" type="text/css" href=“style.css" />

CSS External Document Level h1 { color: blue;}

CSS levels Feuille de style interne (à l'intérieur de la balise <head>) Définir le style de la feuille à l'intérieur de la page html Style spécifiées dans un élément de type “style” Exemple: <style type="text/css"> h1 {color: yellow} </style>

CSS Internal Style Sheet Level <head> <title>le titre du document</title> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css"> h1 {color: yellow} </style> </head>

CSS Levels Niveau Élément - le style est spécifié à l'intérieur de l'élément PAS RECOMMANDÉ! Example <h1 style="color: black;" > Introduction dans la programmation web</h1>

CSS Element Style Level <h1 style="color: black;" > Introduction dans la programmation web</h1>

CSS Levels - Conclusion Browser niveau Niveau des documents externes Celui que nous allons utiliser Niveau feuille de style interne (à l'intérieur de la balise “head”) Ne doit pas être utilisé Niveau de l'élément de style Ne doit jamais être utilisé La priorité augmente

CSS Syntax La syntaxe contient triples: Selector - sur quel élément (s) nous appliquons le style Propriété - qui est la propriété de changer Valeur - la valeur modifiée h1 { color : yellow; }

CSS syntax – selector types Un sélecteur peut être le nom d'un élément HTML (h1) Le style défini s'applique pour tous les éléments de ce type Le nom d'un élément "." le nom du style de classe H1.blue{color:blue;} La classe est utilisée à l'intérieur de l'élément HTML comme un attribut <h1 class=“blue”>

Un sélecteur peut être L’id d’un élément #id5 {color:blue;} L’élément doit avoir l’id défini <h1 id=“id5”> Une combinaison des options précédents

Couleurs in html/css Les couleurs sont identifiés grâce à les noms (red, green,blue ...) Cela est possible pour un très petit nombre de couleurs Valeurs Une couleur est représentée par un triplet de valeurs RGB Chaque valeur dans le triplet peut prendre une valeur comprise entre 0-255 (FF en hexa) Le nombre total de couleurs qui peuvent être exprimés comme celle-ci est d'environ 16 millions Une valeur de couleur est formé comme # RRGGBB où RR = la valeur hexa pour le rouge, GG = valeur hexa vert ...

Couleurs in html exemples Noir #000000 Blanc #FFFFFF Rouge #FF0000 Vert #00FF00 Bleu #0000FF Jaune #FFFF00

CSS Examples body { background-image: url('bgdesert.jpg') } body { background-color: #FFFF00; }

padding properties margin properties

CSS Tables Example table, td, th { border:1px solid green; //border-collapse:collapse; } th { background-color:green; color:white; } Without border-collapse With border-collapse

CSS HowTO Il ya beaucoup de valeurs et attributs CSS pour définir le style Il est difficile de les connaître tous Vous devez utiliser une référence internet comme http://www.w3schools.com/css/css_reference.asp Vous avez besoin de comprendre les mécanismes de CSS Vous avez besoin d’exercise

Conclusions CSS = la façon de modifier le style d'une page html Un grand nombre de propriétés - les valeurs possibles ne devraient pas être connues par coeur - le recours à la documentation Vous devez connaître les principes, les niveaux et quelle est la finalité de chaque propriété

IPW Course 3 CSS

Contenu connexe

Tendances

En vedette

Similaire à IPW Course 3 CSS

Plus de Vlad Posea

IPW Course 3 CSS