css - mathinfo-fso.ump.mamathinfo-fso.ump.ma › oudghiri › teatch_files › css.pdf · css...

CSS

Mourad Oudghiri

FSO - Département [email protected]

Novembre 2011

Mourad Oudghiri CSS

css Les élément HTML

Les éléments HTMLUn élément HTML est composé d’une balise ouvrante, d’uncontenu formé du texte et/ ou d’autres balises, et de la balisefermante correspondante. Par exemple

<strong>exemple</strong>est un élément HTML.

Il existe deux type d’éléments HTML :Les éléments de type blocLes éléments en ligne

Mourad Oudghiri CSS


Les blocsLes blocs distinguent des parties entières. Ces éléments sontplacés par le navigateur l’un sous l’autre.

Les principales balises de type bloc :La balise <blockquote>La balise <p>La balise <form>Les balises <h1>, ..., <h6>Les balises <ol> et <ul>La balise <table>

Les divisionsLa mise en page d’une page web se fait préférentiellement àl’aide de balises de type bloc. La plus indiquée pour cet usageest <div> qui signifie division : c’est une balise générique, i;en’a pas de sens sémantique, servant de conteneur neutre.

Mourad Oudghiri CSS


Les éléments en ligneLes éléments en ligne sont utilisés pour enrichir localement desportions de texte : <a>, <strong>, <img>, ect.Ces éléments sont placés à l’intérieurs des blocs.

Les principales balises en ligne :

La balise <a>La balise <em>La balise <img>La balise <span>La balise <strong>Les balises <input>, <textarea> et <select>

Mourad Oudghiri CSS


On peut distinguer deux sortes d’éléments en ligne :

les éléments remplacés qui acceptent des attributs dedimensions : height et width. Par exemple : <img>,<input>, <textarea>, <select>.les éléments non remplacés qui n’ont pas de dimension.Par exemple : <strong>, <i>, <a>.

Il est facile de passer d’une structure bloc à une structure enligne, et inversement, grâce à la propriété display et ses valeursblock et inline.

Mourad Oudghiri CSS


La syntaxe de base des CSS

sélecteur {propriété1 : valeur1;propriété2 : valeur2;}

Exemple :h1 {color : blue;text-align : center;}

Ce style permet d’afficher le contenu du bloc <h1> en bleu etcentré.La propriété list-style-type porte sur la représentation despuces des listes. La valeur none les supprime.

Mourad Oudghiri CSS

css Appliquer les styles CSS

Comment appliquer un style css à un document HTML ?

Style intégréOn déclare le style dans l’attribut style d’un élément :

<h1 style="color:blue;">Titre en bleu</h1>

Style incorporéIl inséré dans l’en-tête <head> du document entre <style> et</style>.<style type="text/css">h1 {color: blue;}</style>Il s’applique dans ce cas à l’ensemble du document.

Feuille de style liéeOn peut mettre toutes les règles dans un fichier fichier.css et lelier à la page web avec la balise <link> placée dans l’en-tête :<link rel="stylesheet" type="text/css" href="fichier.css">

Mourad Oudghiri CSS


Il est toujours intéressant de mettre toutes les règles dans unseul fichier css. Ainsi, plusieurs documents HTML peuvent faireappel à la même feuille de style.Un style sur le sélecteur <h1> affectera toutes les balises <h1>dans les pages HTML concernées. Cet effet n’est pas toujoursdésirable : on souhaite parfois n’intervenir que sur certainesbalises : en centrant le contenu de certain balise <h1> maispas toutes.Le langage CSS propose plusieurs solutions :

les sélecteurs de balises : h1, ul, table...les sélecteurs de classes : une classe est un nom donné àun ensemble d’éléments HTML à distinguer.les sélecteurs d’identifiants : un identifiant ou id est le nomattribué à un élément unique dans le document HTML.les pseudo-classes et les pseudo-éléments.

Mourad Oudghiri CSS


Les classesUne classe est un nom que l’on choisit librement et dont onaffecte à tous les éléments sur lesquels on veut appliquer sonstyle. Un sélecteur de classe reprend son nom en le préfixantd’un point.

On définit les deux classes suivantes : titre1 et titre2.titre1 { color : blue; }.titre2 { color : green; text-align:center}<h1 class="titre1">Titre en bleu</h1><h1 class="titre2">Titre en vert et centré</h1>

Mourad Oudghiri CSS


Les identificateursUn identificateur (id) est lui aussi un nom choisi librement. Il sedistingue de la classe en ce qu’il ne peut porter qu’au plus surun objet du document. Le sélecteur correspondant reprend lenom de la classe en le préfixant de #.

#ZoneJaune {background-color: yellow;width:100px;height:50px;}<div id="ZoneJaune"></div> produit une zone de couleur defond jaune, de largeur 100 px et de hauteur 50 px.

Mourad Oudghiri CSS


Les pseudo-classesLes pseudo-classes permettent de rajouter des effets spéciauxà certains sélecteurs.

a:link {color:red;} /* Lien non visité */a:visited {color:green;} /* Lien visité */a:hover {color:yellow;} /* Pointeur de la souris est sur le lien */a:active {color:black;} /* Lien sélectionné */

Les pseudo-élémentsIls font référence à des parties de texte qui ne sont pasforcément délimités par des balises HTML.

p:first-letter {color : red;/*premier caractère du paragraphe est en rouge*/}p:first-line {font-weight:bold;/*première ligne du paragraphe est en gras*/ }

Mourad Oudghiri CSS


Sélecteurs hiérarchiquesOn peut définir un style à appliquer uniquement sur leséléments d’une certaine classe ou certain identificateur.

Exemple 1 : a.toto {background-color: yellow;} permet de doteruniquement les lien de la classe toto d’un font de couleur jaune.

Exemple 2 : #menu a {background-color: yellow;} permet dedoter uniquement les lien de l’identificateur menu d’un font decouleur jaune.

HéritageLes styles d’un élément sont héritées par ses élémentsdescendants.

Mourad Oudghiri CSS

css Les polices de caractères

Les policesA l’aide de CSS on peut définir la police à utiliser dans chaqueclasse et identificateur.

Exemple :body {font-family: Arial;}On peut body préciser plusieurs familles dans la déclarationfont-family :body {font-family: times, verdana, sans-serif;}L’ordre des polices est déterminant: si la première estdisponible, elle sera utilisée, sinon ce sera la deuxième, ect.Les polices standards : Arial, Comic, Courier, Georgia, Impact,Symbol, Times, Trebuchet, Verdana, Webdings.

Mourad Oudghiri CSS


Taille de la policePour indiquer la taille de la police on utilise : font-size. Exemple: font-size: 12px;

Les mots-clés de taillesCSS propose des mots-clés pour définir les tailles de polices.Par ordre croissant, ce sont xx-small, x-small, small, medium,large, x-large, et xx-large.

Définir et modifier la couleur de policeLa propriété color définit la couleur de police.Exemple : p { color : blue;}

Mourad Oudghiri CSS


La graisseLa propriété font-weight définit la graisse de caractères. Elleaccepte les valeurs :

normal : graisse normale.bold : gras.lighter : moins gras que la référence.bolder : plus gras que la référence.100, 200,..., 900 : chaque valeur définit un niveau degraisse différent.

Le styleLa propriété font-style gère les italiques. Elle admet les valeursnormal pour une police droite et italic pour une police italique.

Mourad Oudghiri CSS


Caractères soulignés, surlignés, barrés, clignotantsLa propriété text-decoration permet :

de souligner le texte (valeur underline)de surligner le texte (valeur overline)de barrer le texte (valeur line-through)de faire clignoter le texte (valeur blink).

On peut cumuler toutes ces fonctionnalités de décoration :h1 { text-decoration: underline overline; }text-decoration modifie le soulignement des liens.a { text-decoration: none; }Exemple : pour souligner les liens uniquement lors de leursurvol :a:hover { text-decoration: underline;}

Mourad Oudghiri CSS


Minuscules et majusculesLes majuscules et les minuscules sont pris en compte dans leCSS par la propriété text-transform qui admet les quatrevaleurs suivantes :

capitalize : seule la première lettre de chaque mot du textesera affichée en majuscule.lowercase : tout le texte sera affiché en minuscules.uppercase : tout le texte sera affiché en majuscules.none : le texte ne sera pas modifié.

Mourad Oudghiri CSS


L’interligne est l’espace séparant deux lignes consécutives d’unparagraphe

InterligneLa propriété CSS mettant en place l’interligne s’appelleline-height. Sa valeur par défaut est 1.2 em.

Le crénage (ou interlettrage) est la distance séparant deuxcaractères consécutifs.

Le crénageOn peut définir une valeur de crénage avec la propriétéletter-spacing. une valeur négative ayant pour effet de resserrerles caractères.

Espace entre les motsLa propriété word-spacing règle l’espace séparant deux motsconsécutifs.

Mourad Oudghiri CSS


Alignement du texteLa propriété CSS définissant l’alignement de texte esttext-align. Elle admet les valeurs : left, right, center, justify,normal.

La justification se traduit par un alignement simultané sur lesdeux marges, en jouant automatiquement sur l’interlettrage etl’espace entre les mots.

