Cours css niveau debutant

Akambi Fagbohoun
Cascading Style Sheets
http://www.w3.org/Style/CSS/

• Guerre des navigateurs
• Extensions propriétaires.
• La bonne approche -> Créer des sites
respectant les normes W3C.

• Organismes militant pour la standardisation
– World Wide Web Consortium (http://www.w3c.org)
• présidé par Tim Berners-Lee inventeur du Web.
• HTML, HyperText Markup Language
• CSS, Cascading Style Sheets

 Modification limitée du style des éléments
 Impossibilité de garantir la cohérence graphique d’un
site sophistiqué
 Répétition des même informations
 Impossible de réutiliser le style d’un site

 Avec CSS vous définissez vos couleurs, tailles, … dans des « styles ».
 Avantages
 Séparation du contenu de l’apparence.
 Attributs plus détaillés qu’HTML
 Téléchargement et mise en cache des css

body {
font-family: Verdana, "Minion Web", Helvetica,
sans-serif;
font-size: 1em;
text-align: justify;
}

.
 Sélecteur *
 * { color: #ff0000; } ;

 HTMLSelector {Property:Value;}
<html>
<head>
<style type="text/css">
b {
font-family:arial;
font-size:14px;
color:red
}
</style>
</head>
<body>
<b>Mise en gras
personnalisée</b>
</body>
</html>

 .ClassSelector {Property:Value;}
<HTML>
<HEAD>
.headline {
font-family:arial; font-size:14px; color:red}
p.bleu {color: blue;}
</style>
</HEAD>
<BODY>
<b class="headline">
Balise gras associée à la classe headline</b>
<br/>
<i class="headline">
Balise italique associée à la classe headline</i>
<p class ="bleu"> Paragraphe dont le texte </br> est bleu
</p>
<p> Paragraphe dont le texte </br> n'es pas bleu</p>
</BODY>
</HTML>

 #IDSelector {Property:Value;}
<HTML>
<HEAD>
#bleu {color: cyan;}
p#bleu {color: blue;}
p#rouge {color: red;}
</style>
</HEAD>
<BODY>
<b id="bleu">Balise gras associée à l'id bleu</b>
<br/>
<p id="bleu">Paragraphe dont le texte </br> est
bleu</p>
<p id="rouge">Paragraphe dont le texte </br>
est rouge</p>
</BODY>
</HTML>

 Séparez les sélecteurs par des virgules
.headlines{
font-family:arial; color:black;
background:yellow;
font-size:14pt;
}
.sublines {
background:yellow;
font-size:12pt;
}
.infotext {
background:yellow;
font-size:10pt;
}
.headlines, .sublines, .infotext {
font-family:arial;
color:black;
background:yellow;
}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}

<HTML>
<HEAD>
p em { color: red;} ;
</style>
</HEAD>
<BODY>
<p >Ce texte est <em>rouge</em>.</p>
<p ><code>Ce code est
<em>rouge</em>.</code></p>
</BODY>
</HTML>

<HTML>
<HEAD>
p>em {color: red;} ;
</style>
</HEAD>
<BODY>
<p>Ce texte est
<em>rouge</em>.</p>
<p><code>Ce code est
<em>rouge</em>.</code></p>
</BODY>
</HTML>

<HTML>
<HEAD>
h1 + p { color: red;} ;
</style>
</HEAD>
<BODY>
<h1>titre</h1>
<p >Ce texte est rouge</p>
<p >Ce texte n'est pas rouge</p>
</BODY>
</HTML>

 /* commentaire */
/* Les images auront une bordure solide rouge */
img {color:red; border: solid}

 Balise <style>
 <html>
<head>

</style>
</head>
…
 Attribut style « en ligne » (inline)
 <p style="font-size: 12pt; color: red">

 Fichier se terminant par .CSS
 Balise <link> pour faire un lien vers la feuille de style externe
<link title="feuilleCss" type="text/css" rel="stylesheet" href="feuille.css">
 Importation d’une feuille de style externe
@import url(http://www.itinet.fr/feuille.css);
</style>
 Déclaration dans la section <head> du document HTML

 Ordre de priorité des styles
1. Feuille de style par défaut du navigateur
2. Feuille de style externe
3. Feuille de style interne (dans <head>)
4. Feuille de style inline (dans un élément HTML)
 Un style inline surchargera tous les autres styles …

Propriété Description Valeurs
font-family Liste par priorité de nom de famille de fonte / ou de
nom de famille génériques.
family-name
generic-family
font-size Définit la taille de la fonte xx-small,x-small, small,
smaller, medium, large,x-
large,xx-large, larger
<longueur>
<%>
font-style Définit le style de la fonte normal, italic, oblique
font-weight Définit le poids d’une fonte normal, bold, bolder,
lighter, 100-900
font Raccourci pour tout spécifier toutes les propriétés de
fonte ainsi que la hauteur de la ligne
font-style font-variant font-
weight font-size/line-height
font-family

<html>
<head>
.grosgras {
font-family:verdana, arial;
font-size:20px;
font-weight:bolder;
color:red
}
#ptitgras {
font-family: arial;
font-size:8px;
font-weight:bold
}
</style>
</head>
<body>
<b>Gras normal</b><br/>
<b class="grosgras">Gros texte en
gras</b><br/>
<p id="ptitgras">Petit texte en gras</p>
</body>
</html>

line-height Modifie la hauteur des lignes d’un élément. normal
nombre
longueur
<%>
text-decoration Décore le texte. none
underline
overline
line-through
blink
text-align Aligne le texte dans un élément. left
right
center
justify
text-indent Indente la première ligne de texte dans un élément. <longueur>
<%>

.texte {
font-family:verdana, arial;
text-align:justify;
text-indent:10;
line-height:5;
color:blue;
}
.texte2 {
font-family:arial;
text-decoration: line-through;
color:red;
}
</style>

color Couleur de l’élément <couleur>
background-color Couleur de fond de l’élément transparent
<couleur>
background-image Image de fond de l’élément none
url(<URL>)
background-position Place le fond de l’élément <%>
<longueur>
top
center
bottom
left
right
background-repeat Indique si le fond doit se répéter ou non repeat, no-repeat,
repeat-x, repeat-y
 Couleur:
 Red, blue, green, …
 Valeur héxadécimale: #AABBCC
 Valeur rgb: RGB(20, 35, 40)

<html>
<head>
p {
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<p>Ce texte est surligné</p>
</body>
</html>

blockquote {
background: transparent url(quoleft.png) left top no-repeat;
}
blockquote div {
padding: 0 48px;
background: transparent url(quoright.png) right bottom no-repeat;
}
<blockquote cite="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.1">
<div> Tables should not be used purely as a means to layout document content as this may present
problems when rendering to non-visual media. Additionally, when used with graphics, these tables
may force users to scroll horizontally to view a table designed on a system with a larger display. To
minimize these problems, authors should use style sheets to control layout rather than tables.
</div>
</blockquote>

Selecteur Description Valeurs
A:link lien classique <style>
A:visited lien visité <style>
A:active lien actif <style>
A:hover lien survolé <style>
A:link {background: #FFCC00; text-decoration: none}
A:visited {background: #FFCC00; text-decoration: none}
A:active {background: #FFCC00; text-decoration: none}
A:hover {background: #FFCC00; font-weight:bold; color: red;}
</style>

line-style-image Choisi une image comme marqueur
d’item de liste.
none
url <URL>
line-style-position Place le marque d’item de liste dans
la liste.
inside
outside
line-style-type Définit le type de marqueur d’item de
liste.
none, disc
circle, square
decimal, decimal-leading-zero
lower-roman, upper-roman
lower-alpha, upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
#navlist { list-style-type: square; } #navlist { list-style-image: url(images/arrow.gif); }
http://css.maxdesign.com.au/listamatic

Unité Description
% pourcentage
in pouce
cm centimètres
mm millimètres
em 1em est égal a la hauteur de la
fonte de l’élément courant
ex 1ex est égal à la hauteur de la lettre
« x »
pt point (1/72 pouce)
pc pica (12 points)
px pixel

Contenu
Remplissage (padding)
Marges (margin)
Bordures (border)

margin
ou margin-top, margin-right,
margin-bottom, margin-left
marge haute, droite, basse,
gauche, droite.
auto
<largeur>
<%>
padding
ou padding-top, padding-right,
padding-bottom, padding-left
remplissage haut, droite, bas,
gauche.
<largeur>
<%>
border
ou
border-top, border-right,
border-bottom, border-left
bordure haute, droite, basse,
gauche.
<largeur>
<%>
<border-style>
width largeur de la zone de contenu <largeur>
height hauteur de la zone de contenu <epaisseur>
border-width ou border-...-
witdh
épaisseur de la bordure <largeur>, thin, medium, thick.
border-color ou border-...-
color
couleur de la bordure
border-style ou border-...-
style
style de la bordure None,hidden,dotted, dashed,
solid, double, groove, ridge,
inset, outset.

<P>
<TABLE>
<COL id="col1"><COL id="col2"><COL
id="col3">
<TR id="row1">
<TD> 1
<TD> 2
<TD> 3
</TR>
<TR id="row2">
<TD> 4
<TD class="solid-blue"> 5
<TD class="solid-green"> 6
</TR>
<TR id="row3">
<TD> 7
<TD> 8
<TD> 9
</TR>
TABLE {border: 5px solid yellow; }
*#col1 { border: 3px solid black; }
TD { border: 1px solid red; padding: 1em; }
TD.solid-blue { border: 5px dashed blue; }
TD.solid-green { border: 5px solid green; }
+
=

<div id="bleu">Boite bleue</div>
<div id="jaune">Boite jaune</div>
#bleu {background-color:blue;}
#jaune {background-color:yellow;}
<p>
<span id="bleu">Boite bleue</span>
<span id="jaune">Boite jaune</span>
</p>

display Détermine si un élément d'affiche en bloc, en
ligne, ou d'une autre façon
none, block, inline, …
position Détermine la méthode de positionnement de
l'élément.
Les éléments non statiques utilisent les
propriétés top, bottom, right, left.
Les valeurs absolute et fixed implique que
l'élément soit de type bloc (display est ignorée
dans ce cas)
static, relative, absolute, fixed
float Place un élément à gauche ou à droite de son
parent, jusqu'à ce qu'un autre élément de type
bloc soit trouvé.
Les élément "floated" sont retirés du flux normal
et traités comme des éléments de type bloc.
left, right, none
clear Précise les côtés sur lesquels un élément
"floated" ne sera pas autorisé.
left, right, both, none
z-index Spécifie l'ordre d'empilement des éléments. Par
défaut les éléments venant après dans le code
source s'empilent sur ceux venant avant.
auto, entier
visibility Rend un élément transparent sans le retirer du
flux HTML.
visible, hidden, collapse.

http://css.maxdesign.com.au/listamatic
#navcontainer li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navcontainer li a { width: auto; }
#navcontainer li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
#navcontainer {
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana, Lucida,
Geneva, Helvetica, Arial, sans-
serif;
background-color: #90bade;
color: #333;
}
#navcontainer ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navcontainer li {
border-bottom: 1px solid
#90bade;
margin: 0;
}

• Flux normal: document parcouru
• Relatif
• Flottant
• Absolu ou fixe

<p>
Lorem
<span id="jaune">
boîte en position relative
</span>
ipsum dolor.
</p>
#jaune {
position: relative;
bottom: 5px;
background-color: #ffff00;
}
+
=

#jaune {
float: right;
width: 100px;
margin: 0;
}
#bleu{
background-color: blue;
}
<p id="jaune">Boite jaune</p>
<p id="bleu">Boite bleue ...</p> +
=

