Tech Web - HTM-CSS - Cours

BALISES HTML DE BASE.
ENSEIGNANT: ARTHUR ONDAPHE 1

B ALISES HTML DE BASE .
Pour comprendre le fonctionnement du langage CSS, il est important d'avoir

quelques notions en HTML. Le HTML est un langage simple, fait de balises (du
genre <tag>) qui ont toutes une fonction et un sens. C'est ce qu'on appelle la
sémantique.
Voici donc les quelques balises HTML fondamentales à connaître pour comprendre
la structure d'une feuille de style.

Balises les plus courantes
Document Titres
<html></html> : document HTML <h1></h1> : titre 1er niveau
<body></body> : corps du document <h2></h2> : titre 2ème niveau
<h3></h3> : titre 3ème niveau (... et ainsi de suite jusqu'à 6)
Éléments de texte
Tableau
<p></p> : paragraphe
<table></table> : tableau
<ul></ul> : liste à puce
<tr></tr> : ligne du tableau
<ol></ol> : liste numérotée
<th></th> : cellule de légende de ligne ou de colonne
<li></li> : élément d'une liste
<td></td> : cellule du tableau (colonne)
<a href=""></a> : lien hypertexte
<blockquote></blockquote> : bloc de citation
Structure et habillage
<div></div> : définition de blocs, regroupement d'élements de type block
<span></span> : habillage d'éléments de manière inline

Balises les plus courantes
Quelques nouveautés HTML5 Quelques balises et attributs dépréciés à ne pas utiliser

<header></header> : en-tête •<center></center> (pour centrer)
<section></section> : section (dingue non ?) •<font></font> (pour les polices de caractères)
<article></article> : sous-section pour un article (de blog par exemple) •<strike></strike> (pour barrer du texte)
<nav></nav> : bloc de navigation •<s></s> (pour souligner du texte)
<aside></aside> : encart •<applet></applet> (pour les applets java)
<figure></figure> : images et/ou vidéos •align
<footer></footer> : pied-de-page •bgcolor
•noshade
•text
•vlink

FEUILLE DE STYLE CSS DE BASE

F EUILLE DE STYLE CSS DE BASE
Une feuille de style CSS externe peut se faire avec le simple bloc-note, et il est
d'usage de lui faire porter l'extension .css (style.css par exemple). On la liera ensuite
à la page html à l'aide d'un link placé dans l'en-tête de la page.
Mais on peut aussi déclarer les styles dans l'en-tête de la page, ou au sein
des balises elles-mêmes. Cela peut-être intéressant pour appliquer des styles
spécifiques et ils auront un ordre de priorité plus important. C'est ce qu'on appelle la
"cascade".

Structure de base
Pour chaque déclaration, la structure est toujours la même : Exemple de feuille de style
sélecteur { Fonctionne avec : Tous les navigateurs graphiques
propriété: valeur; Propriétés utilisées :

background-color
} color
•Le sélecteur, c'est la balise (X)HTML (body ; h1 ; p, etc.), l'identifiant (id) ou la classe (class) ; font-family ; font-size
padding
•La propriété, c'est l'attribut qu'on veut appliquer (font ; background ; margin ; etc.)
text-align ; text-decoration
•Et enfin la valeur qui précise les caractéristiques de la propriété

Notion de cascades
Pourquoi parle-t'on de "feuilles de style en cascade" (Cascading Style Sheets) ? La raison est très simple : on peut
déclarer les styles à différents endroits, et selon ces endroits ils seront plus ou moins prioritaires. On obtient donc une
cascade de styles.
Déclaration des styles dans une feuille de style externe : c'est de loin la meilleure chose à faire et la plus pratique à
maintenir, mais c'est celle qui a le moins de poids
Déclaration des styles en interne, dans l'en-tête de la page : à ne faire qu'avec des styles particuliers à une page. Les
styles déclarés auront plus de poids que ceux de la feuille de style externe et donc l'emporteront en cas de conflits.
Déclaration des styles en attributs des éléments html : à faire pour des mises en forme ponctuelles. Ces styles
l'emporteront sur tous les autres.

Enregistrement d'une feuille de style
1. Feuille de style externe 2. Feuille de style interne
Enregistrer le code CSS dans un fichier s'appelant (par exemple) Pour déclarer des styles qui ne s'appliqueront qu'à la page considérée,
"style.css", et mettre dans l'en-tête de la page html (entre les les styles sont à déclarer entre les balises suivantes :
balises <head></head>) : <style type="text/css" media="screen"> .... </style>
<link href="style.css" rel="stylesheet" Tout ceci est à placer, comme précédemment, entre les balises
media="all" type="text/css"> <head></head>.
3. Styles CSS dans le code html ("inline")

