Avec de l'aide CYS CSS et fond Vous pouvez spécifier presque tous les éléments d'une page Web, contrôler librement l'image d'arrière-plan, il est répété horizontalement et vertical. De plus, des moyens CSS peuvent être placés l'image d'arrière-plan à tout moment de l'écran à l'aide de positionnement. Nous n'irons pas encore loin, allons-y en ordre.

Propriété de couleur

Cette propriété définit la couleur de l'élément ou plutôt la couleur du texte à l'intérieur de l'élément. La valeur est donnée par l'une des formes possibles:

• nom de couleur (vert, noir, rouge ...);
• code de couleur SUPANTE (008000, 000000, FF0000 ...);
• code de couleur décimale dans RVB (Couleur: RVB (40, 175, 250));

La propriété couleur est héritée et avec une valeur non spécifiée pour aucun élément, la valeur est héritée de son ancêtre. Mais il peut s'avérer que pour l'ancêtre, il n'est pas spécifié - alors la table des styles de navigateur sera appliquée à l'aide des valeurs par défaut. La couleur de l'élément dans ce cas est le plus probable noir.

Comme je l'ai déjà mentionné, vous pouvez définir la couleur sur presque tous les éléments, cela peut être (H1 ... H6), (fort, em) et même entier (P) et même les frontières des tables, mais cela plus tard.

Nous voyons un exemple d'un travail de couleur de texte utilisant CSS:

h1 (couleur: bleu)

Dans cet exemple, toutes les titres du premier niveau de la page Web seront bleues:

fort (couleur: rouge)

Dans ce cas, tout ce que dans le texte de la page sera mis en évidence par une balise fort., Il se transforme en une couleur rouge.

Vous pouvez écrire comme ça:

h1, p, fort (couleur: vert)

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

Lorsqu'il est nécessaire de mettre en évidence les titres de couleurs différentes, les sélecteurs de classe sont utilisés. Un attribut est utilisé pour définir une classe dans HTML classerqui peut être appliqué à tous les articles. Dans HTML - Le code devra écrire:

classe \u003d "bleu"\u003e La couleur des en-têtes de cette classe sera bleue

Tableau styles CSS.Dans ce cas, nous écrivons la règle où le sélecteur sera l'élément H1, et à travers le point ( . ) Nom du cours:

h1.blue (couleur: bleu)