Mourad Oudghiri CSS

css Les bordures

CSS permet d’entourer les divers éléments de type bloc, etaussi les éléments en ligne remplacés, d’une page web par desbordures aux caractéristiques (style, épaisseur, couleurs)libres.La propriété border-style met en place le type des borduresd’un élément. Elle prend les valeurs :

dashed : tirets,

dotted : pointillés,

double : deux traits,

groove : effet 3D,

ridge : effet 3D sortant (opposé de groove),

inset : effet entrant,

outset : effet sortant (opposé d’inset),

solid : trait plein,none : pas de bordure.

Mourad Oudghiri CSS

css Les bordures

Chacun des quatre côtés d’un élément peut être représentédifféremment. Pour cela, on précise plusieurs valeurs deborder-style :

deux valeurs seront respectivement affectées aux côtéshorizontaux et verticaux du cadre. Par exemple :border-style: solid dotted;trois valeurs concerneront tour à tour le haut, les côtésverticaux, et le bas. Par exemple : border-style: soliddouble dotted;quatre valeurs décriront les styles des quatre côtés entournant dans le sens horaire haut, droit, bas, et gauche.Par exemple : border-style: solid double dotted ridge;

Il existe une autre possibilité : les propriétés border-top-style(haut), border-right- style (droit), border-bottom-style (bas) etborder-left-style (gauche) s’appliqueront directement au stylede bordure d’un côté.

Mourad Oudghiri CSS

css Les bordures

Épaisseur des borduresLa propriété border-width définit l’épaisseur des bordures. Elleprend des valeurs numériques (par exemple 1px ou 2em) ou :

thin : bordure fine,medium : bordure moyenne,thick : bordure épaisse.

On peut aussi définir l’épaisseur de chaque côté avec :border-top-width, border-right-width, border-bottom-width etborder-left-width.

couleur des borduresOn définit la couleur des bordures par la propriété border-color.Exemple : border-color : green;Pour définir la couleur de chaque coté : border-top-color,border-right-color, border-bottom-color et border-left-color.

Mourad Oudghiri CSS

css Arrière-plans et images de fond

Couleur de fondLa propriété background-color permet de définir une couleur defond d’un élément. Par exmple : div#toto { background-color:#ffc0c0;}

Image de fondPour insérer une image de fond on utilise la propriétébackground-image.Par exemple : body {background-image : url(dossier/fond.jpg)}.

PositionAvec background-position, on pourra placer l’image d’un arrièreplan définie par background-image. Elle prend les valeurs : left,top, right, bottom, center

Mourad Oudghiri CSS

css Arrière-plans et images de fond

Par défaut, toute image de fond se répète comme unemosaïque en emplissant l’espace de l’élément qui la contient.

Répétition de l’imageLa propriété background-repeat prend une de ces quatrevaleurs :

repeat : c’est la valeur et le comportement par défaut, oùl’image se répète sur les deux axes.no-repeat : l’image n’apparaît qu’une fois, sans répétition.repeat-x : l’image ne se répète que dans le senshorizontal.repeat-y : l’image ne se répète que dans le sens vertical.

Mourad Oudghiri CSS

css Marges internes et externes

En HTML, chaque élément est considéré comme une boîte.

la largeur totale d’un élément est la somme de la largeur ducontenu (width), les marges internes gauche et droite et lesépaisseurs des bordures gauche et droite. Il en va de mêmepour la hauteur.

Mourad Oudghiri CSS


Marges internesLe CSS permet de définir les marges internes de chaqueélément par rapport à ces cotés en utilisant les propriétéssuivante : padding-top, padding-right, padding-bottom,padding-left.padding permet de définir d’un seul coup dans l’ordre top rightbottom left. Exemple : padding : 10px 5px 10px 5px;

Marges externesLe CSS permet de définir les marges externes de chaqueélément par les propriétés suivante : margin-top, margin-right,margin-bottom, margin-left.margin permet de définir d’un seul coup dans l’ordre top rightbottom left. Exemple : margin : 10px 5px 10px 5px;

Parmi les éléments de type bloc, seul <div> n’a pas de margespar défaut.

Mourad Oudghiri CSS


Centrage des blocsPour centrer horizontalement un bloc, on affecte la valeur autoà margin-left et margin-right.

Mourad Oudghiri CSS


Notion de flux du documentLes différents éléments d’une page prennent par défaut placedans le flux courant normal qui correspond à l’ordre danslequel les balises apparaissent dans le document HTML.

Les blocsLes blocs se succèdent verticalement. Chaque nouveau blococcupe toute la largeur disponible dans son conteneur avecune hauteur par défaut nulle et se place sous le bloc précédent.

