Ajouter du style à vos pages html



Qu'entend-on par style?

C'est d'abord du dessin (design).
Dans vos pages vous mettrez du texte qui fera partie du contenu. Des images ou d'autres fichiers comme les lecteurs vidéo ou audio feront aussi partie du contenu. Le style aidera donc au contenant pour les dispositions des blocs, leurs tailles, les couleurs du texte et d' arrière-plans, bordures, les polices de caractères .... etcetera)
Certains pensent que seulement un fichier CSS peut faire cela. En réalité le style peut s'appliquer à une seule page ou même un paragraphe, une ligne, une phrase,un mot, une lettre

Le style n'importe où dans une page 

Aussi appelé style inline
Cette méthode convient pour vérifier votre code en local mais il est de beaucoup préférable ensuite d'utiliser CSS dans la partie HEAD ou dans un fichier.css lorsque vous envoyer votre page sur le ouaibe

Appliqué à une DIV

Se place dans la partie BODY de votre page.

<div style=
"font-family: arial,sans-serif;
font-weight:bold;
font-size:15pt;
color:white;
background-color: red;
text-align:center"> balise DIV</div>

sans-serif signifie:sans empattement text-align:center place le texte au milieu de la DIV

balise DIV


Appliqué à SPAN

Se place également dans la partie BODY de votre page

<span style=
"font-family: georgia, times, serif;
font-weight:bold;
font-size:15pt;
color:yellow;
background-color: blue ; "> balise SPAN </span>

Ce qui donne avec la même taille:15pt une couleur de texte jaune:color:yellow-une couleur d'arrière -plan bleue:background-color:blue -  serif: signifie avec empattement - bold signifie en gras

balise SPAN

Pour que le texte ne colle pas au bord du cadre il faut ajouter un padding, qui a pour effet d'agrandir le cadre entourant les caractères

Ainsi vous pouvez appliquer du style à la balise A

Pour qu'un lien ne soit pas souligné et apparaisse en magenta:
<a style="text-decoration:none;color:magenta" href="#">haut de page</a>
ce qui donne:

haut de page

On peut aussi appliquer du style aux balises

TD, INPUT, HR, BODY, TABLE par exemple


Style pour une seule page

Ce sont des informations comprises dans le HEAD de la page qui seront transmises directement dans cette même page
Simplement pour changer de design dans une page de votre blog

<style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: white;
    background-color: black;
                margin:10%;border: 3px solid yellow ;margin-top:2%;padding:2%}
  h1 h2 h3 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif;color:lightblue }
</style>

La page sera noire entourée d' une bordure jaune avec un texte en blanc et les titres seront bleu clair


Style commun pour tout le site 

On reconnait tout de suite que c' est votre site
Les feuilles de styles en cascades
Les "Cascading Style Sheets"
CSS sont faîtes pour ça. Il s'agit d'un fichier texte avec l'extention .css
qui sera placé à la racine du site.
Fichier contenant les informations qui pourront être données à toutes les pages.
Un lien, placé dans la partie HEAD de chaque page appelant ce fichier CSS
sous la forme
<link rel="stylesheet" type="text/css" href="url_du_fichier.css">
Ce fichier peut être très fourni pour un site en HTML5 responsive. Il est possible d' avoir plusieurs fichiers CSS

Un autre pour configurer un formulaire par exemple et un autre pour rendre vos pages plus flexibles ( responsive web design )

il est conseiilé de mettre le maximum d' informations dans ces fichiers CSS.
Ces informations pouvant être modifiées au besoin dans la partie HEAD de chacune de vos pages ( chapitre précédent )
Dans l' exemple du paragraphe précédent, le code CSS contenu dans la partie HEAD peut très bien faire partie d' un fichier .css en omettant les balises STYLE si l' on veut que toutes les pages du site soient noires entourées d' une bordure jaune avec un texte en blanc et les titres en bleu clair


 

statistiques

who's.amung.us
  Partager


Annonce Google



wubijacq.com Cliquez ici pour vous abonner à ce flux RSS