css

CSS Le HTML est né en 1991 et CSS en 1996 Le World Wide Web a introduit les feuilles de

styles en cascade pour compléter la langage HTML.

Les CSS permettent de gérer l'apparence des documents.

Les feuilles indiquent aux balises HTML leur comportement ou style.

Différentes versions: CSS 1 ; CSS 2.0 ; CSS 2.1 ; CSS 3.

A quoi sert CSS ? CSS ? C'est lui qui vous permet de choisir la

couleur de votre texte. Lui qui vous permet de sélectionner la police

utilisée sur votre site. Lui encore qui permet de définir la taille du texte,

les bordures, le fond… Et aussi, c'est lui qui permet de faire la mise en

page de votre site. Vous pourrez dire : je veux que mon menu soit à gauche et occupe telle largeur, que l'en-tête de mon site soit calé en haut et qu'il soit toujours visible, etc.

Les styles Un style rassemble tous les attributs que

l'on peut appliquer à des types de textes similaires. Attribut : taille,format Textes similaires : titres, en-têtes, pied de

page Les styles donnent un nom commun à des

groupes d'attributs

Avantage du CSS Une CSS est constituée de code séparé qui

améliore les possibilités du HTML en permettant de redéfinir la façon dont fonctionnent les balises HTML existantes.

L'avantage par rapport à la création de nouvelles balises HTML repose sur le fait qu'en modifiant la définition d'une seule règle CSS centralisée, l'apparence de toutes les balises contrôlées par cette règles est modifiée.

HTML et CSSPour maîtriser l’aspect final à l’écran on Pour maîtriser l’aspect final à l’écran on utilise un autre langage que le HTML: le utilise un autre langage que le HTML: le langage langage CSSCSSversion actuelle : CSS3version actuelle : CSS3

CSS = Cascading Style SheetsCSS = Cascading Style Sheets = feuilles de style en cascade = feuilles de style en cascade

Introduction et Avantages CSS : « Cascading Style Sheets » Langage de présentation pour des documents

HTML et XML Séparer le contenu de la présentation Homogénéisation des pages Web d’un même site CSS3 adapté pour les pages multimédias (vidéo,

audio, …)

La creation de style

La déclaration de style se fait dans l'entête de la page HTML, encadrée par les balises

<STYLE> et </STYLE>

Il y a 3 possibilités pour affecter un style : modifier le style d'une balise existante créer une nouvelle classe de style affecter l'attribut style

HTML et CSSTrois méthodes d'application de style CSS:Trois méthodes d'application de style CSS:

ajout d'un ajout d'un attributattribut "style"style"" dans dans une balise une balise donnéedonnée ajout d'une ajout d'une section <style>section <style> au début du au début du document html : s'applique aux balises du document html : s'applique aux balises du document courantdocument courant ajout d'une ajout d'une feuille de style externefeuille de style externe ((monstyle.cssmonstyle.css) liée à une ou plusieurs pages ) liée à une ou plusieurs pages htmlhtml

Définition de règles identiques pour plusieurs basiles

Liste de sélecteurs séparés par les virgules

h1,h2,h3,p { font-size: 12px;}

Propriété Valeur

Définition

p { margin-top: 25px;}

Les balises existantes

Dans l'exemple du transparent suivant, vous avez la syntaxe pour affecter la police arial en 12 points à toutes les cellules des tableaux d'une page La police définit la forme, la taille et la couleur des

caractères

Exemple

<HTML><HEAD> <TITLE>Exemple de table</TITLE></HEAD> <BODY BGCOLOR=#fffeac TEXT=#0a0a8a LINK=#ff1614 VLINK=#9414cb> <TABLE BORDER=6 CELLSPACING=12 CELLPADDING=10 WIDTH=80%

HEIGHT=100%> <TR> <TD COLSPAN=2 ALIGN=RIGHT>case 1-1 sur deux colones </TD> <TD WIDTH=50% ALIGN=CENTER>case1-3 </TD> </TR> <TR> <TD ROWSPAN=2>case 2-1 sur deux lignes </TD> <TD>case 2-2 </TD></TR> <TR><TD>case 3-2 </TD> <TD>case 3-3 </TD></TR></TABLE> </BODY></HTML>

Les balises existantesDans l'exemple présenté, toutes les

cellules TD auront comme style par défaut Arial 12pt

On peut modifier ainsi toutes les balises existantes

<HTML><HEAD><STYLE>

TD {font-family:arial;font-size:12pt}</STYLE></HEAD><BODY> ... </BODY></HTML>

Les balises existantesExercice

Complétez la page précédente avec du code html et vérifiez que le style est bien pris en compte

Le CAS particulier de la balise de lien A

La balise <A> est particulière, car elle peut être dérivée selon l'action du visiteur

On peut donc vouloir des apparences différentes de cette balise suivant que:

l’on passe dessus, que l’on clique dessus ou pour indiquer quel’on a déjà visité ce lien

Le cas particulier de la balise de lien A

On obtient ainsi 3 balises A

Avec cette déclaration, le texte de lien est souligné au passage de la souris, devient rouge sur un clic, reste vert pour indiquer que ce lien a été

visité.

A:hover {text-decoration:underline}A:active {color:red}A:visited {color:green}

Le cas particulier de la balise de lien A

Exercicecomplétez la précédente page html avec des liens (balise A) et ajoutez y le style ci-dessus

HTML et CSSHTML et CSSattribut "styleattribut "style" dans une balise donnée" dans une balise donnée

