TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment ajouter du CSS dans le site Weebly ?

9

CSS signifie C ascading S tyle S euilles et utilisé pour définir le style d’un élément. Chaque élément HTML sur un thème Weebly est contrôlé avec le paramètre défini sur son apparence sur un site publié et tous ces paramètres sont stockés dans le fichier «main_style.css» accessible via le chemin «Design > Edit HTML / CSS > Assets". Il n’est pas toujours nécessaire de modifier la feuille de style principale, vous pouvez également contrôler le style d’un élément soit au niveau de la page, soit au niveau de l’élément individuel. Dans notre article précédent, nous avions expliqué comment utiliser les scripts sur un site Weebly et dans cet article, nous discuterons en détail des différentes manières d’ajouter du CSS dans le site Weebly.

CSS peut être ajouté à un site des trois manières suivantes :

  • Style en ligne
  • Style intérieur
  • Feuille de style externe

Le style interne est défini dans la section d’un document HTML affectant tous les éléments particuliers de cette page.

Les styles externes sont définis dans un fichier texte externe avec une extension .css et liés au document HTML à l’aide d’une balise dans la section.

Le style en ligne est directement défini sur un élément HTML à l’intérieur d’une page Web affectant uniquement cet élément.

Le style interne est défini dans la section d’un document HTML affectant tous les éléments particuliers de cette page.

Les styles externes sont définis dans un fichier texte externe avec une extension .css et liés au document HTML à l’aide d’une balise dans la section.

Le style en ligne est directement défini sur un élément HTML à l’intérieur d’une page Web affectant uniquement cet élément.

Le style interne est défini dans la section d’un document HTML affectant tous les éléments particuliers de cette page.

Utiliser les styles en ligne dans Weebly

Les styles en ligne sont utilisés au niveau de l’élément sans affecter les autres éléments de la même page. Par exemple, si vous souhaitez changer le paragraphe particulier en couleur rouge avec une taille de police de 18px tout en conservant les autres paragraphes selon la couleur par défaut, collez le code ci-dessous dans l’élément « Intégrer le code ».

<p style="font-size:18px; color:green;"> Here is the paragraph content…. </p>

Utiliser les styles internes dans Weebly

Les styles intégrés sont généralement appliqués au niveau de la page et affectent tous les éléments similaires d’une page. Par exemple, vous pouvez coller le code ci-dessous sous « Pages > Sélectionnez une page > Paramètres avancés > Code d’en-tête » pour que tout le texte des paragraphes d’une page soit de couleur rouge.

<style type="text/css"> p {color: red;} </style>

Comment ajouter du CSS dans le site Weebly ?

Ajouter du code dans l’en-tête de page Weebly

Vous pouvez également intégrer le style dans l’élément « Embed Code » en utilisant les balises < style >…< / style > pour le rendre efficace uniquement pour cet élément.

Utilisation de feuilles de style externes dans Weebly

C’est la manière très efficace et recommandée d’utiliser CSS puisque les styles sont séparés du HTML, ce qui facilite la maintenance et la modification. Vous trouverez ci-dessous quelques points de base sur l’utilisation de la feuille de style externe par défaut dans Weebly :

  • Chaque thème Weebly utilise une seule feuille de style externe qui sera disponible sous «Design > Edit HTML / CSS > Assets» avec le nom «main_style.css ».
  • Toute modification de cette feuille de style principale sera effective sur l’ensemble du site.
  • La modification de la feuille de style nécessite que vous enregistriez le thème avec un nom différent et le thème modifié sera disponible sous "Conception > Modifier le thème > Thème personnalisé".
  • Lorsqu’un thème est modifié, toutes les modifications à l’intérieur de la feuille de style principale seront perdues car le nouveau thème utilisera la feuille de style par défaut pour ce thème.

Par exemple, si vous souhaitez modifier le style de l’élément de citation de bloc sur tout le site, modifiez le code dans blockquote {……} dans le fichier «main_style.css». Cela changera le style de tous les guillemets de bloc existants ainsi que de tous les nouveaux guillemets de bloc.

Comment ajouter du CSS dans le site Weebly ?

Modification du CSS du style principal dans Weebly

Si vous avez une nouvelle feuille de style, téléchargez-la en cliquant sur l’icône + à côté de « Atouts » et choisissez l’option « Télécharger le(s) fichier(s)… ». Assurez-vous que le fichier porte l’extension .css et liez la feuille de style aux pages requises dans la section « Pages > Sélectionnez une page > Paramètres avancés > Code d’en-tête » à l’aide du code ci-dessous :

Le chemin du fichier pour les fichiers téléchargés sera comme " http://votresite.weebly.com/files/theme/your-style-sheet.css ". Lorsque vous liez la feuille de style à une page, vous pouvez soit utiliser le lien absolu « http://votresite.weebly.com/files/theme/your-stylesheet.css » ou utiliser un lien relatif comme « /files/theme/your -stylesheet.css".

Pour la taille de la police, le poids et le changement de couleur, vous devez utiliser la fonctionnalité par défaut disponible sous « Conception > Modifier les polices » et il n’est pas nécessaire de modifier le CSS.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails