lundi 23 octobre 2017 - 22:56
Pages web
astucesAstuces







free
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">
    <!--
    .exemple {
    font color:#ff6600;
    text-decoration: underline;
    }
    -->
    </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


firefox mozilla | Planning | Stats | Liens | w3c | css compteur