• Aucun résultat trouvé

[PPT] Support de formation de CSS methodes et pratique | Cours informatique

N/A
N/A
Protected

Academic year: 2021

Partager "[PPT] Support de formation de CSS methodes et pratique | Cours informatique"

Copied!
17
0
0

Texte intégral

(1)

CSS

(2)

Pourquoi les CSS ?

 Pour séparer le contenu de la mise en

forme des pages web.

 Rendre la charte graphique du site Web

plus cohérente.

 Faciliter les mises à jour de la

présentation des sites Web.

(3)

Comment ?

 En définissant un ou plusieurs styles  Deux manières :

 Interne (les styles sont définis à l’intérieur

de la page)

 Externe (les styles sont définis dans un

(4)

Style Interne I

 Style défini grâce à l’attribut style de la

balise HTML Exemple :

(5)

Style Interne II

 Style défini dans la balise Style

(Celle-ci doit être déclarée entre les balises <head>et </head>)

Exemlpe :

<Style type="text/CSS"> P { Color:#FFAA34;} </Style>

(6)

Style Externe

 Style défini dans un fichier externe

(Celui-ci doit être relié à la page entre les balises <head>et </head>)

 Exemple :

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

(7)

Les Sélecteurs CSS

 Les sélecteurs permettent de définir la cible à

laquelle on veut appliquer le style.

 Trois catégories :

 Sélecteurs qui redéfinissent l’apparence des

balises html

 Sélecteurs associés à des variables et qu’on

applique à n’importe quelle balise html

 Sélecteurs spécifiques associés à une balise

(8)

Les Sélecteurs I

 Redéfinition de l’apparence des balises

html

Exemples :

P, H1 { font-family : verdana, arial;

Color:red; }

A { text-decoration:none; Color:blue; }

(9)

Les Sélecteurs II

 Les sélecteurs associés aux variables…

Exemple de définition du style :

.corps {font-family : verdana, arial; }

Exemple d’utilisation dans html :

(10)

Les Sélecteurs III

 Les sélecteurs spécifiques à une balise

Exemple de définition du style :

#menu {font-family : verdana, arial; }

Exemple d’utilisation dans html :

(11)

Les Sélecteurs IV

 Les Pseudo-Styles.

L’apparence change en fonction des événements qui surviennent sur l’élément html.

Exemples :

A:link {Color:blue; }

A:hover {Color:yellow; } A:visited {Color:black; }

(12)

Les Sélecteurs V

 Les Sélecteurs Hiérarchiques.

Exmples :

P A {Color:blue; }

(la couleur ne s’applique qu’aux balises <A> qui se trouvent à l’intérieur d’un paragraphe <P> )

UL LI {list-style:none; }

(pas de puces pour les <LI> qui se trouvent à l’intérieur d’une <UL>. Ca ne concerne pas donc les <LI> qui se trouvent à l’intérieur d’une

(13)

Quelques Attributs I

 Couleurs et images d'arrière plan

color: rgb(255,0,255); background: red;

background-image: url('http://123.ma/img.jpg');

 Décoration de polices de caractères

font-family : verdana, arial; font-weight: bold;

(14)

Quelques Attributs II

Mise en forme de blocs de

caractères

text-align: right; text-align: justify; text-indent: 15px;

(15)
(16)

Margin

>

Border

>

Padding

>

Contenu

margin: 10px; padding: 5px; border: 2px solid #FF00FF;

---Margin-left:10px; Margin-top:5px;

(17)

Quelques Attributs III

 Positionnement position: absolute; position: relative; display: none; z-index: 10;

Références

Documents relatifs

[r]

[r]

[r]

a - Choisir des 7 mots de telle sorte qu'ils ontiennent tous les aratères aentués possibles. b - Erire une page HTML ontenant une ou deux phrases onstitués des

[r]

[r]

dans la balise du paragraphe (méthode sans fichier css) pour changer la couleur du mot test en rouge… puis affecter la classe soustitrecolor à la balise. &lt;p&gt; en

I, Elda de Carvalho, as the coordinator of Moris Foun Group, which weave Tais in Uani Uma Village, declare that our group is surely ready that we agree to the government’s program and