<BODY><BODY> <H1 <H1 style="color:blue">style="color:blue">La page personnelle de Bach</H1>La page personnelle de Bach</H1> <P >Jean-Sébastien Bach était un compositeur prolifique.<P >Jean-Sébastien Bach était un compositeur prolifique. </BODY></BODY>

ne s'applique qu'à cette section H1

Exemple<BODY><H2 STYLE="font-size:26pt;color:red;text-align: center;">

titre avec un style</H2><H2>Titre sans style</H2></BODY>

Résultat

Exemple de CSS en entête

<HTML> <HEAD> <TITLE>CSS en entête</TITLE><STYLE TYPE="text/css">

h2 {font-size : 26pt ;color : red ;text-align : center;}</STYLE></HEAD><BODY><H2>titre avec un style</H2><H2>Titre tjrs avec un style</H2></BODY></HTML>

HTML et CSSHTML et CSSsection <style>section <style> s'appliquant aux balises du s'appliquant aux balises du document courantdocument courant

<HEAD><HEAD><STYLE type="text/css"><STYLE type="text/css"> H1 { color: blue }H1 { color: blue } </STYLE></STYLE> </HEAD></HEAD> <BODY><BODY> <H1>La page personnelle de Bach</H1><H1>La page personnelle de Bach</H1>

L'indication de style porte sur tous les titres de

niveau 1 (Heading 1) de la page html

HTML et CSSHTML et CSSfeuille de style externe (monstyle.css) feuille de style externe (monstyle.css) liée à une ou plusieurs pages html.liée à une ou plusieurs pages html.<head><head><title>page liée à monstyle.css </title><title>page liée à monstyle.css </title><link href="monstyle.css" rel="stylesheet" type="text/css"><link href="monstyle.css" rel="stylesheet" type="text/css"></head></head>

indique que cette page web utilise les styles du fichier monstyle.css

HTML et CSSHTML et CSSfeuille de style externefeuille de style externe (monstyle.css) (monstyle.css) liée à une ou plusieurs pages web.liée à une ou plusieurs pages web.body {body {

background-color: #FFFFCC;background-color: #FFFFCC;font-family: Verdana, Arial, Helvetica, sans-serif;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-size: 12px;line-height: 24px;line-height: 24px;color: #336699;color: #336699;

}}a {a {

font-size: 11px;font-size: 11px;color: #336600;color: #336600;

}}

sélecteur (ici une balise)

propriété

valeur

CSS en fichier lié Les styles sont dans un fichier séparé On précise dans l'entête quel fichier lié utiliser

pour le style avec :<LINK REL="STYLESHEET"HREF="style.css">

Dans le fichier de style les règles des styles sont définies selon le modèle donné précédemment

On utilise l'extension ".css" pour les fichiers de style

Exemple de CSS en fichier lié

<HTML><HEAD>

<LINK REL="STYLESHEET" HREF="style.css">

</HEAD>

<BODY>

<H2>titre avec un style</H2>

<H2>Titre tjrs avec un style</H2>

</BODY>

</HTML>

h2 {

font-size:25pt;

font-family:arial;

color:red;

text-align:center;

}

Du HTML au CSS : Principe<HTML> <HEAD> <TITLE>Le CSS</TITLE>

</HEAD> <BODY> <H1>Introduction</H1>

... </BODY></HTML>@charset "iso-8859-1";

H1 { color : red ;}

.HTML

Fichier.CSS

Introduction

…

Le Résultat

Sélecteur simple

<link rel="stylesheet" type= "text/css" href= "fichier.css">

Quelle méthode choisir ? La meilleure méthode est celle qui défini un fichier de style

externe. Pour le moment, vous faites vos tests sur un seul fichier HTML.

Cependant, votre site sera plus tard constitué de plusieurs pages HTML, on est d'accord ?

Imaginez : si vous placez le code CSS directement dans le fichier HTML, il faudra copier ce code dans tous les fichiers HTML de votre site ! Et si demain vous changez d'avis, par exemple si vous voulez que vos paragraphes soient écrits en rouge et non en bleu, il faudra modifier chaque fichier HTML un à un, comme le montre la figure suivante

Quelle méthode choisir ? Si vous travaillez avec un fichier CSS externe,

vous n'aurez besoin d'écrire cette instruction qu'une seule fois pour tout votre site,comme le montre la figure suivante.

Structure d’une feuille de style

Schématiquement, une feuille de style CSS ressemble donc à cela :

Des commentaires dans du CSS Tapez /*, suivi de votre commentaire, puis */ pour

terminer votre commentaire. Vos commentaires peuvent être écrits sur une ou

plusieurs lignes. Par exemple :

/*style.css---------Par Etudiants de SIR*/p{

color: blue; /* Les paragraphes seront

en bleu */}

Les classes et les Id

Cetexemple implique par exemple que TOUS les paragraphes possèdent la même présentation (ici, ils seront donc tous écrits en bleu).

Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? On pourrait placer le code CSS dans un attribut style sur la balise que l'on vise (cette technique n'est pas recommandé (il vaut mieux utiliser un fichier CSS externe).

Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises : l'attribut class ; l'attribut id.

Exemple:p{color: blue;}

La classeLa classe Une classe est un style indépendant que l'on peut appliquer à

toute balises HTML.

Chaque classe se voit attribuée un nom unique spécifié ensuite dans la ou les balises HTML qui l'utilisé par le biais de l'attribut style.

Les règles de classe peuvent être définies entre les balises <style> </style> dans l'en-tête ou dans un fichier CSS en ligne*.

Elle permettent aux fonctions Javascript d'identifier un objet unique, elles sont très utilisées en DHTML.

Les id sont comme les classes définit dans l'entête ou exportées d'un fichier CSS externe ou liés au document HTML.

Syntaxe générale d'une Syntaxe générale d'une classe CSSclasse CSS Le sélecteur de classe permet de définir

un style applicable à toute balise HTML.

Une sous class possède un nom unique précédé d’un point.

Syntaxe générale d'une Syntaxe générale d'une classe CSSclasse CSS

Les styles d'une balise

.copy { font-size: 12px;}

Sélecteur de classe

Propriété

Définition

Valeur

utilisation <p class="copy"> … </p>

Création de classes Modifier les balises existantes n'est pas suffisant

quand il s'agit d'affecter un style à une partie de texte.

Par exemple dans cette page, les parties de code sont en police courier vert, grâce à la classe de style "code" qui est déclarée ainsi :

Le point devant code indique la création d'une nouvelle classe appelée code.

<HTML><HEAD><STYLE>

.code {font-family:courrier;color:green}</STYLE></HEAD>

Balises span et div

<span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe.

<div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » dans la page et provoquentdonc obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d'un design,

Création de classesPour affecter ce style à une portion de

texte, on écrit :

La balise <SPAN> permet d'affecter à un groupe de mot une classe de style.

Il est aussi possible d'affecter ce style à une balise existante. Pour donner le style de la classe code à une cellule de tableau, on écrit :

<TD class="code">cellule en police courrier vert</TD>

<SPAN class="code">texte mis en forme</SPAN>

ExerciceCréez une page html qui définit et utilise la

classe de style code telle qu’elle est définie précédemment.

Vérifiez également que la déclaration de style directement dans les balises SPAN fonctionne.

Exemple : sous class Exemple : sous class indépendanteindépendante .nav {color:red;}

<ul class="nav"> <li>nom</li><li>prenom</li><li>age</li>

</ul>

<ul><li class="nav">nom</li><li class="nav">prenom</li><li class="nav">age</li>

</ul>Factorisationimportante

Classes de style - attribut CLASS On peut définir différentes "classes"

une classe particulière pour un élément particulier (<h1>, <p>, <cite>, …)

P.bleu {color: blue;} P.i {font-style: italic;} s'applique aux paragraphes qui se revendiquent de la

classe "bleu" ou "i" une classe générale associée à un élément

particulier P {font-size: 16pt; color: red;} s'applique à tous les paragraphes

une classe particulière pour n'importe quelle balise .vert {color: green;} s'applique à toute balise revendiquant la classe "vert"

attention ! on ne peut pas cumuler des classes

Un exemple<html><head>

<style type="text/css">.vert {color: green;}P {font-size: 16pt; color: red;}P.bleu {color: blue;}P.italic {font-style: italic;}H1.titre1 {border: solid; border-width: 1;

text-align: center; color: cyan;}</style>

</head><body>...

</body></html>

héritage sous class héritage sous class indépendanteindépendante .nav li{color:red;}

<ul class="nav"> <li>nom</li><li>prenom</li><li>age</li>

</ul>

Cela va affecter tous les éléments li dans la classe .nav

li sera enfant de la classe .nav

EcritureEcriture .nav li{color:red;}

<ul><div class="nav">

<li>nom</li><li>prenom</li><li>age</li>

</div></ul>

suitesuite .nav ul ul{color:red;}

<div class="nav"><ul>

<li>nom<ul> <li>dupont</li> <li>martin</li></ul>

</li><li>prenom

<ul> <li>denis</li> <li>gerard</li></ul>

</li></ul>

</div>

<HTML><HEAD> <TITLE>Exemple de table</TITLE>

<style> .nav ul ul {color:red;}</style>

</HEAD> <BODY ><div class="nav"> <ul>

<li>nom <ul> <li>dupont</li>

<li>martin</li></ul>

</li><li>prenom<ul> <li>denis</li> <li>gerard</li></ul> </li></ul>

</div> </BODY></HTML>

Sous class dépendanteSous class dépendante

<div class="nav">…</div>

<BODY> <ul class="niveau1">

<li>Exemple 1</li><li>Liste simple</li>

</ul> <div class="italic_rouge">

Exemple 2 </div></BODY>

BilanBilan

.italic_rouge { color:red; font-style:italic;

}

Sous Class indépendante

.CSS

Sous Class dépendante

ul.niveau1 {list-style-type:square;color:blue;

}

.CSS

.HTMLLe Résultat

Exemple 1

Liste simple

Une sous class possède un nom unique précédé d’un point. Dans cet exemple, on créer la sous class appelée niveau1 que l’on associe à la balise html ul (permet de créer des listes).Pour l’utiliser, dans le body on utilise l’attribut class dans la balise ul.On obtient ainsi une liste avec des puces carrées et le texte est bleu.

Du HTML au CSS : SélecteursDu HTML au CSS : SélecteursLe Résultat

Exemple 1

Liste simple

Exemple 2

<BODY> <ul class="niveau1">

<li>Exemple 1</li><li>Liste simple</li>

</ul> <div class="italic_rouge">

Exemple 2 </div></BODY>

.HTML

.italic_rouge { color:red; font-style:italic;

}

Sous Class indépendante

.CSS

Sous Class dépendante

ul.niveau1 {list-style-type:square;color:blue;

}

.CSS

