Css

CSS Cascading
Style Sheets
Les Feuilles de style
2006-2007
Introduction
CSS PERMET :
 Séparation du contenu et de la mise en forme.
 Modifier l'aspect d'une page ou d'un site sans en modifier le
contenu et cela en quelques lignes plutôt que de devoir
changer un grand nombre de balises.
 Un "langage" neuf, compréhensible, simple et logique par
rapport au Html et à ses différentes versions.
 Une façon d'écriture concise et nette par rapport au Html.
 Palier certaines insuffisances du langage Html (contrôle des
polices, contrôle de la distance entre les lignes, contrôle
des marges et des indentations.
 Permettre le positionnement au pixel près du texte et/ou
des images.
Déclaration des feuilles
de style
Il existe trois façons de déclarer une feuille
de style :
 Dans une balise (adding in line)
 Méthode interne = (embedding)
 Méthode externe = (Linking)
Style dans une balise
 Exemple 1 :
<p style="color: green ; font-family: times, sans-
serif ;">Vous constatez que ce texte est en
vert</p>
 Exemple 2 :
<span style= "color: green ; font-family: Times,

sans-serif ; font-size: 14pt ; " >Vous constatez
</span> que ce texte n'est pas totalement <span
style= "color: green ; font-family: Times, sans-
serif ; font-size: 14pt ; ">en vert</span>
Style interne
 Il s'agit de placer les règles du
langage CSS entre <HEAD> et </HEAD>.
 Exemple :
<HEAD>
<STYLE type="text/css">
h6 { font-family: arial, verdana, sans-serif ;
font-size: 18pt; color: black; background-
color: #FFFFFF; }
</STYLE>
</HEAD>
Style externe
<link rel="stylesheet" type="text/css" href=
"essai04.css">
 LINK avertit le navigateur de la nature de ce lien.
 rel="stylesheet" lui indique qu'il trouve une
feuille de style externe.
 L'attribut type="text/css" précise qu'il s'agir
de texte et du genre CSS (Cascading Style
Sheets).
 L'attribut de lien href=" ..... " donne le
chemin d'accès et le nom du fichier qui contient
les règlesà appliquer.
MISE EN FORME
DE LA POLICE
font-family
Deux familles distinctes
 - famille classique : arial, verdana, times, ....
 - famille générique : serif, sans-serif, cursive,
fantasy, monospace.
h4{
font-family: times, verdana, sans-serif ;
color: green ;
font-style: italic ;
background-color: #FFFFFF ;
font-size: 16pt ;}
font-size
 en points = {font-size: 12pt;}
 en pixels = {font-size: 16px;}
 en millimètres = {font-size: 4mm;}
 en centimètres = {font-size: 0.6cm;}
 en pourcentage = {font-size: 120%;}
 en pc = {font-size: 1.5pc;}
 en inches = {font-size: 0.3in;}
 en em = {font-size: 1.5em;}
 en ex = {font-size: 4ex;}
font-style
 peut prendre les valeurs suivantes : normal,
italic ou oblique
 Exemple :
body{
font-family: arial, helvetica, sans-serif ;
font-size: 10pt ;
color: black ;
background-color: #FFFFFF ;}
.petit{ font-family: times, serif ;
font-size: 8pt ;
color: green ;
font-style: italic ;
background-color : #FFFFFF ;}
font-variant
 sert à afficher un texte en petites capitales
Les valeurs sont :
 Normal : Spécifie une police qui ne
possède pas de petites capitales dans sa
famille.
 small-caps : Spécifie une police pouvant
définir des caractères en petites capitales.
 Exemple :
.ptitesmajus {font-variant: small-caps;}

font-weight
Valeurs :
 "100" à "900"
 Normal : Equivaut à la valeur "400"
 Bold : Equivaut à la valeur "700"
 Bolder : Spécifie la graisse supérieure à
celle assignée à une police
 Lighter : Spécifie la graisse inférieure à
celle assignée à une police
font-stretch
Valeurs d’étirement :
 normal = étirement normal.
 wider = plus large que la normal.
 narrower = plus serré que normal
 condensed = condensé
 semi-condensed = à moitié condensé
 extra-condensed = très condensé
 ultra-condensed = extrêmement condensé
 expanded = étendu
 semi-expanded = à moitié étendu
 extra-expanded = très étendu
 ultra-expanded = extrêmement étendu.
MISE EN FORME
DE TEXTE
Propriété color
Types de valeurs :
 nom de la couleur : white, black, blue...
 code RGB (Red, Green, Blue = rouge,
vert, bleu) de 0 à 255
 valeur hexadécimale : #FFFFFF,
#FFf33CC
Couleurs
letter-spacing et word-
spacing
Valeurs applicables :
 Normal : espacement normal
 Longueur : indique la quantité d'espacement qui
s'ajoute à la valeur par défaut. Valeur numérique
ou en pourcentage. peut être négative.
Exemple :
.espacement0 { letter-spacing : -1px ; }
.espacement1 { letter-spacing : 1px ; }
.espacement2 { word-spacing : 3px ; }
text-transform
Les valeurs applicables sont :
 None : sans effet sur le texte
 Lowercase : toutes les lettres de chaque mot sont en
minuscules
 Uppercase : toutes les lettres de chaque mot sont en
majuscules
 Capitalize : la première lettre de chaque mot est en
majuscule
Exemple :
.mini { text-transform: lowercase ; }
.maxi { text-transform: capitalize ; }
.prem { text-transform: uppercase ; }
Text-decoration
 Cette propriété permet souligner, surligner, barrer
ou faire clignoter un texte.
 Exemple :
.dessus {text-decoration: overline ; }

.barre {text-decoration: line-through ; }
.dessous {text-decoration: underline ; }
.clignote {text-decoration: blink ; }
.tout { text-decoration:underline overline ; }
.none {text-decoration: none ; }
Mise en forme de
l’arrière plan
background-color
 Exemple :
.maroom { background-color: # FFCC99 ;
color: green ; font-weight: bold ; }
<p class="maroom"> Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, .....
dolore magna aliguam erat volutpat..
</p>
background-image
Exemple :
body{
background-image: url("aimages/v178.jpg")
background-color: #FFFFFF ;}
.boite{
background-image: url("aimages/v371.jpg") ;
border: solid 2px #990000 ;
margin-left: 250px ;
width: 200px ;
height: 150px ;
background-color:#FFFFFF ;}
Les Classes Et
Identificateurs
Les classes
Exemple :
.green { color: green ; }
.olive { font-family: arial, sans-serif ; color: olive ;
font-size: 12pt ; font-style: italic ; background-
color: #FFFFFF ; }
 <b>Ici le texte est celui du sélecteur "b" qui

donne la graisse épaisse. Vous constatez aussi
que le texte est en gras et en bleu. </b>
 <h3 class="green"> Cette ligne en vert avec
"H3". Je tiens à vous préciser que j'ai voulu voir
ce qu'était le CSS et je suis tombé dans le
"chaudron".</h3>
Les identificateurs
 id affecte un identificateur unique à une
balise
 Exemple :
#entete {
position:absolute;
top:0px;
width:100%;
right:0px;
margin-right:0px;
height:40px;
background-color:#158035}
<div id="entete"> ... </div>
Héritage
 L’élément enfant hérite des
propriétés de l'élément
 les enfants héritent des règles
définies pour les parents, mais ils
expriment et réalisent toujours en
priorité leurs propres règles qui
prévalent
Liens hypertexte ou
Pseudo-classes
 a:link, style des liens qui non visités
 a:visited, style des liens visités.
 a:hover, change l'apparence du lien quand
l'utilisateur désigne un élément avec le pointeur
de sa souris, sans l'activer.
 a:active, change l'apparence du lien quand
l'utilisateur active un élément. Par exemple, entre
le moment où l'utilisateur presse le bouton de la
souris et le relâche.
 a:focus, qui s'applique quand un élément reçoit
le focus avec le clavier par exemple.
Liens hypertexte ou
Pseudo-classes - Exemples
 a:link {font-weight: bold ; color: black; }
 a:visited {color :black; }
 a:hover {color: red; text-decoration:

none; }
Mise en forme de
zones
La balise SPAN
 La balise SPAN est utilisée en CSS pour
modifier l'aspect d'une zone limitée de
données
 Exemple :
.vert { background-color:#00FFCC ; }
<p>Internet par satellite <SPAN

class="red";>est en pleine
croissance</SPAN> </P>
La balise DIV
 Avec la balise DIV vous pouvez modifier
l'aspect d'un ou plusieurs paragraphes
 Exemple :
.marge { margin-left: 75px ; font-style:

italic ; }
<div class="marge">exemple d’utilisation
de la balise div</div>
Mise en forme des
paragraphes
Les boîtes
Les boîtes
 Le Contenu représente la partie du texte de
paragraphe.
 Padding espace entre texte et la bordure
(dimension réglable côté par côté)
 Border est la partie qui entoure la zone padding
(largeur, couleur et style adaptables côté par
côté)
 Margin est une nouvelle zone qui entoure la
boîte (la zone margin est toujours transparente,
dimension réglable côté par côté)
Les boîtes
Les boîtes
 Exemple
Voici l’exemple d’un élément <div> auquel nous
avons fixé une bordure de 20px, un espacement
de 30px et une largeur de 300px.
div { border:20px solid ; padding:30px ;
background : #ffc ; width:300px ; }
La largeur totale incluant les bordures et l’espace
autour de l’élément devrait être de 400px.
20+30+300+30+20 = 400
Positionnement
Positionnement des
boites
 Si vous souhaitez partir sur des bases
nettes et précises, il peut être intéressant
d'utiliser le point "zéro" comme référence:
 1ère solution (HTML):
<body marginwidth="0"
marginheight="0" leftmargin="0"
topmargin="0">.
 2ème solution (CSS):
body {margin: 0}
Positionnement des
boites
Types de positionnement
Il existe 3 modes de positionnement
CSS :
 relative,
 absolute,
 fixed
Positionnement relatif
 La position relative d'un élément est calculée et déterminée
par rapport à la position de l'élément précédent dans le
code HTML.
 top = sert à définir la distance entre le bord supérieur
d'une zone et celui de la zone environnante.
 bottom = sert à définir la distance entre le bord inférieur
 right = sert à définir la distance entre le bord de droite
 left = sert à définir la distance entre le bord de gauche
Positionnement relatif
-Exemple
.contenu {
top :0 ;
width :100% ;
height :300px;
background-color:#0066CC}
.haut {
position: relative ;
top: 200px ;
background-color:#FF9966 }
<div class= "contenu">

voici un exemple avec position relative
<div class="haut">texte</div>
</div>
Positionnement absolu
 Ce type de positionnement est le plus utilisé
 La boîte est indépendante du reste du contenu de
la page
 Ce positionnement est déterminé par rapport au
coin supérieur gauche de la fenêtre du navigateur
 TOP: distance verticale entre le côté supérieur du
navigateur et la partie supérieure de la boîte
sélectionnée.
 LEFT: distance horizontale entre le côté gauche
du navigateur et la partie gauche de la boîte
sélectionnée.
Positionnement absolu -
Exemple
Body {margin : 0}
.boiteexemple
{
position : absolute ;
top : 20cm ;
left: 2cm ;
font-family : arial, verdana, sans-serif ;
color :#FFFFFF ;
}
la propriété overflow
 sert à définir la mise en forme d'un élément qui
sort de sa boîte :
 visible : (par défaut) le contenu peut sortir
éventuellement de la boîte
 hidden : le contenu sera rogné mais sans
utilisation des barres de défilement.
 scroll : le contenu sera rogné, avec cependant
mise à disposition de barres de défilement
 auto : l'interprétation de cette valeur dépend du
navigateur qui décide la suite à donner à la partie
excédentaire du contenu, tout en disposant si
besoin les barres de défilement nécessaires.
la propriété overflow
.hidden { position: relative ; width: 25% ; height: 15% ;
overflow: hidden ; background-color : #CCFFFF ; padding:
3px ; font-size: 10pt ; border: solid 2px blue ; }
.auto { position: relative ; width: 25% ; height: 15% ;

overflow: auto ; background-color : #CCFFFF ; padding:
3px ; font-size: 10pt ; border: solid 2px blue ; }
.scroll { position: relative ; width: 25% ; height: 15% ;

overflow: scroll ; background-color : #CCFFFF ; padding :3px
; font-size: 10pt ;border: solid 2px blue ; }
.visible { position: relative ; width: 25% ; height: 15% ;

overflow: visible ; background-color : #CCFFFF ; padding:
3px ;font-size: 10pt ; border: solid 2px blue ; }
Propriété FLOAT
 définit le flottement d'une boîte à gauche, à
droite ou pas du tout
Valeurs admises
 left : l'élément génère une boîte de bloc qui
flotte à gauche et le contenu s'écoule sur son
flanc droit en commençant en haut (en fonction
de la valeur de la propriété "clear").
 right : identique à "left" mais en inversant la
gauche de la droite.
 none : la boîte ne flotte pas. (valeur par défaut)

Css

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Css

Hochgeladen von

Copyright:

Verfügbare Formate

CSS Cascading

<span style= "color: green ; font-family: Times,

.ptitesmajus {font-variant: small-caps;}

.dessus {text-decoration: overline ; }

 <b>Ici le texte est celui du sélecteur "b" qui

 a:visited {color :black; }

 a:hover {color: red; text-decoration:

<p>Internet par satellite <SPAN

.marge { margin-left: 75px ; font-style:

<div class= "contenu">

.auto { position: relative ; width: 25% ; height: 15% ;

.scroll { position: relative ; width: 25% ; height: 15% ;

.visible { position: relative ; width: 25% ; height: 15% ;

Das könnte Ihnen auch gefallen