Les différentes catégories d'attributs de styles en CSS

Les différentes catégories d'attributs de styles en CSS

fleche

Couleurs et images d'arrière plan - décoration de polices de caractères - mise en forme de blocs de caractères - modèle de boîtes englobantes - et le positionnement absolu

Que ce soit dans une feuille de style externe ou incorporé directement dans votre page, voici quelques attributs de style en css que vous pourrez utiliser pour égayer vos textes et parfaire la mise en page.

Prenons un conteneur comme div par exemple, puis pour utiliser ces attribus de style, nous avons deux possibilitées:

En passant par les class:

Dans une feuille de style CSS:

.exemple {

font color:#ff6600;

text-decoration: underline;
}

ou entre les balises <head> et </head>

<style type="text/css">

</style>

Puis taper ce code Html après <body>:

<div class="exemple">Notre texte orange et souligné </div>

Voici le résultat:
Notre texte orange et souligné.
Ou alors directement à l'endroit où vous souhaitez placer l'effet de style dans la page:

<div style="color:#ff6600; text-decoration: underline;">texte orange et souligné</div>

Même résultat:
texte orange et souligné

Couleurs et images d'arrière plan

Attributs	Descriptif	Exemple
color	Permet de fixer la couleur d'avant-plan.	color: blue; color: #0000FF;
background	Permet de fixer la couleur d'arrière-plan.	background: red; background: #FF0000;
background-image	Permet de fixer une image d'arrière plan. Une image d'arrière plan prévaut sur la couleur d'arrière-plan.	background-image: url('votre-fond.gif');

Décoration de polices de caractères

Attributs	Descriptif	Exemple
font-family	Cet attribut permet de spécifier la police de caractère à utiliser. Au cas ou la police n'existerait pas, il est possible de spécifier une liste de choix. La première police trouvée à partir de la gauche est appliquer.	font-family : courier;
font-weight	Permet de fixer le poids (ou la graisse) de la police de caractères.	font-weight: bold;
font-style	Permet de mettre le texte en italique.	font-style:italic;
font-size	Permet d'augmenter la taille de la police de caractères.	font-size:large; font-size:x-large; font-size:20px;
font-size	Permet de diminuer la taille de la police de caractères.	font-size:small; font-size:x-small; font-size:10px;
text-decoration	Texte souligné barre au dessous du texte texte souligné +barre au dessus texte barré texte clignotant	text-decoration:underline; text-decoration:overline; text-decoration: overline underline; text-decoration: line-through; text-decoration: blink;
text-transform: uppercase	Forcer l'affichage du texte en capitales : text-transform: uppercase;	text-transform: uppercase;
line-height	Pour spécifier une hauteur de ligne	line-height: 2.5em; line-height: 2.5em; line-height: 1em; line-height: 1em;

Les principaux éléments créant des blocs sont :

l'élément div ;
les titres h1, h2, h3, h4, h5, h6 ;
le paragraphe p ;
Les listes et éléments de liste ul, ol, li, dl, dd ;
Le bloc de citation blockquote ;
Le texte pré-formaté pre ;
L'adresse address.

Mise en forme de blocs de caractères

Attributs	Descriptif	Exemple
text-align	Cet attribut spécifie l'alignement du bloc texte.	text-align: center; text-align: left; text-align: right; text-align: justify;
text-indent	Permet de définir le retrait de la premier ligne du bloc de texte.	text-indent: 10pt; text-indent: 15px;

Gestion des boîtes englobantes

Attributs	Descriptif	Exemple
width	Permet de spécifier la largeur de l'élément, taille de bordure comprise.	width: 80pt; width: 10px; width:80%
height	Permet de spécifier la hauteur de l'élément, taille de bordure comprise.	height: 25%;
padding padding-top padding-bottom; padding-left padding-right	Le padding correspond à l'espace interne d'une cellule (entre le contenu et la bordure). Plutôt que de spécifier le padding pour les quatre cotés, on peut le spécifier individuellement coté par coté. Cette marge interne prend comme couleur, celle de l'arrière plan de l'élément considéré.	padding:10px; padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px;
margin margin-top margin-bottom margin-left margin-right	La marge externe n'est pas prise en compte dans la taille de l'objet. Elle est de plus transparente. Vous pouvez aussi la spécifier individuellement pour chaque coté.	margin: 10px; margin-left:10% margin-right: 10%;
border border-style border-width border-color border-top-style	Ces attributs permettent de spécifier les caractéristiques de la bordure (son style de bordure, sa taille et sa couleur)	border-style: solid; border-width: 4px; border-color: #0000FF; border-top-style: ridge; border-right-style:dotted;

Positionnement relatif et absolu

Attributs	Descriptif	Exemple
position	Cet attribut peut prendre deux états : soit relative, soit absolute. Cela permet d'indiquer si l'on reste en positionnement relatif (valeur par défaut) ou si l'on passe en positionnement absolu (dans ce cas top et left valent, par défaut, 0 et peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix.	position: relative; bottom: 15px; background-color: #ffff00; position: absolute; top:50px; right:-50px; background-color: #ff0000;
display	Permet d'indiquer quel est le mode d'affichage de l'élément. Trois états sont utilisables : none (l'élément n'est pas affiché : il occupe zéro pixels) - inline (il s'affiche à la suite de l'élément précédent) - block (des retours à la ligne sont insérés avant et après l'élément).	style="display: none; display: inline; display: block;
top	Distance entre l'élément et le haut de la page web.	top: 10px; top: 10pt; top: 20%;
left	Distance entre l'élément et la bordure gauche de la fenêtre.	left: 150px; left: 100pt; left: 15%;
z-index	Permet de fixer le niveau de profondeur d'un élément. Les éléments de plus grosses valeurs seront affichés en avant-plan.	z-index: 100;

[Retour Haut de la page]

--> Retour au sommaire des Pages web