Pour le 2nd exemple, italic_rouge est une sous classe indépendante cette fois car on peut l’employer avec n’importe quel balise html, ici on utilise la balise div qui permet de regrouper plusieurs éléments html. On obtient finalement un texte italique rouge.Il existe un dernier type de sélecteur, le sélecteur ID.

IDID Très utile pour spécifier des règles qui ne

s'appliquent qu'à un élément avec un ID unique donné défini par l'attribut id en HTML.

Pas plus d'un élément ne doit avoir un ID donné (régle valable surtout en javascript)

utilisé avec Javascript pour repérer et traiter un élément particulier.

Syntaxe générale Syntaxe générale d'une IDd'une ID

des styles UNIQUE indépendants de toute balise HTML

utilisation <p id="area"> … </p>

Sélecteur d'ID

#area { font-size: 12px;}

Propriété Valeur

Définition

Du HTML au CSS : Du HTML au CSS : SélecteursSélecteurs<BODY>

<div id="bloc_unique">Bloc A</div>

</BODY>

.HTML

Le sélecteur id

#bloc_unique { background-color:black; color:white ;

}

.CSS

Le Résultat

Bloc A

L’élément devient unique, il est utilisé une seule fois dans la page.

On lui spécifie un nom ici bloc_unique précédé du signe dièse #. Ensuite il peut être attribué à n’importe quel balise html comme le div mais il ne peut être utilisé qu’une seule fois dans la page. Maintenant que l’on a vu comment intégrer du css au page html.

Résumé: Exemple d'utilisation des CSS : un document avec CSS

<HTML><HEAD>

<TITLE>CSS en entête</TITLE>

<LINK REL="STYLESHEET" HREF="style.css">

</STYLE>

</HEAD>

<BODY>

<H1>titre avec un style</H1>

<p class="intro">paragraphe d'introduction</p>

<p id="id1">paragraphe avec le style de l'id1</p>

</BODY>

</HTML>

P.intro {

font-size:1.5em;

font-family:arial,helvetica;

color:maroon;

}

#id1 {

margin-left: 25pt;

color : green;

background-color:silver;

} h1 {

font-size : 26pt ;

color : teal ;

text-align : center;

}

Visualisation du documentobtenu

Titre avec le style par défaut au sélecteur H1

Paragraphe avec le style associéà l'identifiant id1

Paragraphe avec le styleassocié à la classe d'élémentsintro

Les sous-classes de style - attribut ID Permet de faire varier certains paramètres d'une

classe Exemple : une classe définit un style général de

paragraphe mais on souhaite pouvoir changer uniquement la définition de la couleur première possibilité : faire une deuxième classe (la

duplication de code est toujours une mauvaise chose) mieux : définir un modificateur qui n'agit que sur les

paramètres souhaités # est le caractère permettant la définition de

sous-classes

Exemples : <style type="text/css"> .standard {color: green; font-size: 10pt;} #cyan {color: cyan;} P {font-size: 16pt; color: yellow;} P.special {font-style: italic; color: red;} P#bleu {color: blue;} </style>

L'attribut ID permet de réaliser une exception dans une classe ou

être utilisé seul (alors équivalent à CLASS)

Les sous-classes de style - attribut ID

Un deuxième exemple<html><head> <style type="text/css"> .standard {color: green; font-size: 10pt;} #cyan {color: cyan;} P {font-size: 16pt; color: yellow;} P.special {font-style: italic; color: red;} P#bleu {color: blue;} </style></head><body>

<p>redéfinition du standard P</p><p class="standard">P classe standard</p><p class="special">P classe special</p><p class="standard" id="cyan">P classe standard mais cyan</p><p class="standard" id="bleu">P classe standard mais bleu</p><p class="special" id="bleu">P classe special mais bleu</p><h1 class="standard" id="cyan">h1 classe standard mais cyan</h1>ID devient une classe...<h1 id="cyan">h1 mais cyan</h1>Impossible...<h1 class="standard" id="bleu">h1 classe standard mais bleu</h1>

</body></html>

Les sélecteurs avancés

* : sélecteur universel

* {

………. }

Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel

A B : une balise contenue dans une autreh3 em{ ………..}

Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Notez qu'il n'y a pas de virgule entre les deux noms de balises.


A + B : une balise qui en suit une autreExemple :

h3 + p{ …………}

Sélectionne la première balise <p> située après un titre <h3>.<h3>Titre</h3><p>Paragraphe</p>


A[attribut] : une balise qui possède un attributa[title]

{…….

}Sélectionne tous les liens <a> qui possèdent un attribut title.

<a href="http://site.com" title="Infobulle">

a[title="Cliquez ici"]{ ………….}

Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».Exemple :

<a href="http://site.com" title="Cliquez ici">

Formatage du texte

C’est modifier l'apparence du texte (on dit qu'on le « met en forme »).Modifier la taille du texte, changer la police, aligner le texte…

La taillePour modifier la taille du texte, on utilise la propriété CSS :font-size. Pour indiquer la taille du texte ? plusieurs techniques vous sont proposées :• Indiquer une taille absolue : en pixels, en centimètres ou millimètres. Cette méthode est très précise mais il est conseillé de ne l'utiliser que si c'est absolument nécessaire, car on risque d'indiquer une taille trop petite pour certains lecteurs.• Indiquer une taille relative : en pourcentage, « em » ou « ex », cette technique a l'avantage d'être plus souple. Elles'adapte plus facilement aux préférences de taille des visiteurs.

