CSS : Cascading Style Sheets

(1)

CSS : Cascading Style Sheets

Jean-Claude Charr

Maître de conférences IUT de Belfort – Montbéliard Université de Franche Comté

(2)

Description générale

 Les feuilles de style définissent comment les éléments HTML sont affichés

 Elles ont été ajoutées à HTML 4

 Elles sont compatibles avec tous les navigateurs

 Elles sont sauvegardées dans des fichiers à extension .css

(3)

Appliquer une feuille de style

 Feuille de style externe:

<head>

</head>

 Feuille de style interne:

<head>

</head>

 Feuille de style "Inline":

(4)

Syntaxe

Selector {property:value; property:value; …}

Ex: h1{color:red; text-align:center}

<html>

<head>

p{color:red; text-align:center; font-family:arial;}

</style>

</head>

<body>

<p>This paragraph is styled with CSS.</p>

</body>

</html>

(5)

Plusieurs feuilles de style

Les différentes feuilles de styles vont se fusionner et créer une seule feuille virtuelle.

Si plusieurs styles sont précisés pour un élément

html, un seul style sera choisi selon l'ordre suivant : 1. Inline

2. Feuille de style interne 3. Feuille de style externe

4. Style par défaut du navigateur

Sauf si le lien vers la feuille de style externe est déclaré après la feuille de style interne dans le fichier html.

(6)

Les sélectionneurs id et class

<html>

<head>

#para1{color:red;}

.center{text-align:center;}

</style>

</head>

<body>

<p id="para1">This paragraph is colored in red</p>

<p>This paragraph is not affected by the style.</p>

<p class="center"> This paragraph is centered.</p>

</body>

</html>

(7)

Sélectionner plusieurs éléments et imbriquer les sélections

Sélectionner plusieurs éléments : Ex : h1,h2,p{color:green;}

Imbriquer les sélections : Ex :p{color:blue ;

text-align:center;

}

.marked{background-color:blue;}

.marked p{ color:white;}

(8)

Pseudo-class

Ajouter des effets spéciaux aux sélecteurs : Ex : a:link, a:visited, a:hover, a:active

p:first-child : tout p qui est un premier fils d'un Élément

p > i:first-child : le premier élément i dans tous les p

p:first-child i : tous les i qui sont dans un p qui est premier fils d'un élément

(9)

Pseudo-elements

Ajouter des effets spéciaux aux sélecteurs : p:first-letter : modifie le premier caractère p:first-line : modifie la première ligne

h1:before {content:url(smiley.gif); } : ajoute une image avant h1

h1:after {content:url(smiley.gif); } : ajoute une image après h1

(10)

Sélectionner selon les attributs

● Sélectionner les éléments qui ont un attribut «title»

Ex :[title] {color:blue;}

et ayant la valeur « Classe »

Ex : [title=Classe]{border:5px solid green;}

et contenant la valeur « hello »

Ex : [title~=hello] { color:blue; }

(11)

Formatage du fond

Propriétés:

 background-color, Ex: p{background-color:red;}

 background-image,

Ex: body{background-image:url('paper.gif');}

 Positionner l'image

Ex: body{background-image:url('img_tree.png');

background-repeat:no-repeat;

background-position:right top;}

(12)

Formatage du texte

 color, valeur : red, rgb(255,10,145), #FF2457, …

 text-align, valeur : left, right, center, justify, …

 vertical-align, valeur: text-top, text-bottom

 text-decoration, valeur : underline, line-through, …

 text-transform, valeur : uppercase, capitalize, …

 Gérer les espaces: letter-spacing:2px line-height:200%

word-spacing:30px

(13)

La police du texte

 font-family, valeur: "Times New Roman", serif, ...

 font-style, valeur: italique, oblique, normal

 font-size, valeur : 14px, 2em, 100%, ...

 font-weight, valeur : normal, lighter, bold, ...

(14)

Formatage des hyperliens

 Les 4 états d'un hyperlien:

1. link

2. visited 3. hover 4. active

Ex: a:link{text-decoration:underline;}/*unvisited link*/

a:visited{backgroundcolor:blue;} /* visited link */

a:hover{color:#FF00FF;} /* mouse over link */

a:active{color:#FF0000;} /*selected link*/

(15)

Formatage des listes

 list-style-type : pour préciser le style des markeurs

 Pour les listes non ordonnées:

list-style-type:circle ou square ou disc

 Pour les listes ordonnées:

list-style-type:upper-roman ou lower-alpha ou ...

 list-style-image : pour définir une image comme un markeur

Ex: list-style-image:url('sqpurple.gif');

(16)

Formatage des tableaux

Exemple:

table{border-collapse:collapse; width:100%;}

table,th, td{

border: 1px solid black;

height:50px;

text-align:right;

background-color:green;

color:white;

padding:15px; }

caption {caption-side:bottom;}

(17)

Box model

Tout élément html peut être considéré comme une boîte rectangulaire consistant d'un contenu, espace entre le contenu et le cadre, le cadre et les marges.

(18)

Formatage des cadres

 border-style : définit le type du cadre,

Ex: none, solid, dotted, dashed, double, …

 border-width, Ex : p{border-width:5px;}

 border-color, Ex: p{border-color:red;}

 Modifier un coté du cadre:

Ex: p{border-top-style:dotted;}

p{border-right-color:blue;}

(19)

Les marges

● La propriété «Margin» permet de préciser l'espace aux alentours d'un élément en dehors du cadre.

Ex : p{margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px ; }

Ex : margin:25% 50% 10% 2%;

top, right, bottom, left margin:2cm 3cm 1cm;

top, right=left, bottom

(20)

Padding

● L'attribut «Padding» permet de préciser l'espace aux alentours d'un élément mains à l'intérieur du cadre.

● L'espace résultant est affecté par le coloriage du fond de l'élément

● Ex : p.{padding-top:25px ;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;}

(21)

Ajuster les dimensions des éléments

On peut préciser les dimensions d'un élément avec les attributs suivant : height, width, max-height,

min-height, max-width, min-width Ex : img{

height:120px ; width:50px ;

overflow:auto ; /*scroll*/

}

(22)

Visibilité et affichage

● Il est possible de cacher un élément avec la propriété visibility:hidden (prendra de la place) ou display:none

● Il est possible de changer l'affichage d'un élément de inline à block et vice versa.

Ex : li{display:inline;}

a{display:block;}

(23)

Positionnement

Quatre façons pour positionner les éléments :

1. Statique : selon leur position dans le fichier HTML 2. Fixe : position fixe précisée dans le style

Ex : p.pos_fixed{position:fixed;

top:30px; right:5px ; }

3.Relative : position relative à la position normale

Ex : h2.pos_left{ position:relative ; left:-20px ; }

4.Absolue : position relative à la position du premier élément père qui a une position non statique.

Ex : h2{ position:absolute ;

left:100px; z-index:-1;}

(24)

Propriétés pour la mise en forme

● clip : permet d'afficher une partie d'un élément Ex : img { position:absolute;

clip:rect(0px,60px,200px,0px) ; }

● cursor : précise quel type de curseur à afficher Ex : span{cursor:crosshair}

● float : permet d'afficher horizontalement des éléments l'un à coté de l'autre

Ex : img{float:left; } p{clear:both}

(25)

Créer des Menus avec les listes

<ul>

<li><a href="contact.asp">Contact</a></li>

<li><a href="about.asp">About</a></li>

</ul>

●Home

●News

●Contact

●About

(26)

Menu vertical

ul{list-style-type:none;

margin:0;

padding:0;}

a:link,a:visited{display:block;

font-weight:bold;

color:#FFFFFF;

background-color:#98bf21;

width:120px;

text-align:center;

padding:4px;

text-decoration:none;

text-transform:uppercase;}

a:hover,a:active{background-color:#7A991A;}

HOME NEWS CONTACT

ABOUT

(27)

Changer de style selon la périphérique

<style>

@media screen{

p.test {font-family:verdana,sans-serif;font- size:14px;}

}

@media print{

p.test {font-family:times,serif;font-size:10px;}

}

@media screen,print{

p.test {font-weight:bold;}

}

</style>