Styliser notre contenu

Introduction au style

Au cours des dernières semaines, nous avons discuté de la manière d'obtenir toutes les informations dont vous avez besoin sur une page Web. Cependant, si vous avez suivi et codé au fur et à mesure, vous avez probablement remarqué que vos pages ne semblent pas très attrayantes. Ils pourraient même avoir l’air assez mauvais, en fait…

Jusqu'à présent, nous n'avons ajouté aucun style à nos pages Web. Les styles sont des règles que nous donnons à notre navigateur pour lui indiquer l'apparence que nous souhaitons donner à nos éléments HTML sur la page. Nous pouvons modifier la taille, la police, la couleur, la position, l’alignement et bien d’autres choses ! Mais comment ?

Ajout de nos premiers styles

<p style="color: blue;">This text is blue now!</p>

C'est ça ! Si vous êtes curieux, copiez et collez-le dans un document et ouvrez-le dans votre navigateur. Qu'as-tu vu ? Le texte est bleu maintenant ! Bien !

Alors, que se passe-t-il ici ? Nous avons entouré notre contenu texte d'un élément de paragraphe et avons attribué à cet élément de paragraphe un attribut de style. Notez le style= dans l'ouverture

étiqueter. Dans la valeur de l'attribut, nous avons attribué au style de couleur une valeur de bleu : "color: blue;".

Maintenant, c'est cool, mais et si on voulait centrer le texte sur la page ?

<p style="color: blue; text-align: center;">This text is blue and centered!</p>

Tout ce que nous devions changer, c'était la valeur de l'attribut style ! Puissant! Mais que se passe-t-il dans cet attribut de valeur ? Nous n'avons jamais vu cette syntaxe auparavant ! C'est du CSS ! Mais attendez, pourquoi est-il ici si nous écrivons du HTML ?

Nous le sommes ! Mais HTML n'est pas conçu pour le style ; il est conçu pour la structure et la sémantique (que nous aborderons dans un article ultérieur). Si nous voulons changer l'apparence de la page, nous devons modifier la feuille de style. Par défaut, notre navigateur décide comment interpréter les informations contenues dans notre code HTML à l'aide de ce qu'on appelle la « feuille de style de l'agent utilisateur ». Les tailles de police et les couleurs que vous avez vues jusqu'à présent sont basées sur cela ! Lorsque nous ajoutons du CSS à notre attribut de style, les styles que nous avons définis remplaceront la feuille de style de l'agent utilisateur et tous les styles que nous n'avons pas définis reviendront à cette feuille. CSS signifie Cascading Style Sheets, et c'est pourquoi !

C'est génial. Maintenant que nous pouvons changer l’apparence de notre page, les possibilités sont infinies. Mais imaginez si nous voulions plus de personnalisation :

<h1 style="font-size: 36px; 
    font-weight: 500; 
    text-align: center;
    text-decoration: underline;
    padding-bottom: 16px;
    color: #b0b1b2;
    opacity: 0.7;">Welcome to My Website!</h1>
<p style="font-size: 16px;
    font-weight: 300;
    text-align: left;
    padding-left: 100px;
    background-color: yellow;">I hope you're having a great day!</p>

Wow… ça fait beaucoup de code pour seulement deux lignes de texte… et c'est tellement difficile de voir rapidement ce qui se passe ! C'est un problème car si vous essayiez de revenir pour modifier ces informations plus tard, cela vous prendrait beaucoup plus de temps que si elles ressemblaient à ceci :

<h1>Welcome to My Website</h1>
<p>I hope you're having a great day!</p>

Comment pouvons-nous résoudre ce problème ?

Présentation du CSS

Pour éviter que notre code HTML ne soit encombré, nous déplaçons tous nos styles dans un fichier .css ! Pour les petits projets, nous appelons généralement cela style.css. Au-delà du simple rangement de notre code, le déplacement des styles dans un nouveau fichier répond également à un concept de programmation appelé séparation des préoccupations. Cela signifie que nous voulons que notre code soit segmenté en ses composants fonctionnels. Notre code ne doit pas essayer de tout faire mais plutôt être décomposé en petits morceaux qui font bien une chose !