Formatage du texte

Une taille absoluePour indiquer une taille absolue, on utilise généralement les pixels. Pour avoir un texte de 16 pixels de hauteur, vous devez doncécrire :

font-size: 16px;

Une valeur relativeC'est la méthode recommandée car le texte s'adapte alors plus facilement aux préférences de tous les visiteurs. Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez par exemple écrire la taille avec des mots en anglais commeceux-ci :

xx-small : minuscule ;x-small : très petit ;small : petit ;medium : moyen ;large : grand ;x-large : très grand ;xx-large : gigantesque.

Exemple

p{font-size: small;

}

h{

font-size: large;}

Remarque

cette technique a un défaut : il n'y a que sept tailles disponibles (car il n'y a que sept noms). Heureusement, il existe d'autres moyens.

Une technique préférée consiste à indiquer la taille en « em ». Si vous écrivez 1em, le texte a une taille normale. Si vous voulez grossir le texte, vous pouvez inscrire une

valeur supérieure à 1, comme 1.3em. Si vous voulez réduire le texte, inscrivez une valeur

inférieure à 1, comme 0.8em.

1 em = 16 point

La police

Modifier la police utilisée

{ font-family: police;}

Seulement, 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;}

Polices les plus courantes

Arial ; Arial Black ; Comic Sans MS ; Courier New ; Georgia ; Impact ; Times New Roman ; Trebuchet MS ; Verdana.

Exemple:p{

font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;}

Mettre en italique italic : le texte sera mis en italique. oblique : le texte sera passé en oblique (les lettres sont penchées, le

résultat est légèrement différent de l'italique proprement dit). normal : le texte sera normal (par défaut). Cela vous permet d'annuler

une mise en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire :em{

font-style: normal;} Ainsi, dans l'exemple suivant, je me sers de font-style pour mettre en

italique tous mes titres <h2> :h2{

font-style: italic;}

Mettre en gras

h1{

font-weight: bold;}

Soulignement et autres décorationsLa propriété CSS associée porte bien son nom : text-decoration. Elle permet, entre autres, de souligner le texte, mais passeulement. Voici les différentes valeurs qu'elle peut prendre :•underline : souligné.•line-through : barré.•overline : ligne au-dessus.•blink : clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment).•none : normal (par défaut).

Exemple

{text-decoration: blink;}

souligne{text-decoration: underline;}

barre{text-decoration: line-through;}

ligne_dessus{text-decoration: overline;}

L'alignement Le langage CSS nous permet de faire tous les

alignements connus : à gauche, centré, à droite et justifié.

C'est tout simple. On utilise la propriété text-align et on indique l'alignement désiré : left : le texte sera aligné à gauche (c'est le réglage par

défaut). center : le texte sera centré. right : le texte sera aligné à droite. justify : le texte sera « justifié ». Justifier le texte permet

de faire en sorte qu'il prenne toute la largeur possible sans

laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont toujours justifiés.

Les flottants Le CSS nous permet de faire flotter un

élément autour du texte. On dit aussi qu'on fait un « habillage ».

Les flottants left : l'élément flottera à gauche. right : l'élément flottera… à droite !

L'utilisation des flottants est très simple :1. Vous appliquez un float à une balise.2. Puis vous continuez à écrire du texte à la suite normalement.

Couleur

balise{background-color: …;/* couleur du fond */

color: …….; /* couleur du texte */

}On indique :1. Le nom de la couleur ex color:red2. Le code hexadécimal de la couleur : ex

color:#FF00CC3. La méthode RGB ex: color: rgb(240,96,204);

RGB: Red-Green-Blue (rouge-vert-bleu)

Images de fond

Appliquer une image de fond La propriété permettant d'indiquer une image de

fond est background-image. Comme valeur, on doit renseigner url("nom_de_l_image.png"). Par exemple :

Ex Code : CSSbody

{background-image: url("neige.png");

}

Options disponibles pour l'image de fond

background-attachment : fixer le fond

Deux valeurs sont disponibles :

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 */}


background-repeat : répétition du fond Par défaut, l'image de fond est répétée en

mosaïque. Vous pouvez changer cela avec la propriété 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).

Exemple

Exemple {

background-image: url("soleil.png");

background-repeat: no-repeat;}

background-position : position du fond

On peut indiquer où doit se trouver l'image de fond avec background-position. Cette propriété n'est intéressante que si elle est combinée avec background-repeat: no-repeat;

Vous devez donner à background-position deux valeurs en pixels pour indiquer la position du fond par rapport au coin supérieur gauche de la page (ou du paragraphe, si vous appliquez le fond à un paragraphe). Ainsi, si vous tapez :

Ex Code : CSSbackground-position: 30px 50px;

votre fond sera placé à 30 pixels de la gauche et à 50 pixels du haut. Il est aussi possible d'utiliser ces valeurs en anglais :

…

top : en haut ; bottom : en bas ; left : à gauche ; center : centré ; right : à droite. Il est possible de combiner ces mots. Par

exemple, pour aligner une image en haut à droite, vous taperez :

Code : CSS background-position: top right;

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 */

}

Plusieurs images de fond Depuis CSS3, il est possible de donner plusieurs images de

fond à un élément. Pour cela, il suffit de séparer les déclarations par une virgule, comme ceci :

body{background: url("soleil.png") fixed no-repeat top right,url("neige.png") fixed;}

Les bordures et les ombresBordures standard Pour border on peut utiliser jusqu'à trois valeurs pour modifier

