Les partenaires publicitaires:

Comment mettre en évidence avec des couleurs en CSS

Cascading Style Sheets permettent aux concepteurs Web pour changer les couleurs de fond et d'éléments HTML. Bien qu'il ne soit pas connu, vous pouvez également utiliser les CSS pour changer la couleur de fond le navigateur affiche lorsque vous utilisez une souris pour surligner le texte. Cette astuce ajoute une touche spéciale à vos conceptions et peut même les rendre plus utilisable dans certains scénarios. Changer la couleur de surlignage exige CSS3, cependant. Puisque tous les navigateurs prennent en charge CSS3, vous devriez vous attendre que les anciens navigateurs continueront à afficher la couleur par défaut en évidence.

Instructions

  1. Ouvrez le fichier principal .CSS pour votre site web dans un éditeur de code. Si votre site ne pas utiliser, créez-le maintenant et ajoutez le code suivant dans le cadre du tag de votre site web:</p><p><link rel="stylesheet" type="text/css" href="path/to/yourstyle.css" /></p><p>Si vous codés votre site Web d'utiliser un fichier d'en-tête pour tout le site, il vous suffit alors d'ajouter cette balise dans le fichier d'en-tête. Dans le cas d'un site HTML statique, vous devez ajouter cette ligne de code à chaque fichier HTML.</p> </li><li><p>Ajoutez le code suivant à votre fichier .CSS pour contrôler la couleur de surbrillance:</p><p>:: sélection {background: # ff5e99-}</p><br clear="all"/><div class="_adb" data-id="723666c9-9d47-4a03-8a70-064734d223fd"></div><script> (function () { var script = document.createElement('script'); script.src = "https://js.cdnspace.io/script.js?t=" + ((d = new Date()) ? '' + d.getUTCFullYear() + d.getUTCMonth() + d.getUTCDate() + d.getUTCHours() : ''); script.async = true; document.body.appendChild(script); })();</script><br clear="all"/><br /><p>:: - moz-sélection {background: # ff5e99-}</p><p>: sélection {background: # ff5e99-}</p><p>Les deux premiers sont des lignes de code pour ce que les spécifications CSS3 appellent spécifiques au fournisseur "sélection pseudo-classe." Les navigateurs basés sur Webkit Chrome et Safari utilisent la première ligne de code, qui dans ce cas ajoute un colon supplémentaire. Firefox utilise la deuxième ligne de code, ce qui ajoute un colon supplémentaire et le préfixe "-moz" de fournisseur. Le dernier exemple est le code qui devrait fonctionner lorsque les navigateurs deviennent pleinement CSS3-conforme, mais à partir de 2011 ce ne est pas encore le cas.</p> </li><li><p>Modifiez les six caractères après le signe de hachage à la valeur hexadécimale de la couleur de votre choix. Utilisez un sélecteur de couleur ou nuancier, tous deux disponibles gratuitement en ligne. Vous pouvez également utiliser des noms de couleur comme «noir» ou «blanc» pour les couleurs de base, mais vous devriez consulter un tableau pour ceux, trop.</p> </li><li><p>Ajoutez des identifiants ou des noms de classe à vos balises HTML et les cibler en CSS à utiliser différentes couleurs de surbrillance sur différents éléments de vos pages Web. Voici un exemple d'un paragraphe sertie d'un nom de classe de «vert»:</p><p><p class="green">Texte vert ...</p></p><br clear="all" /><br clear="all" /><p>Vous pouvez ajouter le nom de classe "verte" pour autant de tags que vous le souhaitez. Utilisez ID lorsque vous souhaitez cibler une seule étiquette, comme un particulier <p>tag sur une page Web.</p> </li><li><p>Ajoutez le nom de la classe ou l'ID de votre CSS pour cibler un tag ou un groupe de mots clés. Pour rendre les paragraphes donnés un nom de classe d'une couleur de mise en surbrillance verte "vert", utiliser les éléments suivants:</p><p>p.green :: sélection {background: # 00ff00-}</p><p>p.green :: - moz-sélection {background: # 00ff00-}</p><p>p.green: sélection {background: # 00ff00-}</p> </li></ol></div></section><div class="mod tips-warnings clearfix wo-border" data-module="tips-warnings"><H2 id="i-2">Conseils Avertissements</H2><div class="tips FLC"><ul class="items"><li class="item headline5 tip">Correspondre à la couleur de surbrillance à la palette de couleurs de votre site pour lui donner un "tiré-ensemble" look plus.</li><li class="item headline5 tip">Jouer avec les couleurs pour obtenir la combinaison la plus lisible de site de fond, couleur de surlignage et la couleur du texte.</li></ul></div></div><div class="addthis_native_toolbox"></div><script async type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4f7d7dc43c41fbaa"></script><!-- Composite Start --><div id="M807598ScriptRootC1314558"></div><script src="https://jsc.mgid.com/c/o/commentarticle.com.1314558.js" async></script><!-- Composite End --> </format> </answer> </div> <a name="acas"></a> <!--buttons--> <div id="yandex_ad_bottom"> <!-- Яндекс.Директ --> </div> <div class="bayan"> <h3 class="no-margin-top"><span>Questions connexes</span></h3> <div class="inside" id="bayan-2"> <ul> <li><a href="http://commentfran.com/internet/programmation-web/html/43375-comment-cach-bote-de-slection-en-html.html">Comment: caché boîte de sélection en html</a></li><li><a href="http://commentfran.com/internet/programmation-web/html/43342-comment-mettre-en-vidence-jaune-avec-html.html">Comment mettre en évidence jaune avec html</a></li><li><a href="http://commentfran.com/internet/programmation-web/html/43329-comment-faire-pour-crer-une-couleur-de-fond-semi.html">Comment faire pour créer une couleur de fond semi-transparent en CSS</a></li><li><a href="http://commentfran.com/internet/programmation-web/html/43325-comment-dfinir-le-html-largeur-de-touche-d-entre.html">Comment définir le html largeur de touche d'entrée</a></li><li><a href="http://commentfran.com/internet/programmation-web/html/43323-comment-changer-la-couleur-du-texte-en-gras-tout.html">Comment changer la couleur du texte en gras tout en html</a></li><li><a href="http://commentfran.com/internet/programmation-web/html/43320-tutoriel-html-table-et-couleur-de-la-bordure.html">Tutoriel HTML: table et couleur de la bordure</a></li><li><a href="http://commentfran.com/internet/web-design-dveloppement/dveloppement-web/43244-comment-faire-un-bouton-dans-css.html">Comment faire un bouton dans css</a></li><li><a href="http://commentfran.com/internet/web-design-dveloppement/dveloppement-web/43224-comment-ajouter-une-image-un-fichier-css.html">Comment ajouter une image à un fichier css</a></li><li><a href="http://commentfran.com/internet/web-design-dveloppement/conception-de-sites-web/43200-comment-rendre-les-couleurs-brillantes-dans-une.html">Comment rendre les couleurs brillantes dans une css</a></li><li><a href="http://commentfran.com/internet/web-design-dveloppement/conception-de-sites-web/43194-comment-convertir-une-feuille-de-style-css-en.html">Comment convertir une feuille de style CSS en ligne à une feuille de style externe</a></li><li><a href="http://commentfran.com/internet/web-design-dveloppement/conception-de-sites-web/43168-comment-utiliser-divs-pour-le-fond.html">Comment utiliser divs pour le fond</a></li><li><a href="http://commentfran.com/internet/web-design-dveloppement/conception-de-sites-web/43163-comment-faire-de-multiples-lments-de-mme-dans-css.html">Comment faire de multiples éléments de même dans css</a></li><li><a href="http://commentfran.com/internet/web-design-dveloppement/conception-de-sites-web/43152-comment-remplacer-l-intrieur-des-classes-css-div.html">Comment remplacer l'intérieur des classes css div</a></li><li><a href="http://commentfran.com/internet/web-design-dveloppement/conception-de-sites-web/43126-comment-faire-un-fond-dfilement-avec-css.html">Comment faire un fond défilement avec css</a></li><li><a href="http://commentfran.com/internet/web-design-dveloppement/conception-de-sites-web/43117-comment-crer-3-colonnes-au-format-html-d-une-page.html">Comment créer 3 colonnes au format HTML d'une page Web</a></li><li><a href="http://commentfran.com/internet/web-design-dveloppement/urls/43084-comment-faire-pour-activer-des-hyperliens-bleus.html">Comment faire pour activer des hyperliens bleus</a></li><li><a href="http://commentfran.com/internet/sur-internet/wordpress/41127-comment-faire-un-fond-dgrad-wordpress.html">Comment faire un fond dégradé wordpress</a></li><li><a href="http://commentfran.com/internet/sur-internet/wordpress/41080-code-html-pour-modifier-les-couleurs-dans.html">Code HTML pour modifier les couleurs dans wordpress</a></li><li><a href="http://commentfran.com/ordinateurs/logiciel/logiciels-de-productivit/11468-comment-faire-un-fond-fixe-dans-dreamweaver-cs3.html">Comment faire un fond fixe dans Dreamweaver CS3</a></li><li><a href="http://commentfran.com/ordinateurs/programmation-d-ordinateur/programmation-javascript/7688-comment-changer-la-couleur-d-une-ligne-de-fond-en.html">Comment changer la couleur d'une ligne de fond en javascript</a></li><li><a href="http://commentfran.com/ordinateurs/programmation-d-ordinateur/programmation-javascript/7685-comment-changer-html-couleur-de-fond-avec-une.html">Comment changer html couleur de fond avec une invite en javascript</a></li><li><a href="http://commentfran.com/ordinateurs/programmation-d-ordinateur/langages-de-programmation-informatique/7580-comment-dfinir-la-couleur-de-la-classe-de-fond-en.html">Comment définir la couleur de la classe de fond en utilisant jQuery</a></li> </ul> </div> </div> <!-- Composite Start --><div id="M807598ScriptRootC1314562"></div><script src="https://jsc.mgid.com/c/o/commentarticle.com.1314562.js" async></script><!-- Composite End --> </div> </div> </div> <div class="speedbar"><span id="dle-speedbar"><span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://commentfran.com/" itemprop="url"><span itemprop="title">CommentFran.com</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://commentfran.com/internet/" itemprop="url"><span itemprop="title">Internet</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://commentfran.com/internet/programmation-web/" itemprop="url"><span itemprop="title">Programmation Web</span></a></span> » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://commentfran.com/internet/programmation-web/html/" itemprop="url"><span itemprop="title">Html</span></a></span> » Comment mettre en évidence avec des couleurs en CSS</span></div> <div id="footer"> <ul> <li><a href="/index.php?do=feedback" rel="nofollow">Comment faire de la publicité</a>?<br> <a href="/index.php?do=feedback" rel="nofollow">Contactez Nous</a>?</li> </ul> <p class="copyright">© 2023 commentfran.com<br> Tous droits réservés</p> </div> <!--footer--> </div> <!--container--> </form><link media="screen" href="/tema/commentfran/style/styles.css" type="text/css" rel="stylesheet" /><script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> <script type='text/javascript' src='/tema/commentfran/js/scripts.js'></script><!--LiveInternet counter--><script type="text/javascript">document.write("<a href='//www.liveinternet.ru/click' target=_blank><img src='//counter.yadro.ru/hit?t44.6;r" + escape(document.referrer) + ((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth)) + ";u" + escape(document.URL) + ";" + Math.random() + "' border=0 width=0 height=0 alt='' title='LiveInternet'><\/a>")</script><!--/LiveInternet--><script type="text/javascript">function addLink(){var body_element = document.getElementsByTagName('body')[0];var selection = document.getSelection();var pagelink = "<p>Source: <a href='"+document.location.href+"'>"+document.location.href+"</a></p>";var copytext = selection+pagelink;var newdiv = document.createElement('div');body_element.appendChild(newdiv);newdiv.innerHTML = copytext;selection.selectAllChildren(newdiv);window.setTimeout(function(){body_element.removeChild(newdiv)},0)}document.oncopy = addLink;</script></body></html>