... Les trois manières d'utiliser les styles css dans une page web ...
Page 1 sur 1
... Les trois manières d'utiliser les styles css dans une page web ...
Les trois manières de spécifier les styles dans les pages web.
Quand le navigateur lit la page de style ‘style sheet’, il présente ‘format’ le document suivant elle. Cependant, il y a trois manières d’insertion de CSS ‘Cascading Style Sheet’. Nous les présentant comme suit :
1- Dans l’élément html (inline) en utilisant le paramètre ‘style’, Exemple1:
<html><body>
<p style = ‘’color :sienna ; margin-left :20px’’> …La manière inline…. </p>
</body></html>
2- Dans la section head de la page html : Ca veut dire quand on inclut les spécifications de style dans la section entête du fichier html qui est le ‘head’. Exemple2 :
<html>
<head>
<style type= ‘’text/css’’>
p {color :red ; text-align :center ;} </style>
</head>
<body>
<p> Ce texte sera afficher en rouge et aligner au centre </p>
</body>
</html>
3- Dans un fichier css externe au fichier de la page html : L’utilisation de la page de style externe est idéale quand elle est appliquée à plusieurs pages. Avec une page de style externe, vous pouvez changer la présentation d’un site web complet uniquement en changeant un seul fichier de style. Chaque page doit se lier à la page de style en utilisant la balise < link>. Cette dernière doit être inclue dans la section <head>. Exemple3 :
<html>
<head>
<link> rel= ‘’stylesheet’’ type= ‘’text/css’’ href=’’pagedestyle.css’’/>
</head>
<body><p> …text 1…</p> <h1> …text 2 …</h1> </body></html>
Dans cet exemple les textes 1 et 2 seront affichés selon les styles spécifiés dans la page de style (pagedestyle.css) qui est référenciée par l’attribut ‘’href’’ et qui est enregistré dans le même répertoire que celui de la page html : exemple3.html. Voilà le contenu du fichier (pagedestyle.css) :
P { color :sienna ;}
h1 {margin-left :20px ;}
body{background-image :url(‘’images/fleurs.gif’’) ;}
Le CSS est un langage pour le web et très riche (Les sélecteurs id and class dans l’html) :
Le sélecteur id est utilisé pour spécifier un style pour un élément unique. Le sélecteur id utilise l’attribut id de l’élément html et il est défini par ‘’#’’. Les règles suivantes seront appliquées à l’élément avec identité id=’’para1’’ :
<html>
<head><style type=’’text/css’’> #para1 {text-align :center ; color :red ;} </style></head>
<body>
<p> id=’’para1”> Hello World ! </p>
<p> Ce paragraphe n’est pas affecter par le style </p>
</body></html>
Le sélecteur class : Le sélecteur class est utilisé pour spécifier un groupe d’éléments. Il utilise l’attribut de class html et il est définit avec le point ‘.’. Dans l’exemple suivant, tous les éléments avec class= ‘’center’’ seront alignés au centre :
<html><head><style type=’text/class’’> .center{text-align :center ;} </style></head>
<body> <h1 class=’’center’’> Un entête aligné au centre </h1>
<p class=’’center’’>Un paragraphe aligné au centre </p>
</body></html>
Bonne lecture.
bouklachi.abbes- Messages : 153
Date d'inscription : 20/05/2014
Age : 71
Localisation : Cité 1200 logts BT80B10, 35000, BOUMERDES, ALGERIE
Sujets similaires
» bn Mon thème c'était de créer un racourci , autrement dit c'est d'enregistrer la page facebook sous forme d'un HTML au lieu de passer par plusieurs étapes pour accéder au facebook , alors j'ai résumé tout ça en enregistrant le code source de la page face
» page web en utilisant le CSS.
» formulaire sur une page web avec html
» Mise en page de site web en utilisant HTML5
» ...TP N°1:localisation des bordures dans une image...
» page web en utilisant le CSS.
» formulaire sur une page web avec html
» Mise en page de site web en utilisant HTML5
» ...TP N°1:localisation des bordures dans une image...
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|