l'apparence de la bordure : La largeur : indiquez la largeur de votre bordure. Mettez une

valeur en pixels (comme 2px). La couleur : c'est la couleur de votre bordure. Utilisez, comme on

l'a appris, soit un nom de couleur (black, red,…), soit une valeur hexadécimale (#FF0000), soit une valeur RGB (rgb(198, 212, 37)).

Le type de bordure : là, vous avez le choix. Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets, etc. Voici les différentes valeurs disponibles :

none : pas de bordure (par défaut) ; solid : un trait simple ; dotted : pointillés ; dashed : tirets ; double : bordure double ; groove : en relief ; ridge : autre effet relief ; inset : effet 3D global enfoncé ; outset : effet 3D global surélevé.

En haut, à droite, à gauche, en bas…

Si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous pouvez le faire sans problème. Dans ce cas, vous devrez utiliser ces quatre propriétés :

border-top : bordure du haut ; border-bottom : bordure du bas ; border-left : bordure de gauche ; border-right : bordure de droite.

Exemple

p{border-left: 2px solid black;border-right: 2px solid black;

}

Bordures arrondies La propriété border-radius va nous permettre

d'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;

}

On peut aussi préciser la forme de l'arrondi pour chaque coin. Dans ce cas, indiquez quatre valeurs :

Code : CSSp{border-radius: 10px 5px 10px 5px;}

Les valeurs correspondent aux angles suivants dans cet ordre :

1. en haut à gauche ; 2. en haut à droite ; 3. en bas à droite ; 4. en bas à gauche.

Les ombres Les ombres font partie des nouveautés

récentes proposées par CSS3. Aujourd'hui, il suffit d'une seule ligne de CSS pour ajouter des ombres dans une page !

Nous allons ici découvrir deux types d'ombres : les ombres des boîtes ; les ombres du texte.

box-shadow : les ombres des boîtes La propriété box-shadow s'applique à tout le bloc et prend

quatre valeurs dans l'ordre suivant :

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.

Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on écrira :

p{box-shadow: 6px 6px 0px black;

}

On peut aussi rajouter une quatrième valeur facultative : inset. Dans ce cas, l'ombre sera placée à l'intérieur du bloc, pour donner un effet enfoncé :

P{

box-shadow: 6px 6px 6px black inset;}

text-shadow : l'ombre du texte

Avec text-shadow, vous pouvez ajouter une ombre directement sur les lettres de votre texte ! Les valeurs fonctionnentexactement de la même façon que box-shadow : décalage, adoucissement et couleur.

p{

text-shadow: 2px 2px 4px black;}

Mise en page du site

Structurer sa page

En général, une page Web est constituée d'un en-tête (tout en haut), de menus de navigation (en haut ou sur les côtés), de différentes sections au centre… et d'un pied de page (tout en bas).

Les balises structurantes de HTML5

<header> : l'en-têteLa plupart des sites web possèdent en général un en-tête, appelé header en anglais.

On y trouve le plus souvent un logo, une bannière, le slogan de votre site…

Vous devrez placer ces informations à l'intérieur de la balise <header> :

<header>

</header>

Header exemple

L'en-tête peut contenir tout ce que vous voulez : images, liens, textes…

<footer> : le pied de page À l'inverse de l'en-tête, le pied de page se trouve

en général tout en bas du document. On y trouve des informations comme

Des liens de contact, le nom de l'auteur, les mentions légales, etc.

Code : HTML<footer>

</footer>

<nav> : principaux liens de navigation La balise <nav> doit regrouper tous les principaux liens de

navigation du site. Vous y placerez par exemple le menu principal de votre site.

Généralement, le menu est réalisé sous forme de liste à puces à l'intérieur de la balise <nav> :

Code : HTML<nav>

<ul><li><a href="index.html">Accueil</a></li><li><a href="forum.html">Forum</a></li><li><a href="contact.html">Contact</a></li>

</ul></nav>

<section> : une section de page La balise <section> sert à regrouper des

contenus en fonction de leur thématique. Elle englobe généralement une portion du

contenu au centre de la page.Code : HTML<section>

<h1>Ma section de page</h1><p>Bla bla bla bla</p>

</section>

<aside> : informations complémentaires La balise <aside> est conçue pour contenir des

informations complémentaires au document que l'on visualise. Ces

informations sont généralement placées sur le côté (bien que ce ne soit pas une obligation).

Code : HTML<aside><!-- Placez ici des informations complémentaires --

></aside>

<article> : un article indépendant La balise <article> sert à englober une portion

généralement autonome de la page. C'est une partie de la page qui pourrait

ainsi être reprise sur un autre site. C'est le cas par exemple des actualités (articles de journaux ou de blogs).

Code : HTML<article><h1>Mon article</h1><p>Bla bla bla bla</p></article>

Résumé

<html><head><meta charset="utf-8" /><title>Zozor - Le Site Web</title></head><body><header>

<h1>Zozor</h1><h2>Carnets de voyage</h2>

</header><nav>

<ul><li><a href="#">Accueil</a></li><li><a href="#">Blog</a></li><li><a href="#">CV</a></li>

</ul></nav><section>

<aside><h1>À propos de l'auteur</h1><p>C'est moi, Zozor ! Je suis né un 23 novembre2005.</p>

</aside><article>