Les éléments en ligneLes éléments en ligne se suivent sur la même ligne. Chaquenouvel élément se place directement à la suite du précédent,avec retour à la ligne quand il n’y a plus de place dans leconteneur.

Mourad Oudghiri CSS


Exemple 1Le code <div><p>paragraphe de texte</p></div>Avec le stylediv {background: yellow;}p {background: green;}Affiche :

Exemple 2Appliquons à présent des dimensions :div {background: yellow; width: 300px;}p {background: green; width: 100px;}On obtient :

Mourad Oudghiri CSS


Exemple 3<div><p id="premier">premier paragraphe de texte</p><p id="second">deuxième paragraphe de texte</p></div>Ces deux paragraphes se place par défaut l’un sous l’autre:

Mourad Oudghiri CSS


Exemple 3<div><p id="premier">premier paragraphe de texte</p><p id="second">deuxième paragraphe de texte</p></div>Avec le style :div {width: 300px;background: yellow; padding-top: 10px;}p#premier {width: 100px;background: orange; margin-top: 0;margin-left: 3em;}p#second {width: 150px;background: green; margin-top: 0;margin-left: 2em;}Ces deux paragraphes se placent par défaut l’un sous l’autre:

Mourad Oudghiri CSS


Exemple 3Appliquons ce style au premier paragraphe:p#premier {margin-bottom: 0;margin-top: 0px;margin-left: 3em;width: 100px;background: orange;}On obtient :

Mourad Oudghiri CSS

css Positionnement

Positionnement relatifLa déclaration position : relatif permet à un bloc de prendre saplace dans le flux normal. Il peut ensuite se positionner dansson conteneur à l’aide des propriétés top, right, bottom et left.Un tel bloc est dit positionné en relatif.

En appliquant ce style au deuxième paragraphe :p#second { position: relative; left: 20px; bottom: 15px;margin-top: 0; margin-left: 3em; width: 150px; height: 50px;background: green; }on obtient :

Mourad Oudghiri CSS

css Positionnement

Le positionnement absoluLes blocs dotés de la déclaration position: absolute sortent duflux normal. Ils se positionnent par rapport au premierconteneur, dont la position est relative ou absolue, avec lespropriétés suivantes : top, right, bottom et left. Un tel bloc estdit positionné en absolu.

En appliquant de ce style :div { width: 300px; height: 200px; background: yellow;}p {margin: 0;}p#premier {width: 100px;background: orange;}p#second {position: absolute;top: 0;left: 0;width: 150px;height:50px;background: green;}on obtient :

Mourad Oudghiri CSS

css Positionnement

le second paragraphe prend place en haut à gauche dudocument, sortant même de la boîte de son conteneur direct lebloc <div>.Pour placer le second paragraphe par rapport au bloc <div>, ilsuffit de positionner ce dernier avec une propriété position enrelatif ou absolu.div { position: relative;width: 300px;height: 200px;background: yellow;}on obtient :

Mourad Oudghiri CSS

css Positionnement

Le positionnement fixeC’est un cas particulier du positionnement absolu, où l’élémentreste fixe dans la page, par rapport à la zone de visualisation :il ne se déplace pas lors du défilement de cette dernière.

Mourad Oudghiri CSS

css Positionnement

En positionnant des éléments, on peut superposer différentsblocs. Par défaut, le dernier élément positionné déclaré dans lecode HTML s’affichera par-dessus tous les autres éléments dumême conteneur.

La profondeur : z-indexLa propriété z-index permet de mettre l’élément portant le plusgrand z-index audessus des autres.

p#premier { position: absolute; top: 0; left: 0; z-index: 1; width:100px; background: orange; } p#second {position: absolute;top: 40px; left: 50px; z-index: 0; width: 150px; background:green; }

Mourad Oudghiri CSS

css Positionnement

Le positionnement flottantOn positionne un élément en flottant avec une déclaration float:left ou float: right. Il est alors retiré du flux normal pour prendreplace à gauche ou à droite du bloc qui le contient.

div { width: 200px; height: 200px; background: yellow;}p {margin: 0;}p#premier {float:right; width: 100px; background: orange;}p#second {width: 200px; background: green;height:100px;}Ce style produira :

Mourad Oudghiri CSS

css Positionnement

Le positionnement flottant permet de placer des blocs côte àcôte.

p#premier {float:left; width: 100px; background: orange;}p#second {float:left; width: 80px; background: green;height:100px;}Ce style produira :

Mourad Oudghiri CSS

css - mathinfo-fso.ump.mamathinfo-fso.ump.ma › oudghiri › teatch_files › css.pdf · css...

Documents