Cours CSS
-
Upload
mahdi-sami -
Category
Documents
-
view
219 -
download
0
Transcript of Cours CSS
-
7/26/2019 Cours CSS
1/21
CSS
JE SUIS
INFORMATICIEN
1
-
7/26/2019 Cours CSS
2/21
PLAN
Dfinition
Ecriture du CSS
Slecteur
Notion de classe
Notion dun ID
Mode page
Convention
Police de caractre Apparence des listes
Arrire plan2
-
7/26/2019 Cours CSS
3/21
DFINITION (1/2)
3
CSS est l'abrviation de Cascading Style Sheets
Les feuilles de style sont des ajouts de code au langage XHTMLqui vont prendre en charge la prsentation de la page Web
Police, taille de caractres, interlignes, etc.
Le concept du CSS repose sur le principe de la sparation ducontenu et de la prsentation
-
7/26/2019 Cours CSS
4/21
DFINITION (2/2)
4
Lacune XHTMLUne taille de caractre limits quelques valeurs (hx)
Un seul modle de bordure de tableaux
Une image darrire obligatoirement rpte en mosaque
Utilit de CSS
CSS apportent de nombreuses possibilits de prsentation
Taille de caractres illimite, de nouvelles prsentation de
bordure, le contrle dinterligne, le positionnement prcis des images
Il simplifie le code
Il facilite la maintenance du site
http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/html.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-html-convertir-html-telecharger-bounce.htm&usg=__KOpmFWFy7F0znB6mlWCibLH8AE0=&h=64&w=64&sz=9&hl=fr&start=6&itbs=1&tbnid=XHJYa988N1HtdM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.html&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/html.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-html-convertir-html-telecharger-bounce.htm&usg=__KOpmFWFy7F0znB6mlWCibLH8AE0=&h=64&w=64&sz=9&hl=fr&start=6&itbs=1&tbnid=XHJYa988N1HtdM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.html&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/html.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-html-convertir-html-telecharger-bounce.htm&usg=__KOpmFWFy7F0znB6mlWCibLH8AE0=&h=64&w=64&sz=9&hl=fr&start=6&itbs=1&tbnid=XHJYa988N1HtdM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.html&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/html.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-html-convertir-html-telecharger-bounce.htm&usg=__KOpmFWFy7F0znB6mlWCibLH8AE0=&h=64&w=64&sz=9&hl=fr&start=6&itbs=1&tbnid=XHJYa988N1HtdM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.html&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/css.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-css-convertir-css-telecharger-telecharger+fichier+css.htm&usg=__A0ZM89mNBFfEoIAKVf_erMMBSAg=&h=64&w=64&sz=8&hl=fr&start=3&itbs=1&tbnid=GjaD-bxCfOxYYM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.css&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1 -
7/26/2019 Cours CSS
5/21
ECRITURE DU CSS (1/2)
5
Deux possibilit :
Interne : le code de la feuille de style sera plac dans lentte dudocument XHTML
-
7/26/2019 Cours CSS
6/21
ECRITURE DU CSS (2/2)
6
Deux possibilit :
Externe: Regrouper les dclarations de style dans un fichier (.css)externe au fichier XHTML et mis dans le mme rpertoire que cedernier.
Ma_Presentation.css
La balise avertit le navigateur qu'il doit chercher un document situ l'extrieur de la page HTML.
L'attribut rel="stylesheet"prcise que le document en question est une feuille de styleexterne.
L'attribut type="text/css"prcise le type de feuille de style.
L'attribut href=" URL "donne lemplacement de la feuille de style.
http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/css.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-css-convertir-css-telecharger-telecharger+fichier+css.htm&usg=__A0ZM89mNBFfEoIAKVf_erMMBSAg=&h=64&w=64&sz=8&hl=fr&start=3&itbs=1&tbnid=GjaD-bxCfOxYYM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.css&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/css.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-css-convertir-css-telecharger-telecharger+fichier+css.htm&usg=__A0ZM89mNBFfEoIAKVf_erMMBSAg=&h=64&w=64&sz=8&hl=fr&start=3&itbs=1&tbnid=GjaD-bxCfOxYYM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.css&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/css.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-css-convertir-css-telecharger-telecharger+fichier+css.htm&usg=__A0ZM89mNBFfEoIAKVf_erMMBSAg=&h=64&w=64&sz=8&hl=fr&start=3&itbs=1&tbnid=GjaD-bxCfOxYYM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.css&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1 -
7/26/2019 Cours CSS
7/21
SLECTEUR
7
Slecteur {Proprit 1: valeur;Proprit 2 : valeur;
Proprit N : valeur;}
Il existe deux type de slecteur : classe et Id.
-
7/26/2019 Cours CSS
8/21
NOTION DE CLASSE
8
Dfinition de la classe
.nom_de_classe {Proprit 1: valeur;
}
EX:
.eni {
font-family: Verdana;
}
Appel de la classe
EX:
-
7/26/2019 Cours CSS
9/21
NOTION DUN ID
9
Dfinition dun id
#nom_de_id {
Proprit 1: valeur;
}
EX:
#eni {
font-family: Verdana;
}
Appel de la classe
EX:
-
7/26/2019 Cours CSS
10/21
MODE PAGE
10
Dfinition
table {
Proprit 1: valeur;
}
Proprit1 sexcutent pour tous les tableaux quiexistent sur cette page
Il est possible daffecter le mme effet des
diffrents slecteurs.
EX:
div, table, spam, h1 {Proprit 1: valeur;
}
-
7/26/2019 Cours CSS
11/21
CONVENTION
11
Commentaires/* Ceci est un commentaire */
Le code CSS et XHTML doit tre crit enminuscule
-
7/26/2019 Cours CSS
12/21
POLICE DE CARACTRE (1/5)
12
Nom de la policeFont-family: nom de la police;
Exemples: Font-family: Arial;
Font-family: courier New;
ItaliqueFont-style: italic ou oblique;
Petite majusculeFont-variant: small-caps;
-
7/26/2019 Cours CSS
13/21
POLICE DE CARACTRE (2/5)
13
GrasFont-weight: bold;
Taille:Font-size: valeur en pt ou px;
Raccourci:
P {font: italic bold small-caps 24 pt Arial, sans-serif;}
-
7/26/2019 Cours CSS
14/21
POLICE DE CARACTRE (3/5)
14
Couleur du texteColor: red;Color: #ff0000;
DcorationText-decoration: underline;
Transformation
Text-transform: capitalize;Text-transform: uppercase;Text-transform: lowercase;Text-transform: none;
-
7/26/2019 Cours CSS
15/21
POLICE DE CARACTRE (4/5)
15
Espace entre les lignesLine-height: 2; ouLine-height: 200%; (double interligne)
Line-height: 18px;Alignement horizontal
Text-align: left;Text-align: right;
Text-align: center;Text-align: justify;
-
7/26/2019 Cours CSS
16/21
POLICE DE CARACTRE (5/5)
16
Alignement verticalVertical-align: sub;Vertical-align: sup;
Vertical-align: top;Vertical-align: middle;
Longueur et hauteur (en px ou en pourcentage)
Width: 235px;Hight: 50%;
-
7/26/2019 Cours CSS
17/21
APPARENCE DES LISTES
17
Apparence des puces et des numrotationsList-style-type: disc; (cercle plein)List-style-type: circle; (cercle)List-style-type: square; (carr)
List-style-type: decimal; (1, 2, 3, etc.)List-style-type: upper-roman; (I, II, III,)List-style-type: lower-roman; (i, ii, iii, etc.)List-style-type: upper-alpha; (A, B, C,...)
List-style-type: lower_alpha; (a, b, c, etc.)Puces graphiques
List-style-image: url(votre_puce.gif);Les formats peuvent etre de type gif, jpeg, ou png
-
7/26/2019 Cours CSS
18/21
EXERCICE 1
18
-
7/26/2019 Cours CSS
19/21
ARRIRE PLAN (1/2 )
19
Couleur darrire-planBody {background-color: #99ccff;}H2 {background-color: #99ccff;}
Insertion et rptition dune imageBackground-image: url(image.jpeg);Background-repeat: repeat;Background-repeat: repeat-x;
Background-repeat: repeat-y;Background-repeat: no-repeat;
Exemple:Body {background-image: url(img.png); background-
repeat: repeat;}
-
7/26/2019 Cours CSS
20/21
ARRIRE PLAN (2/2 )
20
Positionnement de limage Background-position: 50px 100px; (axe horizontal
par rapport au bord gauche , axe vertical parrapport au bord suprieur)
Background-position: 20% 50%; (axe horizontalpar rapport au bord gauche , axe vertical parrapport au bord suprieur)
Background-position: center left; (positionhorizontale, position verticale)
Dfilement de limage
Background-attachment: scroll; (dfilement delimage)
Background-attachment: fixed;
-
7/26/2019 Cours CSS
21/21
21
Des questions ?