De façon encore plus ponctuelle, si l'on veut attribuer un style à un seul endroit, on peut déclarer le style à l'intérieur
d'une balise html à l'aide de l'attribut style. Par exemple :
<p style="text-align:center; color:red"> lorem ipsum </p>

METTRE EN FORME UN TEXTE EN
CSS

Introduction
Il est très important de bien choisir le formatage des polices de caractères utilisées sur une
page web. En effet, pour une majorité de sites, le principal contenu est sous forme textuelle. Si ce
texte est mal adapté, peu lisible, le message ne peut évidemment pas passer, quelque soit sa
qualité.
Fonctionne avec : Tous les navigateurs graphiques

Attributs utilisés :
font ; font-family ; font-weight ; font-variant ; font-style
color
text-align ; text-decoration ; text-transform
line-height

Famille Serif
Les fontes de caractères de la famille serif assez courantes sont :

•Times new roman (PC)
•Times (Mac)
•Georgia (Mac/PC)
•Palatino Linotype (PC)
•Palatino (Mac)
Elles n'ont pas toutes le même aspect, les associations à respecter pour une homogénéité de rendu pourraient donc être :
body {
font-family:"times new roman", times, serif;
}
body {
font-family:georgia, serif;
}
body {
font-family:"palatino linotype", palatino, serif;
}

Famille Sans-Serif
•Verdana (Mac/PC)
•Arial (Mac/PC)
•Trebuchet (PC)
•Helvetica (Mac)
•Tahoma (PC)
•Geneva (Mac)
Pour ces fontes sans-serif, les associations pourraient être :
body {
font-family:arial, sans-serif;
}
body {
font-family:verdana, sans-serif;
}
body {
font-family:trebuchet, helvetica, sans-serif;
}
Body {
font-family:tahoma, geneva, sans-serif;
}

Unités de taille de caractères
1.On n'utilise pas de tailles de caractères fixes comme les points (pt), les picas (pc) ou les centimètres (cm). Celles-ci ne
sont pas redimensionnables à l'écran, or on doit toujours laisser la possibilité au visiteur de zoomer la page.
Pensez que même si vous avez de bons yeux actuellement, ça ne durera pas. Un jour, vous aussi, deviendrez presbyte, et
vous serez content de pouvoir zoomer un texte. Et je ne parle pas de toutes les autres déficiences oculaires...
2.On évite aussi d'utiliser les pixels (px) car Internet Explorer les considèrent comme une unité de taille de caractère
fixe, on se retrouve donc avec le même problème que précédemment.
Il faut donc utiliser des unités relatives, telles que les em ou les %. Ces unités sont proportionnelles à la taille en pixels
déclarée dans le navigateur. Par défaut, ceux-ci sont en général réglés à 16px. C'est donc une taille qui peut être modifiée
par l'utilisateur... On n'a aucun pouvoir là-dessus.

Le choix des couleurs
Les couleurs se déclarent grâce à l'attribut color, et à l'aide de codes hexadécimaux ou rvb (on évite les noms).
body {
font-family:arial, sans-serif; font-size:100%;
color:#000000; /*code hexadécimal du noir*/
}

Autres attributs
Les autres attributs possibles pour modifier les caractères sont :

•font-style: normal | italic : normale | italique
•font-variant: normal | small-caps : normale | petites capitales
•font-weight: normal | bold : normal ou gras
•text-align: left | right | center | justify : aligné à gauche | aligné à droite | centré | texte justifié
•text-decoration: none | underline | overline | line-through | blink : rien | souligné | surligné | rayé | clignotant
•text-transform: none | capitalize | uppercase | lowercase : met en majuscule la 1ère lettre d'un mot | met en majuscules | met en
minuscules
TP: voir fiche1

GÉRER LES MARGES EN CSS

Définitions des marges intérieures et
extérieures
◦ Pour chaque élément html on peut donc définir l'espacement qui le séparera des autres éléments (margin) et les espacements
intérieurs dont il peut bénéficier (padding).
Par exemple :
<blockquote>
<p>
Comme il a été indiqué lors du sommaire exécutif, le coût total de notre projet s'élèvera à 50 500 blockquote est l'élément parent, p est
$. Trente pour cent du coût total, soit 15 000 $, sera financé par des apports personnels (voir l'élément enfant.
tableau 9, section 1 et 2). Le prêt bancaire devrait être emprunté à la Caisse Desjardins ou, à (Pour rappel, la balise blockquote doit
Défaut,
</p> être utilisée pour des blocs de citation.)
</blockquote>

