Résumé Css

Enseignante TP : Madame Amira Jbara.
Développement IHM 1 Année LBC
Résumé CSS
C’est quoi le CSS ? Syntaxe :
Les feuilles de styles en cascades ou Cascading Styles

Sheets ou CSS est un langage de description qui permet de
décrire la représentation visuelle des pages web. (1996).
Où écrire le code CSS ?

On peut écrire du code en langage CSS à trois endroits différents :
Dans un code CSS comme celui-ci, on trouve trois éléments différents :
- Inline : directement dans les balises du fichier HTML, à travers un
attribut style. • Sélecteur par exemple Des noms de balises : on écrit les noms des
<body style="background-color:yellow;">
<h1 style="color:red;">Titre</h1> balises dont on veut modifier l'apparence.
• Des propriétés CSS : les « effets de style » de la page sont rangés
- Interne : dans l'en-tête <head> du fichier HTML ;
<head> dans des propriétés. Il y a par exemple la propriété « color » qui
<style type= "text/css"> permet d'indiquer la couleur du texte.
h1 {color:red; font-size: 10px;}
</style> • Les valeurs : pour chaque propriété CSS, on doit indiquer une
</head>
valeur. Par exemple, pour la propriété color, il faut indiquer le nom
- Externe : Dans un fichier « style.css ». Le lien entre la feuille de style
et le fichier html se fera dans l’en-tête <head> de la page web en de la couleur.
utilisant la balise « link » de la manière suivante : Remarques :
<head>  Lorsqu’on a, par exemple, le cas suivant :
<link rel="stylesheet" href="style.css" />
</head>
h1 {color : blue; }
Et le contenu du fichier « style.css » par exemple la règle de style suivante em { color : blue; }  On peut l’écrire de cette manière :
sera appliquée à chaque paragraphe du fichier HTML : couleur en bleu. h1, em {color: blue;}
p { color : blue ; }
Page 1 sur 9
Enseignante TP : Madame Amira Jbara. Développement IHM 1 Année LBC
 Comme en HTML, il est possible de mettre des commentaires. Les Pour appeler ce style dans la page HTML, on indique
