docTP4 Feuille de style Class, ID, Pseudo-element
download 
Plainte Transcription
TP4 Feuille de style Class, ID, Pseudo-element
TP4 Feuille de style
Class, ID, Pseudo-element &pseudo-class
Création et mise en forme d'une page Web avec une feuille de style
Ouvrez la page index.htm qui envoyer par email.
Insérez une feuille de style externe qui a pour nom presse.css avec pour type de média « screen » entre
les balises <head> </head>
Ouvrez ensuite un éditeur de texte tel que Topstyle et enregistrez la page sous le nom de presse.css.
Nous commencerons par styler la balise html en lui donnant un arrière plan (background-color) de
couleur gris (#C2CACF). Les marges externe (margin) et interne (padding) sont à zéro.
html
{
……
……
}
Maintenant, il faut paramétrer la balise body. Les marges externe (margin) et interne (padding) sont à
zéro. On ajoute le même arrière plan couleur que pour la balise html et une image de fond
(background-image) (reçue par mail). Cette image ne sera pas répété (background-repeat) et aura
une position de 0px en valeur horizontale et verticale (background-position). Ensuite, nous fixerons
l'image par rapport à la fenêtre (background-attachment), elle restera donc en place quelque soit la
position de l'ascenseur.
body
{
…
}
Interpréter les effets de visuelles de chaque propriété de styles.
1/8
Il est nécessaire ensuite de positionner le texte par rapport à la bande noire. Nous allons créer un bloc
avec un identifiant unique qui aura pour nom entry (div#entry). Il n'y aura pas de marge interne mais
une marge externe de 0 en verticale qui se positionnera automatiquement par rapport à la marge de
droite avec une marge fixe pour le bas de 10 et une marge fixe de gauche de 102. Il est à noter que
102px est la largeur de la bande noire. Le bloc aura une largeur fixe de 650px (width) et sa propre
couleur d'arrière plan de préférence clair (#fefefe) pour contraster avec le gris de l'arrière plan
principal. On applique au bloc une bordure (border) en trait plein, fine (1px).
Div#entry
{
padding: …
width: ..
margin: 0 auto 10px 102px;
background-color:…
border-width: …
border-style: …
}
Une fois la partie principale de la mise en page terminée, nous allons pouvoir nous intéresser sur la
mise en forme des caractères. Dans le body, nous allons inclure comme police par défaut l'Arial sansserif. La police par défaut est ici entre guillemet, préciser plusieurs familles augmente la probabilité
que le visiteur disposera d'au moins de l'une d'entre elles.
fontfont-family: "arial",verdana,lucida,sans"arial",verdana,lucida,sans-serif;
2/8
Nous traiterons ensuite de la balise de titre principal ou h1. Le titre sera de taille 2em en petite capitale
(font-size) avec une barre en dessous pour marquer une rupture entre le contenu et le titre. On
appliquera une bordure (border) de couleur noire en trait plein, fine (1px). La marge externe est à 0.
On souhaite cependant grâce à la marge interne (padding) décaler le titre sur la gauche pour qu'il
n'empiète pas sur la bande noire, 5px suffiront et le décaler un peu en hauteur de 6px (pure raison
esthétique).
H1
{
….
}
La balise de titre h2 sera définit un peu comme la balise de titre h1. Le titre aura pour taille 1.6em. La
marge interne sera décalée de 5px sur la gauche comme pour h1 et de 5px en hauteur.
H2
{
....
}
H3 suivra le modèle des titres h1 et h2. Le titre aura pour taille 1.4em. La marge interne sera décalée de
5px sur la gauche comme pour les deux autres et de 7px en hauteur. La marge externe sera à 0.
H3
{
………
}
3/8
Pseudo-calss CSS :
La mise en forme des liens ne concernera ici que les liens contenus dans le bloc #entry. L'attribut
a:link ou lien correspondant au lien non visité, c'est à dire non présent dans le cache de votre
navigateur, seront de couleur #768. Les liens visités ou a:visited, sont ceux déjà contenu dans le cache
de votre navigateur. Pour les distinguer des liens non-visités, ils sont d'une couleur légèrement
différente #777. Par défaut, les liens visités et non visités seront soulignés (text-decoration:
underline).
Il est d'usage d'utiliser des couleurs différentes pour les liens visités et non vus. Modifier la couleur
d'un lien selon sa visualisation ou non est une méthode de base pour faciliter la navigation. On peut
utiliser une couleur plus présente pour les nouveaux liens et une couleur moins forte pour les liens
cliqués, afin d'indiquer aux lecteurs qu'ils ont été visités.
Apparence lien par défaut :
div#entry a
{
………………………………………..
}
Apparence lien visitée
div#entry a:visited
{
………………………..
}
Apparence lien non visitée
div#entry a:link
{
…………… ……
}
Les paragraphes contenus dans le bloc #entry auront la même marge interne sur la gauche que les
balises titre.
div#entry p
{
…………
}
4/8
Class CSS
Nous souhaitons pour mettre en valeur les sources, les positionner autrement. Pour cela, nous allons
utiliser un élément de type classe, c'est à dire que vous pouvez l'insérer dans différentes balises, ici
nous l'avons inséré au sein de la balise paragraphe et nous l'appellerons cat.
Ainsi dans le code html, toutes les balises paragraphes contenant un class="cat" apparaîtront, aligné à
droite en petite capitale et italique, avec une taille de 0.9em. Pour que le texte ne touche pas le cadre,
une marge externe de droite de 5px est préférable, accompagné d'une marge pour le bas de 5px.
Appliquer au paragraphe : « d'après Verdens Gang, Oslo »
p.cat
{
…….
}
5/8
Pseudo éléments css
Pour embellir le texte, nous avons décidé de mettre en valeur la première lettre de chaque texte. Il
existe une balise first-letter qui permet, adjoint à la balise paragraphe de ne modifier que la première
lettre. Mais comme, nous ne souhaitons pas que les classes .cat subissent ces transformations, il est
préférable d'utiliser une autre technique.
On isolera manuellement, en la plaçant dans la balise neutre span, la première lettre en lui attribuant
une classe ici .lettrine. Ainsi dans le code html, toutes les lettres contenues entre les balises suivantes,
<span class="lettrine"></span>, seront affichée en gras, avec pour police par défaut Georgia serif.
La taille de la lettre sera de 2em avec une marge interne de 3px pour intégrer un petit espacement
entre la lettre et le paragraphe et un float:left. Float signifie que l'élément génère un bloc qui flotte à
gauche. Essayez la feuille de style avec et sans float:left, vous verrez la différence.
Appliquer à la première lettre de chaque paragraphe.
Span.lettrine
{
……….
}
6/8
On pourrait juger que la mise en forme est terminée, mais je souhaiterais réussir à ce que le bandeau
noir aille juste au bout de la page. Pour cela, j'utilise le pseudo-élément after qui sert à insérer un
contenu généré après celui d'un élément, ici body. On obtient donc un body:after avec un texte généré
automatiquement content: "Page crée le 14 Fev 2011 inspiré du blog de Karl Dubost" d'une taille
de 1em et une marge externe de gauche de 200px.
Body:after
{
content: "Page crée le 14 Fev 2011 inspiré du blog de Karl Dubost";
Dubost ;
fontfont-size:….
size:
marginmargin-left:….
left:
}
7/8
N’oublier pas de valider vos pages : xhtml STRICT et css avec les validateurs W3C
Conclure sur les différents éléments css2 utilisé dans ce TP
Essayer de convertir les unités de mesure utilisées en relative, tout en gardant la même apparence !
Comparer l’effet zoom.
8/8
