Comment ajouter de la couleur à votre site Web sur la PI de framboise

Votre site ne sera pas très attrayant sans une certaine couleur. Vous pouvez utiliser les CSS pour ajouter de la couleur à votre site Web sur le Raspberry Pi. Le moyen le plus rapide pour voir comment CSS fonctionne est d'essayer un exemple. Dans votre fichier main.css, tapez cette ligne et enregistrez-le:

h1 {color: rouges}

Lorsque vous rechargez votre page web (appuyez sur F5 dans Midori si elle est déjà ouverte il), le texte de votre h1 rubrique est maintenant rouge.

Ce simple exemple incarne comment CSS fonctionne. Vous commencez par dire au navigateur qui étiquettes que vous voulez appliquer un style à (la h1 tag dans ce cas), puis dans des accolades, vous liste les instructions de style.

Chaque instruction commence par dire quel aspect du style doit être changé (connu sous le nom propriété, et dans ce cas, il est la couleur). Suivant est un deux-points, puis ce que le style doit être modifié pour (connu sous le nom valeur, qui est rouge dans cet exemple). Enfin, chaque instruction doit se terminer par un point-virgule.

Prenez soin de la façon dont vous ponctuez votre CSS. Même dans ce court exemple, un couple de choses pourraient aller mal. Il ne fonctionnera pas si vous utilisez parenthèses normales courbes (des parenthèses), ou les équerres pointues que vous utilisez en HTML, alors assurez-vous d'utiliser les accolades.

Faites attention à la virgule et le point-virgule trop. Vous devez obtenir les bons dans les bons endroits pour que cela fonctionne. Si quelque chose ne marche pas droit, un point-virgule manquant est souvent le coupable!

Nous pouvons ajouter une couleur de fond, aussi, comme ceci:

h1 {color: red-background-color: jaune}

Même si vous êtes un Brit, vous avez besoin d'épeler couleur la manière américaine dans votre CSS!




Comme en HTML, il n'a pas d'importance comment vous l'espace sur votre CSS, mais vous pouvez vous faire une faveur et de le rendre plus facile à lire en incluant un espace blanc et le démarrage d'une nouvelle ligne pour chaque instruction.

Il ya un certain nombre de couleurs que vous pouvez référencer par nom (y compris le noir, blanc, rouge, vert, bleu, gris, violet et jaune), mais autre que le noir et blanc, ils sont trop lumineux et caricatural pour une utilisation dans la plupart cas. La meilleure façon de spécifier des couleurs est de donner un numéro de couleur, à la place d'un nom de couleur.

Cela vous permet d'utiliser une palette de couleurs plus subtiles et vous donne accès à des couleurs pour lesquelles il existe probablement même pas les noms (sauf si vous travaillez dans une usine de peinture particulièrement complet, peut-être). Voici quelques chiffres exemple de couleur:

  • #FFFFFF: blanc

  • #000000: Noir

  • #FF0000: Rouge

  • #0000FF: Bleu

  • #FFFF00: Jaune

  • #008000: Couleur verte

Vous pourriez être surpris de voir les lettres mélangées dans les numéros de couleurs, mais qui est parce que les couleurs sont exprimés en utilisant un système de numéro appelé hexadécimal qui va au-delà des chiffres de 0 à 9 et utilise les lettres A, B, C, D, E, et F trop.

Lorsque vous comptez en hexadécimal, vous allez: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10. Le 10 représente 16 dans notre système de comptage normale et représente 11 17. Voici les trois choses que vous devez savoir sur hexadécimal:

  • Comme dans le système de comptage normal, chiffres à gauche sont plus grandes. Par exemple, en utilisant notre système de comptage normal, dans le numéro 39, le 3 a une valeur supérieure à la 9 parce qu'il est dans la colonne des dizaines. En hexadécimal, il est le même. Dans le nombre hexadécimal 7F, le 7 vaut plus que le F parce que le 7 est dans la colonne des 16s.

  • Le nombre hexadécimal le plus élevé à deux chiffres est FF.

  • Si vous utilisez des lettres autres que A à F, vous avez fait une erreur.

Le nombre de couleurs à six chiffres est en fait composée de trois petits nombres écrasés ensemble, chacun étant deux chiffres. Ces trois chiffres représentent la quantité de rouge, vert et bleu qui devrait être dans la couleur, prises de gauche à droite.

Donc noir est # 000000 parce qu'il n'y a pas de rouge, vert ou bleu. Le bleu est # 0000FF parce qu'il n'y a pas de rouge ou vert, mais il est le montant maximum de bleu. Le jaune est # FFFF00 parce que le jaune est fait quand vous mélangez le montant maximal de rouge et de vert, sans bleu.

Vous pouvez mélanger vos propres couleurs. Pour bleu marine, il suffit d'utiliser un peu moins bleu que bleu pur et essayer # 000080. Pour vert vif de la chaux, de prendre le numéro vert (# 00800) Et pomper la quantité de vert au maximum, donnant le nombre de couleurs # 00FF00. Vous pouvez utiliser des numéros valides. # 767676 est correct (et une sorte d'argent), et est donc # 543ABC (une nuance de pourpre extraction).

Vous ne devez pas essayer de trop. Beaucoup de ressources sont disponibles en ligne pour vous aider à trouver les couleurs que vous pouvez utiliser, y compris Colorpicker, qui fonctionne bien sur le Raspberry Pi et peut générer toute une palette de couleurs à partir de votre couleur choisie. Le code de couleur pour votre couleur choisie est affiché en haut de l'écran.

Vous utilisez vos codes de couleur à la place des noms de couleurs dans votre CSS, comme ceci:

h1 {color: # FF0000-background-color: # FFFF00-}

» » » » Comment ajouter de la couleur à votre site Web sur la PI de framboise