Css

CSS
Exercices immédiats 1
Quel est l'intérêt majeur de l'utilisation d'un langage de style ?

L’intérêt majeur du langage de style est de permettre la séparation du contenu de son rendu.
Ainsi, l’utilisateur peut accorder à un même contenu des présentations différentes en ayant
recours à une plus grande variété de périphériques. La tâche de codage devient par conséquent
plus facile. Les changements d'ensemble sont aussi plus faciles à effectuer: un seul fichier CSS à
modifier plutôt que toutes les pages une à une. Il y a moins de code sur la page, les fichiers sont
par conséquent plus petits et le chargement plus rapide.
L’utilisation des fichiers de styles .css permet aussi de donner une charte graphique à l'ensemble
d'un site web, assurant ainsi une cohérence graphique aux pages web et une symbolique pour
l’entreprise ou l’institut.
Pourquoi utiliser une règle de style pour spécifier des types de caractères plutôt qu'une
balise <font> ?
Pour écrire moins de code sur la page : on associe ainsi à un des parties différentes du document
le même font par une seule règle. Les erreurs de codage (de clavier) sont ainsi évité et les fichiers
sont plus petits.
Ecrire la règle qui met en rouge les mots en italiques des titres de niveau 2.
h2 {color: red;}
Ecrire la règle qui met en gras et en rouge un seul mot d'un texte donné.
span { color: red ; font-style: italic ;}
Quelle différence voyez-vous entre les balises <div> et <span> ?

Les deux balises <div> et <span> sert à spécifier des divisions logiques au sein d’un document et
les dotent de noms et de styles propres. Néanmoins, elles sont utilisées différemment :
• La balise <div> agit au niveau de blocs délimités par des retours à la ligne (comme <p>,
<h1> …). Elle divise donc la page en de larges sections et permet de définir leur style.
<div> permet également de nommer des sections de la page afin de leur attribuer une
feuille de style ou html dynamique. Les attributs de la balise sont : style, class, id.
• La balise <span> agit dans le flux du texte (comme <b>, <i>, <img>) mais sans
délimitation par des retours à la ligne. Si aucun attribut n’est affecté à la balise <span>,
celle-ci ne changera rien. Cette balise n’a pas d’exigence au niveau des attributs, mais les
plus utilisés sont : style, class, id.
Quelle différence voyez-vous entre la déclaration d'un sélecteur lié à l'attribut id et à
l'attribut class ?
Les deux sélecteurs permettent de cibler l'application d'un ensemble de règles de style à un ou
plusieurs éléments. Les id sont définis avec le signe dièse (#nom) et les class avec un point
(.nom). Tout ce qu'on peut faire avec id, on peut le faire avec class, mais…
• un id s'applique à un objet unique. un document HMTL valide ne devrait ainsi pas

comporter deux éléments avec le même id. Cela n’empêche pas de définir autant d'id que
l'on veut dans la feuille de style, mais il faut qu'ils soient uniques dans la page html.
• une classe peut désigner plusieurs objets identiques.
Une balise ne peut donc avoir qu’un id mais une ou plusieurs class. Ainsi il est possible par
exemple d'avoir ce code dans la même feuille de style :
<div class="toto"></div>
<div class="toto"></div>
Mais il n'est pas correct d'avoir ce code :
<div id="toto"></div>
<div id="toto"></div>
L’avantage d’id réside dans le fait que JavaScript peut manipuler les balises avec un id : L'id
remplace peu à peu "name" en JavaScript. Il peut ainsi servir d'ancre nommée, on peut donc aller
en haut de page comme ça :
<body id="top">...
<a href="#top">aller en haut</a>
Reprenez le fichier HTML suivant en supprimant les balises obsolètes et en les remplaçant
par des règles de styles.
<html> <head> <title>Fonts</title> </head>
<body>
Ce texte est affiché dans la police par défaut du navigateur avec sa taille courante
<font size="1">Affichage de la plus petite taille</font>
<p><font size="7">Affichage de la plus grande taille</font>
<p><font size="3" color="#FF0000">Texte en taille 3 et en rouge</font>
<p><font size="5" face="arial">Augmentation relative de la taille et passage en arial</font>
</body> </html>
Nous procéderons par insertion de la règle en ligne:

<html> <head> <title>Fonts</title> </head>
<body>
Ce texte est affiché dans la police par défaut du navigateur avec sa taille courante
<p style= "font-size: 8pt;">Affichage de la plus petite taille
<p style= "font-size: 72pt;">Affichage de la plus grande taille
<p style= "font-size: 24pt; color:red;">Texte en taille 3 et en rouge
<p style= "font-size:36pt; font-family:arial;">Augmentation relative de la taille et passage en
arial
</body>
</html>
Nous avons trouvé qu'il n'est pas nécessaire de fermer la balise avec </p>. Le code a fonctionné
sans.
Pour appeler une feuille de style externe, où placer le code dans le document HTML?
- Dans l'en-tête du document <head>
<head>
<link rel="stylesheet" type="text/css" href="monFichier.css" > </head>
Quand on donne une valeur a une propriété, doit-on utiliser des guillemets ?
Les guillemets ne sont nécessaire sauf si la valeur attributée est en plusieurs mots, exemple:
p {font-family: "courrier new"}
Exercises immédiats 3
Laquelle de ces syntaxes CSS est correcte?
- body {color: black}
ou body {color :black}
Comment ajouter une couleur verte de fond pour tous les éléments h1 de votre page ?
Une façon d'affecter le changement de couleur à tous les éléments h1 de la page est d'intégrer la
règle de style dans l'en-tête
<html>
<head>
<title>niveau 1</title>
<style type="text/css">
h1 {color:vert; }
</style>
</head>
<body><h1>Ce texte de niveau 1 est vert</h1>
<h1>Ce texte de niveau 1 est vert aussi</h1>
</body>
</html>
Ecrire une règle de style qui permet au lien contenant le texte HELLO THE WORLD
d’afficher une couleur de fond verte quand l’utilisateur passe dessus avec la souris
<html><head>
<title>lien</title>
<style type="text/css">
A:hover {background-color: green;}
</style>
</head>
<A href="http://www.google.com">HELLO THE WORLD</A>
</body>
</html>
Quelle est la syntaxe correcte pour mettre en gras le contenu de l'élément <p>?
<p style= "font-weight: 900;">texte en gras</p>
Qu'apporte la propriété backgound-repeat ? Sur quels éléments s'applique-t-elle ?

La propriété background-repeat détermine comment la graphique intégré dans l'arrière plan doit
être placée: Elle possède quatre valeurs: repeat, repeat-x, repeat-y, no-repeat.
Présenter des boites en ligne avec marges, padding et bordures. Les valeurs des paramètres
sont différentes pour chaque boîte.
<html> <head> <title>Fonts</title>
<style>
.boite1 { border:2px; border-style:dotted; margin: auto; padding:5px; background-color: #ffff00;}
.boite2 { border:1px; border-style:solid; margin: 100px; padding:2px; background-color:
#00ff00;}
.boite3 { border:30px; border-style:solid; margin: 50px; padding:20px; background-color:
#3300cc; color: red;}
.boite4 { border:10px; margin: 10px 10px 0px 0px; padding:10px; background-color: #FF9900;
color: #66000;}
.boite5 { border:0px; margin: auto; padding:5px; background-color: #ffff00; color: #66ffff;}
</style>
</head>
<body>
<p>
<span class="jaune">Une boîte jaune</span>
<span class="verte">Une boîte verte</span>
</p>
<span class="boite1"> boite a</span>
<span class="boite2"> boite b</span>
<span class="boite3"> boite c</span>
<span class="boite4"> boite d</span>
<span class="boite5"> boite d</span>
</body>
</html>
Présenter des boites bloc avec marges et padding. Leurs textes ont des couleurs différentes.
<html> <head> <title>blocs</title>
<style>
.boite4 {
border-left:5px; border-right:5px; border-top:2px; border-bottom:2px; border-style:solid;
margin: 10px 10px 0px 0px; padding:10px; background-color: #ff9933;}
</style>
</head>
<body>
</p>
<div class="boite4" style = "color:#66ffff;"> boite a boite a boite a boite a boite a <br>boite a
boite a boite a boite a boite a <br></div>
<div class="boite4" style = "color:#66ff00;"> boite b</div>
<div class="boite4" style = "color:#66cc00;"> boite c</div>
</body>
</html>
Afficher les articles d'une liste sur une seule ligne et une série de liens dans une boîte bloc.
<html> <head> <title>blocs</title>
<style>
.boite4 {
border:2px; margin: 0px; padding:5px; background-color: #ff9933; color:#66cc00;}
a:link { color: green }
a:visited { color: #000000 }
a:active { color: lime }
</style>
</head>
<body>
<div class="boite4">
<span> article 1</span>
</div>
<br>
<div class="boite4"><A href="http://www.auf.org">Lien1</A><br>
<A href="http://www.refer.org">Lien1</A><br>
<A href="http://www.google.com">Lien1</A><br>
</div>
</body>
</html>

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

Quel est l'intérêt majeur de l'utilisation d'un langage de style ?

Quelle différence voyez-vous entre les balises <div> et <span> ?

• un id s'applique à un objet unique. un document HMTL valide ne devrait ainsi pas

Mais il n'est pas correct d'avoir ce code :

Nous procéderons par insertion de la règle en ligne:

Qu'apporte la propriété backgound-repeat ? Sur quels éléments s'applique-t-elle ?

Das könnte Ihnen auch gefallen