Dans les documents HTML, les sélecteurs d'identifiant sont également utilisés, ils sont déterminés par l'attribut. identifiant. L'identifiant est une fonction plus importante ou prioritaire qu'une classe. Et si une classe et un identifiant seront également spécifiés dans le code HTML pour l'élément, le style d'identifiant s'appliquera. Désigne l'identifiant du panneau de réseau ( # ). À utiliser dans le code HTML - Identifiant, vous devrez écrire:

id \u003d "bleu"\u003e La couleur des titres de cet identifiant sera bleue

Dans la feuille de style à tour de rôle:

h1 # bleu (couleur: bleu)

COULEUR DE L'ARRIÈRE PLAN

Cette propriété vous permet de définir la couleur de fond de la page dans son ensemble, paragraphe, des liens, en général pour tout élément HTML. Pour ce faire, la valeur de la propriété indique la couleur ou la valeur transparent(transparent). Le code de la page d'arrière-plan est écrit:

corps (couleur-couleur: aqua)

Dans ce cas, le fond de la page sera couleur turquoiseet donner une en-tête d'arrière-plan écrire:

h1 (couleur-couleur: jaune)

Nous obtenons un fond d'en-tête de premier niveau jaune.

Couleur et fond dans CSS

Contexte de répétition

Cette propriété est appliquée lorsqu'elle est définie pour déterminer si elle sera répétée 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 que horizontalement;
• répéter-y. - L'image n'est répétée que par vertical;
• non-répéter. - L'image n'est pas répétée.

Le code est écrit comme ceci:

p (
arrière-plan-image: URL ( fichier image avec image) ;
contexte-répéter: répéter-x
}

Le texte de ce paragraphe sera en haut de l'image de fond qui sera horizontalement.

Propriété de fond-attachement

Cette propriété est appliquée pour spécifier le navigateur, si l'image de fond de la page faites défiler avec le texte ( faire défiler) ou rester fixe ( fixé).

corps (
arrière-plan-image: URL ( fichier image avec image) ;
fond-répéter: répéter-x;
background-attachement: fixe
}

Dans ce cas, l'image d'arrière-plan restera immobile.

Propriété de position de fond

Cette propriété est utilisée pour localiser l'image relatif. Les valeurs sont spécifiées sous forme de pourcentage (%), de longueurs de longueur (cm, px), de mots-clés:

• Verticalement:
• haut. - Le haut de l'image est aligné sur le bord supérieur de la page ou du bloc;
• centre
• bas - Le bas de l'image est aligné sur le bord inférieur de la page ou du bloc.
• Horizontalement:
• la gauche. - le bord gauche de l'image est aligné sur le bord gauche de la page ou du bloc;
• centre - le centre de l'image est nivelant au centre de la page ou du bloc;
• droite - Le bord droit de l'image est nivelé sur le bord droit de la page ou du bloc.

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

corps (
arrière-plan-image: URL ( fichier image avec image) ;
contexte de fond: 0% 0%
}

Corps (
arrière-plan-image: URL ( fichier image avec image) ;
fond-position: 10px 25cm
}

Corps (
arrière-plan-image: URL ( fichier image avec image) ;
background-Position: Centre supérieur
}

Bonjour, chère blog lecteurs site web. Aujourd'hui, nous examinerons cinq règles CSS qui vous permettront de définir un arrière-plan pour n'importe quel élément de HTML - Position d'arrière-plan (image, répétition, couleur, pièce jointe). Eh bien, et sur la règle composite, l'arrière-plan n'oubliera pas de mentionner.

Rien n'est difficile dans cela, mais il y a certaines subtilités et nuances que vous devez savoir et déjà prêts pour le modèle (rappelez-vous que le Pro, qui aidera à ouvrir tout le retrait de toute conception).

Encore une fois, je vous rappelle que cet article est inclus dans la série et la meilleure chose à faire pour commencer à apprendre le marquage de style au début, à savoir à partir de l'article sur ce que CSS est et avec ce qu'il est mangé, bien, puis suivez dans la ordre spécifié dans le répertoire. Bien que, en tout cas, vous décidez de vous et parlons maintenant de la tâche.

Couleur, couleur et arrière-plan-image

Voyons d'abord comment la couleur est définie Éléments html passant par Règles CSS couleur. En fait, tout est simple. La syntaxe est complètement ordinaire et la couleur que vous pouvez définir conformément à la manière dont elle a été faite dans la langue du balisage hypertexte. Comment vous rappelez-vous défini après le panneau de réseau (hesha - "# Fe35a3"), ou à l'aide de trois chiffres, si le premier coïncide avec la valeur du deuxième, troisième avec le quatrième, le puits et le cinquième, respectivement, respectivement, Avec le sixième (code de couleur "# AA33FF", vous pouvez enregistrer brièvement comme "A3F").

De plus, les couleurs dans le code HTML et CSS peuvent être représentées comme des mots (par exemple, "rouge"), mais le code hexadécimal est le plus souvent utilisé:

Couleur: # 303

Par exemple, j'ai peint ce petit paragraphe à la couleur ci-dessus (n ° 303). Maintenant, il est légèrement différent de la couleur de tous les autres paragraphes (sombres), qui est demandé comme # 555 dans le fichier CSS en utilisant moi thèmes WordPress. Mais la tâche de couleur à travers la couleur est assez simple, mais avec le fond, ce sera un peu plus compliqué.

Donc, pour l'arrière-plan dans le CSS Répondez à cinq règles qui, si vous le souhaitez, peuvent être combinées dans une seule équipe. Pour les voir, vous pouvez aller à la page de spécification du consortium W3C et recherchez-la avec un fond de mot:

1. couleur de fond - avec cette règle, la couleur de l'arrière-plan est définie pour n'importe quel élément HTML. Il peut utiliser un code ou le nom de l'ombre, c'est-à-dire Tout ce qui était exactement lors de l'utilisation de la couleur.

image d'arrière-plan - en l'utilisant, vous pouvez utiliser l'image comme arrière-plan comme fond (mais assurez-vous de lire à ce sujet, les images lourdes ralentiront le chargement de la page), le chemin qui sera spécifié dans la fonctionnalité d'URL () .

Si vous regardez dans la spécification, vous verrez que fond de couleur par défaut Dans n'importe quel élément, il y aura une couleur transparente (valeur par défaut "de couleur: transparente" règle). Vrai, dans les éléments, il ne sera pas transparent par défaut, car c'est Éléments du système Et ils ont tout différemment et diffère des étiquettes habituelles de la langue du marquage hypertexte.

La couleur dans la couleur de fond est définie standard (six ou trois numéros de code hexadécimal, ou un mot):

Couleur de fond: #fefcde

Par exemple, le fond de ce paragraphe est donné exactement à travers la couleur d'arrière-plan avec un code de couleur légèrement plus élevé.

Toutes les quatre autres règles CSS ne toucheront que l'image d'arrière-plan, qui peut être spécifiée pour n'importe quel élément HTML et, si vous le souhaitez, il est précisément positionné. Quel fichier graphique sera utilisé, vous pouvez définir en utilisant image de fond..

Si vous regardez la spécification de la langue de balisage de style, vous verrez que la valeur «aucune» par défaut est utilisée par défaut (c'est-à-dire aucune image de l'arrière-plan). Eh bien, s'il est toujours nécessaire, alors dans la fonctionnalité URL (), vous devrez spécifier le chemin d'accès:

Arrière-plan-image: URL (https: //set/image/comment_top_focus.gif);

Par exemple, pour ce paragraphe, j'ai utilisé un fichier graphique avec un arrière-plan, le chemin qui est décrit légèrement ci-dessus. Vous voyez que toute la zone affectée à ce paragraphe était couverte d'une image répétée qui, dans l'original, elle a ce genre:

Ceux. Lorsque vous utilisez une seule règle d'image de fond, indiquez le chemin d'accès au fichier graphique, cette image sera multipliée à la fois par verticale et horizontalement jusqu'à ce qu'elle couvre toute la zone allouée sur la page Web sous cet élément HTML particulier (paragraphe de notre exemple. ). Pourquoi cela arrive-t-il?

Fond-répéter - image de fond répétée

Oui, parce que nous n'avons pas prescrit de valeur pour les règles CSS répétition du fond.Il sera donc utilisé pour que la valeur par défaut soit utilisée. En regardant dans la spécification, nous apprenons que cette valeur correspond à "répéter" (répéter l'image sur tous les axes). La réponse a été retrouvée par lui-même.

Par conséquent, en utilisant le fond-répéter, nous pouvons conduire une image de fond Répétition. Cette règle ne peut avoir que quatre valeurs:




Position de fond - Positionnement de l'arrière-plan

Maintenant, la question se pose et si l'image d'arrière-plan peut être éloignée de l'angle supérieur gauche de la région limitant la taille de l'élément. Bien sûr, cela est possible et, à cette fin, sert une règle distincte position de fond:



En regardant la spécification CSS, il devient clair pourquoi l'image d'arrière-plan est appuyée par défaut avec précision sur le bord supérieur gauche de la zone HTML de l'élément. Parce que la valeur "0% 0%" est par défaut pour la règle de position d'arrière-plan.

Eh bien, lorsque cette règle est explicitement spécifiée pour l'élément (comme dans notre cas), le navigateur sélectionne sa signification acceptée dans la spécification par défaut (je note que le rapport des axes de coordonnées dans CSS est effectué à partir du bord supérieur gauche de la élément de région).

En outre, on peut le voir à partir de la spécification qui positionne l'image de l'arrière-plan à l'aide de la position d'arrière-plan, vous pouvez utiliser des valeurs relatives (pourcentages) et absolues (par exemple). Eh bien, aussi bien que vous pouvez utiliser des mots qui correspondent à certaines valeurs numériques. Mais tout est en ordre.

Lorsque vous spécifiez le positionnement de l'image de l'arrière-plan en utilisant des unités absolues En position de fond, il existe un principe suivant de définir sa position finale:

Ceux. Le navigateur calculera entrées postées Selon les axes X et Y de l'origine de la zone dans laquelle l'objet est positionné avant les coordonnées de cette image elle-même. Par exemple, dans ce paragraphe, j'ai positionné l'image d'arrière-plan via la position d'arrière-plan en utilisant les règles CSS suivantes:

Arrière-plan-image: URL (https: //syt/image/logo.png); Contexte - Répéter: Non-répéter; Contexte de l'arrière-plan: 400px 25px;

Veuillez noter que dans ce cas, il sera aligné au centre de la zone de visualisation et non au centre de la zone allouée en vertu de ces paragraphes. Il est clair que, en réalité, ce placement de la photo d'arrière-plan est peu probable de trouver une demande.

Cependant, si vous spécifiez une position d'arrière-plan fixe pour des éléments tels que le corps ou le HTML (c'est-à-dire dans des balises couvrant l'ensemble de la page Web), puis cette image Il sera toujours visible dans la zone de visualisation et il s'agit d'une telle application qui trouve la propriété de la propriété de la propriété CSS dans une disposition de bloc moderne.

Y a-t-il encore plus fond de la règle préfabriquée.Ce qui vous permet de combiner les cinq règles décrites ci-dessus dans une bouteille. De plus, les valeurs pour les cinq dans la version préfabriquée peuvent être utilisées dans n'importe quel ordre et dans une quantité unique (elles sont uniques et le navigateur ne les confondre pas les uns avec les autres). Tout ce que vous ne spécifiez pas explicitement que le navigateur envisagera une valeur par défaut égale.

Png non répéter 50%;

La règle préfabriquée indiquée dans l'exemple est appliquée à ce paragraphe de clarté. Il s'est avéré pas beau, mais ce n'est pas important. Pour cette section, le remplissage d'arrière-plan d'une couleur jaune étrange est utilisé, ainsi que l'image du logo Loyvinternet, alignée dans le centre du paragraphe. Parce que Pour la règle de fond-attachement, aucune valeur n'est définie, elle utilise la valeur de défilement (par défaut).

Si, pour un élément, vous souhaitez définir uniquement le remplissage de couleur, et avec l'arrière-plan, l'image ne vous dérange pas, alors vous pouvez aussi bien:

Couleur de fond: #fefcde

Écrivez:

Contexte: #fefcde.

Pour toute autre valeur de la règle de collecte sera prise par défaut et vous en avez besoin.

Bonne chance à toi! À des réunions ambiguës sur le site Web des pages de blog

voir plus de rouleaux que vous pouvez continuer

");">


Vous pouvez être intéressé

Style de liste (type, image, position) - Règles CSS pour le réglage vue externe Listes B. Code HTML Comment configurer une alternance de chaînes de couleur de fond de tables, de listes et d'autres éléments HTML sur le site à l'aide de la pseudoclasse Nth-enfant
Position (absolue, relative et fixe) - façons de positionner les éléments HTML dans CSS (règles laissées, à droite, en haut et en bas)
Flotter et clair dans CSS - Outils de présentation de blocs
Positionnement avec Z-Index et règle de curseur CSS pour changer le curseur de la souris

Je pense qu'il n'y a pas un seul site où la propriété ne serait pas utilisée. Fond CSS.. Il semblerait que cela soit plus facile pour cette propriété? Mais non, ses capacités sont beaucoup plus larges que l'objet habituel de la photo ou de la couleur en tant qu'appount de la page. Quelque chose sera familier et quelque chose à coup deviendra une nouveauté pour beaucoup. Dans tous les cas, vous saurez de manière approfondie comment les travaux d'arrière-plan seront utiles.

CSS3 a apporté de nouveaux neufs, c'est la transparence et le but de plusieurs images en tant qu'appount, mais nous en parlerons ci-dessous et pour les débuts, considérer les bases de la propriété. contexte..

couleur de l'arrière plan.

Je suis plus que confiant - vous avez répété à plusieurs reprises la nomination de la couleur de l'arrière-plan. Vous pouvez le faire en utilisant plusieurs types d'enregistrements: le nom habituel (nom de couleur), hexadécimal ou rgb. Chaque type est équivalent, utilisez celui plus similaire. J'essaie d'utiliser l'option la plus courte et de la perception plus facile et le fichier de styles est légèrement inférieur à la taille.

P (Couleur de l'arrière-plan: rouge;) P (Couleur de l'arrière-plan: # F00;) P (Couleur de l'arrière-plan: # FF0000;) P (Couleur de l'arrière-plan: RVB (255, 0, 0;))

Dans CSS3, la prise en charge de la transparence est introduite, vous pouvez donc l'ajouter à notre couleur, par exemple:

P (couleur-couleur: rgba (255, 0, 0, 0.5);)

Le dernier chiffre a établi une transparence de 50%. Vous pouvez définir la valeur de transparence de 0 (complètement arrière-plan transparent) À 1 (complètement opaque).

image de fond.

Cette propriété est également utilisée très souvent, vous permet d'attribuer une image à l'arrière-plan. Le CSS3 a ajouté la possibilité d'attribuer plusieurs images à l'arrière-plan et chacune crée une couche particulière, chaque suivant est donc superposé à la précédente. Pourquoi cela peut-il arriver utile? Tout est assez simple - disons-vous, vous devez attacher les précipitations dans chacun des coins du site. Sous réserve d'une disposition plus ou moins de caoutchouc, utilisez une image n'est pas une option. Par conséquent, nous fabriquons 4 "calques", chaque image se déplace dans votre coin et sur tout ce que la tâche est résolue.

Corps (image1), URL ("image2"), URL ("image3")))

Si vous avez besoin d'attribuer une image en arrière-plan - dans le code, nous ne partons que d'abord, je pense que c'est compréhensible.
En utilisant des images en tant que fond, deux règles doivent être rappelées:

• définissez la formation de contraste de l'arrière-plan au cas où l'utilisateur pour une raison quelconque n'apparaît pas l'image. Cela peut désactiver tritiquement l'affichage des images, enregistre le trafic.
• n'utilisez pas l'image d'arrière-plan pour transférer aucun une information important. En raison de ce qui précède, l'utilisateur peut ne pas voir.

La prise en charge de plusieurs images pour l'arrière-plan est assez large. Tous les navigateurs, même IE8, supportent cette propriété.

information brève

Versions CSS.

Valeurs

HTML5 CSS2.1 IE CR OP SA FX

Modèle d'objet

document.getElementyID ("ElementID") .style.backgroundImage

Navigateurs

Internet Explorer. Avant la version 7.0, il allume l'arrière-plan sur la partie interne de la limite d'élément, qui a la propriété Haslayout. Si l'élément n'a pas de haslayout, la propriété de fond-image prendra en compte les limites de l'élément, de même que les spécifications spécifiées. La différence dans la cartographie sera perceptible si les frontières de pointillé (pointillées ou pointillées) et non solides.

Si la valeur est définie comme défilement ou auto pour un élément, dans Internet Explorer 8, il y aura un délai vertical dans un pixel lors du défilement de l'arrière-plan.

Internet Explorer avant la version 7.0 ne prend pas en charge la valeur hérite.

Si l'arrière-plan est défini pour la ligne de table (étiquette ), puis Chrome, Safari, IOS le reflète non comme prescrit la spécification, à savoir chaque cellule séparément. Tandis que le navigateur doit afficher un fond d'une pièce pour toute la ligne. Dans l'exemple 2, le code montre une erreur.

HTML5 CSS2.1 IE CR OP SA FX

Résultat cet exemple dans navigateur chrome. montré à la Fig. une. Navigateur Internet Explorateur, Opera et Firefox affichent correctement l'arrière-plan de la chaîne (Fig. 2).

Figure. 1. répéter un arrière-plan pour chaque cellule

Figure. 2. Contexte de la ligne entière