<h1>Je suis un grand voyageur</h1><p>Bla bla bla bla (texte de l'article)</p>

</article></section><footer>

<p>Copyright Zozor - Tous droits réservés<br /><a href="#">Me contacter !</a></p>

</footer></body></html>

Une page HTML sans CSS

Résumé Plusieurs balises ont été introduites avec HTML5 pour

délimiter les différentes zones qui constituent la page web : <header> : en-tête ; <footer> : pied de page ; <nav> : liens principaux de navigation ; <section> : section de page ; <aside> : informations complémentaires ; <article> : article indépendant.

Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son propre en-tête.

Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à indiquer à l'ordinateur le sens du texte qu'elles contiennent. On pourrait très bien placer l'en-tête en bas de la page si on le souhaite

Le modèle des boîtes

Une page web peut être vue comme une succession et un empilement de boîtes, qu'on appelle « blocs ».

La plupart des éléments sont des blocs : <header>, <article>, <nav>… <p>, les titres <h1>…

Les balises de type block et inline En HTML, la plupart des balises peuvent se ranger

dans l'une ou l'autre de deux catégories : Les balises inline : c'est le cas par exemple des liens

<a></a>. Les balises block : c'est le cas par exemple des

paragraphes <p></p>.

Comment savoir si une balise et de type Blockou de type Inline

block : une balise de type block sur votre page web crée automatiquement un retour à la ligne avant et après. Il suffit

inline : une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block. Une balise inline ne crée pas de retour à la ligne,

Exemple

Balises de type Block Intéressons-nous à la taille des blocs.

Contrairement à un inline, un bloc a des dimensions précises. Il possède

une largeur et une hauteur. On dispose de deux propriétés CSS : width : c'est la largeur du bloc. À exprimer en

pixels (px) ou en pourcentage (%). height : c'est la hauteur du bloc. Là encore, on

l'exprime soit en pixels (px), soit en pourcentage (%).

Les pourcentages seront utiles pour créer un design qui s'adapte automatiquement à la résolution d'écran du visiteur. Toutefois, il se peut que vous ayez besoin de créer des blocs ayant une dimension précise en pixels :

Minimum et maximum On peut demander à ce qu'un bloc ait des

dimensions minimales et maximales. C'est très pratique car cela nous permet de définir des dimensions « limites » pour que notre site s'adapte aux différentes résolutions d'écran de nos visiteurs :

min-width : largeur minimale ; min-height : hauteur minimale ; max-width : largeur maximale ; max-height : hauteur maximale.

Par exemple, on peut demander à ce que les paragraphes occupent 50% de la largeur et exiger qu'il fassent au moins 400 pixels de large dans tous les cas :

P {width: 50%;min-width: 400px;

}

Les marges Il faut savoir que tous les blocs possèdent des

marges. Il existe deux types de marges : les marges intérieures ; les marges extérieures.

Marges En CSS, on peut modifier la taille des marges

avec les deux propriétés suivantes :

padding : indique la taille de la marge intérieure. À exprimer en général en pixels (px).

margin : indique la taille de la marge extérieure. Là encore, on utilise le plus souvent des pixels.

Exemplep{

width: 350px;border: 1px solid black;text-align: justify;padding: 12px; /* Marge intérieure de 12px */

}

Maintenant, je veux que mes paragraphes soient plus espacés entre eux. Je rajoute la propriété margin pour demander à ce qu'ily ait 50 px de marge entre deux paragraphes (figure suivante) :

Code : CSSp{

width: 350px;border: 1px solid black;text-align: justify;padding: 12px;margin: 50px; /* Marge extérieure de 50px */

}

En haut, à droite, à gauche, en bas

Voici la liste pour margin :margin-top : marge extérieure en haut ;margin-bottom : marge extérieure en bas ;margin-left : marge extérieure à gauche ;margin-right : marge extérieure à droite.

Et la liste pour padding :padding-top : marge intérieure en haut ;padding-bottom : marge intérieure en bas ;padding-left : marge intérieure à gauche ;padding-right : marge intérieure à droite.

Il y a d'autres façons de spécifier les marges avec les propriétés margin et padding. Par exemple :

margin: 2px 0 3px 1px; signifie « 2 px de marge en haut, 0 px à droite (le px

est facultatif dans ce cas), 3 px en bas, 1 px à gauche ».

Autre notation raccourcie : margin: 2px 1px; signifie « 2 px de marge en haut et en bas, 1 px de marge à gauche et à droite ».

En haut, à droite, à gauche, en bas

TD : Voir ExempleTD : Voir Exemple

<div id="sidebar"> <h4>Toutes mes photos <br> </h4> <ul>

<li><a href="#">Berlin<br></a></li> <li><a href="#">Evry</a></li> <li><a href="#">Paris</a></li> <li><a href="#">NU york </a></li> <li> <a href="#"><img alt="..." src="photo.jpg" width=50px /> </a></li>

</ul> </div>

div#sidebar {float: left; width: 23%; margin: 2em 0 0 2%; padding: 0 0 15px; background: url(arrow.gif) 100% 100% no-

repeat;}

#sidebar ul {list-style: none; margin: 0; padding: 0 0 10px; border-right: 3px double

rgb(50%,50%,35%); text-align: right;}

#sidebar a:hover {color: rgb(10%,20%,0%); border-color: rgb(98%,48%,40%);background: url(arrow2.gif) 0 100% no-

repeat; padding-left: 15px;}

div#sidebar {float: left; width: 23%; margin:

2em 0 0 2%; padding: 0 0 15px; background: url(arrow.gif) 100% 100% no-repeat;}

#sidebar ul {list-style: none; margin: 0;

