Vous pouvez personnaliser complètement votre blog ou votre site Web très facilement. Cet article montre à quel point il est facile de changer la police de l'en-tête et de l'image de fond d'une page.

Les blogueurs et les propriétaires de sites modifient généralement l'arrière-plan pour rendre leur site visuellement plus attrayant pour les visiteurs. Cependant, une image d'arrière-plan ajoutée de manière incorrecte peut semer la confusion chez le visiteur, voire provoquer une méfiance à l'égard de votre site ou blog et une réticence à le visiter à nouveau. Pour ajouter correctement l'arrière-plan, il est important d'utiliser les bons codes HTML.

Il n'y a que quelques simples avec lesquels vous pouvez changer apparence votre site existant. De nombreux utilisateurs ne réalisent même pas à quel point c'est facile.

Comment personnaliser la police

Tout d'abord, vous devrez ajouter quatre balises méta n'importe où après< head >. Vous pouvez simplement copier les symboles ci-dessous et les coller dans votre ressource, après avoir supprimé les espaces.

Comment personnaliser la couleur de fond

Ouvrez la page dans le code HTML de votre blog ou site Web. Lorsque vous modifiez une page dans Dreamweaver, vous pouvez l'ouvrir pour faciliter votre travail. Si votre site est créé à l'aide d'un créateur de site Web, certains services vous permettent de modifier vos paramètres HTML en ligne en accédant à la page Conception et en sélectionnant l'onglet Modifier HTML. Dans tous les cas, vous devriez pouvoir accéder aux codes HTML de votre blog ou de votre site Web. Le processus de configuration peut varier considérablement en fonction des services disponibles et du moteur que vous utilisez.

Cela ne vaut pas la peine d'essayer de chercher une image séparée avec une couleur différente si tout ce que vous avez à faire est de changer la couleur d'arrière-plan. Au lieu de cela, vous pouvez simplement modifier le code HTML et changer la couleur existante en celle que vous souhaitez conserver.

Vous pouvez facilement trouver le schéma Couleurs HTML dans des publications spécialisées. Chaque couleur est affichée dans le balisage sous la forme d'un code à six chiffres. Par exemple, un fond blanc est désigné par #FFFFFF.

Ainsi, trouvez le code couleur que vous souhaitez voir sur votre site comme couleur de fond. Dans le balisage, cela ressemblerait à ceci :

couleur d'arrière-plan :#XXXXXX ; (

Après avoir enregistré la couleur d'arrière-plan en HTML, vous verrez que l'apparence de votre page a changé.

Ajout d'une image de fond

Sélectionnez l'image que vous souhaitez ajouter en arrière-plan. Il existe de nombreux sites qui vous permettent de télécharger de tels arrière-plans. De plus, vous pouvez utiliser une image déjà enregistrée sur votre ordinateur.

Téléchargez l'image sur Internet. Beaucoup vous permettent de télécharger des images gratuitement. Obtenez une URL vers votre image d'arrière-plan. Pour ce faire, vous devez ouvrir l'image dans votre navigateur et copier l'URL.

Collez le code pour ajouter une image en arrière-plan. En HTML, cela ressemble à ceci :

image d'arrière-plan : url (URL de l'image) ;

Vous devez ajouter le code où le corps de la page commence dans le HTML. Enregistrez les modifications après l'édition et chargez votre site. Vous pourrez voir que l'image a complètement remplacé la couleur de fond.

Cependant, rappelez-vous que les images trop volumineuses peuvent mettre très longtemps à se charger, ce qui sera désagréable pour de nombreux visiteurs. Pour cette raison, essayez de choisir de petites images à cet effet.

Pour modifier la couleur d'arrière-plan d'une page Web entière ou d'éléments individuels, utilisez la propriété générique background ou background-color. La couleur peut être spécifiée dans n'importe quel format accessible par CSS. Les plus courantes sont les méthodes suivantes.

Par nom de couleur

Les navigateurs prennent en charge certaines couleurs par leur nom. Voilà quelque mots clés- noir (noir), blanc (blanc), rouge (rouge), vert (vert), bleu (bleu), etc.

Par valeur hexadécimale

