Css Abdali

CSS
CSS
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.
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 CSS
Pour maîtriser l’aspect final à l’écran on utilise un autre langage que le HTML: le
langage CSS
version actuelle : CSS3
◦ CSS = Cascading Style Sheets
= feuilles de style en cascade
Introduction
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
CSS2 adapté pour les pages multimédias (vidéo,
audio, …)
HTML et CSS
Gestion de la couleur du fond
HTML et CSS
Le code html est modifié
Il faut coller ce code dans toutes les pages du site
On recommence pour les fonds de tableaux etc.
Les espacements, les fontes, les couleurs de texte, …

HTML et CSS
Comment modifier toutes les polices de caractères de la page index.htm en une
seule opération ?
Comment appliquer ces modifications automatiquement aux autres pages ?
Bonne réponse: utiliser une feuille de style

Style dans la page
<style type="text/css">
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: indianred ;
}
</style>
HTML et CSS
Feuille de style musee.css
HTML et CSS
Feuille de style musee.css
HTML et CSS
Trois méthodes d'application de style CSS:
◦ ajout d'un attribut "style" dans une balise donnée
◦ ajout d'une section <style> au début du document html : s'applique aux balises
du document courant
◦ ajout d'une feuille de style externe (monstyle.css) liée à une ou plusieurs pages
html
HTML et CSS
attribut "style" dans une balise donnée
<BODY>
<H1 style="color:blue">La page personnelle de Bach</H1>
<P >Jean-Sébastien Bach était un compositeur prolifique.
</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 CSS
section <style> s'appliquant aux balises du document courant
<HEAD> L'indication de style porte

<STYLE type="text/css"> sur tous les titres de
H1 { color: blue } niveau 1 (Heading 1) de
</STYLE> la page html
</HEAD>
<BODY>
<H1>La page personnelle de Bach</H1>
HTML et CSS
feuille de style externe (monstyle.css) liée à une ou plusieurs pages html.
<head>
<title>page liée à monstyle.css </title>
<link href="monstyle.css" rel="stylesheet" type="text/css">
</head>
indique que cette page web utilise les

