AccueilFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez
 

 Introduction au CSS - Mettre un fond à sa page [Facile]

Aller en bas 
AuteurMessage
Reisei
[Gold Member]
[Gold Member]
avatar

Masculin Nombre de messages : 1320
Age : 110
Date d'inscription : 26/05/2007

Porte-Monnaie
Crédits: 190

Introduction au CSS - Mettre un fond à sa page [Facile] Empty
MessageSujet: Introduction au CSS - Mettre un fond à sa page [Facile]   Introduction au CSS - Mettre un fond à sa page [Facile] Icon_minitimeJeu 25 Oct - 22:00

Introduction au CSS - Mettre un fond à sa page [Facile]


Introduction
Dans ce tutoriel, je vais vous présenter le langage CSS, utilisé pour faire le design et la mise en forme des sites web ainsi qu'une de ses nombreuses fonctions: la fonction Background qui vous permet de mettre des fonds à vos pages web.

CSS, késako ?
L'acronyme CSS signifie Cascading Style Sheets (Feuilles de style en cascade) et permet de créer la mise en page et l'inscrustation du design dans une page web.
Introduction au CSS - Mettre un fond à sa page [Facile] Pageaveccssvp9

Une page web avec son CSS

Introduction au CSS - Mettre un fond à sa page [Facile] Pagesanscssep3

La même page sans son CSS

Le CSS a été créé vers le début du web et a connu plusieurs versions depuis. Au commencement, les premiers navigateurs internet utilisaient un système de feuilles de style mais il ne prit le nom de CSS qu'en 1994.
Le CSS permet de faire de nombreuses choses, dont: mettre un fond à votre page, changer la couleur des polices, la mise en page du design et des divers éléments de la page... Dans ce tutoriel, nous allons apprendre à mettre un fond à une page web.

