Comment choisir les couleurs pour votre HTML5 et CSS3 pages Web en fonction

Les couleurs peuvent sembler insurmontables quand on travaille avec des pages web HTML5 et CSS3. Avec un peu de pratique, et un peu de patience, vous serez la gestion des couleurs avec style.

Sommaire

Commencez avec des couleurs Web sécurisées

Le programme webSafe.html fonctionne en vous permettant de saisir rapidement une valeur de web-safe. Pour rendre rouge, appuyez sur le bouton FF dans la colonne rouge. Les valeurs bleues et vertes ont la valeur par défaut de 00, de sorte que le fond est rouge.

Les couleurs Web sécurisées vous donner beaucoup d'espace pour jouer, et ils sont très facile de travailler avec. En fait, ils sont tellement commun que vous pouvez utiliser un raccourci. Parce que les couleurs Web sécurisées sont tous répétées, vous pouvez écrire un chiffre répété comme un seul chiffre. Vous pouvez spécifier que soit le magenta ou le navigateur et comprend, en vous donnant un magenta maux de tête induisant.

Pour faire un rouge plus foncé, changer la FF à la prochaine plus petite valeur. Si vous voulez plus sombre encore, essayez. Expérimentez avec toutes les valeurs de rouge et de voir comment il est facile d'obtenir plusieurs types de rouge. Si vous voulez une variation de rose, élever les valeurs vertes et bleues ensemble. est une couleur- vieux rose est un brighter- bits et est d'un rose très pâle.

Comment modifier vos couleurs

La palette Web sécurisée est pratique, mais il vous donne un nombre relativement restreint de couleurs (216). Deux cent seize crayons dans la boîte sont assez agréable, mais vous pourriez avoir besoin de plus. Généralement, il est à bon départ avec des couleurs Web sécurisées et ensuite ajuster comme vous allez. Si vous voulez un rose plus léger que, vous pouvez sauter du train en marche sécurisée pour le Web et d'utiliser ou de toute autre couleur que vous souhaitez!

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

Comment appliquer des couleurs sur vos propres pages

Le point est de faire les choses semblent bonnes sur votre pages. Pour ajouter de la couleur à vos pages, procédez comme suit:

  1. Définir le code HTML que la normale.

    Le code HTML ne devrait pas avoir un lien quelconque avec les couleurs. Ajouter la couleur strictement CSS.

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

  3. Ajouter un sélecteur pour chaque étiquette que vous souhaitez modifier.




    Vous pouvez modifier toute balise HTML, donc si vous souhaitez modifier tous les paragraphes, ajouter un sélecteur. Utilisez le nom de la balise sans les équerres.

  4. Ajouter et attributs.

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

Comment changer CSS à la volée

Le navigateur Web Chrome a une astuce particulièrement cool quand il vient à codage CSS. Vous pouvez consulter le CSS d'un élément sur une page web et le modifier, voir les résultats en temps réel!

Voici comment cela fonctionne:

  1. Création de la page de façon normale.

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

  2. Ajouter sélecteurs CSS.

    Spécifiez le CSS pour les éléments que vous souhaitez changer. La page emptyCSS.html sur le site montre un exemple très simple. Vous pouvez mettre les valeurs souhaitées dans le CSS, ou vous pouvez simplement laisser l'ébauche de CSS pour le moment. Si vous voulez expérimenter, jetez un oeil à emptyCSS.html sur le site. Il a 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 il est clairement le leader, alors commencez avec Chrome.

  4. Inspecter un élément.

    droit; cliquez sur un élément, puis sélectionnez Inspecter l'élément dans le menu pop-up qui en résulte.

  5. Gasp dans l'émerveillement dans les super outils de développement.

    Gardez-le dans l'onglet Eléments pour l'instant.

  6. Modifiez le code HTML!

    Vous pouvez double-cliquez sur le code dans la visionneuse de code et modifier le contenu. Ceci est amusant, mais pas permanente 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 dans la section. Vous pouvez ajouter de nouvelles règles de style ou de modifier les existantes, et vous serez en mesure de voir les résultats à la volée.

  8. Vous pouvez même utiliser un sélecteur de couleur fantaisie.

    Quand une règle de couleur a été défini, vous verrez une petite nuance de couleur. Cliquez sur cette couleur pour obtenir un sélecteur de couleur agréable, vous pouvez utiliser.

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

    Vous pouvez modifier le CSS d'un élément aussi longtemps comme une sorte de règle a été sauvé.

  10. Copier et coller des règles de style que vous souhaitez conserver.

    Les modifications apportées dans la barre d'outils de développeur web ne sont pas permanents. Si vous trouvez des couleurs ou d'autres règles de style que vous aimez, vous pouvez les copier à partir de la fenêtre de développeur et de les coller dans votre code.

    image0.jpg

» » » » Comment choisir les couleurs pour votre HTML5 et CSS3 pages Web en fonction