URL CSS

Dans l'URL (), nous donnons le chemin du fichier ou de l'image que nous voulons ajouter à notre fichier HTML dans la propriété en arrière-plan-image. Nous ajouterons cette fonction URL () et donnerons le chemin de l'image dans cette URL () en tant que paramètre. Nous pouvons utiliser cette fonction URL () pour ajouter l'image d'arrière-plan, l'image de bordure, le curseur, etc. Dans ce tutoriel, nous vous montrerons comment nous pouvons utiliser la fonction URL () dans CSS. Nous explorerons des exemples dans ce tutoriel et vous expliquerons comment ajouter cette fonction dans CSS.

Exemple 1:

Nous allons commencer par notre premier exemple en ouvrant un nouveau fichier dans le logiciel, qui est Visual Studio Code. Lorsque nous faisons un nouveau fichier dans le code Visual Studio, nous avons le choix de choisir la langue et nous choisissons HTML. Ensuite, nous devons construire le code HTML. En tappant "!"Et puis en appuyant sur« Entrée », Visual Studio Code nous donne la possibilité d'acquérir automatiquement les balises de base. Nous donnons le lien vers le fichier CSS dans la balise de tête HTML, nous utiliserons donc la fonction URL () dans CSS. Dans le corps, nous avons une rubrique et un paragraphe simple. Après cela, nous avons mis un conteneur «div». Nous enregistrons ce fichier, puis nous nous dirigeons vers le fichier CSS. Maintenant, regardez le code CSS ci-dessous.

Nous définissons le «div» dans ce code et ajoutons la propriété «Image d'arrière-plan». Maintenant, nous devons définir l'image pour l'arrière-plan. Pour ajouter une image, nous devons utiliser la fonction «url ()» et donner le chemin de l'image que nous voulons ajouter comme paramètre de la fonction «url ()». Nous utilisons la propriété «Text-Align» et la définissons sur «Centre». Ensuite, définissez la «largeur» sur «500px». La «hauteur» est «260px». Nous stylissons également l'en-tête pour rendre la sortie plus attrayante. Nous définissons la «couleur» qui définit la couleur du texte de l'en-tête et réglé «rouge» pour cette propriété. La «famille de police» pour le texte de la tête est «algérien».

Nous avons également un paragraphe dans le fichier HTML, nous appliquons donc également certaines propriétés à ce paragraphe. Nous définissons la taille du texte du paragraphe en utilisant la propriété CSS «-taille» et la définissons comme «18px». Maintenant, encore une fois, nous utilisons la propriété «couleur» du texte du paragraphe et utilisons «bleu».

Nous obtenons cette sortie en appuyant sur «Alt + B» dans le fichier HTML ou vous pouvez appuyer sur le bouton droit de la souris, puis sélectionner «Ouvrir dans le navigateur par défaut» pour obtenir la sortie. Dans la sortie, vous pouvez voir qu'il y a l'image sous l'en-tête et le texte. Nous ajoutons cette image en mettant le chemin de cette image dans le paramètre URL ().

Exemple n ° 2:

Nous ajoutons à nouveau le titre «H2» et le paragraphe «P» dans cet exemple. Ensuite, mettez le «div» en dessous. Nous ajouterons l'URL de l'image () dans la propriété d'image en arrière-plan pour cette div. Vous verrez cela dans le fichier CSS, comment nous ajoutons le chemin.

Nous ajoutons simplement la «image d'arrière-plan» dans la fonction «div» et plaçant la fonction «url ()». Nous fournissons le chemin de l'image comme la «Myhouse.png ”. Vous devez mettre le chemin correct dans ce paramètre "url ()". La «largeur» de cette image est «400px» et la «hauteur» est «350px». Le titre «couleur» que nous utilisons est «violet». La «famille de police» de la rubrique est «Times New Roman». Le paragraphe «taille de police» est «20px» et «couleur» est «vert».

La sortie montre qu'il y a une image après la rubrique et le paragraphe. L'autre ruban apparaît sur l'image comme défini dans le fichier CSS.

Exemple # 3:

Le code HTML pour cet exemple est le même que nous avons construit dans le premier exemple dans lequel nous avons un paragraphe, un titre et un conteneur div vide mais nous utiliserons les différents paramètres de la fonction URL () dans le code CSS.

La «hauteur» du «div» est «700px» et «500px» dans sa «largeur». Maintenant, nous utilisons «l'image d'arrière-plan» et nous mettons deux URL différentes où nous donnons un chemin d'images différent. Nous mettons la première «URL» et à l'intérieur du paramètre. Nous mettons «Smely.JPEG "comme chemin de l'image, puis a mis une autre" URL "en séparant les deux URL avec", ".

Nous mettons «Smely.jpeg "comme paramètre de la deuxième URL. Ensuite, nous avons la propriété «repeat d'arrière-plan» qui est utilisée pour définir la façon dont les images d'arrière-plan sont répétées. Nous le définissons sur «sans répétition» pour les deux images. Nous avons également défini la «position d'arrière-plan» qui définit les positions des deux images. Nous plaçons «à droite» pour la première image et «gauche» pour la deuxième image. Pour «H2», nous avons «marron» pour la «couleur» de la rubrique. La «Font-Family» de la tête est «Times New Roman» et il est aligné dans le «centre». Le «30px» que nous utilisons pour la «taille de la police» et changez la «famille de police» en «Algérien». Nous utilisons également la propriété «taille de police» pour le «P» et c'est «25px». Nous avons réglé la «couleur» du paragraphe comme «RVB (37, 35, 35)» qui apparaît comme «gris». Nous alignons également cela comme le titre, dans le «centre».

Vous pouvez voir deux images où la première image est placée sur le côté gauche et la deuxième image est placée sur le côté droit de l'écran de sortie. Nous mettons le chemin des deux images dans l'URL comme paramètre. Ainsi, les deux images apparaissent dans la sortie.

Exemple n ° 4:

Le fichier HTML que nous utilisons est le même que ci-dessus et nous changerons la famille de police en plaçant l'URL et en mettant l'image en utilisant l'autre fonction URL dans CSS.

Dans ce fichier CSS, la «police-face» est utilisée pour spécifier la police personnalisée. Il nous offre la possibilité de sélectionner parmi un large éventail de polices. Nous définissons «Font-Family» comme «Sans ouvert». Dans le «SRC», la fonction «locale» est d'obtenir la police du système local de l'utilisateur. S'il ne se trouve pas dans le «Sans ouvert», il vérifiera l'option suivante où nous plaçons «l'URL». Et il le vérifie au format «Woff2», si disponible. Ensuite, il l'appliquera, mais s'il n'est pas disponible, il passera à la prochaine «URL». S'il n'est disponible en aucune option, il sélectionnera la «Font-Family» que nous avons décrite ci-dessous qui est «Sans Serif».

Nous faisons tout cela en mettant «l'URL». Ensuite, toutes les images du conteneur div en utilisant la même méthode, comme nous l'avons discuté, en plaçant le chemin dans la fonction «URL» et paramètres «largeur» et «hauteur».

La sortie montre que la famille des polices de la tête et le paragraphe change et il y a aussi une image ci-dessous pour tous ces.

Conclusion

Nous avons présenté ce tutoriel pour vous guider sur la fonction CSS URL (). Nous avons suivi ce sujet en profondeur et avons exploré différents exemples dans lesquels nous avons utilisé cette fonction «URL ()» dans le code CSS. Nous avons expliqué que nous utilisons cette fonction URL () pour se lier à une ressource: image, font-famille, etc. Dans ce tutoriel, nous avons également discuté de la façon d'ajouter le chemin comme le paramètre dans cette fonction «URL ()». Nous avons préparé un tutoriel complet pour vous dans lequel nous avons fourni le code et avons expliqué ce code en détail avec la sortie.