AccueilAccueil  PortailPortail  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

la balise div et ses attributs


FORT FORT LOINTAIN

i am the ruler

avatar

Messages : 118
Date d'arrivée : 24/08/2011
Âge : 19
Localisation : lorem
Humeur : lorem



Dim 16 Mar - 18:05

PREMIER COURS.



Les codes HTML de fiches sont basés sur deux balises, la balise div et la balise table.

La balise div peut se modifier à l'infini grâce aux différents attributs que l'on peut mettre dans le style comme ceci
Code:

<div style="attribut 1: propriété 1; attribut 2: propriété 2;">Texte, image, ...</div>

! Bien penser à fermer les balises !


▬ Les attributs esthétiques de base ▬

La hauteur
La hauteur (height) peut être utilisée en nombre de pixels ou bien en pourcentage.
Code:

<div style="height: 280px;">Texte, image, ...</div>
Code:

<div style="height: 75%;">Texte, image, ...</div>


▬ La largeur
La largeur (width) peut être utilisée en nombre de pixels ou bien en poucentage, tout comme la hauteur.
Code:

<div style="width: 500px;">Texte, image, ...</div>
Code:

<div style="width: 90%;">Texte, image, ...</div>


▬ La couleur
La couleur d'écriture (color) peut être utilisée avec son code significatif (le nom de la couleur en anglais) ou le code hexadécimal(les majuscules/minuscules ne font pas de différence, tu peux mêler et utiliser les deux).
Code:

<div style="color: black;">Texte, image, ...</div>
Code:

<div style="color: #000000;">Texte, image, ...</div>


La couleur de fond
La couleur de fond (background-color) peut être utilisée avec son code significatif (le nom de la couleur en anglais) ou le code hexadécimal, tout comme la couleur d'écriture.
Code:

<div style="background-color: white;">Texte, image, ...</div>
Code:

<div style="background-color: #ffffff;">Texte, image, ...</div>


▬ L'image de fond
L'image de fond (background-image) est répétée sur la hauteur et sur la longueur automatiquement.
Code:

<div style="background-image:url('URL');">Texte, image, ...</div>


La répétition de l'image de fond
Le code de la répétition de l'image de fond (background-repeat) permet de choisir si l'image doit être répétée ou non.



Répéter sur la longueur repeat-y
Répéter sur la hauteur repeat-x
Aucune répétition
(image placée dans le coin gauche en haut)
no-repeat

Code:

<div style="background-image:url('URL'); background-repeat: no-repeat;">Texte, image, ...</div>


Le contour
Le contour (border) est un attribut qui est composé de trois propriétés: la couleur, le nombre de pixels et le type de bordure. L'ordre n'a pas d'importance. Solid, qui donne une bordure simple, est le plus utilisé; les autres types de bordure sont à voir ici.
Code:

<div style="border: 2px solid #000000">Texte, image, ...</div>

Différence entre style et class
Vous avez sans doute déjà croisés des balises div se trouvant sous la forme :
Code:
<div style="attributs et propriétés">...</div>
ou
Code:
<div class="petitnom">...</div>

Le premier prend en charge directement tous les attributs que vous lui donner, le second vous demandera le nom de la balise d'un code présent dans la feuille de style css. L'utilisation de "class" est un raccourcis. Néanmoins, l'un n'empêche pas l'autre de fonctionner et on peut même combiner les deux balises (
Code:
<div class="petitnom" style="attributs et propriétés">...</div>
) même si, pour le coup, ça n'a pas grande utilité d'allonger un raccourcis....  I love you
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://test-omg.forumgratuit.org

la balise div et ses attributs

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Les attributs dans STHS
» Traitements de texte, de nouveaux attributs aux lettres
» [capacité spéciale] Attributs actifs du vent
» Le "Username"
» Les Secrets de la ChatBox

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Test Anna ;) :: 
il était une fois
 :: Cours
-