Class et id

0 commentaires
Class et id


DIFFERENCE ENTRE CLASS ET ID
Ce sont tous les deux des sélecteurs qui permettent d'appliquer des règles à un élément.
"id" définit un élément de manière unique, alors que "class" peut être utilisé plusieurs fois
dans la page.
Nous allons donc privilégier "id" pour les boîtes à positionner, car deux éléments ne devraient
logiquement pas avoir la même position dans l'interface. De plus on peut ainsi donner des
paramètres propres à chaque élément (typo, taille, couleur, positionnement, arrière-plan,
bordure ...) avec un seul id.
Il est possible de cumuler id et class. Alors l'id est plus fort que la classe en cas de conflit. De
plus JavaScript peut manipuler les balises avec un id.
Rappelons pour terminer qu'au sein de la CSS, les id sont définis avec le signe dièse (#nom) et
les class avec un point (.nom).





Plus d'infos »

CREER UNE CLASSE PERSONNALISEE

0 commentaires
CREER UNE CLASSE PERSONNALISEE


Une classe personnalisée va être utilisée ponctuellement dans les pages du site. Le nom de la
classe doit être précédé d'un point, ne doit pas commencer par un chiffre et ne doit contenir ni
espaces, ni accent, ni caractère de ponctuation, ni tiret.
Exemple pour une classe qui met du texte en rouge sur un paragraphe :
CSS :




La valeur de la propriété de couleur peut être un mot-clef (red, green, transparent, …), un
code Hexadécimal (ex: #ff56de) ou des valeurs RVB (Rouge, Vert, Bleu) entre 0 et 255 (ex:
color: rgb(255,125,32); ).
NOTE : L'indication hexadécimale d'une couleur peut parfois être raccourcie en
regroupant par paire les lettres et chiffres. Ainsi, "#ff00ee" pourra s'écrire "#f0e".
Mais "#ff00de" ne pourra pas être raccourcie.
Les classes personnalisées peuvent s'appliquer à toutes les balises html.
Pour appliquer plusieurs classes à une même balise :
CSS :


Plus d'infos »

Syntaxe des règles CSS

0 commentaires
Syntaxe des règles CSS


Contrairement au HTML qui n'était pas très standardisé, les CSS ne laissent pas de place aux
erreurs de syntaxe. Les navigateurs ne sont pas indulgents comme pour les fautes de html.
Chaque règle doit contenir un sélecteur et une déclaration.
Les propriétés de la déclaration doivent êtres séparées par des points-virgules.
Lorsque la valeur d'une propriété est une unité de mesure et sa valeur, il ne doit pas y avoir
d'espace entre les deux :
ex:






CASSE
Les CSS ne sont pas sensibles à la casse mais par convention, on met tout en minuscules.
Le W3C recommande en outre d'écrire les codes hexadécimaux en minuscules également.
Plus d'infos »

Définition des règles CSS

0 commentaires
Définition des règles CSS


IL Y A 4 TYPES DE REGLES
• Les sélecteurs html. Il est possible de redéfinir les balises html en CSS.
• Les classes. Il s'agit de règles librement choisies qu'on peut appliquer à n'importe quelle
balise html.
• les pseudo-classes de lien.
• Les ID. À peu près le même principe que les classes, mais ne peuvent s'appliquer qu'une
seule fois dans une page.
Toutes les règles ont la même structure :
 Sélecteur (balise html, classe, pseudo-classe ou ID)
 Propriétés qui identifient ce qui est défini.
 Valeurs données à la propriété.
La paire propriété-valeur est appelée "définition"
selecteur { propriété : valeur ;}








OU PLACER LES REGLES CSS?
Il y a 3 façons d'insérer les CSS :
- dans une balise html dans le corps du document.
- dans l'en-tête du document (balise <head>).
- relié au document html à l'aide d'une balise <link ..> également dans l'en-tête.
Le navigateur lit la page, télécharge la feuille de style et l'utilise pour afficher le reste de la
page.
Dans la balise html







Dans un fichier externe relié au document :
<link rel="stylesheet" type="text/css" href="style/style.css" />
rel="stylesheet" dit que c'est un lien externe du type feuille de style type="text/css". Le
" />" est utilisé si vous choisissez le XHTML 1.0.
CREATION DE LA FEUILLE EXTERNE.
À l'aide d'un logiciel de texte basique (Notepad, NotePad++ sur PC ou TextEdit, TextMate,
TextWrangler sur Mac), créer un fichier enregistré au format texte seul, portant
l'extension .css.
Aucune balise html avec les signes < > ne doit figurer dans ce fichier !
Plus d'infos »

QU'EST CE QU'UN STYLE ?

0 commentaires
QU'EST CE QU'UN STYLE ?


Les styles regroupent différents attributs, tels que les choix de police, de taille, de couleur à
appliquer à des titres, des sous-titres … C'est ce que va faire le CSS : permettre de définir ces
attributs dans la page html à l'aide d'un code séparé. Par exemple, les balises html comme
<h1>…</h1> qui par défaut possèdent une taille ou une graisse non modifiable en html,
verront ces caractéristiques complètement redéfinissables en CSS.
PROPRIETES DES CSS
Police : taille, style, couleur.
Texte : alignement, casse, interlignage, espace entre les mots et les lettres.
Arrière-plans : couleur ou images.
Bords et marges : marges, remplissages, largeur, hauteur.
Bordures : style, épaisseurs, couleurs.
Interface : puces, indentation, curseur.
Positionnement : emplacement exact sur l'écran.
Affichage et visibilité : si un élément apparaît et comment.
Impression : comment définir l'aspect de la page à l'impression.

Plus d'infos »

Qu'est-ce que les CSS ?

0 commentaires
Qu'est-ce que les CSS ?


Pourquoi utiliser des feuilles de style ? Cascading Style Sheet (CSS)
Le principe de base est le suivant : il faut séparer le contenu de la page, de son apparence. La
page html contient l'information, et non la façon dont l'information est affichée. Pour un unique
contenu : plusieurs affichages sont possibles. On peut penser à des affichages monochrome,
sur de petits écrans, oral (le contenu de la page web est lu), une impression papier,
impression sur des transparents, impression en braille…


VERSIONS DE CSS
• CSS1 publié en 1996 .
• CSS-P (CSS positioning) permet le positionnement d'éléments.
• CSS2 est une recommandation de mai 1998 qui inclut les attributs des deux précédentes
versions. L'accent a été mis sur l'accessibilité et la capacité à avoir un style différent selon les
media.
• CSS3 : encore en cours de construction. Nouveautés : multicolonnage, SVG, styles sur les
polices (embossage...), arrondir les coins des boîtes, utiliser des images de fond dans les
bordures, des ombres portées...
Plus d'infos »

Chapitre 12 : Les cellules des tableaux

0 commentaires
Chapitre 12 : Les cellules des tableaux


Nous n'en avons pas fini avec les tableaux. Allons plus loin dans notre étude en nous penchant sur les cellules de
ces tableaux.
Avant toutes choses, les cellules peuvent contenir tous les éléments Html déjà passés en revue soit :
· du texte
· des images
· des liens
· des arrière-plans
· et même des tableaux (eh oui!)
Bien que l'allure de votre tableaux soit déjà déterminée, chaque cellule est en quelque sorte un petit univers à part
qui a ses propres spécifications. Découvrons les balises.
Largeur d'une cellule <TD width=?> en pixels
<TD width=%> en pourcentage
Fusion de lignes <TD rowspan=?>
Fusion de colonnes <TD colspan=?>
Découvrons ceci par des exemples.
Je veux un tableau centré qui occupe 60% de la fenêtre avec sur une ligne, trois colonnes égales. Essayons ceci :
<CENTER><TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD>
</TR>
</TABLE></CENTER>




Impeccable! Prenons le même tableau mais avec 2 lignes.
<CENTER><TABLE width=60% border=1>

<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
<TR><TD width=33%>cellule1</TD><TD width=33%>cel. 2</TD>
<TD width=34%>3</TD></TR>
</TABLE></CENTER>

Dans le même style, je souhaite que la première colonne prenne toute la hauteur de la colonne. La première
cellule doit donc déborder sur 2 cellules verticales.
<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>
Maintenant, comme le disait un gardien de prison de mes connaissances, il est temps de mettre de l'ordre dans les
cellules [Je n'ai pas pu résister...].
Ligne de tableau <TR align=left/center/right>
<TR valign=top/middle/bottom>
horizontalement
verticalement
Cellule de tableau <TD align=left/center/right>
<TD valign=top/middle/bottom>
horizontalement
verticalement
A titre d'exemple, reprenons le tableau suivant :


Pour terminer cette leçon, il est aussi possible de changer la couleur de la cellule.
Couleur de la cellule <TD BGCOLOR="#$$$$$$">
Notre dernier exemple pourrait devenir :
<TD colspan=3 align=center bgcolor="#000088">

Plus d'infos »

page

 

Copyright © 2010 • skawprof • Design by Dzignine