Notre magasin

Rue Albert 1er, 7

6810 Pin - Chiny

(/fax: 061/32.00.15

Magasin informatique, formations YBET

Tutorial / Formation FrontPage

FORMATIONS Le MAGASIN YBET PRODUITS et SERVICES

COURS HARDWARE

Rayon d'action  

 
Tutorial access   Plan d'accès  
ACCUEIL    

10. Feuilles de styles externes, deuxième partie

1. Styles de paragraphes et textes personnels - 2. Cadres et tableaux en CSS (tableaux simples et personnalisés)

Dans le chapitre précédent de ce cours, nous avons vu l'utilisation des propriétés de pages des CSS. Nous insérions directement les propriétés dans l'en-tête HTML (entre <head> et </head>). Cette partie peut-être utilisée pour une page, mais ne permet pas de changer directement les propriétés de toutes les pages en utilisant une seule feuille de style. Comme nous avons vu au chapitre précédant, pour signaler à une page HTML ou PHP qu'elle doit utiliser la feuille de style style.css (par exemple), vous devez insérer <link rel="stylesheet" type="text/css" href="style.css"> entre <head> et </head> de votre en-tête HTML. Nous allons en plus étudier un peu plus les CSS pour des propriétés un peu plus spécifiques.

1. Styles de paragraphes et textes personnels.

C'est cette seconde possibilité que nous allons voire maintenant. Prenons la feuille de style ci-dessous:

a:link
{
color: rgb(0,0,255);
}
a:visited
{
color: rgb(255,255,153);
}
a:active
{
color: rgb(255,51,0);
}
body
{
font-family: Times New Roman,Verdana, Arial, Helvetica;
background-color:#D8EAFA;
color: rgb(0,0,0);
}
table
{
table-border-color-light: rgb(255,255,102);
table-border-color-dark: rgb(0,0,0);
}
h1, h2, h3, h4, h5, h6
{
font-family: Verdana, Arial, Helvetica;
}
h1
{
color: rgb(0,0,255);
}

Jusqu'ici, rien de bien compliqué. Nous avons déjà analyser la majorité des lignes, y compris modifier les propriétés. Nous souhaiterions créer un nouveau style de texte, appelé texte, police ARIAL, 14 pt de couleur rouge.

La ligne à ajouter est (remarquez le .texte) servant à définir texte comme style

.texte
{
font-family: Arial, Helvetica;
Color: #FF0000;
Font-size: 12.5pt;
}

Il nous reste à l'implanter dans notre paragraphe. Pour coder un paragraphe suivant un style déclaré, nous pouvons utiliser <p class="style-sans le point">texte</p>, ce qui dans notre exemple donne: <p class="texte">Le résultat.</p>

Le résultat.

Pour uniquement une partie de texte, nous allons utiliser SPAN, soit <span class="texte">une partie du texte<span>

2. Cadres et tableaux en CSS

L'utilisation de tableau est courante dans l'HTML. Ils servent finalement à tout, à structurer des données bien sûr, mais également à positionner le contenu de la page à un emplacement bien défini.

Un tableau standard se définit par différentes balises. Voici les principales

2.1. Tableau simple.

Commençons par un tableau simple et modifions un peu la présentation. Nous allons insérer la partie suivante dans notre feuille de style précédente.

table{
border: medium solid #000000;
width: 50%;
color: rgb(102,102,51);
table-border-color-light: rgb(255,255,102);
table-border-color-dark: rgb(0,0,0);
}
td, th
{
border: medium solid #000000;
width: 50%;
color: rgb(255,102,51);
}

Ceci va alléger le code. Voyons le codage de tableau suivant (standard):

<table>
<tr>
 <td width="50%"></td>
 <td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>

Nous allons le remplacer par

<table>
<tr>
<td>texte</td>
<td>texte</td>
</tr>
<tr>
<td>texte</td>
<td>texte</td>
</tr>
</table>

Remarquez tout de suite le code épuré, il n'y a plus ni les 50%, ni les font color à l'intérieur du tableau. Cette solution pose néanmoins un gros problème, c'est que tous les tableaux vont reprendre les attributs par défaut de la feuille de style et chaque tableau de la page se retrouve en bordure épaisse en noire avec une largeur de 50 % de la page.

2.2. Tableaux personnalisés.

Y a t'il moyen de ne pas imposer à tous les tableaux? Vous l'avez compris, Oui.

Un tableau se compose finalement de différentes propriétés, sa taille, l'espacement entre les cellules, la couleur et la taille de la bordure, ... Nous allons d'abord commencer par une solution simple, modifier les propriétés d'un tableau sans la largeur. Dans le fichier CSS, insérons par exemple ceci:

#table1
{
visibility: visible;
width: 100%;
position: relative;
}
#table1 table 
{
font-size: 10px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent
}
#table1 td
{
padding: 5px;
background-color: #99ff99; }

Dans la feuille de style, nous imposons la taille du tableau (100% et l'attribut visible). En deuxième partie, nous décidons quelques attributs pour le tableau comme la taille des caractères (Font-size:10px, la police et le fond (transparent)).

La dernière partie met un fond de couleur vert dans chaque cellule avec une bordure interne de 5 px pour le contenu. Le codage en html donne:

<div id="table1">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>

Finalement, on ajoute simplement <div id="table1"> devant le tableau et on termine par </div>.

1 2 3 4
1 2 3 4

Remarquez que la même chose mais en remplaçant background-color: #000000 permet de mettre les espaces du tableaux en blanc. 

1 2 3 4
1 2 3 4

Vous pouvez également utilisez le th pour modifier uniquement la première ligne du tableau (ou d'autres cellules). Au niveau de la feuille de style cela rajoute simplement

#table1 th
{
vertical-align: top;
padding: 5px;
background-color: rgb(153,153,153);
}

Dans le tableau, il suffit simplement de remplacer td par th pour les cellules qui reprennent cette propriété.

Sur le sujet:

 

<13.9. Introduction au CSS
La suite du tutorial FrontPage > 13.10. Positionnement CSS

YBET Informatique: formation débutant ou avancé

dans notre salle de formation à Florenville ou en entreprise

Renseignements, tarifs et inscriptions sur notre page formations informatiques

Mise à jour: 14/12/2007

Magasin informatique YBET à Chiny, formations

Autres formations en ligne:

Access - Excel - PowerPoint - Word - Operating System - hardware