Développement WEB: Liscence Professionel SIL

Liscence Professionel SIL
Universit Abdelmalek Essaadi
Dveloppement WEB
Feuilles de Style
Prof. EL Harrak mohammad.
2008/2009
On les appelle aussi css pour Cascading Style Sheets . Objectif : Dfinir le style d'un document html indpendamment de son contenu. Intrt : Votre site est beau, bien rempli...vous voulez changer l'image de fond de toutes les pages... Mise en oeuvre : Dans un fichier, rfrenc dans le document html.
Style ensemble de rgles Une rgle est compose d'un slecteur et d'un ensemble de dclaration sous la forme d'un couple proprit et valeur. selecteur Indique l'lment auquel s'applique la rgle dclaration Indication sur la forme selecteur { proprit1: valeur; proprit2: valeur; } CSS2 dfinit plus de 100 proprits diffrentes.
Interne au document Dfinition du style dans len-tte du document HTML grce aux balises <STYLE></STYLE>. Externe au document Dfinition du style dans un fichier part. Liason entre le fichier HTML et le fichier de style par la balise <LINK>. Local un lment (non recommand) Dfinition des dclaration de style directement comme valeur de l'atribut STYLE.
exemple1.css H1 { font-style: bold; color: red }
<HTML> <HEAD> <LINK REL=stylesheet HREF=exemple1.css> </HEAD> <BODY> <H1>Titre en gras et en rouge</H1> </BODY> </HTML>
Exemple 2.css <HTML> <HEAD> <STYLE> BODY { margin: 3em; color: blue } H1 { font-family: sans-serif; font-size: 18pt; text-align: center; color: green } P { font-size: 14pt } </STYLE> </HEAD> <BODY> <H1>Titre en gras et en vert</H1> <P> Ceci est un exemple trivial! </P> </BODY> </HTML>
6
Plusieurs feuilles de styles peuvent tre charges Plusieurs balises <LINK> dans le document Directive @import dans une dfinition de style. Exemple basic.css
<HTML>
H1 { background-color: yellow }
<HEAD> <LINK REL=stylesheet HREF=exemple1.css> <STYLE> @import url(basic.css) H2 { font-style: italic; color: blue} </STYLE> </HEAD> <BODY> <H1>Titre en gras et en rouge</H1> <H2>Titre de second niveau</H2> </BODY> </HTML>
Dfinition multiple Utilisation dun mme style pour plusieurs balises H1, H2 { text-align: center } Les titres <H1> et <H2> sont centrs Dfinition contextuelle Dfinition du style dune balise lintrieur dautres balises OL OL LI { list-style: upper-roman } Numrotation romaine majuscule pour la balise <LI> lorsquelle est encadre par 2 balises <OL>
<HTML> <HEAD> <STYLE> OL OL LI { list-style: upper-roman } </STYLE> </HEAD> <BODY> <OL> <LI>Le style ne sapplique pas</LI> <OL> <LI>Le style sapplique!</LI> </OL> <LI>Le style ne sapplique pas</LI> </OL> </BODY> </HTML>
9
Permet la dfinition de nouveaux styles attachs (ou non) une balise P.equation { font-family: symbol } Dfinition d'une classe equation pour la balise <P> .resume { font-style: italic } Dfinition d'une classe resume pour n'importe quelle balise (<P>,<H1>, etc.) Association d'une classe un lment l'aide de l'attribut CLASS.
p.petit { font-family: times, serif; Font-size: 10pt; color: black; fontstyle: italic; Background-color: #ffffff; }
<p class="petit"> ceci va etre ecrit en petit </p>

10
Dtermine quels lments s'applique un style * tous les lments e tous les lments e fe aux lments e descendant de f f > e aux lments e fils de f f + e aux lments e qui suivent f e[a] aux lments e avec un attribut a e[a=v] aux lments e avec un attribut a=v [a] quivalent *[a] [a=v] quivalent *[a=v]
11
e.c e#v .c #v e:first-child fils de leurs pres e:first-letter e:first-line e:link e:visited
quivalent e[class=c] quivalent e[id=v] quivalent *.c quivalent *#v aux lments e qui sont les premier au premier caractre de e la premire ligne de e aux hyperliens e aux hyperliens e dj visits
12
Diffrents types possibles Nombres entiers ou rels, pourcents (x%) Longueurs avec des units absolues (pt, mm, cm, ) ou relatives (em, px, ) Angles (rad, deg, grad) Temps (s, ms), frquences (Hz, kHz) Couleurs (#rrggbb, rgb(r%,g%,b%) Identificateurs Chanes de caractres URL url("../images/my_img.jpg")
13
Contrle de l'affichage suivant le mdia de sortie all Tous les types de mdias screen cran (fentre) d'ordinateur handheld cran de petite taille (PDA, tl., ) print Impression sur support opaque projection Projection sur support pagin (transparent par exemple) aural Synthsiseur vocal braille Priphrique retour tactile (braille)
14
Utilisation de la directive @media @media print { body { color: blue } } Spcifi dans la clause d'importation @import url(basic.css) screen; Spcifi dans un lien externe <LINK REL="stylesheet" MEDIA="print" HREF="printstyle.css">
15
Le fond est dtermin par les proprits suivantes: background-color couleur background-image URL background-position Position de l'image
top | center | bottom | left | center | right pos_x pos_y (en pixels ou en %)
background-repeat Rptition
repeat | repeat-x | repeat-y | no-repeat
La couleur du texte est dtermin par la proprit color la prsentation des liens est dtermine par les
slecteurs
a:link, a:visited, a:hover, a: active
a:link { color:blue; text-decoration: underline; background-color: #ffffff; } a:visited { color:purple; text-decoration: underline ; background-color: #ffffff; } a.hover { color:red; text-decoration: underline; background-color: #ffffff; } 16 a:active { color: red; font-weight: bold; background-color: #ffffff; }
Proprits des caractres font-family Liste de polices "Times" | "Arial" | "Courier New" | serif | sans-serif | monospace | font-style Style de police normal | italic | oblique font-weight Graisse de police normal | bold | 100 | 200 | | 900 | font-size Taille de la police dans une unit quelconque
17
Proprits text-align Alignement horizontal left | right | center | justify vertical-align Alignement vertical sub | supper text-indent Indentation de la premire ligne taille | pourcentage text-decoration Gestion de caractres barrs, underline | overline | none | blink | text-transform Transformation de texte capitalize | uppercase | lowercase | none letter-spacing Contrle du crnage taille | pourcentage
18
Deux lments neutres peuvent tre utiliss en combinaison avec l'attribut CLASS pour dfinir un modle de styles gnral <DIV> Suite de blocs (titres, paragraphes, etc) <SPAN> Squences de caractres, l'intrieur d'un bloc
<DIV CLASS="resume"> Le cours intitul <SPAN CLASS="nomcours"> programmation web</SPAN> en premire anne Tlcommunications pour objectif </DIV>
19
Des lments de prsentations (qui ne font pas partie du document) peuvent tre ajouts au moyen des lments :before ou :after avec l'attribut content Exemple td.price:before { content:"Prix: "; } td.price:after { content:" Euros"; } ... <TD CLASS="price">290</TD>
20
10
Caractristiques des listes list-style-type Type de puce disc | square | decimal | upper-roman | list-style-position Position des puces outside Texte en retrait inside Texte au niveau de la puce list-style-image URL de l'image
point {list-style-image: url(images/doigt.gif); list-style-type: square }
21
Pour rendre compatible les dclarations de style avec les anciens navigateurs Mettre en commentaire les dfinitions de styles <STYLE> <! H1 { color: red } H2 { color: blue } --> </STYLE>
22
11
Le modle de boite : vaut pour toutes les balises bloc :
En anglais (et en css) : margin : marge externe. border : bordure padding : marge interne
23
Structurer le document XHTML avec des blocs : ... </div> width : attribut pour dfinir la largeur du bloc (auto par dfaut). La largeur dun element est dfinie comme la distance entre le bord interne gauche et le bord interne droit. height : attribut pour dfinir la hauteur des blocs (auto par dfaut). La hauteur est la distance entre le bord interne haut et le bord interne bas.
24
12
Une marge permet de crer un espace blanc autour dun lment. On pourra dfinir la marge en haut (margin-top), droite (margin-right), gauche (margin-left) et en bas (margin-bottom) dun bloc.
25
Il sagit de la zone comprise entre les bordures et la zone de contenu. Comme pour les marges, il existe 4 attributs : padding-top, padding-right, padding-left et padding-bottom.
26
13
Le flottement est dfini par la proprit float, qui peut prendre les valeurs : left : lment contourne par la droite right : lment contourne par la gauche none : valeur par dfaut
27
Le positionnement est prcis par la proprit position, pour laquelle il existe 4 types de positionnement : relative : permet de dcaler un lment une certaine distance absolute : position par rapport au conteneur fixed : position par rapport a la fentre daffichage (ne fonctionne pas avec IE) static : comportement par dfaut
28
14
Construire un document HTML et un document CSS produisant laffichage ci-dessous, le fichier HTML ne devra contenir aucun attribut de balise et ne devra utiliser que les balises h1, p et div. Nous allons crer une page en cinq parties :
Le titre du site Le menu
La speedbarre, c'est la barre horizontale o on met toutes les rubriques du site
Le corps, c'est la partie dans laquelle est crite ce cours

Le pied de page, o figure souvent le Copyright
29
15

Développement WEB: Liscence Professionel SIL

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Développement WEB: Liscence Professionel SIL

Загружено:

Авторское право:

Доступные форматы

Liscence Professionel SIL

Universit Abdelmalek Essaadi

exemple1.css H1 { font-style: bold; color: red }

<p class="petit"> ceci va etre ecrit en petit </p>

point {list-style-image: url(images/doigt.gif); list-style-type: square }

Le modle de boite : vaut pour toutes les balises bloc :

Le titre du site Le menu

La speedbarre, c'est la barre horizontale o on met toutes les rubriques du site

Le corps, c'est la partie dans laquelle est crite ce cours

Le pied de page, o figure souvent le Copyright

Вам также может понравиться