Les nombres hexadécimaux sont utilisés pour spécifier les couleurs. Le système hexadécimal, contrairement au système décimal, est basé, comme son nom l'indique, sur le nombre 16. Les nombres seront les suivants : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Les chiffres de 10 à 15 sont remplacés par des lettres latines. Les nombres supérieurs à 15 dans le système hexadécimal sont formés en combinant deux nombres en un seul. Par exemple, le nombre 255 dans système décimal correspond au nombre FF en hexadécimal. Pour éviter toute confusion dans la définition du système de numération, le nombre hexadécimal est précédé du symbole dièse #, par exemple #666999. Chacune des trois couleurs - rouge, vert et bleu - peut prendre des valeurs de 00 à FF. Ainsi, la désignation de la couleur est divisée en trois composantes #rrggbb, où les deux premiers caractères marquent la composante rouge de la couleur, les deux du milieu marquent la composante verte et les deux derniers marquent la composante bleue. Il est permis d'utiliser une forme abrégée comme #rgb, où chaque caractère doit être doublé. Ainsi, l'entrée #fc0 doit être considérée comme #ffcc00. La casse dans ce cas n'a pas d'importance, de sorte que le texte peut être saisi à la fois en majuscules et en minuscules.

Avec RVB

Vous pouvez définir une couleur en utilisant les valeurs de rouge, vert et bleu en termes décimaux. Chacun des trois composants peut prendre un nombre de 0 à 255. Il est également acceptable de définir la couleur en pourcentage, par exemple rgb(90%, 30%, 60%).

RVBA

Le format RGBA est similaire en syntaxe à RGB, mais inclut un canal alpha qui détermine la transparence de l'élément. Une valeur de 0 est entièrement transparente, 1 est opaque et une valeur intermédiaire telle que 0,5 est translucide.

L'exemple 1 montre comment changer les couleurs d'arrière-plan et de texte.

Exemple 1 : Couleur de fond

Durabilité

La stabilité selon Lyapunov fait osciller le dispositif stable.

Résultat cet exemple illustré à la fig. une.

Riz. 1. Fond coloré

Le format RGBA vous permet de définir la couleur d'arrière-plan d'un élément sur translucide afin que l'arrière-plan de la page Web soit visible. Cela semble plus visible et impressionnant lorsque nous avons une image ou un motif d'arrière-plan, plutôt qu'une couleur unie. Ensuite, l'image apparaîtra à travers l'arrière-plan, mais la lisibilité du texte restera (Fig. 2).

Riz. 2. Fond semi-transparent

L'exemple 2 montre l'utilisation du format RGBA pour créer un tel arrière-plan.

Exemple 2 : Format RVBA

Avec de l'aide couleur CSS et arrière-plan vous pouvez définir presque n'importe quel élément de la page Web, contrôler librement l'image d'arrière-plan, sa répétition horizontalement et verticalement. De plus, en utilisant CSS, vous pouvez placer l'image d'arrière-plan n'importe où sur l'écran en utilisant le positionnement. Ne courons pas encore loin, allons dans l'ordre.

Propriété COULEUR

Cette propriété définit la couleur de l'élément, plus précisément la couleur du texte à l'intérieur de l'élément. La valeur est donnée sous l'une des formes possibles :

• nom de la couleur (VERT, NOIR, ROUGE...) ;
• code couleur hexadécimal (008000, 000000, FF0000...) ;
• code couleur décimal en RVB (color:rgb (40, 175, 250));

La propriété COLOR est héritée et si aucune valeur n'est définie pour un élément, la valeur sera héritée de son ancêtre. Mais il peut arriver qu'il ne soit pas non plus défini pour l'ancêtre - alors la feuille de style du navigateur sera appliquée en utilisant les valeurs par défaut. La couleur de l'élément dans ce cas est probablement noire.

Comme je l'ai déjà mentionné, vous pouvez définir une couleur pour presque tous les éléments, cela peut être (H1... H6), (strong, em) et même entier (p) et même les bordures de tableau, mais nous en reparlerons plus tard.

Voici un exemple de définition de la couleur du texte à l'aide de CSS :

h1 (couleur : Bleu )

Dans cet exemple, tous les titres de premier niveau de la page Web seront bleus :

fort (couleur : rouge )

Dans ce cas, tout ce qui est dans le texte de la page sera surligné avec la balise fort, deviendra rouge.

Il peut être écrit comme ceci :

h1, p, fort (couleur : vert )

Ensuite, les titres du premier niveau, tous les paragraphes et tout ce qui est mis en évidence avec une balise seront verts.

Lorsqu'il devient nécessaire de surligner des en-têtes de différentes couleurs, des sélecteurs de classe sont utilisés. Un attribut est utilisé pour définir une classe en HTML classer A qui peut être appliqué à n'importe quel élément. Dans le code HTML, vous devrez écrire :

classe="bleu"> La couleur des titres de cette classe sera bleue

Dans la feuille de style CSS, dans ce cas, nous écrivons une règle où l'élément H1 sera le sélecteur, et à travers le point ( . ) nom du cours:

h1.Bleu (couleur : bleu)

Dans les documents HTML, les sélecteurs par identifiant sont également utilisés, ils sont définis par l'attribut identifiant. Un identificateur est un attribut plus significatif ou prioritaire qu'une classe. Et si la classe et l'identifiant sont spécifiés dans le code HTML de l'élément, alors le style de l'identifiant sera appliqué. L'identifiant est indiqué par un signe dièse ( # ). Pour utiliser l'identifiant dans le code HTML, vous devrez écrire :

id="bleu"> La couleur des titres de cet identifiant sera bleue

Dans la feuille de style à son tour :

h1#Bleu (couleur : bleu )

Propriété BACKGROUND-COLOR

Cette propriété permet de définir la couleur de fond de la page dans son ensemble, paragraphe, lien, en général pour tout élément HTML. Pour ce faire, la couleur ou la valeur est spécifiée dans la valeur de la propriété. transparent(transparent). Le code du fond de page s'écrit :

corps (couleur de fond : aqua )

Dans ce cas, le fond de la page sera turquoise, et pour donner le fond au titre, on écrit :

h1 (couleur de fond : jaune )

On obtient le fond jaune des titres du premier niveau.

Couleur et arrière-plan en CSS

Propriété BACKGROUND-REPEAT

Cette propriété est utilisée lorsqu'elle est définie pour déterminer si elle se répétera horizontalement et verticalement. Valeurs valides :

• répéter- l'image est répétée verticalement et horizontalement ;
• répéter x- l'image n'est répétée qu'horizontalement ;
• répéter- l'image n'est répétée que verticalement ;
• sans répétition- l'image n'est pas répétée.

Le code est écrit comme ceci :

p(
image de fond : url( adresse du fichier image) ;
background-repeat : repeat-x
}

Le texte de ce paragraphe sera au-dessus de l'image de fond, qui sera positionnée horizontalement.

Propriété BACKGROUND-ATTACHMENT

Cette propriété est utilisée pour indiquer au navigateur si l'image de fond de la page doit défiler avec le texte ( faire défiler) ou restez immobile ( fixé).

corps (
image de fond : url( adresse du fichier image) ;
background-repeat : repeat-x ;
pièce jointe en arrière-plan : fixe
}

Dans ce cas, l'image de fond restera fixe.

Propriété BACKGROUND-POSITION

Cette propriété est utilisée pour positionner l'image par rapport à . Les valeurs sont fixées en pourcentage (%), en unités de longueur (cm, px), avec comme mots clés :

• Verticalement:
• Haut- le haut de l'image est aligné avec le bord haut de la page ou du bloc ;
• centre
• fond- le bas de l'image est aligné avec le bord bas de la page ou du bloc.
• Horizontalement :
• la gauche- le bord gauche de l'image est aligné avec le bord gauche de la page ou du bloc ;
• centre- le centre de l'image est aligné sur le centre de la page ou du bloc ;
• droit- le bord droit de l'image est aligné avec le bord droit de la page ou du bloc.

Nous écrivons un exemple de code en pourcentages, unités de longueur et mots-clés :

corps (
image de fond : url( adresse du fichier image) ;
position d'arrière-plan : 0% 0%
}

Corps(
image de fond : url( adresse du fichier image) ;
position d'arrière-plan : 10px 25cm
}

Corps(
image de fond : url( adresse du fichier image) ;
background-position : en haut au centre
}

Dans les chapitres précédents, nous avons compilé le modèle principal des documents HTML, décidé ce que sont les balises HTML, appris comment enregistrer et éditer des fichiers html, et dans ce chapitre nous Familiarisons-nous avec les attributs des balises et changer la couleur du texte et du fond de la page.

Ouvrons notre index.html, pour l'édition : Je me suis débrouillé!!! Et changeons-le un peu, ajoutons des attributs : text="#000000" bgcolor="#ffffff"> Je l'ai fait !!! Attribut est un paramètre de balise qui est inséré dans la balise sous forme de "paire" (nom du paramètre + valeur du paramètre).
Les valeurs d'attribut de balise sont insérées :
1) text=#000000 sans guillemets ;
2) text="#000000" entre guillemets simples ;
3) text="#000000" entre guillemets doubles.
Toutes ces options sont correctes, mais si vous vous souciez du code d'éthique, il est préférable d'utiliser des guillemets doubles, comme dans mon exemple ci-dessus.

Attribut "texte" contrôle la couleur du texte sur toute la page, et "bgcolor" contrôle la couleur de fond de la page.

Maintenant, je propose de parler des couleurs pour les documents HTML. La couleur est définie :
1) texte="or"- des mots en anglais, par exemple : or (or), rouge (rouge), vert (vert) et ainsi de suite...
Mais la couleur ne peut être constituée que d'un seul mot, par exemple "rouge", mais si vous écrivez "vert-rouge", le navigateur ne le comprendra pas et l'ignorera simplement.
2) texte="#000000"- Jeu de couleurs RBG (rouge vert bleu). "#" ce caractère dit que c'est un numéro de couleur, les deux premiers caractères (zéro dans mon exemple) disent combien on a pris la couleur "rouge", le deuxième vert et les deux derniers bleu.
Chaque couleur est définie de 00 à FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), par exemple #000000-black, #ffffff-white , #ff0000-red , # 00ff00- vert #0000ff-bleu

En bonus du site, je vous propose de télécharger la palette de couleurs (2kB), qui est montrée dans l'image ci-dessus. Vous devez décompresser l'archive pour exécuter le fichier couleur.html, puis sur un grand champ, placez le pointeur de la souris sur la couleur dont vous avez besoin, qui s'affichera dans une petite fenêtre, et si vous cliquez sur la souris à ce moment, le code de couleur apparaîtra dans une petite fenêtre à droite.

Revenons maintenant à notre dossier index.html et enregistrez-le sous tsvet.html, voyons maintenant ce qui s'est passé. Comment était-ce et comment est-ce? Et vous avez tout à fait raison, car le blanc est pour l'arrière-plan et le noir pour le texte est la couleur par défaut. Pour remarquer la différence, changeons les valeurs d'attribut :

texte=or" bgcolor="#0900b8"> Je l'ai fait !!! Enregistrer et regarder (s'ouvre dans un nouvel onglet)

Il existe d'autres façons de définir du texte dans des fichiers html, mais ces deux sont considérées comme les principales.

Dans le prochain chapitre, nous apprendrons comment gérer du texte avec des balises BR, comment encapsuler du texte sur une autre ligne.

17.10.2015

Pas encore

Salut tout le monde!
Nous continuons à apprendre les bases du HTML.
Dans cette leçon, je vais dire et montrer avec des exemples comment faire un fondà partir d'une couleur ou d'une image dans une page HTML.
Tout est assez simple !
Commençons par la couleur !
Je pense que vous n'avez pas manqué où j'ai parlé de la façon de changer la couleur du texte et à la fin de l'article, j'ai donné des codes pour différentes couleurs et nuances. Pourquoi vous ai-je rappelé cette leçon ? Oui, car il existe un tableau avec des codes de couleurs prêts à l'emploi, prenez-les et entraînez-vous tout de suite dans cette leçon.
Alors, comment faire un fond de couleur en HTML...

Fond de couleur en HTML

La couleur d'arrière-plan d'un document HTML est blanche par défaut. Comment définir la couleur comme vous le souhaitez?
L'attribut "bgcolor" nous y aidera. Pour peindre sur le fond, écrivez cet attribut à la balise " corps» :

Soit comme ça :

Voici le code HTML complet :

Le texte de la page sera vert et le fond noir.

Le résultat sera comme ceci :

Si vous souhaitez créer un arrière-plan à partir d'une image, ajoutez l'attribut "background" à la balise "body" :

Remplissez n'importe quelle image où se trouve votre page Web (par exemple, ma page a le nom "fon" avec l'extension ".gif") :

Voici le code HTML complet :

Le résultat sera comme ceci :

Si l'image d'arrière-plan se trouve dans le dossier images ou dans un autre dossier, elle ressemblera à ceci :

Voici le code HTML complet :

Texte de la page sur un beau fond.

C'est tout pour aujourd'hui! Je pense que la leçon n'était pas difficile et que vous avez tout compris. Si vous avez des questions, écrivez dans les commentaires.
J'ai hâte de vous voir dans les prochaines leçons.

Post précédent
Prochain article