W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 颜色主题



颜色主题

使用 W3.CSS,很容易为您的应用程序定义自己的颜色主题。

Example

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.w3schools.wang/w3.css">
<link rel="stylesheet" href=" http://res.w3schools.wang/cate/w3css/w3-theme-indigo.css">

尝试一下 »


预定义主题

在HTML应用程序中,可以通过选择预定义颜色的不同颜色来限制颜色的使用:

w3-red 尝 试
w3-pink 尝 试
w3-purple 尝 试
w3-deep-purple 尝 试
w3-indigo 尝 试
w3-blue 尝 试
w3-light-blue 尝 试
w3-cyan 尝 试
w3-teal 尝 试
w3-green 尝 试
w3-light-green 尝 试
w3-lime 尝 试
w3-khaki 尝 试
w3-yellow 尝 试
w3-amber 尝 试
w3-orange 尝 试
w3-deep-orange 尝 试
w3-blue-grey 尝 试
w3-brown 尝 试
w3-grey 尝 试
w3-dark-grey 尝 试
w3-black 尝 试
w3-w3schools 尝 试

Movies 2014

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

  • The Avengers

    A huge success for Marvel and Disney

«»


Movies 2014

  • Frozen

    The response to the animations was ridiculous

  • The Fault in Our Stars

    Touching, gripping and genuinely well made

  • The Avengers

    A huge success for Marvel and Disney

«»


私有主题

使用W3.CSS,很容易定制私有色彩主题的应用。

您可以链接到 <link> 标签中的私有主题,也可以将专用主题置于 <style> 标签中:

Example

<style>
.w3-theme {
color:#fff !important;background-color:#3f51b5 !important}
.w3-theme-light {
color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-dark {
color:#fff !important;background-color:#1a237e !important}
.w3-theme-l5 {
color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-l4 {
color:#000 !important;background-color:#c5cae9 !important}
.w3-theme-l3 {
color:#000 !important;background-color:#9fa8da !important}
.w3-theme-l2 {
color:#fff !important;background-color:#7986cb !important}
.w3-theme-l1 {
color:#fff !important;background-color:#5c6bc0 !important}
.w3-theme-d1 {
color:#fff !important;background-color:#3949ab !important}
.w3-theme-d2 {
color:#fff !important;background-color:#303f9f !important}
.w3-theme-d3 {
color:#fff !important;background-color:#283593 !important}
.w3-theme-d4 {
color:#fff !important;background-color:#1a237e !important}
.w3-theme-action {
color:#fff !important;background-color:#311b92 !important}
.w3-text-theme {
color:#1a237e !important}
</style>

尝试一下 »


添加渐变

一个读者给我们发送了这个建议:你可能想考虑为每个主题添加一个渐变。

我用蓝色主题的 l2 和 l1 颜色来创建这个渐变:

Example

.w3-theme-gradient {
  color: #000 !important;
  background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-moz-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background:-ms-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
  color: #000 !important;
  background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}

尝试一下 »


颜色主题

W3C中文教程 为您提供了一些可下载的谷歌Material的颜色主题样式表:

样式表 描述
w3-theme-amber.css Color Theme Amber
w3-theme-black.css Color Theme Black
w3-theme-blue.css Color Theme Blue
w3-theme-blue-grey.css Color Theme Blue Grey
w3-theme-brown.css Color Theme Brown
w3-theme-cyan.css Color Theme Cyan
w3-theme-dark-grey.css Color Theme Dark Grey
w3-theme-deep-orange.css Color Theme Deep Orange
w3-theme-deep-purple.css Color Theme Deep Purple
w3-theme-green.css Color Theme Green
w3-theme-grey.css Color Theme Grey
w3-theme-indigo.css Color Theme Indigo
w3-theme-khaki.css Color Theme Khaki
w3-theme-light-blue.css Color Theme Light Blue
w3-theme-light-green.css Color Theme Light Green
w3-theme-lime.css Color Theme Lime
w3-theme-orange.css Color Theme Orange
w3-theme-pink.css Color Theme Pink
w3-theme-purple.css Color Theme Purple
w3-theme-red.css Color Theme Red
w3-theme-teal.css Color Theme Teal
w3-theme-yellow.css Color Theme Yellow