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

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

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; }

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

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.

Faculté I&C, Claude Petitpierre Positions -- (positionné par les éléments précédents) <img src=" 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

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

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

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

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

Faculté I&C, Claude Petitpierre Tutorials CSS Tooltip series CSS Flyouts (menus) Tool tip

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