W3css-colors
提供：Dev Guides
W3.CSS-色
W3.CSSは、豊富なカラークラスのセットをサポートしています。 これらのカラークラスは、マーケティング、道路標識、および付箋で使用される色を考慮してインスピレーションと開発が行われています。
- w3-赤
- w3-ピンク
- w3-紫
- w3深紫
- w3-インディゴ
- w3-blue
- w3-ライトブルー
- w3-シアン
- w3-ティール
- w3-green
- w3-ライトグリーン
- w3-石灰
- w3-カーキ
- w3-イエロー
- w3-アンバー
- w3-オレンジ
- w3-濃いオレンジ
- w3-blue-grey
- w3-ブラウン
- w3-ライトグレー
- w3-グレー
- w3-ダークグレー *w3-black
色のテーマ
W3.CSSは、パブリックドメインテーマcssを使用してWebサイトにテーマを適用するための優れたサポートを提供します。 いくつかの例を以下に示します-
| Sr. No. | CSS Name & Description |
|---|---|
| 1 |
Indigoバリアントカラーを持つCSS |
| 2 |
w3-theme-red.css 赤のバリアントカラーを持つCSS |
テーマを使用するには、https://www.w3schools.com/w3css/w3css_downloads.aspにアクセスして、必要なCSSファイルをダウンロードします。
例
w3css_colors
<html>
<head>
<title>The W3.CSS Color Themes</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
<link rel = "stylesheet" href = "css/w3-theme-red.css">
</head>
<body class = "w3-container">
<h2>Color Theme Demo</h2>
<hr/>
<div class = "w3-card-4">
<div class = "w3-container w3-theme w3-card-2">
<h1>Red Colored Theme</h1>
</div>
<div class = "w3-container w3-text-theme">
<h2>w3-text-theme - Theme for Text</h2>
</div>
<ul class = "w3-ul w3-border-top">
<li class = "w3-theme-l5" style = "position:relative">
<a class = "w3-btn-floating-large w3-theme-action w3-right"
style = "position:absolute;top:-28px;right:16px;">+</a>
<p>Using w3-theme-l5/w3-theme-light style</p>
</li>
<li class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
<li class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
<li class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
<li class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
<li class = "w3-theme"><p>Using w3-theme style</p></li>
<li class = "w3-theme-d1"><p>Using w3-theme style</p></li>
<li class = "w3-theme-d2"><p>Using w3-theme style</p></li>
<li class = "w3-theme-d3"><p>Using w3-theme style</p></li>
<li class = "w3-theme-d4"><p>Using w3-theme style</p></li>
</ul>
</div>
</body>
</html>結果
結果を確認します。
