Les Feuilles de style

       Les feuilles de style permet au développeur de créer simplement des règles de style, servant à mettre en forme et à positionner les éléments de la page web. Ces règles reposent sur les balises <HTML>, <BODY>, <TABLE> et leurs propriétés. Les règles de style se COMPOSENT d'un sélecteur et d'une déclaration. Le sélecteur identifie la balise HTML dont le contenue doit être mis en forme.

Sélecteur{prorpiété_1:valeur_1; prorpiété_2:valeur_2; prorpiété_X:valeur_X;}

Chaque proriété est séparée de sa valeur par un deux points ' : '

Chaque déclaration entre accolades dans la liste est séparé par un point virgule ' ; '.

       Dans un fichier HTML conventionel, il faut mettre les balises de style entre les balises

<HEAD> ...<style type="text/css" > Sélecteur{...} </style> ... </head>.

Exemple : Type="text/css" > et pour JavaScript la valeur est Type="text/javascript >

      Il est possible de mettre du style directement dans la page WEB. ce qui est aussi possible c'est de ce créer une feuille de style ou nous allons tout simplement mettre les style que nous recherchons pour les types de balises différent que nous retrouvons dans le code. Cette feuille de style ( fichier contenu dans les dossiers du projet ) portera comme suffixe .css

      Moi je vous conseillerais la création d'une feuille de style à place de créer du style directement dans votre page. Pour la simple raison qu'il est fort simple et très efficace de maudifier le contenu d'une feuille de style que de maudifier le style dans le code de la dite page.

Cliquer ici pour voir l'Exemple D'une feuille de style

Lier un feuille de style

      Ce type de style on le retrouve directement dans la page web que vous construisez ou maudifier, or il est aussi possible de mettre du style dans vos page WEB et en désirant garder un contenu plus clair du code que vous retrouvez dans vos page WEB. il suffit de faire la construction d'une feuille de style dont vous allez annexer la feuille à votre projet avec cette partie de code que vous allez intégrer a votre page WEB.
<head> <link rel=STYLESHEET TYPE="text/css" href="Nom_Fichier.css title="nomfichier"> </head>

       L'attribut TYPE : de la balise <STYLE> Détermine le type de fichier avec lequel l'explorateur internet va travailler.

       Lattribut HREF :est bien sur l'endroit ou vous retrouver votre Feuille de style dans vos dossiers.

[ TOP ]

l'importation d'une feuille de style

<head> <style type="text/css"> @import url(Nom_Fichier.css) </style> </head>

[ TOP ]

Les Propriétés d'une feuille de style

       Il y a cinq catégories qui répartissent les feuilles de style CSS.Box (encadré), Font(police), Text(texte), Color(couleur), Classification.

       Chaque catégorie contient les propriétés qui lui sont propres. Voici une liste qui porte sur les principales catégories.

Propriété Attributs Définition
Font(police) font-family:Arial
font-style: normal, italic ou oblique
font-variant: normal small-caps
font-weight: bold, bolder lighter ou chiffre
font-size:chiffre et xx-smal, small, medium, large, xxlarge
Font: ...
  Définit la police utilisé
  Mets la police en italique ou oblique
  Affiche la police en petite capitales
  Définit la densité de la police
  Définit la taille de la police
  Regroupe l'ensemble des propriété

Text(texte) word-spacing: 2px
letter-spacing: 1px
text-decoration: underline, blinck, overline, line-through
vertical-align: baseline
text-transform: uppercase, lowercase ou capitalize
text-align: center, left et right
line-height:% ou px

Définit l'espace entre les mots
Définit l'espace entre les caractères
Applique une attribut décoratif au texte
Définit lalignement vertical
Définit la casse des caractère
Définit l'alignement horizontal
Spécifie la hauteur des lignes

Classification list-style-type: disc, circle, square, decimal et non
list-style-image:url(nom_du_fichier)
list-style-position: inside, outside
list-style: type|position|image

Définit le type de puces par défaut
Remplace la puce par une image
Détermine la position du texte
Définit les trois propriétés avec une seul instruction

Color/Background Color: blue
Background-color: white
Background-image: url(Nom_Du_Fichier)
Background-repeat: repeat-x, repeat-y, repeat et no-repeat
Background-attachment: scroll ou fixed
Background-position:top, center

Définit la couleur du texte
Applique une couleur unie à l'arrière-plan
Charge l'image d'arrière-plan
Définit les répétitions dans l'axe H, V ou aucun
Fixe ou permet le défilement de l'arrière-plan
Détermine la position initial de l'arrière-plan

Box(encadré)     Border permet de maudifier les bordures.
Border-width: 2px 3 px 2px 3px
Border-right-width: 3px
Border-Left-width: 3px
Border-top-width: 3px
Border-bottom: 3px

Border-color:#252321

Border-style
Border-top
Border-right
Border-bottom
Border-left

Margin contrôle les marges du document
Margin: 20px 30 px 20px 30px
Margin-top:30px
Margin-right:30px
Margin-bottom:30 px
Margin-left:30px

Créer de l'espace entre la bordure ou marge de l'élément
Padding: 20px 30 px 20px 30px
Padding-top: 30px
Padding-right: 30px
Padding-bottom: 30px
Padding-left: 30px

Épaisseur des 4 bordures
Épaisseur de la bordure droite
Épaisseur de la bordure gauche
Épaisseur de la bordure supérieur
Épaisseur de la bordure inférieur

Couleur de la bordure

Contrôle le style de balise.

Voir Tableau juste en dessous

Les 4 marges
Marge du haut
Marge de droite
Marge inférieur
Marge de gauche

Quatre côtés
Espace supérieur
Espace droite
Espace inférieur
Espace gauche

Valeur de Border

Valeur Fonction
dotted Trait pointillé à l'arrière plan

dashed Discontinu superposé à l'arrière plan

solid Bordure continue

double Bordur double

groove Bordure rainuré avec avec la valeur de la propriété color

ridge Bordure nervurée avec la valeur de la propriété color

inset Crée un inset en relief avec la valeur de la propriété color

ouset Cré un outset en relief avec la valeur de la propriété color

none Supprime le tracé de la bordure

Unités de mesure

Symbole d'unité Unité de mesure Utilisé avec
in Pouce Propriété Box(encadré)

cm Centimètre Propriété Box(encadré)

mm Millimètre Propriété Box(encadré)

em Hauteur de la police active Propriété FONT(police)

ex Hauteur d'un caractère Propriété FONT(police)

pt Point (1/72 de pouce) Propriété FONT(police)

pc Pice (1 pc = 12 pt) Propriété FONT(police)

px Pixel Propriété Box(encadré)

% Pourcentage Propriété Box(encadré)

[ TOP ]