Faculté I&C, Claude Petitpierre Cascaded style sheets CSS.

Présentation au sujet: "Faculté I&C, Claude Petitpierre Cascaded style sheets CSS."— Transcription de la présentation:

1 Faculté I&C, Claude Petitpierre Cascaded style sheets CSS

2 Faculté I&C, Claude Petitpierre Placement des styles ( 3 possibilités ) p { font-weight:bold; color:gray; } 123123

3 Faculté I&C, Claude Petitpierre Styles ul { font-size: 120% } ul.commerce { font-weight: bold; } ul#pub { color: red; }.commerce { border-color: blue; } #pub { text-align: center; } ul span { visibility: hidden; } http://www.w3schools.com/css/css_reference.asp...

4 Faculté I&C, Claude Petitpierre Types déléments Block elements,,, and Inline elements... Tables Un élément inline ne peut pas contenir un élément block aa // devient block bb // devient inline

5 Faculté I&C, Claude Petitpierre Blocs flottants.dropcap { float: left; width:.7em; font-size: 5em; margin-top:3px; line-height:70%; } C et exemple montre comment commencer un paragraphe par une grande lettre, ce qui fait de jolis textes.

6 Faculté I&C, Claude Petitpierre Positions -- (positionné par les éléments précédents) <img src="http://lti.epfl.ch/LemanOS/Images/titre.png" style="position:relative;top:20px;left:20px;"/> <img src="parcel.gif" style="position:absolute;top:20px;left:20px;/> static normale relative absolute fixed p.r. fenêtre

7 Faculté I&C, Claude Petitpierre Positions static normale relative absolute fixed p.r. fenêtre (positionné par style) aa

8 Faculté I&C, Claude Petitpierre Positionnements dans un élément absolute p.r. au div absolute p.r. à la page

9 Faculté I&C, Claude Petitpierre CSS Pseudo-classes div:hover { background-color:#ffeeee } div:hover span { font-size: 120% } div.commerce:hover p { font-weight: bold; } AAAA mmmmm un p dans un div de classe commerce sur lequel la souris passe est mis en bold

10 Faculté I&C, Claude Petitpierre Apparition dun élément ul ul { background: #fed; position: absolute; left: -3000px; } ul li:hover ul { left: 7em; top: 4px; } ul -3000px ul position:relative ul position:relative ul 7em 4px hover

11 Faculté I&C, Claude Petitpierre Tutorials CSS Tooltip series http://www.communitymx.com/content/article.cfm?cid=4E2C0 CSS Flyouts (menus) http://www.communitymx.com/content/article.cfm?cid=55A69 Tool tip

12 Faculté I&C, Claude Petitpierre Exercice Créer une page contenant un menu dont chaque élément appelle une autre page Les autres pages ont un lien qui revient sur la page ci-dessus