Déclaration des tailles
Les tailles de ces marges peuvent se déclarer en pixels margin:2px 5px 2em 0;
(px), en em, en %, etc. Tout dépend si l'on veut qu'elles revient à :
margin-top:2px;
soient fixes ou proportionnelles. margin-right:5px;
On peut détailler les tailles des marges à l'aide des margin-bottom:2em;
margin-left:0;
suffixes -top (haut), -right (droite), -bottom (bas),
-left (gauche), ou synthétiser les quatre d'un seul coup (la
première valeur étant celle du haut, puis on tourne dans
le sens des aiguilles d'une montre).
Nb: Si on ne met que deux valeurs, la 1ère s'appliquera au haut et au bas, la seconde à droite et à gauche.

Exemple basique
Appliquons des styles à l'exemple de code (x)html donné précédemment.
Code CSS
blockquote {
margin:0;
padding:1px;
background:#C00000;
}
p {
margin:20px;
padding:10px;
background-color:#FFFAFA;
}

SÉLECTEURS CSS CLASS ET ID

Introduction
Les sélecteurs class et id servent tout simplement à définir des styles particuliers que
l'on voudra reproduire de façon ponctuelle ou récurrente dans les pages HTML.
Une fois que la la feuille de style de base n'a plus de secrets, il est temps de passer à
la vitesse supérieure. . Les sélecteurs class et id sont incontournables et
indispensables,

Le sélecteur class
Premier exemple : les pages web sont souvent ponctuées d'ancres permettant de remonter en haut de page, et
celles-ci sont souvent placées à droite de la page. Il va donc falloir déclarer un style spécial pour cette mise en
forme spécifique, et le sélecteur class va nous y aider. A noter que dans la feuille de style, le nom du
sélecteur class est toujours précédé d'un point.
Code (X)HTML Code CSS

Pour appeler ce style dans la page html, on indique .haut {
text-align:right;
simplement class="haut" à l'intérieur de la balise voulue. }
<p class="haut">
<a href="#haut">Haut de page</a>
</p>

Sélecteur id
Le sélecteur id a presque la même fonction, à la différence importante qu'on ne peut l'utiliser qu'une seule
fois dans la page, contrairement au sélecteur class. C'est pour cela qu'il est plutôt utilisé à la mise en page
qu'à la mise en forme de caractères.
Deuxième exemple : construisons une section de page à deux colonnes. L'une des deux colonnes servira
pour un menu de 100 pixels de large flottant à gauche, l'autre pour un contenu placé à 110 pixels du bord
gauche (pour ne pas empièter sur le menu bien sûr). Cette fois, ce n'est pas d'un point qu'il faudra faire
précéder le nom du sélecteur id, mais d'un #.

Exemple
Code (X)HTML Code CSS
Dans le code html, il faudra donc cette fois indique un id (id="menu" et id="contenu")
#menu {
à la place de la syntaxe class. background-color:silver;
<h1 id="haut">Exemple des sélecteurs "class" et "id"</h1> width:100px;
<div id="menu"> float:left;
<ul> }
<li>item 1</li> #contenu {
<li>item 2</li> margin-left:110px;
<li>item 3</li> }
</ul>
</div>
<div id="contenu">
<p> Comme il a été indiqué lors du sommaire exécutif,

lecoût total de notre projet s'élèvera à 50 500$. Trente pour cent du coût
total, soit 15 000 $, sera financé par des apports personnels (voir tableau
9, section 1 et 2).. </p>
<p class="haut"> <a href="#haut">Haut de page</a> </p>

</div>

MISES EN PAGE EN COLONNES
SANS TABLEAU

