Учебники

W3.CSS — Цвета

Ноябрь 23, 2018

W3.CSS поддерживает богатый набор цветовых классов. Эти цветовые классы вдохновлены и разработаны с учетом цветов, используемых в маркетинге, дорожных знаков и заметок.

  • w3-красный

  • w3-розовый

  • w3-фиолетовый

  • w3-глубоко-фиолетовый

  • w3-индиго

  • w3-синий

  • w3-светло-голубой

  • и3-циан

  • w3-бирюзовые

  • w3-зеленый

  • w3-светло-зеленый

  • и3-кальциево

  • w3-хаки

  • w3-желтый

  • w3-янтарный

  • w3-оранжевый

  • w3-темно-оранжевый цвет

  • w3-сине-серый

  • и3-коричневого цвета

  • и3-светло-серый

  • w3-серый

  • w3-темно-серый

  • w3-черный

w3-красный

w3-розовый

w3-фиолетовый

w3-глубоко-фиолетовый

w3-индиго

w3-синий

w3-светло-голубой

и3-циан

w3-бирюзовые

w3-зеленый

w3-светло-зеленый

и3-кальциево

w3-хаки

w3-желтый

w3-янтарный

w3-оранжевый

w3-темно-оранжевый цвет

w3-сине-серый

и3-коричневого цвета

и3-светло-серый

w3-серый

w3-темно-серый

w3-черный

Цветные Темы

W3.CSS обеспечивает отличную поддержку для применения темы к веб-сайту, используя свою общедоступную тему css. Некоторые из примеров приведены ниже —

Старший CSS имя и описание
1

w3-тема-indigo.css

CSS с вариантами цвета индиго

2

w3-тема-red.css

CSS, имеющий красный вариант цвета

w3-тема-indigo.css

CSS с вариантами цвета индиго

w3-тема-red.css

CSS, имеющий красный вариант цвета

Чтобы использовать темы, перейдите по адресу https://www.w3schools.com/w3css/w3css_downloads.asp, чтобы загрузить необходимый файл CSS.

пример

w3css_colors.htm

Live Demo

<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>

Результат

Проверьте результат.

36
Share: