Feuilles de style : Présentation du Css

Les prérequis

1 - Les bases de la structure Html
2 - Mise en forme

Présentation

Une feuille de style permet de séparer la présentation d'un site de son contenu. En d'autre terme cela permet aussi d'allégé vos page en définissant à l'avance les paramètres de chaque balise.

syntaxe et mise en place du css

body {
background-color:#330000;font-family:Arial;font-size: 10px;text-align: left;
}

H1{
position:absolute;width:120px;height:100px;color: #000000;background-color:#c0c0ff;border:1px solid #000000
}

Cela permet donc de définir à l'avance les différentes option des balises. Ci dessus les balises "Body" et "H1"

Vous remarquez que l'on parle de feuilles de style [ style sheets ] car le but du jeu est d'en définir plusieurs. On parle aussi de feuilles de style en cascade [ Cascading Style Sheets ou CSS ] car en cas de styles identiques, un ordre de priorité sera déterminé par le browser et une page peu aussi hérité de plusieur styles differents..

Utilité et avantages du css

Cohésion de la présentation tout au long du site avec les feuilles de style externes.
Possibilitée de modifier toutes les pages en même temps sans devoir aller dans le code de chacunes (gain de temps)

Un langage simple, conçis et novateur
Réduire le temps de chargement des pages.
Palier certaines insuffisances du langage Html.
Rend la page plus maléable et si besoin plus précise.

Structure d'une page Css

Une page Css n'a pas d'architecture comme le langage html ou autre. Il suffit de mettre les une en dessous des autres comme ci-dessous :
Balise 1 {propriété de style: valeur; propriété de style: valeur;... }
Balise 2 {propriété de style: valeur; propriété de style: valeur;... }
Balise 3 {propriété de style: valeur; propriété de style: valeur;... }
Balise 4 {propriété de style: valeur; propriété de style: valeur;... }

Les feuilles de style portent principalement sur des balises et quelques autres éléments comme par exemple
A:link pour un lien non-visité.
A:visited pour un lien visité.
A:hover pour un lien survolé.

Comme balises souvent utilisées avec des feuilles de style, on peut citer les en-têtes Hn, P, BODY, SPAN,...
Les propriétés de style sont entourées par des "{" .
L'ensemble "propriété de style/valeur" est séparé par un double-point (:).
Chaque ensemble "propriété de style/valeur" est séparé par un point-virgule (;).
Il n'y a pas de limite pour le nombre de couples "propriétés de style/valeur".
L'espace entre propriétés de style et valeur n'est pas obligatoire.

La seul contrainte est que le fichier doit avoir une extension .css

Intégration du Css dans une page html

Il existe 3 manières d'intégrer les feuilles de style dans un document HTML :

- Intra-lignes
- Globales
- Importées

CSS Globale : Placé à l'intérieur des balises <HEAD></HEAD> :

Une feuille globale va se déclarer dans la tête du document, entre les balises HEAD. Elle va s'appliquer globalement à toutes les balises du document qu'elle a défini.

<HTML>
<HEAD>
<STYLE type="text/css">

</STYLE>
</HEAD>
<BODY>

<STYLE> : Avertit le navigateur que l'on va utiliser des feuilles de style.
type="text/css" : Informe que ce qui suit est du texte et qu'il s'agit de cascading style sheets (css).
 : empêche que les browsers qui ne connaissent pas les feuilles de style, tentent d'interpréter ces instructions.
Pour vos propres commentaires à propos des feuilles de style, on utilisera : /* commentaires */.

CSS Intra-lignes : A coté des balises :

Une feuille intra-ligne s'insère directement à côté de la balise qu'elle définit, elle ne constitue donc pas véritablement une feuille, simplement elle permet très localement de fixer des attributs à une partie d'un document. Sa déclaration est un peu particulière, en voici une (notez la forme Style=" "):

<HTML>
<BODY>
<H1 style="font-family: Arial; font-style: italic"> blabla </H1>
</BODY>
</HTML>

Signalons :

que le style Arial, italique n'affectera que cette seule balise H1.
que la syntaxe est légèrement différente de la précédente.
que l'écriture : <STYLE type="text/css">H1 { "font-family: Arial; font-style: italic" }</STYLE> fonctionne aussi.
Pour ma par je trouve cette maniére de faire aussi lourde que le l'html.

CSS importée : Dans un document séparé :

Une feuille liée va se déclarer à part, dans un fichier avec une extension .css qui sera mis à côté des autres documents dans le répertoire du site web. Cette feuille de style sera valable pour toutes les pages du site qui l'appelleront dans les balises HEAD. C'est un outil très puissant pour uniformiser la mise en pages d'un grand nombre de documents.

Principe :

On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit "stylesdebase.css" qui contiendra toutes les feuilles de style.

Balise 1 {propriété de style: valeur; propriété de style: valeur;... }
Balise 2 {propriété de style: valeur; propriété de style: valeur;... }
Balise 3 {propriété de style: valeur; propriété de style: valeur;... }
Balise 4 {propriété de style: valeur; propriété de style: valeur;... }

Ensuite, on crée une page soit page.htm avec dans la <HEAD> un lien vers ce fichier CSS :

<HTML>
<HEAD>
<LINK rel=stylesheet type="text/css" href="stylesdebase.css">
<HEAD>

Commentaires :

La balise <LINK> avertit le browser qu'il faudra réaliser un lien.
L'attribut rel=stylesheet (sans s et sans guillemets) précise qu'il y trouvera une feuille de style externe.
L'attribut type="text/css" précise que l'information est du texte et du genre cascading style sheets (css).
L'attribut classique de lien href=" ... " donne le chemin d'accès et le nom du fichier à lier.

Formater une balise et contourner le format si besoin

Mettre un format sur une balise afin que celle-ci est le même affichage sur toutes les pages.

Exemple 1 : Formater une balise

H1{ font-family:Arial ; font-size: 18px ; color: #FFFFFF }

A la balise <H1> je rattache la police Arial, de taille 18 pixels, de couleur blanche. Chaque fois que j'utiliserai la balise <H1> dans mon document, tout le texte situé dans les limites de la balise recevra cette mise en forme.

On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les différentes valeurs par des virgules.
H1 {font-family: Arial, Helvetica, sans-serif}

On peut attribuer un même style à plusieurs balises (séparées par des virgules).
H1, H2, H3, H4... {font-family: Arial}

Exemple 2 : Contourner le formatage de la balise

Mettre une balise H1 de couleur différente (verte) dans votre page. La balise H1 apparaissant dans la feuille de style, toute balise H1 aura donc un format prédéfini. Afin de modifier ou contourner ceci ( pour des cas particuliers ) il suffit de rajouter une classe dans la balise:

Dans la feuille de style :
H1{ font-family:Arial ; font-size: 18px ; color: #FFFFFF }
.classe1{ font-family:Arial ; font-size: 18px ; color: green }

Dans le document html :
<H1 class="classe1"> TITRE <H1>

Alors que toutes les balises H1 de votre site seront de couleur blanche, celle-ci sera verte.

Pour la suite libre à vous de vous entrainer en créant une feuille de style de base. Avec les balise de base

Lien vers cette page :
<a href="www.bibliotheque-des-esprits.com/formation-tutoriaux/formation-css/Presentation-Css.php" title="Feuilles de style : Présentation du Css">Feuilles de style : Présentation du Css</a>

Nouveauté Blog
Ouverture des blogs des esprits ...!!!!

Les commentaires
Votre email Titre du commentaire Contenu du commentaire