Pourquoi éviter la mise en page par
tableaux ?
Il ne faut pas systématiquement diaboliser la mise en page par tableaux, mais disons qu'elle a "vécu". C'était une bonne
méthode lorsque les navigateurs implémentaient mal les normes CSS 2.1 (aux temps préhistoriques à l'échelle du web de
Netscape 4 et d'Explorer 5), mais maintenant...
Faire deux ou trois colonnes en CSS est relativement facile et le langage CSS est fait pour cela. Le code est plus facile à
maintenir, cela offre plus de choix de mise en page sans modification du code html, et surtout c'est plus accessible.
On m'objectera qu'au delà de 3 colonnes, les choses se compliquent et qu'il y a quelques heures d'arrachage de cheveux
pour arriver à faire quelque chose d'uniforme pour tous les navigateurs. Ce n'est pas tout à fait vrai. Vous devriez
(normalement) en être convaincu à la fin de ce tutoriel. Et quoi qu'il en soit le cas le plus courant se limite au plus à 3
colonnes.

Pourquoi éviter la mise en page par
tableaux ?
Le principe est très simple : on divise chaque élément de la page par un div. La
page se divise en quatre sections, chacune correspondant à une zone précise de
la page :
◦ Un en-tête : div id="entete"
◦ Un menu : div id="menu"
◦ Le contenu : div id="contenu"
◦ Un pied de page : div id="footer"
Pour faciliter la suite de la mise en forme, les boites menu et contenu seront
englobées dans un autre cadre main.
Le but de l'opération est donc de placer les cadres menu et contenu l'un à côté
de l'autre.

En positionnement flottant
Entre menu et contenu, celui à déclarer en flottant doit être menu, car il est le premier
des deux dans le flux (le code html lu de haut en bas).
Pour éviter le problème de fusion de marges qui empêche les différents blocs de
"coller" entre-eux, on attribuera à chacun d'eux une marge intérieure haute et basse de
1 pixel (padding:1px 0).
Si on désire un menu de 240 pixels de large et que le contenu ne se "rabatte" pas vers
le bord gauche sitôt la hauteur du menu dépassée, on lui attribuera une marge gauche
d'autant ou d'un peu plus.
Pour ne pas que le pied de page footer soit concerné par ce phénomène de flottaison
(ce qui risque de le faire anormalement remonter), il faudra lui attribuer un clear qui
remet à zéro la sortie du flux.
Pour finir, les écrans ayant tendance à devenir de plus en plus grands et une zone de
lecture étant pénible à lire si elle trop large, on peut aussi attribuer au main une
largeur maximum à ne pas dépasser, 960 pixels par exemple, que l'on peut centrer à
l'aide de margin:auto.

Exemple
#entete, #menu, #contenu, #footer {
padding:1px 0; On peut aussi positionner le menu à droite
}
#entete { sans toucher au code html ! Ce qui est
background-color:#FF9900;
text-align:center; bien sûr impossible avec une mise en page
}
#main {
max-with:960px;
par tableaux. Cela dit, la logique du flux
margin:auto;
} n'est plus respectée (ce qui est placé en
#menu {
float:left; premier dans le code se trouve après un
width:240px;
background-color:#FF3366; élément positionné à gauche de l'écran),
}
#contenu { ce qui est déconseillé par les normes.
margin-left:245px;
background-color:#9966FF;
}
#footer {
background-color:#669933;
text-align:center;
clear:both;
}

En positionnement absolu
Un élément positionné en position:absolute sort totalement du flux et est donc sujet à
provoquer des superpositions. Pour cela, il sera donc plus prudent de déclarer une
hauteur au bloc non positionné. Ne pouvant pas prévoir la hauteur que prendra le
contenu, il vaut mieux, dans notre exemple, positionner le menu.
L'origine du repère à partir duquel on peut positionner l'élément, à l'aide des
propriétés top, bottom, left ou right, se fait à partir du dernier ancêtre positionné, ou,
à défaut, du coin haut à gauche de la fenêtre.
En d'autre termes, par défaut l'origine O est en haut à gauche. Mais on peut effectuer
un changement de repère en O' à l'aide d'un élément parent aux éléments à
positionner. Ici le main (bloc parent en position:relative) va permettre de changer de
repère pour menu et/ou contenu (éléments enfants).

Exemple
Il n'y a pas besoin d'indiquer
un top et un left puisque le
menu, premier dans le flux, est
déjà positionné par défaut en
haut à gauche.
Pour le placer à droite, là par
contre, il est nécessaire de
renseigner une position
horizontale :
TP: voir fiche 2

BORDURES EN CSS

Introduction
Les bordures servent à délimiter une zone, mettre en relief une information ou
pour entourer les cellules d'un tableau, leur utilisation est très répandu sur les
pages web. Pour des bordures simples, nul besoin d'avoir recours à des images.
Border un paragraphe, une image ou un bloc d'une ou plusieurs bordures

est d'une simplicité Propriétés utilisées :
border-width
border-style
border-color
padding

La propriété permettant d'obtenir une bordure en CSS est tout simplement border. A cet attribut, on pourra associer une
épaisseur de bordure (border-width), un style (border-style) et une couleur (border-color).
Si toutes les bordures doivent être identiques ces trois informations peuvent être synthétisées de la façon suivante :
border: width style color
Epaisseur des bordures
Les épaisseurs des bordures peuvent être déclarées en de nombreuses unités, mais l'usage est d'utiliser les pixels (px).
border-width:2px;

Style de bordures (CSS 2.1) Petit problème : entre la théorie de rendu et la réalité, il y a un petit
Huit styles sont possibles en CSS 2.1 (la valeur par fossé. Selon les navigateurs, tel ou tel style ne produit pas
défaut étant none) : forcément l'effet escompté...
• dotted (pointillé)
• dashed (tirets) Par exemple, en dessous d'une épaisseur 3 pixels, pas grand chance
• solid (solide) de voir le rendu de double (ce qui est logique du reste...).
• double (double)
Avec MSIE 7 et 8 seuls les quatre premiers donnent un rendu
• groove (rainurée)
• ridge (relief) correct à tous les coups.
• inset (relief intérieur) Avec MSIE6... non : laissez tomber, il n'y a que solid et double qui
• outset (relief extérieur)
donnent le rendu souhaité !

Exemple
p { Résultat attendu
border-width:1px;
border-style:dotted;
border-color:black;
}
Ou :
p {
border:1px dotted black;
}

Applications
Ensuite, tout est permis, ou presque. On peut attribuer ces bordures à n'importe quel élément html, qu'il soit de
type "bloc" (block) ou "en-ligne" (inline), et même différencier chacune d'elle si besoin.
On peut aussi mettre des marges intérieures (padding) pour aérer la présentation.
Encadrer un élément Appliquer des bordures différentes à un même bloc
<p>Exemple avec un Code CSS

<span>span</span> qui est de
type inline</p> div {
border-width:1px 2px 3px 2px;
Code CSS border-style:solid dotted;
span { border-color:black red; padding:0 10px;
border:1px solid red; }
padding:3px;
}

Applications
Une seule bordure Bordures à coins arrondis
Les bordures peuvent à présent, grâce aux CSS3, bénéficier de coins
<h2>Titre</h2> <p>Suspendisse
potenti. Nullam facilisis neque et arrondis. Il faut pour cela utiliser la propriété border-radius. Pour plus
sem. Proin placerat adipiscing
d'infos, lire le tutoriel sur les coins arrondis en CSS3.
urna. Aenean sollicitudin.</p>
Code CSS
h2 {
border-bottom:1px dashed green;
}

IMAGE DE FOND EN CSS

Petits avertissements préliminaires :
•L'image de fond d'une page html doit être légère. Comprenez par là qu'une image de 20 ko c'est déjà beaucoup : cela peut
être long à charger et provoquer des problèmes d'affichage.
•Attention aux difficultés de lecture qu'une image de fond trop contrastée peut provoquer.
•Attention aussi à prendre une couleur de fond différente de celle de la police de caractère, car en attendant que l'image de
fond se charge, on n'y verra que pouic.
•On ne met jamais en fond une image porteuse d'information. Celles-là se mettent "en dur" dans le code html avec un texte
alternatif (alt) qui va bien.

Code CSS de base
L'image de fond se déclare en général pour la balise body (corps de page), mais on peut aussi l'appliquer à un bloc
(<div></div>), ou un titre (<hx></hx>), une citation (<blockquote></blockquote>), etc.
Pour le corps de page, la syntaxe CSS de base sera celle-ci :
•color renseigne la couleur de la police de caractère

•background-color est de la couleur de fond de page ;
•background-image:url() est bien sûr l'adresse de l'image choisie pour le fond de page.
Sans plus de renseignements, l'image de fond apparaît en mosaïque et défile en même temps que le texte.
Comme d'habitude, cette syntaxe CSS est à mettre dans l'en-tête de la page (entre les balises <head></head>) ou dans une
feuille de style externe.

Positionner une image de fond
Positionnement par défaut Positionnement en haut à droite
background-position:right top;
ou :
background-position:100% 0%;
Positionnement au centre Positionnement en bas à droite
background-position:center center;
background-position:right bottom;
ou :
ou :

EFFETS ROLLOVER À L'AIDE DE
:HOVER

Transformation d'apparence du fond d'un
lien
Couleur de fond Apparition d'image de fond au survol du lien
Changement d'image de fond au survol du lien Cumuler image de fond et caractère

:hover et plus si affinités
:hover peut-être appliqué à n'importe quelle sauce... du moment que le navigateur graphique utilisé ne soit pas MSIE6.
Menu déroulant
les menus déroulants. Ici, ce n'est juste d'un aperçu. Pour montrer que c'est possible. Il y a d'ailleurs d'autres méthodes que
celle-ci. Mais c'est plus compliqué que cela en a l'air. Car, hélas, il faut en général rajouter une couche de javascript à
cause de... MSIE6 bien sûr

:hover et plus si affinités
li ul {
<ul> display:none;
<li><a href="">Item 1</a></li> }
li:hover ul {
<li><a href="">Item 2</a>
display:block;
<ul> <li><a href="">Item 2.1</a></li> position:relative;
<li><a href="">Item 2.2</a></li> top:0;
left:-25px;
</ul> </li>
}
<li><a href="">Item 3</a></li>
</ul>

Note importante
Il faut en effet respecter un ordre pour les pseudo-classes CSS.
En plus de :link et :hover, il existe aussi :active et :visited (lien actif, lien visité). L'ordre complet à respecter est :
1. :link
2. :visited
3. :hover
4. :active
Chacune de ces pseudo-classes CSS peuvent se styliser en suivant le même principe qu'expliqué ci-dessus.

CSS 3 : RÉALISER DES COINS
ARRONDIS

Note importante
Arrondir les coins est sûrement l'un des effets graphiques les plus recherchés par les webdesigners. Pour cela, on a
longtemps utilisé des images avec plus ou moins de bonheur et de facilité pour obtenir l'effet recherché
.Maintenant que la propriété border-radius est implémentée même par Internet Explorer, il n'y a plus vraiment de raisons
de ne pas l'utiliser. Et pour les vieux navigateurs qui ne la reconnaissent pas, soit on s'en moque, soit on reste aux vieilles
méthodes...

Arrondir les bords d'un cadre
Il n'y a normalement plus besoin d'utiliser des préfixes propriétaires tels -moz ou -webkit pour avoir la bonne restitution
de l'arrondissement des coins. Néanmoins, pour assurer la compatibilité avec des versions de Firefox antérieures à la 4, ou
pour le webkit de vieux smartphones, il vaut mieux encore les laisser.
La propriété border-radius peut accepter 4 valeurs pour l'arrondissement de chaque coins. La 1ère valeur correspond au
coin haut gauche, puis on tourne dans le sens des aiguilles d'une montre.
On peut n'en indiquer que 2, qui correspondront aux coins opposés (voir l'exemple ci-dessous), ou une seule pour un
même arrondis sur les 4 coins.

Exemple
<div id="coin"> .coin {
<p> Il n'y a normalement plus besoin background-color:#E4EFFF;
d'utiliser des préfixes propriétaires tels - border:1px solid #9FC6FF;
moz ou -webkit pour avoir la bonne restitution padding:5px; /*arrondir les coins en haut
de l'arrondissement des coins. Néanmoins, pour à gauche et en bas à droite*/
assurer la compatibilité avec des versions de -moz-border-radius:10px 0;
Firefox antérieures à la 4. -webkit-border-radius:10px 0;
</p> border-radius:10px 0;
</div> }

Arrondir les coins d'une image
Pour arrondir les coins d'une image, même principe :
<p> <img src="/pensees.jpg" /*sans bordure */

width="300" height="400" alt="" .arrondie {
class="arrondie" /> </p> -moz-border-radius:7px;
-webkit-border-radius:7px;
Cependant, cette technique ne fonctionne pas avec border-radius:7px;
Opera 11.5 par exemple. On peut alors ruser en }
déclarant une bordure qui donnera l'impression de
masquer les coins. Cela ne sera néamoins valable que
/*avec bordure*/
pour de petits rayons d'arrondissement car ce n'est
border:2px solid black;
qu'une pure illusion d'optique.

CSS 3 : CRÉER DES OMBRES
SUR DES BOITES ET DU TEXTE

Note importante
Ombrer des boites ou du texte sans images c'est possible ! Plus besoin d'avoir recours à des logiciels photoshoppeurs
pour faire et refaire : un peu de code CSS suffit.
La propriété box-shadow doit recevoir plusieurs valeurs (les deux premières étant obligatoires) :
1. Une valeur de décalage horizontal

2. Une valeur de décalage vertical
3. Une valeur pour l'effet flou
4. Une valeur l'étendue de l'ombre
5. La couleur de l'ombre.

Exemple
<div id="ombreout"> .ombreout {
<p> Il n'y a normalement plus besoin background-color:#C0C0C0;
d'utiliser des préfixes propriétaires tels - border:1px solid gray;
moz ou -webkit pour avoir la bonne restitution padding:5px;
de l'arrondissement des coins. Néanmoins, pour box-shadow:2px 2px 10px gray;
assurer la compatibilité avec des versions de -moz-box-shadow:2px 2px 10px gray;
Firefox antérieures à la 4. -webkit-box-shadow:2px 2px 10px gray;
</p> }
</div>

Exemple
.ombremultiple { .ombrein {
background-color:#C0C0C0; background-color:#C0C0C0;
padding:5px; border:1px solid gray;
box-shadow:2px 2px 2px gray, padding:5px;
-1px -1px 2px white; box-shadow:2px 2px 10px gray inset;
} -moz-box-shadow:2px 2px 10px gray inset;
-webkit-box-shadow:2px 2px 10px gray
inset;
}

Ombrer du texte
Contrairement à box-shadow, text-shadow n'est pas implémenté dans Internet Explorer...
Sinon, aucun besoin de préfixes propriétaires et, hormis pour l'étendue qui n'existe pas, même principe que box-
shadow pour les valeurs à lui attribuer.
<h5>Titre ombré</h5> h5 {
text-shadow:1px 1px 2px gray;
}
Quant à l'effet "gravure" que l'on rencontre de plus en plus, il utilise le même procédé mais avec une couleur plus claire
que la couleur de fond.
h5 {
text-shadow:1px 1px 1px 1px white;
}

CSS 3 : IMAGES MULTIPLES
DANS UN MÊME BACKGROUND

Note importante
La propriété background-image n'acceptait, en CSS 2.1, qu'une seule image. Pour pouvoir en mettre plusieurs à différents
endroits d'une page, il fallait déclarer plusieurs div ayant chacun sa propre image de fond. Lourd...
Les CSS3 apportent une vraie simplification et une souplesse à toute épreuve avec les background multiples.
La syntaxe est de plus extrêmement simple : elle est identique au background de CSS 2.1, chaque nouveau fond devant
être simplement séparé par une virgule.

Une image aux quatre coins d'une page
Ainsi, pour reproduire le même effet que ce rendu d'images multiples à l'aide de div, il suffira d'indiquer ceci :
#contenu {
background:url(images/houx2.gif) no-repeat left top,
url(images/houx2.gif) no-repeat right top,
url(images/houx2.gif) no-repeat left bottom,
url(images/houx2.gif) no-repeat right bottom;
}

CSS 3 : RÉALISER UN FOND EN
DÉGRADÉ SANS IMAGE

Le principe de base
Le principe de base est très simple :
 On définit le type de dégradé voulu : linéaire (linear-gradient) ou radial (radial-gradient) ;

 On indique les couleurs de départ et d'arrivée et, éventuellement, leurs proportions de mélange.
Attention : Les codes CSS indiqués ci-après ne tiennent compte que ponctuellement des préfixes propriétaires à rajouter
selon le navigateur (-moz- pour Firefox, -webkit- pour Safari et Chrome, et -o- pour Opera). Il convient
néanmoins de les indiquer systématiquemt si l'on veut assurer une retro-compatibilité.

Exemple
<div class="Degrade"> .Degrade {
<p>Dégradé [xxx]</p> background-image:linear-gradient(white,black);
</div> }
Ne rien indiquer comme proportions revient à déclarer (white 0%, black 100%), ce qui donne
le mélange maximum entre les deux couleurs. Le fondu atteint ses limites on déclarant 50% aux
deux couleurs(white 50%, black 50%) ou toute autre quantité où le % de la couleur initiale
est supérieur à celui de la couleur finale.
Toujours par défaut, le dégradé se fait vers le bas, ce qui équivaut à déclarer (to bottom,
white, black).

Exemple
Pour un dégradé linéaire allant vers la droite, le code CSS sera le suivant :
<div class="Degrade"> .Degrade {

<p>Dégradé [xxx]</p> background-image:linear-gradient(to right, white, black);
</div>
}
les navigateurs utilisant les préfixes propriétaires ont implémenté la propriété gradient sur la base d'une ancienne spec.
utilisant les mots clés top, right, bottom, left. Ceux-ci indiquent le côté d'orgine du dégradé et non to
bottom, to left (etc.) indiquant le sens du dégradé. Le code précédent préfixé, pour Firefox par exemple, donnera :
background-image:-moz-linear-gradient(left, white, black);

Tech Web - HTM-CSS - Cours

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tech Web - HTM-CSS - Cours

Transféré par

Droits d'auteur :

Formats disponibles

BALISES HTML DE BASE.

ENSEIGNANT: ARTHUR ONDAPHE 1

Pour comprendre le fonctionnement du langage CSS, il est important d'avoir

ENSEIGNANT: ARTHUR ONDAPHE 2

ENSEIGNANT: ARTHUR ONDAPHE 3

Quelques nouveautés HTML5 Quelques balises et attributs dépréciés à ne pas utiliser

ENSEIGNANT: ARTHUR ONDAPHE 4

ENSEIGNANT: ARTHUR ONDAPHE 5

ENSEIGNANT: ARTHUR ONDAPHE 6

propriété: valeur; Propriétés utilisées :

ENSEIGNANT: ARTHUR ONDAPHE 7

ENSEIGNANT: ARTHUR ONDAPHE 8

1. Feuille de style externe 2. Feuille de style interne

balises <head></head>) : <style type="text/css" media="screen"> .... </style>

media="all" type="text/css"> <head></head>.

3. Styles CSS dans le code html ("inline")

ENSEIGNANT: ARTHUR ONDAPHE 9

ENSEIGNANT: ARTHUR ONDAPHE 10

Fonctionne avec : Tous les navigateurs graphiques

ENSEIGNANT: ARTHUR ONDAPHE 11

Les fontes de caractères de la famille serif assez courantes sont :

ENSEIGNANT: ARTHUR ONDAPHE 12

ENSEIGNANT: ARTHUR ONDAPHE 13

ENSEIGNANT: ARTHUR ONDAPHE 14

ENSEIGNANT: ARTHUR ONDAPHE 15

Les autres attributs possibles pour modifier les caractères sont :

TP: voir fiche1

ENSEIGNANT: ARTHUR ONDAPHE 16

ENSEIGNANT: ARTHUR ONDAPHE 17

ENSEIGNANT: ARTHUR ONDAPHE 18

ENSEIGNANT: ARTHUR ONDAPHE 19

ENSEIGNANT: ARTHUR ONDAPHE 20

ENSEIGNANT: ARTHUR ONDAPHE 21

ENSEIGNANT: ARTHUR ONDAPHE 22

Code (X)HTML Code CSS

ENSEIGNANT: ARTHUR ONDAPHE 23

ENSEIGNANT: ARTHUR ONDAPHE 24

<p> Comme il a été indiqué lors du sommaire exécutif,

<p class="haut"> <a href="#haut">Haut de page</a> </p>

ENSEIGNANT: ARTHUR ONDAPHE 25

ENSEIGNANT: ARTHUR ONDAPHE 26

ENSEIGNANT: ARTHUR ONDAPHE 27

◦ Un menu : div id="menu"

◦ Le contenu : div id="contenu"

◦ Un pied de page : div id="footer"

ENSEIGNANT: ARTHUR ONDAPHE 28

ENSEIGNANT: ARTHUR ONDAPHE 29

ENSEIGNANT: ARTHUR ONDAPHE 30

ENSEIGNANT: ARTHUR ONDAPHE 31

TP: voir fiche 2

ENSEIGNANT: ARTHUR ONDAPHE 32

ENSEIGNANT: ARTHUR ONDAPHE 33

Border un paragraphe, une image ou un bloc d'une ou plusieurs bordures

ENSEIGNANT: ARTHUR ONDAPHE 34

Epaisseur des bordures

ENSEIGNANT: ARTHUR ONDAPHE 35

ENSEIGNANT: ARTHUR ONDAPHE 36

ENSEIGNANT: ARTHUR ONDAPHE 37

Encadrer un élément Appliquer des bordures différentes à un même bloc

<p>Exemple avec un Code CSS

ENSEIGNANT: ARTHUR ONDAPHE 38

ENSEIGNANT: ARTHUR ONDAPHE 39

ENSEIGNANT: ARTHUR ONDAPHE 40

<p> <img src="/pensees.jpg" /sans bordure /