CSS学習カラー：ウィンドウとカラー：currentColor_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS学習カラー：ウィンドウとカラー：currentColor_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:17 AM

1. 見落とされやすい属性

color: currentColor

color: window

これを読んだ後、私は目のように感じます明るいですしかし、私は color: currentColor というものがあることすら知りませんでした。好奇心を抑えられず、すぐに情報を読み、上記の属性の違いを確認しました。次に編集者が学習後の理解をお話します

1. color: currentColor

currentColor キーワードの値は color 属性値の計算値です。 currentColor キーワードが color 属性自体に適用される場合、それは color と同等になります。属性は color 属性の値です。上記のコードの color 属性定義が削除された場合、color には継承があるため、境界線の色は

親要素

の計算された色の値に依存します。要素に色が指定されていない場合、親要素は親の親から継承します。ドキュメントのルートノードの HTML タグが色を指定するまでは、ブラウザのデフォルトの色を使用します。例:

1	`div { border: 1px solid; color: red; }`

ログイン後にコピー

ここを見て、currentColor の役割をすでに理解していると思います。currentColor の使用方法を見てみましょう。まず、その互換性を見てみましょう。IE9 以降と互換性があります。グラデーション、svg、アニメーションなどの場合、以下はグラデーションを例にします:

1	`<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .mm{ color:currentColor; } </style></head><body> <div` `class="box"> <div` `class="mm">sdfsdfsdf</div> </div></body></html>`

ログイン後にコピー

1	`<div` `class="box"></div>`

ログイン後にコピー

効果は図に示すとおりです:

2、color: window

1	`<strong>.box{ height:100px; color: #3CAADB; background-image: linear-gradient(to right, #fff, currentColor 100%);}</strong>`

ログイン後にコピー

システムのデフォルト設定のテキスト Color: (none) also It is White

効果は次のとおりです:

図に示すように、color:window はシステムのデフォルトの色を取得します。システムのデフォルトの文字色の変更

結論：知らないうちに動いていたこの一年で、何も知らない初心者から少しは知っている初心者になりました。それを考えると本当に悲しいです。技術専門家が自らの学習体験を時折共有しているのを見ていると、あらゆる点で彼らを崇拝することしかできません。今日は勇気を出して、私が日々の仕事で遭遇する問題と要約を共有します。私はまだ非常に不安です...記事を書くのは皆さんが私を撫でてくれることを願っています。それが正しくない場合は、メッセージを残すか、私の QQ グループ 519875573 に参加して、みんなでコミュニケーションをとり、一緒に進歩できることを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
2週間前 By 尊渡假赌尊渡假赌尊渡假赌

レポ：チームメイトを復活させる方法
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？
3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7342

9

Java チュートリアル

1627

14

CakePHP チュートリアル

1352

46

Laravel チュートリアル

1265

25

PHP チュートリアル

1210

29

もっと見る

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

WebページのPNG画像にストローク効果を効率的に追加する方法は？ Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

 HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

＆lt; datalist＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

＆lt; meter＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex

＆lt; Progress＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合

 HTML5＆lt; time＆gt;を使用するにはどうすればよいですか日付と時刻を意味的に表す要素？ Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします

See all articles