.content {
float: left;
width: 70%;
}
.menu {
margin-left: 80%;
border: 1px solid #000000;
padding: 1em;
}
<body>
<div class="content"> …
</div>
<div class="menu">
<ul>
<li>lien_1</li>
<li>lien_2</li>
<li>lien_3</li>
</ul>
</div>
</body>
+ =
http://openweb.eu.org

+
=
#jaune {
position: absolute;
top: 1em;
right: 1em;
}
#bleu {
position: relative;
background-color: blue;
width: 20em;
}
<div id="bleu">
<p> ...</p>
<p id="jaune">
Boîte jaune en position absolue
</p>
</div>

centre { margin: 1em 25%; }
.gauche { position: absolute;
top: 1em;
left: 1%;
width: 18%; }
.droite { position: absolute;
top: 1em;
right: 1%;
width: 18%; }
<body>
<div class="centre"> … </div>
<div class="gauche"> … </div>
<div class="droite"> … </div>
</body>
+ =
http://openweb.eu.org

 http://stopdesign.com/present/2004/ddw-seattle/tables/
 Présente une explication très claire sur le sujet, je vous invite à aller le voir.

 Sélection des règles CSS selon les médias
 @media print {
body { font-size: 10pt }
}
 @media screen {
body {font-size: 12pt}
}
 @media screen, print {
body {line-height: 1.2}
}

 Exemples :
 @import "mystyle.css";
 @import url("mystyle.css");
 @import url("fineprint.css") print;
 @import url("bluish.css") projection, tv;