commentaires ne seront pas affichés, ils servent simplement à indiquer simplement class="Rouge" à l'intérieur de la balise voulue :
des informations : /* Votre commentaire */
<b class= "Rouge">Texte à mettre en rouge
Par Exemple :
et gras.</b>
p { color : blue ; /* les paragraphes de couleur bleu */ }
L'attribut id :
Sélecteurs : L'attribut id fonctionne exactement de la même manière que class mais il ne
Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. peut être utilisé qu'une fois dans le code. C'est pour cela qu'il est plutôt utilisé
Pour cela les spécifications CSS ont introduit le concept de classe. Pour que à la mise en page qu'à la mise en forme de caractères. Dans le fichier CSS, il
certains paragraphes seulement soient écrits d'une manière différente on faudra faire précéder le nom de l'id par un dièse (#) :
utilise des attributs spéciaux qui fonctionnent sur toutes les balises :
- L'attribut class. Exemple :
- L’attribut id. #introduction {color : blue ;}
L'attribut class :
La définition des classes est aussi simple que celles des styles. Elle consiste  Pour appeler ce style dans la page HTML, on indiquera
à écrire un point (.) et le nom que l'on souhaite donner à la classe. id="introduction" à l'intérieur de la balise voulue :
Le nom de la classe peut être composé de lettres (accentuées ou non), de <div id="introduction"> Ce bloc de texte sera de couleur bleu.</div>
chiffres et de tirets.
Les Balises Universelles :
Il existe deux balises dites universelles :
.Nom-de-la-classe { Les éléments HTML div et span ont été créés principalement pour
propriété-de-style: Valeur;
propriété-de-style: Valeur; simplifier la mise en page des pages HTML en CSS c’est-à-dire pour
...; } simplifier l’application de certains styles CSS.
• <span> </span> : c'est une balise de type inline, c'est-à-dire une
Où « Nom-de-la-classe » représente le nom donné à la classe. balise que l'on place au sein d'un paragraphe de texte, pour
sélectionner certains mots uniquement. Les balises <strong> et
Par exemple : <em> sont de la même famille.
.Rouge {font-family: Verdana ; color: red; } • <div> </div> : c'est une balise de type block, qui entoure un bloc de
texte. Les balises <p>, <h1>, etc. sont de la même famille. Ces
balises ont quelque chose en commun : elles créent un nouveau
Page 2 sur 9
«bloc» dans la page et provoquent donc obligatoirement un retour à Exemple : <a href="http://site.com" title="Cliquez ici">
la ligne.  A[attribut*="Valeur"] : une balise, un attribut et une valeur
Exemple : a[title*="ici"]{}
<p>Bonjour et <span class="salutations">bienvenue</span> !</p> L’attribut doit cette fois contenir dans sa valeur le mot « ici » (peu
.salutations importe sa position).
{ color: blue; Exemple : <a href="http://site.com" title="Quelque part par ici">
}
Les sélecteurs avancés :
Les propriétés CSS de base:
 Pour sélectionner les éléments de la page à modifier, on utilise ce
qu'on appelle des sélecteurs. 1. La mise en forme :
* : sélecteur universel Propriété Description Exemple et les valeurs possible :
*{}
 Sélectionne toutes les balises sans exception. On l'appelle le Color Couleur de texte color :red ; | color :#006699
sélecteur universel. font-family Police de caractère font-family : arial ;
 A B : une balise contenue dans une autre
font-size Taille de caractère font-size :12px ;
h3 em {}
 Sélectionne toutes les balises <em> situées à l'intérieur d'une balise font-weight Caractère en gras font-weight :bold ; | font-weight :
<h3>. Notez qu'il n'y a pas de virgule entre les deux noms de balises. normal ;
 A + B : une balise qui en suit une autre Font-variant Normal, small caps (petites
h3 + p {} majuscules)
Sélectionne la première balise <p> située après un titre <h3>.
text-align Alignement de Text-align :center ; | left ou right ou
 A[attribut] : une balise qui possède un attribut paragraphe justify
a[title]{}
font-style Style de la police Font-style :italic ;
Sélectionne tous les liens <a> qui possèdent un attribut title.
(normale ou italique
Exemple : <a href="http://site.com" title="Infobulle">
 A[attribut="Valeur"] : une balise, un attribut et une valeur Line-height L’espacement entre Line-height :normal; |nombre
exacte deux lignes. positif ou%
a[title="Cliquez ici"]{} Text-indent L’espacement text-indent : 5cm|longueur ou % ;
 Mais l'attribut doit en plus avoir exactement pour valeur « Cliquez appliquer à la
ici».
Page 3 sur 9
première ligne du Background- Spécifier une Background-
texte image image de fond pour image :url(.. /../cats.png)
l’élément
Text- Transformation Text- Il faut indiquer l’url de l’image
transform appliquer à la police transform :uppercase ;|capitalize
Background- Spécifier la Background-position : left center;|
ou none ou lowercase
position position initiale
Horizontaux : left, right, center
Vertical-align Alignement verticale Vertical-align :baseline ;|middle ou d’une image de
appliquer au texte. super ou sub ou text-top ou text- fond. Verticaux : top,center,bottom ou
bottom ou top ou bottom ou % bien%
Word-spacing L’espacement entre Word-spacing :0,4cm ;|-0,2cm Background- Spécifier la background-repeat :repeat; |
les mots de texte repeat maniére dont une repeat-x :horizontalement
(mots en chevauchement)
image de fond va
repeat-y :verticalement
Letter-spacing L’espacement entre Letter-spacing :0,1cm|-0,1cm ou 0 être répétée.
les lettres du mot. empêche la justification. no-repeat :sans repétition
White-space Pris en compte les Normal :les espaces sont ignorés Background- Spécifier la background-attachment :fixed; |
caractéres attachment maniére dont scroll
d’espacement(les Pre : les espaces sont pris en compte
et affichés. l’image est attaché
espaces réels, les fixed :l’image ne bouge pas quand
au défilement de la
tabulations et les Nowrap :les sauts de lignes sont pris on agit sur la barre de défilement
fenêtre.
sauts de lignes en compte et les espaces sont bouge
condensés scroll :le défilement de l’image suit
Text- Spécifier quel type de Text-decoration : celui du text (valeur par défaut)
decoration soulignement doit être none|underline,overline,line-
appliqué au texte trough,blink
2. Couleurs et fonds : 3. Apparences dynamiques

Propriété Rôle Exemple et les valeurs possibles En CSS, on peut modifier l'apparence de certaines sections dynamiquement,
après le chargement de la page, lorsque certains évènements se produisent.
Background- La couleur de fond Background-color :red ; |
On utilise pour cela les pseudo-classes.
Color de l’élement color :#006699
Page 4 sur 9
 :hover permet de changer l'apparence au survol (par exemple :
a:hover pour modifier l'apparence des liens lorsque la souris pointe
dessus).
 :active applique un style particulier au moment du clic. En pratique,
il n'est utilisé que sur les liens.
 :focus applique un style lorsque l'élément est sélectionné.
 :visited applique un style à un lien vers une page qui a déjà été vue.
Exemple :
p:hover /* Apparence au survol des paragraphes */
{ text-decoration: underline;
color: green; }
4. Le modèle des boîtes
Dans une mise en page réalisée en CSS, tous les éléments sont considérés
comme des boîtes.  width : c'est la largeur du bloc exprimé en pixels (px) ou en
Chacune de ces boîtes est constituée d’un contenu, d’un espacement pourcentage (%).
intérieur, d’une bordure, et d’une marge externe.  height : c'est la hauteur du bloc exprimé en pixels (px) ou en
Voici les propriétés CSS qui permettent de déterminer les dimensions, la pourcentage (%).
couleur, le style de chacun de ses constituants :  padding : indique la taille de la marge intérieure en pixels (px) ou
%.
Propriété CSS Ce qui est concerné :  margin : indique la taille de la marge extérieure en pixels (px) ou%
width et height largeur et hauteur du contenu
ou auto .
(texte, image, etc.)
padding espacement intérieur, entre le 1) Un bloc peut avoir des dimensions minimales et maximales :
contenu et la bordure  min-width : largeur minimale ;
border bordure (ou encadrement)  min-height : hauteur minimale ;
margin marge externe, espace (transparent)  max-width : largeur maximale ;
entourant le tout  max-height : hauteur maximale.
2) Les marges extérieures peuvent avoir des valeurs différentes :
 margin-top : marge extérieure en haut ;
 margin-right : marge extérieure à droite.
