Info Cours CSS 2.0 avec LigneWeb.net...

Nous abordons le style :

... dans le xhtml, le style pour les éléments sera défini dans un fichier ...extérieur ...
... mais parfois on pourra mettre une précision de style dans une des balises vue en html ...
... mais cela sera toujours dans la feuille de style extérieure ... ( nous verrons cela plus tard ) ... cela est exigé pour le ... XHTML ...
... nous étudions le CSS 2.0, le nouveau CSS 3 arrive mais n'est pas complet ...
... il sera étudié dans espace création, les ombrages ici viennent de CSS 3.0 ...

Vous pouvez aller tout de suite à ... l'espace cours ...
... voir le ... menu spécial pour le cours ... dans l'en-tête ...

... le language CSS veut dire : ... les ... feuilles de style en cascade ... ce qui veut dire que le style premier d'une page web peut être corrigé par une autre définition de style particulière dans la page même et ainsi de suite ... la dernière prenant le dessus ... sur les autres ...
... la feuille de style externe se nomme : ... essais.css ... avec essais ... comme nom (pour exemple) ...
... le nom de la feuille de style suivi de ... .css ...

Retour au menu

La structure de la feuille de style :

... il n'y a pas de partie introductive ... on passe directement aux différentes énonciation pour chaque groupe ...
... chacun d'eux a un nom suivi entre accolades des différentes valeurs pour chaque élément ...

... il faut ouvrir un nouveau fichier en le nommant ... essais.css ... (par exemple) ...
... on le fait dans le même logiciel que celui utilisé pour html ...
... il n'y a donc pas d'introduction ... le nom seul suffit à être reconnu ...
... ce fichier sera appelé dans la page html au niveau de head ...

Appel de la feuille de style : elle est mise à la suite des diverses balises ... meta ... dans le ... head ... de la page ... HTML ...

Voici un exemple de fichier ... .css ... tiré directement de ce site :

       		
body
{
   	width: auto;
   	margin-left: 20px;
   	margin-top: 10px;
   	margin-right: 20px;
   	margin-bottom: 10px;
   	background-color: #3399bb;
   	font-family: Papyrus, "Comic Sans MS", Geneva, Arial, Verdana, "Times New Roman", Times, serif;
   	font-size: 16px;
}

body a
{
	color: #ffff00;
	text-decoration: none;
}

body a:hover
{
	background-color: #3399bb;
   	color: #002266;
}

/* L'en-tete */

#en_tete
{
   	width: auto;
   	height: 300px;
   	border-style: outset;
   	border-color: #33ffff;  
   	border-width: 1px;
   	margin-bottom: 200px;
   	padding-left: 10px;
   	padding-right: 10px;
   	font-family: Papyrus, "Comic Sans MS", Geneva, Arial,Verdana, "Times New Roman", Times, serif;
  	 font-size: 16px;
   	color:#000066;
   	text-align: center;
}

#en_tete img
{
	width: 600px;
	padding: 10px;
	text-align: center;
}


/* Le menu */

#menu
{
   	float: left;
   	width: 180px;
   	border: 1px;
   	border-style: outset;
   	border-color: #00ffff;
   	background-color: #1f7997;
   	color: #000066;
}

.element_menu
{
   	margin-bottom: 30px;
   }


/* Quelques effets sur les menus */


.element_menu h3
{
   	color: #ffffff;
   	font-family: Papyrus, "Comic Sans MS", Geneva, Arial, Verdana, "Times New Roman", Times, serif;
   	font-size: 18px;
   	text-align: center;
   	padding-top: 2px;
}

.element_menu ul
{
   	font-size: 17px;
   	list-style-image: url("puce.jpg");
   	padding-left: 20px;
   	padding-top: 10px;
   	padding-bottom: 10px;
   	margin: 10px;
   	margin-bottom: 10px;
   	border-width: 0px;
   	border-style: outset;
   	border-color: #00ffff;
   	background-color: #3399bb;
}

.element_menu a
{
   	color: #ffff33;
   	text-decoration: none;
}

.element_menu a:hover
{
   	background-color: #3399bb;
   	color: #002266;
}

.element_menu img
{
	width: 158px;
	margin: 10px;
	border-width: 1px;
	border-style: inset;
	border-color: #6699bb;
}


a img /* Toutes les images contenues dans un lien */
{
   	border: none; /* Pas de bordure */
}


/* Le corps de la page */

#corps
{
   	font-size: 16px;
   	width: auto;
   	margin-left: 254px;
   	margin-bottom: 20px;
   	padding: 10px;
   	color: #99ffff;
   	background-color: #1f7997;
   	border-width: 1px;
   	border-style: outset;
   	border-color: #00ffff; 
     
}


			etc. ... ce n'est qu'un exemple partiel ... 
			copyright ligneweb.net

Il y a un moment déjà ...

Retour au menu

... cet exemple montre très clairement la structure de ce fichier ... il va droit au but ...
... et c'est cela que nous allons étudier maintenant ...

... nous précisons que tout le style doit être mis dans cette page css ...
... pour respecter les recommendations du ...W3C ...