Comment programmer en CSS ?
Pour programmer en CSS, il vous faut connaître le langage XHTML (lire le tuto de Night pour l'apprendre).
Il vous faut aussi un logiciel de traitement de texte personnalisé. Bien que le bloc notes fasse largement l'affaire, je vous conseille de télécharger Notepad++ qui vous permet d'organiser et de colorer votre code dans de nombreux langages.

Comment utiliser Notepad++
Lancez le logiciel. Voici une présentation de la fenêtre principale:
Introduction au CSS - Mettre un fond à sa page [Facile] Phpchap11mx2
Allez dans le menu langage puis cliquez sur CSS. Comme ça votre code sera coloré Wink.
Introduction au CSS - Mettre un fond à sa page [Facile] Ouvrircssmi2

Afficher son CSS dans sa page web
Pour afficher votre CSS dans votre page web, insérez ce code entre les balises <meta> et </head>:
Citation :
<link rel="stylesheet" media="screen" type="text/css" title="Mon CSS" href="css.css" />
Légende:
A la suite de title=, entre les deux guillements, mettez le nom de votre fichier CSS, ici Mon CSS.
A la suite de href=, entre les deux guillemets, mettez l'adresse de votre fichier CSS à partir de la page web, ici css.css. Le fichier css.css est donc situé dans le même répertoire que ma page web.

Structure d'un code CSS
Nous arrivons maintenant dans la partie la plus importante de ce tutoriel: l'utilisation de la balise background (Traduction: arrière-plan) qui va nous permettre d'afficher un fond à notre page.
Avant d'apprendre à utiliser cette fonction, voyons déjà comment l'utiliser.
Citation :
p /* ^_^ */
{
background:url("fond.png") no-repeat fixed top left;
}
La lettre p représente le type de balise concerné (ici: <p></p>). Vous pouvez bien sur utiliser d'autres balises (h1 pour <h1></h1>...). Mais vous pouvez utiliser vos propres balises en utilisant les class d'XHTML.
/* ^_^ */ représente une citation. /* indique le début de la citation, */ sa fin et ^_^ son contenu. Rappel: Une citation est une annotation que vous pouvez mettre dans votre fichier CSS mais qui n'apparaîtra pas à l'écran. Ce système est très utile, notamment pour expliquer le code facilement à quelqu'un.
{ réprésente le début du code CSS.
background:url("fond.png") no-repeat fixed top left; est la propriété CSS (le rendu de notre tuto). Une propriété se compose ainsi:
Citation :
nom_de_la_propriété:propriété;
} indique la fin du CSS.

A vos claviers !
Chargez votre page XHTML sur votre serveur et affichez-la. Vous voyez affichés le texte, les images, tout ça sur un fond blanc.
Ainsi, grâce à la propriété background, à la fin de ce tutoriel, vous saurez mettre une image de fond, une couleur de fond, répéter l'image, régler la position de l'image, mettre si l'image se répète ou non, et tout ça en une seule ligne de code CSS.

Balise concernée
Commençons par choisir la balise concernée par notre code. Notre code concernant toute la page, nous allons toucher à la balise body.
Voici donc notre code:
Citation :
body
{
}

Un fond en couleur
Commençons par aborder la fonction la plus simple de background, la mise en place d'une couleur de fond. Après avoir lu les quelques lignes suivantes, vous saurez mettre un fond rouge, vert ou bleu à votre site. Nous allons utiliser comme propriété background-color.
Citation :
body
{
background-color: ;
}
Comme son nom l'indique, cette propriété va nous permette de mettre une couleur de fond à notre page web.
Afin d'y parvenir, vous pouvez rentrer comme valeur red, green ou blue. Voici les noms et rendus de ces couleurs: red, orange, white, black, green, blue, yellow...
Imaginons que nous voulions mettre un fond noir à notre page:
Citation :
body
{
background-color: black;
}
Chargez les fichiers sur votre serveur et admirez-les: incroyable notre page est maintenant écrite sur fond noir !
Mais il existe une autre façon, plus poussée de représenter les couleurs: la façon héxadécimale. La notation héxadécimale s'écrit sous la forme suivante: #FFFFFF (ici la couleur blanche). Ce système est plus compliqué que l'autre mais vous permet de choisir parmi bien plus de couleurs. Afin de connaître certains de ces codes, rendez-vous sur ce site.
Pour notre exemple, imaginons que je souhaite mettre un fond bleu assez clair pour ma page, je devrais mettre ce code-ci:
Citation :
body
{
background-color: #0099FF;
}
Uploadez, visionnez et vous pouvez voir que votre page est désormais écrite devant un joli bleu ciel Wink.
Notez bien qu'il existe une autre façon de choisir une couleur: la façon RGB (Red, Green, Blue) qui consiste à rentrer comme valeur l'importance de rouge, vert et bleu dans la couleur souhaitée. Cette méthode étant moins utile que les précédentes, je ne vous la présente pas.

Un fond en image
Nous approchons de la fin du tutoriel, nous allons maintenant apprendre à intégrer une image comme image de fond. Ici, la propriété utilisée sera background-image.
Voici le code par défaut:
Citation :
body
{
background-image:url("");
}
Contrairement à la fonction background-color, vous n'aurez pas besoin de beaucoup d'explications pour apprendre à utiliser cette fonction.
L'explication: vous devez mettre l'adresse internet ou le chemin depuis le CSS de votre image de fond.
Exemples:
Citation :
body
{
background-image:url("http://site.com/images/fond.png");
}
Citation :
body
{
background-image:url("fond.png"); /* Ici, le fichier fond est situé dans le même répertoire que le CSS */
}
Testez l'un de ces deux codes. Que voyez-vous ?
Et oui, votre image de fond se répète derrière votre texte Wink.
Dans les prochaines parties, nous apprendrons à placer l'image et à gérer sa répétition Wink.

Fixer le fond
Après avoir placé notre image en fond du site, nous avons constaté qu'elle se répétait et qu'elle se déplaçait avec vous. Nous allons maintenant apprendre à la fixer afin qu'elle ne bouge plus lorsque vous vous déplacez dans la page. Ici encore, la propriété utilisée est très simple: il s'agit de background-attachment. Cette propriété a deux valeurs possibles: fixed et scroll. Utilisons maintenant ces deux propriétés.
Citation :
body
{
background-image:url("fond.png");
background-attachment: fixed;
}
Avec la valeur fixed, votre fond restera fixe.
Citation :
body
{
background-image:url("fond.png");
background-attachment: scroll;
}
Avec la valeur scroll, votre fond défilera avec votre page (par défaut).
Et voilà, rien de plus simple Wink.

Répéter le fond
Vous êtes devenu aveugle à force de lire ce tutoriel sans fin ? Je vous rassure, la fonction de répétition du fond est un des derniers points abordés dans ce tutoriel Wink.
Avec la propriété background-repeat, nous verrons comment faire pour que notre fond se répète, ne se répète pas, se répète de gauche à droite ou se répète de haut en bas.
Pour comprendre comment s'utilise cette fonction, rien de plus clair que des exemples:
Citation :
body
{
background-image:url("fond.png");
background-repeat: repeat;
}
Avec la valeur repeat, votre fond se répètera (par défaut).
Citation :
body
{
background-image:url("fond.png");
background-repeat: no-repeat;
}
Avec la valeur no-repeat, votre fond ne se répètera pas.
Citation :
body
{
background-image:url("fond.png");
background-repeat: repeat-x;
}
Avec la valeur repeat-x, votre fond se répètera tout en haut de votre page, à l'horizontale.
Citation :
body
{
background-image:url("fond.png");
background-repeat: repeat-y;
}
Avec la valeur repeat-y, votre fond se répètera à gauche de votre page, à la verticale.
Nous allons maintenant attaquer le dernier point de ce tutoriel:

Positionner le fond
Dans cette partie, nous apprendrons, en utilisant la propriété background-position à placer l'image de notre fond où l'on veut.
Comme toujours, quelques exemples:
Citation :
body
{
background-image:url("fond.png");
background-position: top right;
}
Avec la valeur top right, votre fond sera placé en haut à droite de votre page.
La combinaison fonctionne par paire: une première partie où vous indiquez si vous souhaitez mettre le fond au centre (center), en haut (top) ou en bas (bottom) et une seconde partie où vous indiquez si vous placer le fond au centre (center), à gauche (left) ou à droite (right). Séparez bien les deux parties par un espace Wink.
D'autres exemples:
Citation :
body
{
background-image:url("fond.png");
background-position: bottom right;
}
Le fond sera situé en bas à droite de la page.
Citation :
body
{
background-image:url("fond.png");
background-position: bottom left;
}
Le fond sera situé en bas à gauche de la page.
Citation :
body
{
background-image:url("fond.png");
background-position: top left;
}
Le fond sera situé en haut à gauche de la page (par défaut).
Vous croyez en avoir fini ? Et bien vous vous trompez car il existe une deuxième méthode de déplacement du fond. Elle utilise elle aussi background-position mais elle permet des déplacements bien plus précis.
La méthode n'est pas très dure à comprendre, donc voici un exemple:
Citation :
body
{
background-image:url("fond.png");
background-position: 300px 200px;
}
Ici, votre image sera placé à 300px vers la droite et à 200px vers le bas.

Méga-propriété
Nous voici actuellement dans la dernière partie de ce tutoriel. Vous venez d'apprendre divers moyens d'utiliser le fond en CSS. Vous pouvez bien entendu les utiliser tous d'affilée dans votre code, mais, afin de rendre le code plus lisible, nous allons utiliser la méga-propriété de fond qui va nous permettre de tout résumer en une ligne. Elle se nomme background et voici son explication:
Citation :
body
{
background:url("fond.png") no-repeat fixed bottom left;
}
La propriété est suivie de l'adresse du fond, de se répétition, de sa fixation puis de sa position.
Ainsi, nous venons d'apprendre à créer notre fond en CSS et tout ça en une seule ligne de code Wink.
Je rajoute au passage que nous venons d'aborder l'un des points les plus utile de CSS.

Merci d'avoir lu ce tutoriel et à bientôt pour un nouveau tuto Wink.
Pour les questions, Arrow Aide.

EDIT Moi: Je vérouille, merci à WT pour les crédits Wink.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Reisei
[Gold Member]
[Gold Member]
avatar

Masculin Nombre de messages : 1320
Age : 110
Date d'inscription : 26/05/2007

Porte-Monnaie
Crédits: 190

Introduction au CSS - Mettre un fond à sa page [Facile] Empty
MessageSujet: Re: Introduction au CSS - Mettre un fond à sa page [Facile]   Introduction au CSS - Mettre un fond à sa page [Facile] Icon_minitimeSam 24 Nov - 1:59

Je poste pour signaler que la suite de ce tuto ne devrait jamais être créée.
Je suis désolé, peut-être qu'un autre formateur programmeur pourra reprendre mon travail.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
Introduction au CSS - Mettre un fond à sa page [Facile]
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Comment mettre un screen à partir d'un hébergeur d'images sur internet.
» Quel est votre fond d'écran ?
» Introduction au développement de script sur NabCloud.fr (Et bientôt tous les serveurs OJN)
» [HD][TUTO] Comment profiter de son fond d'écran à fond! by Tropik
» Go mettre des fonds d'écran en avatar.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Intrographic :: Section programmation :: Création de site :: XHTML & CSS-
Sauter vers: