Apprenez comment structurer et non surcharger le code CSS en utilisant les bonnes pratiques. Utilisez les commentaires et les sprites CSS!

La propriété CSS position permet de changer le comportement d’affichage des blocs. La valeur par défaut de cette propriété est static qui définit l’affichage normal. Mais nous nous pencherons plutôt vers les autres propriétés qui s’avèrent intéressantes :

• position:relative;
• position:absolute;
• position:fixed;

HTML sert à structurer un contenu, par exemple titre, insertion d’images, liens internet. CSS est l’abréviation de Cascading Style Sheet, qui pourrait se traduire par Feuilles de Style en Cascade.

Le CSS offre une immense variété de nouvelles façons de modifier le design de vos sites web, sans pour autant impliquer de grandes modifications. Ce premier tutoriel vous donnera une introduction très basique aux nouvelles possibilités créées par le standard.
Les bordures, avec le CSS, atteignent un niveau supérieur offrant la possibilité d’utiliser des dégradés, des coins arrondis, des ombres et des bordures d’images.

Cours CSS complet avec notions de base HTML? vous pouvez télécharger des cours CSS pdf sur les techniques webmasters et apprendre comment utiliser HTML et CSS, vous allez aussi pouvoir améliorer vos connaissances sur les bases du langage Cascading Style Sheets sans difficultés. Aussi une sélection des meilleurs formations et cours avec exercices corrigés pour apprendre la programmation CSS du niveau débutant à experts.

Où mettre le code CSS ?
n Directement dans l’en tête d’une page (entre les balises et)
Ex : …mon code css….
n Dans un fichier séparé (déclaré entre les balises et)

Quelques propriétés usuelles :
n color : couleur du texte;
n backround-color : couleur de fond;
n border : taille, format et couleur de la bordure
n Ex : border : 1px dotted white;
n width : largeur de l’élément;
n height : hauteur de l’élément;
n padding : marge interne;
n margin : marge externe;
n text-align : alignement du contenu dans l’élément;
n font-size : taille du texte
n font-family : police(s) du texte

Positionnement absolu :
Avec le positionnement absolu, l’élément est détaché complètement du flux. Sa position n’est plus définie par rapport à la normale. Si la page est considérée comme une sorte de repère, l’élément sera placé par rapport à ce repère suivant les coordonnées définies. Les propriétés bottom, left, right ou top définiront ses positions comme suit :
• left : par rapport à la gauche de la page
• right : par rapport à la droite de la page
• top : par rapport au haut de la page
• bottom : par rapport au bas de la page
Le positionnement absolu nous donne alors une possibilité plus étendue au niveau du placement des blocks. Grosso modo, il nous permet de placer un block à n’importe quel endroit de la page que ce soit en haut à droite, ou en bas à gauche, ou etc.

Positionnement Fixed :
La propriété position:fixed pourrait nous être avantageuse dans certains cas. Un petit rappel, comme d’habitude : quand nous avons étudié les fond, le background-attachment:fixed nous a permis de ne pas bouger le fond même si on fait défiler la page. L’idée du positionnement fixe est identique.
On place un élément sur la page, il y reste visible même si on fait défiler la page. Un cas très pratique est le cas des menus. Si on veut par exemple qu’un menu reste visible quand le visiteur parcourt la page, on le met en position fixe sur une partie de la page.
Cependant, il y a quand même un petit souci. Certains navigateurs non conformes aux standardsCSS2 ne prennent pas en compte cette propriété. A tout problème il y a une solution. Mais ce thème ne sera pas abordé dans ce tutoriel. Si vous êtes confronté à ce problème, on vous laisse le soin de trouver la solution en question.
La dernière propriété c’est la position:inherit (CSS2) qui permet de dire que l’élément en question hérite de la propriété position de son parent. Si la position du parent est de type relatif, l’élément concerné sera aussi positionné de façon relative.

Mettre en page le contenu avec des tables et des boîtes de CSS, apprenez à travers ce cours pour optimiser le design de votre site web avec les tables et CSS. Les tables et CSS expliqués!