padding: 0 0 10px; border-right: 3px double rgb(50%,50%,35%); text-align: right;} #sidebar h4, #sidebar ul {margin: 0 6px 0 0;}

#sidebar li {padding: 0.5em 0 0.25em; /* border-

bottom: 1px solid rgb(84%,84%,69%); */} #sidebar a {text-decoration: none; padding: 0 0.5em 0 0;

border-bottom: 1px solid rgb(84%,84%,69%);} les speudos selecteurs

#sidebar a:link {color: rgb(20%,40%,0%);} #sidebar a:visited {color: rgb(58%,68%,40%);} #sidebar a:hover {color: rgb(10%,20%,0%); border-color:

rgb(98%,48%,40%); background: url(arrow2.gif) 0 100% no-

repeat; padding-left: 15px;}

Le fluxLe flux On oubliera les tableaux !

Positionnement et Flux en Positionnement et Flux en CSSCSS

Vue d’ensemble des méthodes de positionnement

Les modes de Les modes de positionnementpositionnement Flux : ordre d’affichage des éléments 4 méthodes de positionnement

normal float relatif absolu

Quels sont les différences ?

Le Flux normalLe Flux normal

Bloc ABloc B

<BODY><div class="conteneur"> <div class="normalA"> Bloc A </div> <div class="normalB"> Bloc B </div></div></BODY>

.normalA {width:150px;height:150px;background-color:red;border:1px solid black;

}

.normalB {width:250px ;height:100px ;background-color:green;border:1px solid black;

}

Bloc conteneur

Le Flux normal : en blocLe Flux normal : en bloc

Bloc conteneur

Flux normal en bloc : Succession verticale

Bloc A

Bloc B

<BODY><div class="conteneur"> <div class="normalA"> Bloc A </div> <div class="normalB"> Bloc B </div></div></BODY>

.normalA {width:150px;height:150px;background-color:red;border:1px solid black;

}

.normalB {width:250px ;height:100px ;background-color:green;border:1px solid black;

}

Le Flux normal : en ligneLe Flux normal : en ligne

Bloc conteneur

Bloc CBloc D

<BODY><div class="conteneur"> <span class="normalC"> Bloc C </span> <span class="normalD"> Bloc D </span></div></BODY>

.normalC {width:150px;height:150px;background-color:red;border:1px solid black;

}

.normalD {width:250px ;height:100px ;background-color:green;border:1px solid black;

}

Le Flux normal : en ligneLe Flux normal : en ligne

Bloc conteneur

Bloc CBloc D

<BODY><div class="conteneur"> <span class="normalC"> Bloc C </span> <span class="normalD"> Bloc D </span></div></BODY>

.normalC {width:150px;height:150px;background-color:red;border:1px solid black;

}

.normalD {width:250px ;height:100px ;background-color:green;border:1px solid black;

}

Flux normal en-ligne : Succession horizontale

Le Flux flottantLe Flux flottant

Bloc conteneur

<BODY><div class="conteneur"> <div class="flotteA"> Boîte A </div> <p> Texte...blabla ... </p></div></BODY>

.flotteA {float:left;width:500px;background-color:yellow;border:1px solid black;

}

Boîte A – float:left


Bloc conteneur

<BODY><div class="conteneur"> <div class="flotteA"> Boîte A </div> <p> Texte...texte ... </p></div></BODY>


}

Boîte A – float:left Texte…texte…text…texte … texte…texte…texte…texte…texte…texte…texte…texte…texte…texte…texte

texte…texte…texte…texte…texte…texte…texte…text…texte…texte






Bloc conteneur - 800px de large

<BODY><div class="conteneur"> <div class="flotteA"> Boîte A </div> <div class="flotteB"> Boîte B </div> </div></BODY>

.conteneur {width:800px;border:1px solid black;

}


}

.flotteB {float:left;width:100px;background-color:blue;border:1px solid black;

} Boîte A – 650px





}


}


}

Boîte A – 650px

Boîte B – 100px





}


}


}

Boîte A – 650px

Boîte B – 600px

Le Flux relatifLe Flux relatif<BODY><div class="conteneur"> <div class="bloc_relatif"> Bloc A </div> css css css css...

</div></BODY>


}

.bloc_relatif {position:relative;width:300px;margin-top:20px;margin-left:30px;border:1px solid black;}

Bloc conteneur

Bloc A

Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css css css

Left – 30px

Top – 20px

Le Flux absoluLe Flux absolu

<BODY><div class="conteneur"> <div class="bloc_absolu"> Bloc A </div>

css css css css css...

</div></BODY>


}

.bloc_absolu {position:absolute;width:300px;margin-top:20px;margin-left:30px;border:1px solid black;}

Bloc conteneur

Bloc A

Css css css css css css css css Css css css css css css css css Css css css css css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css Css css css css css css css css

Left – 30px

Top – 20px

Le Flux absoluLe Flux absolu<BODY><div class="conteneur"> css css css css css...

<div class="bloc_absolu"> Bloc A </div>ddddddd…..dddd

</div></BODY>


}

.bloc_absolu {position:absolute;width:300px;margin-top:20px;margin-left:30px;border:1px solid black;}

Création d'un siteCréation d'un site

Exemple completExemple complet

Bloc conteneur

Bloc Header – flux normal


Header_gauche - float left Header_droit – float left


Bloc Menu Header – flux normal


BlocMenu

-Float left


Bloc Menu Header – flux normal


BlocMenu

-Float left

Bloc contenu – float right

css

Documents