Daaif Cours CSS
17
CSS Cascading Style Sheets
-
Upload
salem-ben-nasr -
Category
Documents
-
view
15 -
download
1
description
presentation css
Transcript of Daaif Cours CSS
CSS
Cascading Style Sheets
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.
Donne plus de possibilités que HTML…
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 fichier séparé puis relié à la page Web)
Style Interne I
Style défini grâce à l’attribut style de la balise HTML
Exemple :
<P Style="Color:#FF0">Mon paragraphe</P>
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>
Style Externe
Style défini dans un fichier externe (Celui-ci doit être relié à la page entre les balises <head>et </head>)
Exemple :
<link rel="stylesheet" type="text/css" href="fichier.css">
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 particulière
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; }BODY {Background : #F9C}
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 :<Body class=corps>…..</body>
Les Sélecteurs III
Les sélecteurs spécifiques à une baliseExemple de définition du style :
#menu {font-family : verdana, arial; }
Exemple d’utilisation dans html :<DIV id=menu>…..</DIV>
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; }
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 <OL> )
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;font-decoration: strike;
Quelques Attributs II
Mise en forme de blocs de caractères
text-align: right;text-align: justify;
text-indent: 15px;
Gestion des boîtes englobantes
Margin>Border>Padding>Contenu
margin: 10px; padding: 5px;
border: 2px solid #FF00FF; --------Margin-left:10px; Margin-top:5px;
Gestion des boîtes englobantes
Quelques Attributs III
Positionnement position: absolute; position: relative;display: none; z-index: 10;