Page 5 sur 9
 margin-bottom : marge extérieure en bas ;  etc...
 margin-left : marge extérieure à gauche ;
Lorsqu’une valeur est manquante, on lui attribue celle du côté qui lui
fait face ;
3) Pour les marges intérieures !
Exemple :
p{
width: 350px;
border: 1px solid black;
text-align: justify;
padding: 12px;
margin: 50px; /* Marge extérieure de 50px */
}
Remarque : utiliser la propriété margin : auto pour centrer des blocs. Pour
Pour obtenir des bordures arrondies, utiliser la propriété border-radius en
cela, il faut obligatoirement donner une largeur au bloc (avec la propriété
indiquant la taille de l’arrondi en pixels.
width).
Exemple : border-radius : 10px ;
Exemple :
p{ width: 350px; /* On a indiqué une largeur (obligatoire) */ 6. Dépassement de texte :
margin: auto; /* On peut donc demander à ce que le bloc soit centré Si vous voulez que le texte ne dépasse pas des limites du bloc, il va falloir
avec auto */} utiliser la propriété overflow. Voici les valeurs qu'elle peut accepter :
5. Les Bordures :  visible (par défaut) : si le texte dépasse les limites de taille, il reste
Pour modifier l'apparence des bordures il faut utiliser la propriété border visible et sort volontairement du bloc.
qui combine plusieurs valeurs.  hidden : si le texte dépasse les limites, il sera tout simplement
1. La largeur en pixels coupé. On ne pourra pas voir tout le texte.
2. La couleur (couleur du texte)  scroll : le texte sera coupé s'il dépasse les limites. Sauf que cette
3. Le type de bordure avec différentes valeurs disponibles : fois, le navigateur mettra en place des barres de défilement pour
 none : pas de bordure (par défaut) ; qu'on puisse lire l'ensemble du texte.
 solid : un trait simple ;  Auto : le navigateur décide de mettre ou non des barres de
défilement.
 dotted : pointillés ;
 dashed : tirets ;
