... Les trois manières d'utiliser les styles css dans une page web ...

Voir le sujet précédent Voir le sujet suivant Aller en bas

... Les trois manières d'utiliser les styles css dans une page web ...

Message par bouklachi.abbes le Sam 7 Mar - 10:19

Les trois manières de spécifier les styles dans les pages web.

 study 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 :
Basketball 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>
Basketball 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>
Basketball 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’’) ;}


queen Le CSS est un langage pour le web et très riche (Les sélecteurs  id and class  dans l’html) :
king 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>
king 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>
study Bonne lecture.

bouklachi.abbes

Messages : 153
Date d'inscription : 20/05/2014
Age : 65
Localisation : Cité 1200 logts BT80B10, 35000, BOUMERDES, ALGERIE

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum