Maison interface Web tutoriel HTML Résumé de l'utilisation des couleurs en HTML et CSS

Résumé de l'utilisation des couleurs en HTML et CSS

Jun 09, 2017 am 11:03 AM

En HTML, une couleur peut être représentée des trois manières suivantes : nom de la couleur, valeur RVB ou valeur HEX. Dans le développement réel, vous pouvez utiliser la couleur pour faire beaucoup de choses. Vous pouvez également personnaliser l'effet de couleur de la police pour obtenir un effet de dégradé. Vous pouvez également utiliser les attributs CSS pour définir divers effets de couleur souhaités pour les bordures, les polices, les images, etc. Cet article présente principalement comment utiliser les couleurs en HTML et CSS.

Vous pouvez d'abord apprendre des cours gratuits liés au site Web chinois php

Apprendre"Démarrage rapide HTML/CSS" Couleur et classificationCours de chapitre

Résumé de lutilisation des couleurs en HTML et CSS

2. Regardez

"Tutoriel vidéo HTML du programmeur Dark Horse". Codes pour les couleurs Tutoriel vidéo

Résumé de lutilisation des couleurs en HTML et CSS

html, utilisation des couleurs en CSS

1.

valeurs numérotées HTML​​de diverses couleurs communes (collection)

En HTML, une couleur peut être représentée par un nom de couleur, une valeur RVB ou Représentation de la valeur HEX. RVB RVB (rouge, vert, bleu) trois variables sont les concentrations des trois couleurs primaires (0 ~ 255). Par exemple, RVB (255,0,0), RVB rouge (0,0,0), RVB noir (255,255,255). l'hexadécimal blanc HEX représente seize Système décimal : 0~255 Conversion en hexadécimal : 00~FF

2

Apprentissage HTML5 en jouant (4) - Changer les couleurs

dans Learn. en jouant avec HTML5 (2) - Dans le dessin de base, nous avons mentionné qu'il existe deux attributs contextuels qui peuvent être utilisés pour définir les couleurs :

StrokeStyle détermine la couleur de la ligne que vous dessinez actuellement

fillStyle détermine la couleur de la zone que vous souhaitez actuellement remplir

La valeur de couleur peut être une chaîne valide conforme à la norme de valeur de couleur CSS3.

3.

Explication détaillée de l'exemple de code d'utilisation du mode de couleur CSS3 RGBA

Le mode de couleur RGBA est une extension du mode de couleur RVB, qui est ajouté en fonction des trois couleurs primaires. du paramètre d'opacité du rouge, du bleu et du vert. La syntaxe est la suivante :

rgba (r, g, b, )

où r, g, b représentent les proportions des trois couleurs primaires rouge, bleu, et vert. La valeur peut être un entier ou un pourcentage. La valeur entière positive est comprise entre 0 et 255 et la valeur en pourcentage est comprise entre 0,0 % et 100,0 %. Les valeurs en dehors de la plage seront coupées à la limite de valeur la plus proche. Notez que tous les navigateurs ne prennent pas en charge l'utilisation de valeurs en pourcentage. Le quatrième paramètre représente l'opacité, avec une valeur comprise entre 0 et 1.

4.

Introduction détaillée de la couleur du dégradé CSS, de la marque d'omission, de la police intégrée, de l'ombre du texte

Le dégradé CSS3 est divisé en dégradé linéaire (linéaire) et dégradé radial (radial ). Étant donné que différents moteurs de rendu ont une syntaxe différente pour implémenter les dégradés, nous analysons ici uniquement son utilisation sur la base de la syntaxe standard du W3C des dégradés linéaires. Vous pouvez vous référer aux informations pertinentes pour le reste. La syntaxe W3C a été prise en charge par des navigateurs tels que IE10+, Firefox19.0+, Chrome26.0+ et Opera12.1+.

5.

Conception Web de haute qualité : exemples et conseils n° 6 (Utiliser tout le potentiel de la couleur)

L'été au Tennessee (Tennessee Summer Tour) est un Site vibrant, lumineux et très chaleureux. Tout semble pensé pour favoriser les activités estivales. Le site utilise une large gamme de couleurs très saturées dans des teintes variées, mais chaque couleur fait mouche et aucune n'est inappropriée pour le thème. La combinaison de couleurs d’un design de haute qualité doit être étroitement liée au service ou au produit qu’il est destiné à présenter. Un bon design ne nécessite pas toujours de faire de grands efforts pour choisir des couleurs surprenantes. Les couleurs les plus évidentes et qui doivent être utilisées peuvent créer de meilleurs effets. Par exemple, Hell Design (Hell Design), il est tout simplement déraisonnable de ne pas utiliser la couleur rouge ardent qui symbolise l'enfer.

6.

Tutoriel CSS3 (3) : couleur de la bordure de la page Web border-color

Utilisez la propriété border-radius de CSS3. à X px , vous pouvez alors utiliser X couleurs sur cette bordure, chaque couleur affichant une largeur de 1px. Si votre bordure fait 10 pixels de large, mais que seulement 5 ou 6 couleurs sont déclarées, la dernière couleur sera ajoutée à la largeur restante.

Questions et réponses connexes

1 La différence entre les effets d'opacité et rgba dans le navigateur et les effets de transparence des couleurs utilisés dans Android et. Programmes iOS Très gros.

2. Pourquoi le mode couleur HSL de CSS3 est-il rarement utilisé ?

[Recommandations associées]

1. Tutoriel vidéo gratuit sur le site Web php chinois : "php.cn Dugu Jiujian (2)-css video tutoriel"

2. Tutoriel gratuit pour site Web PHP chinois : "Apprenez HTML+CSS du bout des doigts"

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Vous avez un jeu croisé?
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Comment utiliser Bootstrap en Vue Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Comment écrire des lignes fendues sur bootstrap Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comment redimensionner le bootstrap Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment configurer le cadre de bootstrap Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment insérer des photos sur bootstrap Comment insérer des photos sur bootstrap Apr 07, 2025 pm 03:30 PM

Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.

Le rôle de React dans HTML: Amélioration de l'expérience utilisateur Le rôle de React dans HTML: Amélioration de l'expérience utilisateur Apr 09, 2025 am 12:11 AM

React combine JSX et HTML pour améliorer l'expérience utilisateur. 1) JSX incorpore du HTML pour rendre le développement plus intuitif. 2) Le mécanisme DOM virtuel optimise les performances et réduit les opérations DOM. 3) Interface utilisateur de gestion basée sur les composants pour améliorer la maintenabilité. 4) La gestion des états et le traitement des événements améliorent l'interactivité.

Comment utiliser le bouton bootstrap Comment utiliser le bouton bootstrap Apr 07, 2025 pm 03:09 PM

Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton

See all articles