styles du fichier monstyle.css
HTML et CSS
feuille de style externe (monstyle.css) liée à une ou plusieurs pages web.
body { sélecteur (ici une balise)
background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #336699; valeur
}
a{ propriété
font-size: 11px;
color: #336600;
}
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"> h2 {
</HEAD> font-size:25pt;
<BODY> font-family:arial;
color:red;
<H2>Titre tjrs avec un style</H2>
text-align:center;
</BODY>
}
</HTML>
Du HTML au CSS : Principe
<HTML> .HTML
<HEAD>
<TITLE>Le CSS</TITLE>
<link
<linkrel="stylesheet"
rel="stylesheet"type=
type="text/css"
"text/css"href=
href=
"fichier.css">
</HEAD>"fichier.css">
<BODY> Le Résultat
<H1>Introduction</H1>
Introduction
...
</BODY> …
</HTML>
@charset "iso-8859-1";
H1 { Sélecteur simple
color : red ;
}
Fichier.CSS
Classe et attribut CSS
... à certaines élément portant un attribut "class=...." :
◦ code css
◦ p.vert { color: #008000; }
◦ code html
◦ Le contenu de toutes les balises
<p class="vert"> sera vert.

◦ Le contenu des autres balises <p> restera bleu (si p { color: #0000ff; } est présent)
Classe et attribut CSS
à une instance unique (dans la page html) d'un élément portant un attribut
du type "id=..."
◦ p#vert { color: #008000; } ;
◦ le contenu de la seule balise
<p id="vert"> sera vert.
◦ Le contenu des autres balises <p> restera bleu (si p { color: #0000ff; } est présent);
Une seule balise <p id="vert"> par page html

Exemple d'utilisation des CSS :
une feuille de style
P.intro { h1 {
font-size:1.5em; font-size : 26pt ;
font-family:arial,helvetica; color : teal ;
color:maroon; text-align : center;
} }
#id1 {
margin-left: 25pt;
color : green;
background-color:silver;
}
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>
<p class="intro">paragraphe d'introduction</p>
<p id="id1">paragraphe avec le style de l'id1</p>
</BODY>
</HTML>
Visualisation du document
obtenu
Titre avec le style par défaut au sélecteur H1
Paragraphe avec le style associé Paragraphe avec le style

à l'identifiant id1 associé à la classe d'éléments
intro
La balise <STYLE>
Entre <head>…</head>
L'attribut TYPE
text/css pour la norme CSS
text/javascript pour JASS (description JavaScript)
Exemple (attention à la casse des mots-clés)
<html><head> <html><head>
<style type="text/css"> <style type="text/javascript">
P {font-size: 16pt; color: blue;} tags.P.fontSize=16;
</style> tags.P.color="blue";
</head> </style>
</head>
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 :
<HTML><HEAD>
<STYLE>
.code {font-family:courrier;color:green}
</STYLE>
</HEAD>
Le point devant code indique la création d'une nouvelle classe

appelée code.
Création de classes
Pour affecter ce style à une portion de texte, on écrit :
<SPAN class="code">texte mis en forme</SPAN>
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>

Affecter l'attribut style
Il n'est pas indispensable de créer une classe de style pour affecter un style à
un objet.
<SPAN style="font-family:courier;color:green">
Par exemple : Texte mis en forme
</SPAN>
L'attribut style d'une balise reçoit les propriétés de style. Il est toutefois
préférable de déclarer une classe pour regrouper la mise en forme.
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>
.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>
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
Les sous-classes de style - attribut
ID
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)
Un deuxième exemple
<html><head>
.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>
La balise <LINK>
Permettra de référencer d'autres fichiers externes dans le futur
Entre <head>…</head>
Trois attributs
◦ REL="stylesheet" indique que le fichier inclus est une feuille de style
(d'autres valeurs dans le futur…)
◦ TYPE="text/css" ou "text/javascript" - norme de styles utilisée dans le
fichier
◦ HREF="mystyles.css" permet d'indiquer l'URL de la feuille de style
Il est possible de lier plusieurs feuilles de style tout en continuant
d'utiliser des définitions internes
Définition ponctuelle de style
◦ <P STYLE="font-size=35; color=blue;">P en bleu 35</P>
Compléments sur les styles
Groupement de balises
◦ H1, H2, H3 {color: red;}
◦ tous les titres H1, H2, H3 seront en rouge
Sélection contextuelle d'application d'un style
◦ H3 A {color: black;} : les liens définis dans <H3>…</H3> seront
noirs
◦ H3 H3 A {color: red;} : les liens dans
◦ <H3><H3><A>…</A><H3></H3> seront rouges
Héritage des styles
◦ <H1 class="titre1"><cite>HTML</cite></H1>
◦ des balises imbriquées dans des balises de niveau supérieur
héritent du style défini dans ces balises
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 que l’on a déjà visité ce lien
Le cas particulier de la balise de
lien A
On obtient ainsi 4 balises a
a:link { text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {color:red;}
a:visited {color:green;}
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é.
Exemple
<HTML><HEAD>
<TITLE>CSS en entête</TITLE>
<LINK REL="STYLESHEET" HREF="style.css">
</STYLE>
</HEAD>
<BODY>
<p class="intro">paragraphe d'introduction</p>
<p id="id1">paragraphe avec le style de l'id1</p>
<a href="http://www.google.fr">Lien google</a>
<hr>
<a href="http://www.fstg-marrakech.ac.ma">Lien FST de Marrakech</a>
<br>
<a href="http://www.yahoo.fr">Lien yahoo</a>
</BODY>
</HTML>
Exercice
Cré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.
Les feuilles de style externes
Nous avons vu jusqu'ici comment affecter un style à une page, ce qui implique
de recopier la déclaration dans toutes les pages et rend les mises à jour
longues et périlleuses. Il est possible de regrouper la déclaration des styles
dans un fichier externe et de l'appeler dans toutes les pages du site. La
maintenance est accélérée et toutes les pages du site sont homogènes.
Le fichier externe
L'extension d'un fichier de feuille de style est toujours .css
Le fichier css contient uniquement l'intérieur des balises <STYLE>
Le fichier externe
Voici un exemple de fichier de style appelé style.css :
// Ceci est un commentaire

TD {font-family:arial;font-size:12pt}
.code {font-family:courrier;color:green}
Ce fichier ne contient pas les balises <STYLE>
Les commentaires sont marqués par
◦ // blablabla le commentaire doit tenir sur la ligne
◦ /* et */ sont les marques de début et de fin d’un commentaires
pouvant tenir sur plusieurs lignes .
L'intégration du fichier externe
Une ligne dans l'entête suffit pour appeler le fichier de style dans une page :
<HTML><HEAD>
<LINK rel="StyleSheet" type="text/css" href="style.css">
</STYLE>
</HEAD>
La balise <LINK> fait un lien entre la page en cours et le fichier de style
externe.
Exercices
Créez une page Web contenant des tables et insérez y le fichier de style
précédemment défini.
Les propriétés de style
Nous avons vu comment déclarer les styles dans une page.
La norme CSS a prévu de nombreuses propriétés pour les différents objets
HTML.
Toutes ces propriétés ne sont pas prises en compte dans tous les navigateurs.
Il vous faut donc toujours vous assurer que le style que vous utilisé est adapté
au(x) navigateur(s) que vous utilisez !
Les propriétés de police
Propriété Signification Valeurs possibles
font-size:12px
font-size Hauteur de police en points ou pixels
font-size:10pt
font-family:arial,verdana
font-family Nom de police
font-family:sans serif
font-weight:bold
font-weight Épaisseur de la police (gras)
font-weight:normal
font-style:italic
font-style Style de police (italic)
font-style:normal
color:green
color Couleur de police
color:#FFCC00
Les propriétés de texte
text-height Hauteur de ligne en points ou pixels text-height:12px
text-decoration:overline
text-decoration:line-through
text-decoration Attribut de soulignement
text-decoration:underline
text-decoration:none
text-align:left
text-align Alignement de paragraphe (balise P) text-align:right
text-align:center
text-indent:25px
text-indent Indentation de paragraphe (balise P)
text-indent:-15px
text-transform:capitalize
text-transform Transformation des majuscules text-transform:uppercase
text-transform:lowercase
Les propriétés d'arrière-plan
background Image d'arrière-plan background:image.gif
background-color Couleur d'arrière-plan background-color:black

Projet Final
À l'aide de cadres et de CSS, construisez un site traitant d'un thème de votre
choix.
La seule contrainte est que vous devez nous indiquez votre choix avant de
commencer!

Css Abdali

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Abdali

Uploaded by

Copyright:

Available Formats

CSS

Les styles donnent un nom commun à des groupes d'attributs

Il faut coller ce code dans toutes les pages du site

On recommence pour les fonds de tableaux etc.

Les espacements, les fontes, les couleurs de texte, …

Bonne réponse: utiliser une feuille de style

ne s'applique qu'à cette

<HEAD> L'indication de style porte

indique que cette page web utilise les

<link rel="stylesheet" href="style.css">

<p class="vert"> sera vert.

Une seule balise <p id="vert"> par page html

Paragraphe avec le style associé Paragraphe avec le style

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

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

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

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

.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;}

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

<h1 class="standard" id="bleu">h1 classe standard mais bleu</h1>

Avec cette déclaration, le texte de lien

// Ceci est un commentaire

text-height Hauteur de ligne en points ou pixels text-height:12px

background Image d'arrière-plan background:image.gif

background-color Couleur d'arrière-plan background-color:black

You might also like