Page 6 sur 9
Remarque : la propriété word-wrap: break-word permet de forcer la 8. Listes :
césure des très longs mots (généralement des adresses un peu longues). Propriété Description Exemple et valeurs possibles
7. Habillage :
List-style-type Spécifer le type des Disc, cercle, square, decimal,
Le CSS permet de faire flotter un
puces ou de lower-roman , upper-Roman,
élément autour d'un texte grâce à la
numérotations lower-alpha, upper-alpha, nome
propriété CSS float.
• left : l'élément flottera à gauche. list-style-image Choisir une image List-style-image :
• right : l'élément flottera à droite. comme symbole url(fleche ;gif);
d’énumération.
Exemple : List-style- Contrôle la position de Inside :la puce est aligné avec le
<p><img src="flash.gif" class="imageflottante" alt="Image flottante" /> position la puce ou du numéro texte.
.imageflottante
Outside : la puce est en marge
{ float: left;
du texte.
}
Pour ne plus faire flotter l'élément, il faut List-style C’est la propriété List-style : none inside
utiliser la propriété Clear, qui peut prendre composite url(fleche.gif)
ces trois valeurs :
• left : le texte se poursuit en-dessous après 9. Le positionnement :
un float: left;
• right : le texte se poursuit en-dessous
a. Les positionnements absolus, fixe et relatif
après un float: right; La propriété CSS position permet de positionner avec précision des
• both : le texte se poursuit en-dessous, que éléments sur la page. Pour cela, on lui donne une de ces valeurs :
ce soit • static : la valeur par défaut. L’élément est posé dans la page à la
suite des autres sans prise en compte des marges.
Exemple :
• absolute : positionnement absolu ; il permet de placer un élément
<p><img src="flash.gif" class="imageflottante" alt="Image flottante"></p>
n'importe où sur la page (en haut à gauche, en bas à droite, tout au
<p>Texte écrit à côté de l'image.</p>
centre, etc.).
<p class="dessous">Texte écrit sous l'image.</p>
• fixed : positionnement fixe ; identique au positionnement absolu
.imageflottante
mais, cette fois, l'élément reste toujours visible, même si on descend
{float: left;
plus bas dans la page.
}
.dessous { clear: both;}
Page 7 sur 9
• relative : positionnement relatif ; ce positionnement permet L'élément ayant la valeur de z-
d'effectuer des « ajustements » : l'élément est décalé par rapport à sa index la plus élevée sera placé
position initiale. par-dessus les autres, comme le
Si un bloc est positionné en absolu, il faut indiquer au navigateur où le montre la figure ci-contre.
positionner sur la page à l'aide des quatre propriétés CSS :
• left : position par rapport à la

gauche de la page ;
• right : position par rapport à la b. Le positionnement inline-block :
droite de la page ; En CSS la propriété display permet de transformer n'importe quel élément
• top : position par rapport au de la page d'un type vers un autre et les faire apparaître sous forme de blocs.
haut de la page ; À ce moment-là, les éléments vont se positionner les uns en-dessous des
• Bottom : position par rapport autres et il devient possible de modifier leurs dimensions !
au bas de la page. Voici quelques-unes des principales valeurs que peut prendre la propriété
display :
Valeur Exemples Descriptions
Exemple :
element Inline <a>, <em>, <span>… Eléments d'une ligne. Se placent les
uns à côté des autres.
{ block <p>, <div>, Eléments en forme de blocs. Se
position: absolute; <section>… placent les uns en dessous des
right: 0px; autres et peuvent être
bottom: 0px; redimensionnés.
} Inline-block <select>, <input> Eléments positionnés les uns à côté
Remarque : les éléments positionnés en absolu sont placés par-dessus le des autres (comme les inlines) mais
reste des éléments de la page ! Par ailleurs, si vous placez deux éléments en qui peuvent être redimensionnés
absolu vers le même endroit, ils risquent de se chevaucher. Dans ce cas, (comme les blocs).
utilisez la propriété z-index pour indiquer quel élément doit apparaître au- List-item <ul>,<ol> La présentation sera celle d’une liste
dessus des autres.
None <head> Eléments non affichés.
Page 8 sur 9
Les éléments en inline-block nous permet d'utiliser la propriété vertical-
align. Cette propriété permet de modifier l'alignement vertical des éléments.
Voici quelques-unes des valeurs possibles pour cette propriété :
• Baseline : aligne de la base de l'élément avec celle de l'élément parent (par
défaut) ;
• top : aligne en haut ;
• middle : centre verticalement ;
• bottom : aligne en bas ;
• (valeur en px ou %) : aligne à une certaine distance de la ligne de base
(baseline).
Remarque :
Les éléments inline-block se positionnent sur une même ligne de base
(appelée baseline), en bas.
Page 9 sur 9

Résumé Css

Transféré par

Informations du document

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

Résumé Css

Transféré par

Droits d'auteur :

Formats disponibles

Enseignante TP : Madame Amira Jbara.

Développement IHM 1 Année LBC

Les feuilles de styles en cascades ou Cascading Styles

Où écrire le code CSS ?

2. Couleurs et fonds : 3. Apparences dynamiques

• left : position par rapport à la

Vous aimerez peut-être aussi