Dans cet exemple, au lieu d'avoir un fichier qui structure notre contenu et le stylise, nous avons deux fichiers : un qui structure et un qui stylise. Préoccupations séparées ! Alors, à quoi cela pourrait-il ressembler ?

h1 {
  font-size: 36px; 
  font-weight: 500; 
  text-align: center;
  text-decoration: underline;
  padding-bottom: 16px;
  color: #b0b1b2;
  opacity: 0.7;
}

p {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  padding-left: 100px;
  background-color: yellow;
}

Ah, bien mieux ! Désormais, notre fichier HTML n’est plus encombré de tout ce style ! Ce que vous voyez ci-dessus sont deux ensembles de règles CSS. Un ensemble de règles se compose d'un sélecteur et de deux accolades qui contiennent toutes les informations sur la façon de styliser le sélecteur. Dans cet exemple, les deux sélecteurs que nous voyons sont h1 et p. Cela signifie que tous les styles répertoriés ici seront appliqués à tout fichier HTML

ou

élément, respectivement !

Nous pouvons faire cela pour tout type d'élément ! En fait, il existe de nombreuses façons de sélectionner des objets avec les sélecteurs CSS, mais nous les conserverons pendant une semaine supplémentaire. Pour l'instant, sachez simplement que si vous saisissez le type d'élément, vous pouvez ajouter des styles entre accolades !

Nous avons défini certains styles, mais comment pouvons-nous nous assurer que notre navigateur sait à quel fichier les appliquer ?

L'élément de lien

Le premier L'élément que nous allons apprendre est le élément. Il existe quelques cas d'utilisation, mais pour nos besoins, nous l'utiliserons pour lier notre style.css à notre index.html. En d’autres termes, cet élément indique à notre navigateur quelle feuille de style utiliser pour la page. En pratique, cela ressemblera à ceci :

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link href="./style.css" rel="stylesheet"/>
  </head>
  <body>
    ...
  </body>
</html>

Et c'est tout ! Notre style.css est lié à notre document HTML, et les styles seront appliqués.

Décomposons cet élément de lien. Premièrement, il s’agit d’un élément à fermeture automatique, nous n’avons donc pas besoin de balise de fermeture et il ne contient aucun contenu. Il existe deux attributs obligatoires pour cet élément : href et rel. Ceux-ci sont obligatoires car le L'élément relie les ressources externes au document HTML. Nous devons donc indiquer à notre navigateur 1) où se trouve cette ressource et 2) à quoi cette ressource doit être utilisée. Le href, qui signifie « référence hypertexte », détermine le où, tandis que le rel, ou relation, détermine l'utilisation !

Il est important de noter qu'avec l'attribut href, le chemin que vous fournissez peut être absolu ou relatif. Cela signifie que vous pouvez donner l'emplacement d'un chemin de fichier à partir du répertoire racine, par exemple /Users/username/Documents/project/style.css (absolu). Ou vous pouvez le faire par rapport à l'emplacement du fichier sur lequel vous travaillez, comme indiqué ci-dessus. Le ./ avant le nom du fichier indique que le navigateur doit rechercher dans le même dossier (ou répertoire) que le fichier HTML pour style.css. Vous pouvez également ajouter une URL ici ; de nombreux réseaux de diffusion de contenu vous permettent d'utiliser des feuilles de style prédéfinies, que vous connecterez à l'aide du lien élément aussi !

Défi

Très bien, nous avons abordé beaucoup de choses aujourd'hui. Il est maintenant temps de le mettre en pratique. Prenez la page À propos de moi que vous avez créée lors du défi de la semaine dernière et dans un nouveau fichier appelé style.css. (Assurez-vous de le mettre dans le même dossier que votre fichier HTML !)

Ensuite, créez des styles pour chacun de vos éléments. Jouez avec les différents styles que vous pouvez attribuer jusqu'à ce que votre page À propos de moi soit plus présentable ! (Remarque : vous pouvez également cibler les éléments et  !)

Pour une liste complète des styles que vous pouvez appliquer, consultez le réseau de développeurs Mozilla. Ils hébergent une documentation complète pour les langages de développement Web : HTML, CSS et JS ! Voici un lien vers leur site. Utilisez la liste des propriétés sous « Référence » dans la barre latérale pour voir ce qui est possible !

À la semaine prochaine !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!