Sélectionner une page


CSS est difficile!

Cela ressemble à quelque chose que vous pourriez dire? Tu ne serais pas seul. CSS (ou feuille de style en cascade) est un langage de codage difficile à maîtriser pour un petit bébé.

Cependant, dire que CSS est difficile est un peu difficile. Comme tout langage, le CSS peut être un peu difficile à comprendre au début, mais une fois que vous comprenez les bases, les choses commencent à se mettre en place.

La meilleure façon d’apprendre le CSS est de comprendre ce que c’est et comment cela fonctionne. Ensuite, vous pouvez apprendre quelques extraits de code de base pour vous aider à comprendre un peu mieux cette compréhension initiale, et vous concevrez en un rien de temps!

Notre contribution fera exactement cela.

Qu’est-ce que CSS

Bien sûr, CSS signifie feuille de style en cascade, mais tout le monde vous le dira. Mais cela n’aide pas vraiment, n’est-ce pas?

Il n’y a pas de moyen plus simple de comprendre ce que c’est.

Imaginez le HTML comme le cadre d’une maison et le CSS comme la peinture extérieure. Si vous peignez le revêtement de la maison ou tachez le pont avant, cela change-t-il la charpente de la maison elle-même?

Non, ce n’est pas le cas. Au lieu de cela, cela change simplement l’apparence des choses. Les fondations et la charpente de la maison restent les mêmes.

C’est CSS.

Ça change ça Voir Votre site Web, mais il n’en rompt pas les fondations ou l’essentiel.

Chaque maison a de la couleur. Chaque thème WordPress utilise CSS.

Ils travaillent ensemble pour créer un site Web, et vous pouvez utiliser des extraits de code CSS assez simples pour changer ce que l’on appelle la «couleur» de votre thème.

En fait, vous pourriez être surpris de voir à quel point c’est facile.

Simple CSS Edit One: Modification de la police et une leçon rapide sur l’écriture de code

Si vous utilisez un thème comme Genesis Framework, vous aurez besoin de CSS pour faciliter au maximum la modification de la police utilisée sur votre site. Mais ne vous inquiétez pas. Ce n’est vraiment pas si difficile à faire.

Pour apporter des modifications CSS à votre thème, vous avez d’abord besoin d’une zone CSS personnalisée pour effectuer ces ajustements. Ne modifiez pas la feuille de style intégrée à votre thème.

À la place, utilisez un plugin comme l’option CSS personnalisée chargée dans Jetpack. Toutes les modifications CSS que vous y apportez remplaceront le CSS par défaut de votre thème.

Avant de pouvoir modifier la police, vous devez déterminer la zone que vous souhaitez modifier.

Il existe 7 zones principales dans lesquelles vous pouvez modifier votre police:

  • Les 6 polices de titre
  • L’écriture corporelle

Le balisage de ces balises est simple. Par exemple, si vous souhaitez les modifier Titre 1 Police affichée sur votre site Web utiliseriez-vous la balise h1. Si tu voulais changer ça Police de titre 2l’étiquette serait-elle h2 etc.

Voici un exemple de la façon d’écrire du code CSS pour changer la police de votre titre 1:

 h1 { font-family: 'Georgia'; } 

Maintenant, c’est vrai, vous pouvez essayer de copier et coller cela, mais je veux que vous compreniez mieux comment cela fonctionne vraiment.

La première partie écrite (h1) est le objet vous voulez changer ce symbole ({) ouvre Votre ligne de code et ceci (}) se ferme il.

OK OK

Cela semble probablement encore déroutant, mais lorsque j’apprenais le CSS, je me suis appris une astuce pratique pour m’aider à me souvenir comment écrire correctement CSS. Comme ça:

h1 {ouvre la porte de son placard

Vous cherchez quelque chose à changer en: « Il trouve ce qu’il veut »;

Et puis il ferme la porte

Revenons au sujet; Voici un autre exemple de la façon dont vous pouvez apporter des modifications à votre police.

 body {
  font-family: 'Arial';
  } 

En changeant l’élément de h1 en body, j’ai maintenant dit à la feuille de style que je voulais changer la police du corps affichée dans les articles et les pages en police Arial.

C’est assez facile, n’est-ce pas?

Si Google Font est activé pour votre thème, vous pouvez également utiliser les polices à partir de là sur votre site Web.

Simple CSS Edit two: modifiez la couleur de la police

Cette petite astuce CSS est un excellent moyen de changer la couleur de la police de votre menu ou la couleur de la police de votre corps. Comme pour les extraits de code mentionnés ci-dessus, il suffit de quelques lignes de code pour vraiment changer les choses.

Dis que je veux changer la couleur de la mienne Titre 2 Police à autre chose. Je peux le faire en suivant un schéma similaire à celui que nous avons fait auparavant (vous vous souvenez de l’histoire?) Mais avec les principales lignes de code qui ont un peu changé. Comme ça:

 h2 { color: #4f4f4f; } 

Notez que le sujet est défini comme h2 et que nous avons toujours les balises d’ouverture et de fermeture ({}) Cependant, la façon dont le code est écrit est un peu différente de celle décrite ci-dessus lorsque nous écrivions le code pour un changement de police.

Contrairement à la police qui a dû être fermée par des crochets, ( ») l’élément de couleur hexadécimal n’en a pas besoin.

Vous n’avez plus besoin d’écrire du code sur le même sujet encore et encore pour changer certains aspects. Vous pouvez combiner le code du même sujet pour faciliter la recherche et la modification des éléments à l’avenir. Par exemple, vous pouvez combiner la police et la couleur de police sur la même ligne de code.

 body { font-family: 'Roboto'; color: #4f4f4f; } 

Vous voyez comment j’ai fait ça?

J’ai deux lignes de code à l’intérieur de cette seule ligne d’objet. Si vous devez apporter plusieurs modifications à une seule rubrique, écrivez votre code de manière à vous faire gagner du temps. Assurez-vous simplement de fermer chaque ligne de code par un point-virgule (;) avant de passer à la ligne suivante.

Remarque: pour vous rappeler de faire cela, considérez le point-virgule comme un point à la fin de votre phrase. Vous ne terminez jamais une phrase sans un point. Ne jamais terminer une ligne de code est CSS sans point-virgule.

Simple CSS Edit Three: Couleur d’arrière-plan et un outil de navigateur que vous ne saviez même pas que vous aviez

Modifier la couleur de certaines choses sur votre site Web est une autre astuce CSS très simple. Tout ce que vous devez savoir est élément ou objet que vous souhaitez changer.

Un outil pratique que de nombreux concepteurs utilisent, y compris moi-même, est l’outil Inspect Element dans notre navigateur Google. C’est aussi une excellente occasion de trouver le bon sujet à changer et à définir.

Pour le trouver, double-cliquez simplement sur votre souris pour afficher les options comme vous pouvez le voir ci-dessous. Sélectionnez l’élément de révision et vous pourrez désormais parcourir les éléments modifiables de votre site Web.

Utilisez l'outil Inspect Element dans Google Chrome pour modifier le CSS

Voyez-vous cette image ici?

Modifier les couleurs avec CSS

J’ai mis en évidence un élément de menu dans une couleur différente de celle du reste de mon menu. Pour ce faire, j’ai utilisé mon outil Inspecter les éléments pour déterminer le nom correct de la modification.

Modifier la couleur du menu avec CSS

Maintenant, lorsque je fais défiler les éléments de menu, il affiche le nom de code réel donné dans mes marqueurs. Celui que je change porte le nom: # élément-de-menu-473 (Vous pouvez voir que c’est le nom dans la case jaune. Le nom est surligné en bleu.)

C’est le nom du objet que je voulais changer Pour changer la couleur d’arrière-plan de cet élément de menu, je vais commencer la ligne avec son nom et expliquer que je veux changer l’arrière-plan comme ceci:

 #menu-item-473 { background-color: #D65050; } 

Encore une fois, je commence par dire à la feuille de style le sujet que je veux changer (# élément-de-menu-473) et puis je lui dis ce qu’il faut changer (Couleur de l’arrière plan) et quoi changer (# D65050).

Tout ce que vous décidez de changer l’arrière-plan de a un nom différent de celui-ci, mais heureusement, l’option « Vérifier l’élément » dans votre navigateur le rend beaucoup plus facile à trouver.

Un autre avantage de l’outil Google Inspect Element Tool est que vous pouvez modifier des éléments en temps réel pour les obtenir correctement, puis copier et coller tout votre travail d’édition à partir de là dans votre feuille de style CSS personnalisée. Parlez de gagner du temps!

Simple CSS Edit Four: Flottant

Parfois, il est agréable de pouvoir faire quelque chose de différent avec votre menu principal ou des widgets prédéfinis sur votre site Web. Vous voudrez peut-être prendre un élément de menu et le placer plus à droite que sur les autres éléments, comme je l’ai fait avec le menu ci-dessus. (Également illustré en pleine largeur ci-dessous.)

Comment flotter correctement en CSS

Pour ce faire, vous pouvez utiliser l’extrait de code flottant pour faire exactement cela. Comme dans les étapes ci-dessus, vous devez utiliser l’outil Inspecter les éléments pour trouver le nom de la conception que vous souhaitez modifier. Celui illustré ici est le même que celui mentionné ci-dessus. (# élément-de-menu-473)

C’est le code que j’ai écrit pour faire bouger cet élément mais qui a toujours fière allure sur un écran mobile:

#menu-item-473 { background-color: #D65050;  float: right; }

C’était vraiment aussi simple que cela. Maintenant, j’ai un élément de menu qui remarque ce pour quoi j’en avais besoin. Vous pouvez également l’appliquer à des choses autres que vos éléments de menu.

Par exemple, si vous avez un widget que vous souhaitez repositionner, vous pouvez l’utiliser Flotter à droite; ou alors float: gauche; Extrait de code pour modifier l’emplacement de votre widget.

Cela prend du temps et des ajustements, mais CSS devient plus facile à utiliser au fur et à mesure que vous jouez avec.

Simple CSS Edit Five: Alignement du texte

Vous pouvez aligner votre texte en toute sécurité dans un message. Mais qu’en est-il de vos titres de widgets ou de quelque chose du genre?

Ce code CSS facilite l’alignement du titre du texte du widget.

J’utilise Genesis Framework pour mes sites Web. Voici le code nécessaire pour aligner les titres de mes widgets:

.footer-widgets .widget-title { text-align: center; } 

Le nom de l’élément ou du sujet dans votre sujet peut être légèrement différent, mais vous voyez l’idée.

Ce petit code garde mon texte centré sur les titres de mon widget de pied de page, et comme je le proclame Widgets .footer avec le .Titre du Widget, seul le titre du pied de page avec le milieu.

C’est ça! 5 façons super faciles d’utiliser CSS pour modifier votre thème! CSS est comme n’importe quel autre langage. C’est difficile au début, mais une fois que vous avez surmonté cette bosse initiale de compréhension, c’est un jeu d’enfant.



Source link

Recent Posts