Styles CSS

NOMBRES - Curiosités, théorie et usages Accueil DicoNombre Rubriques Nouveautés Édition du: 24/02/2019 Orientation générale DicoMot Math Atlas Références M'écrire Barre de recherche DicoCulture Index alphabétique
	Informatique
Débutants Général	Programmation				Glossaire Algorithme
Index des pages Programmation >>> INDEX	Débutant	HTML	En commun	Ligne de code
	HTML – Premiers pas
	OUTILS de PROGRAMMATION
		Sommaire de cette page >>> Approche >>> Style – Définition >>> Principe – Feuille de style >>> Spécification d'un style local >>> Spécification d'un style général >>> Spécification d'un style commun

Langage HTML et CSS

Une histoire en informatique, comme en maths, de mise en dénominateur commun …

Même si je ne programme pas, cette page permet de comprendre ce qui se passe, sans prise de tête.

APPROCHE

En programmation, y compris pour mettre en forme des documents, on cherche à simplifier, à éviter les répétitions autant que possible.

C'est pourquoi la nature du texte principal sera définie une fois pour toute dans l'entête du document, entre les balises HEAD, ou encore mieux une fois pour tous les documents dans un fichier particulier (avec extension.css). On pourra définir plusieurs types de texte selon qu'il s'agit:

du texte normal,

des titres

des sous-titres,

de citations,

etc.

Cependant, liberté sera laissée à chacun de choisir localement une autre forme de texte à l'aide notamment des balises DIV et SPAN.

STYLE

Il nous faut préciser comment le texte va apparaître sur l'écran, quelle sera son allure générale, son style.

Plusieurs paramètres sont disponibles:

fonte (police de caractères): font-family,

taille des caractères: font-size,

couleur des caractères: color,

épaisseur des caractères (normal, gras): font-weight,

alignement du text: text-align

etc.

La liste est longue. Voici un classement en six rubriques:

On comprend qu'il serait fastidieux de définir tous ces paramètres à chaque paragraphe.

Principe de définition du style

J'enregistre le document que je souhaite réaliser sous mondocument.htm (ou tout autre nom à ma convenance, avec l'extension .htm)

Dans le même dossier (classeur), j'enregistre un document qui définit les styles. Je lui donne un nom à ma guise suivi de l'extension .css.
(css: cascading style sheets)

Les styles communs sont définis dans la partie HEAD de mon document. Je peux soit (1) faire appel à un document de style externe (.css) commun à tous mes documents ou (2) définir le style propre à ce document.

À tout moment, dans le corps du texte (BODY), je peux placer (3) un style local à ma convenance.

Spécification d'un style local

Utilisation de la balise SPAN

<BODY>
<P>Bonjour
<SPAN font-family: Algerian>
IMPORTANT

</SPAN>
Au-revoir

</P>
</BODY>

Utilisation de la balise DIV.

<BODY>
<P>Bonjour </P>
     <DIV font-family: Algerian>
                <P> IMPORTANT</P>
                <P> NE PAS OUBLIER </P>

</DIV>
</BODY>

Une balise doit être ouverte (<…>) puis fermée (</…>).

<P> indique le début d'un paragraphe.

SPAN permet de modifier le style d'un texte à l'intérieur d'un même paragraphe.

DIV permet de modifier le style de tous les paraphes encadrés par la balise DIV. Chaque nouvelle balise P fait passer à la ligne.

Spécification d'un style général

Texte classique

font-family: Arial;
font-size: 20pt;

color: black;

font-weight: bold

text-align: left;

}

</STYLE>

</HEAD>

<BODY>

<p> Ce texte sera visible en Arial </p>

</BODY>

Texte particulier (une citation par exemple)

.citation {

font-family: Arial;

font-size: 10pt;

color: red;

font-weight: bold

text-align: left;

}

</STYLE>

</HEAD>

<BODY>

<p class="citation"> Il n'y a pas de vent favorable à qui ne sait où il veut aller.</p>

</BODY>

Le style général est défini dans la partie d'entête du document HTML.

Sa définition est encadrée par la balise STYLE.

type="text/css" informe que ce qui suit est du texte dont on définit les paramètres communs.

Il est possible de baptiser une forme de style pour l'appeler plus tard. On dit qu'il s'agit d'une classe.

Le nom de baptême dans cet exemple est citation.

Son appel se fera tout simplement en appelant le paragraphe (p), suivi de l'indication class = "citation".

Voir Citations

Spécification d'un style commun

.montexte {

font-family: Arial;

font-size: 20pt;

color: black;

font-weight: normal

text-align: justify;

}

.mestitres {

font-family: Verdana;

font-size: 20pt;

color: black;

font-weight: bolder

text-align: left;

}

<HEAD>

…
<LINK REL=STYLESHEET HREF=" monstylegeneral.css" TYPE="text/css">

…

</HEAD>

Je définis tous les styles que je souhaite appliquer à tous mes documents (toutes mes pages personnelles sur Internet, par exemple.)

Ce texte, tel que présenté ici, est enregistré sous un nom (monstylegeneral.css, par exemple).

Son appel se fait dans l'entête du document par son nom. Si le fichier .css est dans un autre dossier que le document, mettre le chemin complet.

Le code "bizarre" (link rel …) est à utiliser tel quel. Il permet d'autres combinaisons pour les programmeurs très avancés.

Suite	Menu en en-tête Programmation – Index
Voir	Programmation – En savoir un peu plus
Livre	La création de mon site Web – Karine Warbesson – Micro application – 2005 Apprendre le développement WEB au lycée – Cyprien Accard – ellipses – 2018
Sites	Apprentissage HTML par Van Lancker
Cette page	http://villemin.gerard.free.fr/aInforma/Langage/Span.htm