Comment choisir les couleurs pour vos pages Web HTML5 et CSS3 - pour les nuls

Les couleurs peuvent sembler écrasantes lorsque vous travaillez avec des pages Web HTML5 et CSS3. Avec un peu de pratique, et un peu de patience, vous allez gérer les couleurs avec style.

Commencez avec des couleurs Web-safe

WebSafe. Le programme html fonctionne en vous permettant d'entrer rapidement une valeur sûre sur le Web. Pour rendre rouge, appuyez sur le bouton FF dans la colonne rouge. Les valeurs bleues et vertes ont la valeur par défaut 00, donc l'arrière-plan est rouge.

Les couleurs Web-safe vous donnent beaucoup de place pour jouer, et elles sont très faciles à utiliser. En fait, ils sont si communs que vous pouvez utiliser un raccourci. Étant donné que les couleurs Web-safe sont toutes répétées, vous pouvez écrire un chiffre répété sous la forme d'un seul chiffre. Vous pouvez spécifier le magenta comme un ou comme et le navigateur comprend, ce qui vous donne un magenta induisant la céphalée.

Pour obtenir un rouge plus foncé, changez le FF à la plus petite valeur suivante. Si vous voulez encore plus sombre, essayez. Expérimentez avec toutes les valeurs rouges et voyez combien il est facile d'obtenir plusieurs types de rouge. Si vous voulez une variation de rose, augmentez les valeurs vert et bleu ensemble. est une couleur rose poussiéreuse; est un peu plus brillant; et est un rose très blanc.

Comment modifier vos couleurs

La palette Web-safe est pratique, mais elle vous donne un nombre relativement faible de couleurs (216). Deux cent seize crayons dans la boîte sont très bien, mais vous pourriez avoir besoin de plus. Généralement, il s'agit de commencer en toute sécurité avec des couleurs Web sécurisées, puis de les ajuster au fur et à mesure. Si vous voulez un rose plus clair que, vous pouvez sauter le train en marche en toute sécurité et utiliser ou toute autre couleur que vous souhaitez!

Dans le WebSafe. programme html, vous pouvez utiliser les boutons haut et bas de chaque rangée pour affiner les réglages de votre couleur.

Comment appliquer des couleurs sur vos propres pages

Le but est de rendre les choses belles sur vos pages. Pour ajouter de la couleur à vos pages, procédez comme suit:

1. Définissez le code HTML comme d'habitude.

   Le HTML ne devrait pas avoir de relation avec les couleurs. Ajoutez la couleur strictement en CSS.

2. Ajoutez un tag à la page dans la zone d'en-tête.

3. Ajoutez un sélecteur pour chaque tag que vous souhaitez modifier.

   Vous pouvez modifier n'importe quelle balise HTML, donc si vous voulez changer tous les paragraphes, ajoutez un sélecteur. Utilisez le nom du tag sans les accolades d'angle.

4. Ajouter et attributs.

5. Spécifiez les valeurs de couleur avec des noms de couleurs ou des valeurs de couleurs hexadécimales.

Comment changer les CSS à la volée

Le navigateur Web Chrome est particulièrement intéressant en ce qui concerne le codage CSS. Vous pouvez regarder le CSS de n'importe quel élément sur une page Web et le changer, voir les résultats en temps réel!

Voici comment cela fonctionne:

1. Construisez la page normalement.

   Utilisez votre éditeur de texte pour créer la page de base.

2. Ajouter des sélecteurs CSS.

   Spécifiez le CSS pour les éléments que vous avez l'intention de modifier. Le videCSS. page html sur le site Web montre un exemple très simple. Vous pouvez mettre toutes les valeurs que vous voulez dans le CSS, ou vous pouvez simplement laisser le CSS vide pour le moment. Si vous voulez expérimenter, jetez un oeil à emptyCSS. html sur le site. Il a des sélecteurs vides pour les trois éléments décrits sur la page.

3. Chargez votre page dans Chrome.

   Les autres navigateurs commencent à développer des outils comme Chrome, mais c'est clairement le leader, alors commencez par Chrome.

4. Inspecter un élément.

   Cliquez avec le bouton droit sur un élément et choisissez Inspecter l'élément dans le menu contextuel qui s'affiche.

5. Gasp émerveillé par les outils de développement géniaux.

   Conservez-le dans l'onglet Éléments pour le moment.

6. Changez le code HTML!

   Vous pouvez double-cliquer sur le code dans le visualiseur de code et modifier le contenu. C'est amusant, mais pas permanent ou particulièrement utile.

7. Vous pouvez également modifier le CSS.

   Si un sélecteur de style a été défini, il apparaît sous l'onglet de la section. Vous pouvez ajouter de nouvelles règles de style ou modifier les règles existantes, et vous pourrez voir les résultats à la volée.

8. Vous pouvez même utiliser un sélecteur de couleurs sophistiqué.

   Lorsqu'une règle de couleur a été définie, vous verrez un petit échantillon de couleur. Cliquez sur cette couleur pour obtenir un bon sélecteur de couleur que vous pouvez utiliser.

9. Sélectionnez différentes parties de la page pour modifier d'autres règles.

   Vous pouvez modifier le code CSS de n'importe quel élément, à condition qu'une sorte de règle ait été sauvegardée.

10. Copiez et collez les règles de style que vous souhaitez conserver.

    Les modifications effectuées dans la barre d'outils du développeur Web ne sont pas permanentes. Si vous trouvez des couleurs ou d'autres règles de style que vous aimez, vous pouvez les copier depuis la fenêtre des développeurs et les coller dans votre code.