• Utiliser des feuilles de styles multiples
– Ex:
<link title=" gabarit_3_colonnes.css " type="text/css" rel="stylesheet"
href="gabarit_3_colonnes.css">
<link title=" couleurs.css " type="text/css" rel="stylesheet" href="couleurs.css">
• Utiliser des classes multiples pour vos éléments
– http://www.search-this.com/2007/04/25/optimize-your-c
• Spécifiez toujours (si possible) une largeur pour
vos éléments

 Afin de garantir la compatibilité de votre code avec les normes CSS1 et
CSS2 n’oubliez pas d’utiliser les validateurs !
 http://jigsaw.w3.org/css-validator/
 http://www.htmlhelp.com/tools/csscheck/

Les normes
• http://www.w3.org/Style/CSS/ | http://www.w3.org/TR/REC-CSS2/
• http://www.w3.org/Style/CSS/learning
• http://www.yoyodesign.org/doc/w3c/css2/cover.html
• http://www.stylegala.com/features/css-reference/
Sites traitant de la programmation Web (xhtml /css)
• http://www.alistapart.com/
• http://openweb.eu.org/
• http://www.wpdfd.com/editorial/basics/index.html#
• http://www.cybercodeur.net/weblog/presentations/seybold/index.html
• http://www.htmldog.com/
• http://www.pompage.net
• http://www.stylegala.com/
• http://webhost.bridgew.edu/etribou/layouts/
• http://stopdesign.com/present/2004/ddw-seattle/tables/
• http://www.alvit.de/handbook/
• http://www.cssbeauty.com/
• http://blog.html.it/layoutgala/
• http://developer.yahoo.com/yui/ et http://developer.yahoo.com/yui/grids/
• http://css.maxdesign.com.au/listamatic/ (listes et menus en CSS)
Mise en page
• http://blog.html.it/layoutgala/
• http://layouts.ironmyers.com/
• http://www.blog-and-blues.org/articles/Float,_clear_et_contextes_de_formatage
Amusez vous avec les CSS:
• http://www.csszengarden.com/
• http://www.alistapart.com/articles/phpswitch/

Cours css niveau debutant

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Cours css niveau debutant

Similaire à Cours css niveau debutant (20)

Cours css niveau debutant

Notes de l'éditeur