... nous voyons tout de suite l'avantage de cette manière de procéder ...
... tout ce qui est contenu se trouve dans la page html ...
... tout le style étant dans la feuille de style (.css) ... permet le changement aisé du style ... (toujours en minuscules)

... pour un même texte écrit en html ... voici une multitude de design css différentes ...
... ils se retrouvent sur le site ... csszengarden.com ...
... le site de base ... css zen garden ... est réalisé avec une première feuille de style ...
... et avec la même base html il y a d'autres feuilles de style qui montrent des sites totalement différents ...
... toutes ces ... feuilles de style ... illustrent parfaitement les potentialités de l'XHTML ... avec le CSS 2.0 ...
... un ... autre exemple ... intéressant ...

Retour au menu

... reprenons la structure de base en html ... la balise html ... suivie de la balise head ... suivie de la balise body ...
... la balise qui a comme nom body, englobe toute une page du site web ...
... et c'est son style que nous allons définir maintenant ...

... le premier mot est ... body ... (on va à la ligne) ...

... on écrit l'accolade ... { ... d'ouverture ... ( et on va à la ligne ) ...
... là, il y a un décalage automatique pour la suite ...
... on écrit les différentes données suivies par ... le point-virgule ...; ...
... une, deux, trois ... ce qu'il faut définir ...
... on va à la ligne après chacune d'elle ...
... et enfin ... avec le décalage inverse ...
.... on termine l'ensemble des données par la fermeture de l'accolade ... } ...
... vous pouvez le voir sur l'exemple ici plus haut ...

Nous avons trois types de balises pour définir le style :

… le premier, comme nous venons de le voir est la balise englobant la page visible : … body …

… le deuxième est celui des quatre grandes zones : en-tête, menu, corps et pied de page …
… et se définissent par leur nom : … <div id="menu"> …

… le troisième est celui des différents blocs internes aux précédants …
… ces troisièmes se définissent par la classe … <div class="table5">

… nous les étudions dans un deuxième temps au … cours CSS 5 … mais avant, étudions le style en général ...

Autre forme d'écriture :

... il y a une autre manière d'écrire tous les éléments de style entre les accolades ...
... on les écrit les uns à la suite des autres tous sur la même ligne ...
... l'inconvénient, c'est que c'est baucoup moins lisible pour tous ...

Les commentaires :

... le commentaire pour une page css ... est ...
... /* ... pour la balise entrante ...
... et */ ... pour la balise sortante ...
... ce qui nous donne ... /*ceci est un commentaire*/ ...

Retour au menu

Remarque :

... si je veux écrire un code en langage html, il y a une balise ... code ...
... cette balise permet d'écrire ... tout langage ... dans une page web sans que le navigateur ne le transforme ...
... ce qui permet de montrer le code html et css ... utilisé pour montrer les programmes ...
... <code> ... est la balise entrante ...
... </code> ... est la balise sortante ...

... cette balise ne marche que dans du langage transitionnel ancien ... donc pas ici ...

... il y a une manière d'écrire certains symboles ou lettres avec accent pour qu'ils soient transformé en clair ...
... en remplaçant les ... < ... et les ... > ... par des abréviations spéciales ... dont voici une liste :
... on peut placer le code dans une balise textarea, ... notre solution ...

Les caractères spéciaux : pour html 4

... en ... XHTML ... avec encodage texte en ... utf-8 ... nous pouvons ... écrire le texte en clair avec les accents ...

Textes avec accents : ISO8859-1

...ce tableau contient les entités caractères et numériques du jeu de caractères ...
... ISO-Latin-1 (ISO8859-1) ... :

Caractère	Entité numérique	Entité caratère	Description
`<`	`& #60;`	`& lt;`	inférieur à
`>`	`& #62`	`& gt;`	supérieur à
	`& #160`	`& nbsp;`	espace insécable
`©`	`& #169`	`& copy;`	copyright
`&`	`& #38`	`& amp;`	et commercial
`é`	`& #233`	`& eacute;`	e accent aigu
`è`	`& #232`	`& egrave;`	e accent grave
`ê`	`& #234`	`& ecirc;`	e accent circonflexe
`ë`	`& #235`	`& euml;`	e accent tréma
`à`	`& #224`	`& agrave;`	a accent grave
`...`	`...`	`...`	etc.

... il ne faut pas d'espace entre le & et le reste du code ...
... le e accent grave et le a accent grave ne se différencient que par la lettre e ou a ...
... donc les lettres a, u, i, o majuscules ou minuscules peuvent être codée de la même manière ...
... c'est ... l'entité caractère ... qui est habituellement utilisée pour le html ...

... une référence avec tous les codes dans cette norme ... ( la plus utilisée ) ...
... le code ISO-Latin-1 - (ISO8859-1) ...

Retour acte pécédent | Page suivante | Retour au menu

Menu :

Présentation :

Téléchargement :

Info Cours CSS 2.0 avec LigneWeb.net...

Nous abordons le style :

La structure de la feuille de style :

Nous avons trois types de balises pour définir le style :

Autre forme d'écriture :

Les commentaires :

Remarque :

Les caractères spéciaux : pour html 4

Textes avec accents : ISO8859-1