системные цвета, шрифты и кое-что ещё / Хабр

Думаю, все мы, в целом, знакомы с таким способом описания CSS-цветов:

color: OldLace;
background: rebeccapurple;
Полагаю, их обычно называют «именованными цветами».

Но конкретные цвета, одни и те же в любой ситуации, к которым можно обращаться по именам, это — далеко не единственный вид особых CSS-цветов. Есть ещё одна разновидность подобных цветов. Их имена связаны с цветами уже не так однозначно. Речь идёт о так называемых «системных цветах». Джим Нильсен опубликовал потрясающий материал на эту тему. Вот, что он пишет:

Мне нужна возможность выразить следующее: «Эй, браузер! Используй для выпадающего списка тот же тёмный цвет (или тот же светлый цвет, если страница оформлена с помощью светлой темы), который ты применяешь для фонового цвета документа». Мне нужен доступ к чему-то наподобие переменной, которая указывает именно на тот «тёмный», который использует браузер.

Джим в своём материале привёл ссылку на статью Томаса Штайнера, откуда я узнал, что понятие «системные цвета» закреплено в стандарте CSS Color Module Level 4.

Это — не такие цвета, которые являются одними и теми же во всех браузерах (или, по крайней мере, пытаются таковыми быть). Их позволено устанавливать на основе «выбора, сделанного пользователем, браузером или операционной системой». В результате, например, цвет Canvas — это «фоновый цвет содержимого приложения или документа». Вот конкретный пример: в тёмном режиме background-color — это #1e1e1e в Safari и #121212 в Chrome. Если вас это устраивает — то есть — вы склоняетесь к использованию тех цветов, которые браузер считает подходящими для неких элементов, то воспользоваться этими цветами можно посредством соответствующих ключевых слов.

В вышеупомянутом стандарте описано множество системных цветов:

  • Canvas
  • CanvasText
  • LinkText
  • VisitedText
  • ActiveText
  • ButtonFace
  • ButtonText
  • ButtonBorder
  • Field
  • FieldText
  • Highlight
  • HighlightText
  • Mark
  • MarkText
  • GrayText
Причём, они различаются не только от браузера к браузеру.
Они подвергаются изменениям и при переключении между тёмной и светлой темами. Естественно, если используются соответствующие CSS-стили.

html {
  color-scheme: light dark;
}
Если поменять тему — изменятся и эти цвета. При этом нет абсолютной необходимости использовать их в строгом соответствии с их названиями. Вот пример:

Использование системных цветов

А тут, на CodePen, можно посмотреть код веб-страницы, при описании которой используются такие цвета.

Пример на CodePen, в котором используются системные цвета

В этом примере используются не только системные цвета, но и системный шрифт —

system-ui. Браузер, выводя тексты, оформленные с помощью этого шрифта, действует в том же духе, в котором он действует, работая с системными цветами. Этот шрифт отличается той же гибкостью, что и такие цвета. То есть — он не будет одним и тем же в разных браузерах и операционных системах. Джим писал и об этом. То, чего можно достичь с помощью такого подхода, раньше достигали, используя довольно длинный список именованных шрифтов. Теперь же в решении подобной задачи нам, при условии наличия браузерной поддержки, помогает CSS.

Есть много таких шрифтов:

  • serif
  • sans-serif
  • monospace
  • system-ui
  • cursive
  • fantasy
  • emoji
  • math
  • fangsong
  • ui-serif
  • ui-sans-serif
  • ui-monospace
  • ui-rounded
Но поддержку этих шрифтов в разных браузерах нельзя назвать хоть сколько-нибудь стабильной. Например, я могу воспользоваться таким стилем:

p {
  font-family: ui-monospace, system-ui, fantasy;
}
На моём Mac, в браузере Safari, абзацы будут оформлены с помощью шрифта SF Mono (ui-monospace). А вот в Chrome шрифт ui-monospace не сработает, в этом браузере будет применён резервный шрифт SF Pro (
system-ui). В Firefox не будет использован ни ui-monospace, ни system-ui. В результате абзацы будут оформлены с помощью шрифта Papyrus (fantasy). Получается, что, несмотря на возможность использования системных шрифтов, в наше время всё ещё важна подготовка стеков шрифтов для оформления различных элементов. Но при этом интересно то, что ключевые слова, описывающие системные шрифты, представляют собой почти то же самое, что и стеки шрифтов.

Итак, мы выяснили, что в CSS существуют системные цвета и системные шрифты. И тут прямо-таки напрашивается вопрос о том, есть ли в CSS ещё что-то «системное».

Поищем ответ на этот вопрос. Так, существуют ключевые слова для настройки степени жирности шрифта. Например, font-weight: bold; — это то же самое, что и 700. А ключевое слово bolder указывает на то, что шрифт элемента лишь совсем немного жирнее, чем шрифт родительского элемента. Всё это не выглядит как некий механизм системного уровня, когда машина сама выбирает то, что считает нужным, и, в зависимости от конкретных условий, поступает по-разному. Но, возможно, этот механизм достаточно близок к чему-то «системному».

Существуют ещё и именованные размеры шрифтов, вроде

font-size: xx-small;. Я понимаю, что системы испытывают желание управлять этими значениями, делая шрифт, настроенный с их помощью, такого размера, который лучше всего подходит для каждой конкретной ситуации. Но когда я по-быстрому это проверил (сравнив Chrome и iOS Safari), оказалось, что итоговый размер шрифта, вычисленный системой, и там и там получился одним и тем же.

При этом вышеописанные именованные размеры шрифтов применяются только к шрифтам. Я, например, не могу воспользоваться стилем margin: large;. Поместить подобное в CSS, конечно, можно, но это не возымеет никакого эффекта. В результате можно сказать, что в CSS нет универсальной системы именованных размеров элементов.

А как насчёт системных иконок? Нечто подобное представляют собой эмотиконы. Их используют, зная о том, что разные системы выводят их по-разному. Обычно это всех устраивает, так как известно, что внешний вид этих иконок будет согласован с другими подобными значками, используемыми в системе пользователя.

Эмотикон Blue Book в разных системах (источник — Emojipedia)

Если продолжить размышления о «системных» сущностях, то можно сказать, что существует такое явление, как «системные элементы управления для ввода данных». Ведь, как известно, в разных браузерах и на разных платформах подобные элементы управления выводятся очень по-разному. Но это не нарушает идеи, заложенные в спецификациях. Как говорится — каждому своё.

Пользовались ли вы системными CSS-цветами?

Не меняется цвет текста в css

Вопрос задан

Изменён 20 дней назад

Просмотрен 827 раз 

.
 
 body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
/*Container==================================================*/
.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}
/*Header==================================================*/
.header {
    padding: 20px 0;
}
.header__inner {
    display: flex;
    justify-content: space-between;
}
/*Nav==================================================*/
.nav {
    font-size: 18px;
    text-transform: uppercase;
    font-family: montserrat;
    color: #000;
}
.nav__link{
    color: #fff;
    text-decoration: none;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;0,700;1,700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div>
          <div>
         <nav>
                 <a href="nav__link" href="#">Главная</a>
                 <a href="nav__link" href="#">О библиотеке</a>
                 <a href="nav__link" href="#">Информационные ресурсы</a>
                 <a href="nav__link" href="#">Читателям</a>
                 <a href="nav__link" href="#">Библиотекарям</a>
              </nav>
              <div>
                  <input type="text" name="" placeholder="Ввелите текст.
 
 
 ..">
                  <a href="#"></a>
              </div>
              
          </div>
        </div>
    </header>
</body>
</html>

смотри внимательно на тег a — почему там 2 href ? и посмотри порядок подключения шрифта со стилями

2

Должно быть так: <a href="#">Главная</a>

Не заданы стили вашим ссылкам. Всё должно иметь стили. И да правильно заметили, что у вас 2 «href»: это — href=»nav__link» замените на это —

.body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
/*Container==================================================*/
.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}
/*Header==================================================*/
.header {
    padding: 20px 0;
}
.header__inner {
    display: flex;
    justify-content: space-between;
}
/*Nav==================================================*/
. nav {
    font-size: 18px;
    text-transform: uppercase;
    font-family: montserrat;
    color: #000;
}
.nav a {
  color: black;
  transition: 0.3s;
}
.nav a:hover {
  color: red;
}
.nav__link{
    color: #fff;
    text-decoration: none;
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;0,700;1,700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div>
          <div>
         <nav>
                 <a href="#">Главная</a>
                 <a href="#">О библиотеке</a>
                 <a href="#">Информационные ресурсы</a>
                 <a href="#">Читателям</a>
                 <a href="#">Библиотекарям</a>
              </nav>
              <div>
                  <input type="text" name="" placeholder="Ввелите текст. ..">
                  <a href="#"></a>
              </div>
              
          </div>
        </div>
    </header>
</body>
</html>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html — Цвет текста CSS не меняется

спросил

Изменено 1 год, 4 месяца назад

Просмотрено 1к раз

Я пытался изменить цвет текста (обычный и при наведении), но ничего не работает. Пробовал !важно, но все равно не показывает. Пробовали смотреть другие ответы, но не работали. Код CSS и HTML Div (я пробовал удалить текстовое оформление)

 #пять {
  положение: фиксированное;
  верх: 10 пикселей;
  справа: 100 пикселей;
  семейство шрифтов: моноширинный;
  вес шрифта: полужирный;
  размер шрифта: 16px;
  красный цвет!;
}
#пять:наведите {
  черный цвет;
  text-shadow: 5px 5px 5px красный;
} 
 

  
    ТЕСТ5
  • HTML
  • CSS
1

Вам нужно стилизовать тег , а не родительский.

 #пять {
  текстовое оформление: нет;
  красный цвет;
}
#пять:наведите {
  черный цвет;
}

Это происходит потому, что тег по умолчанию применяет свой собственный цвет (что в большинстве случаев является преимуществом, но в вашем случае вам придется вручную изменить цвет напрямую с помощью селектора a ).

Полный, фиксированный код: 

 #five {
  положение: фиксированное;
  верх: 10 пикселей;
  справа: 100 пикселей;
  семейство шрифтов: моноширинный;
  вес шрифта: полужирный;
  размер шрифта: 16px;
}
#пять:наведите {
  text-shadow: 5px 5px 5px красный;
}
/* это то, что я добавил */
#пять {
  текстовое оформление: нет;
  красный цвет;
}
#пять:наведите {
  черный цвет;
} 
 <р>
  ТЕСТ
1

Привет, это потому, что вам нужно раскрасить тег a, чтобы вы могли добавить класс или идентификатор к тегу a, а затем изменить это.

Измените CSS на это:

 .five {
  положение: фиксированное;
  верх: 10 пикселей;
  справа: 100 пикселей;
  семейство шрифтов: моноширинный;
  вес шрифта: полужирный;
  размер шрифта: 16px;
  красный цвет!;
}
.five:наведите {
  черный цвет;
  text-shadow: 5px 5px 5px красный;
}

И измените html на это:

 
TEST5
1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Документация по инструменту Code.org

Документация по инструменту Code.org
    • Игровая лаборатория
      • Фигуры для рисования
      • Формы и параметры
      • Спрайты
        • Свойства спрайта
        • Взаимодействие спрайтов
        • Обнаружение столкновения
        • Скорость
      • Шаблон счетчика
      • Скорость и паттерн счетчика
      • Петля рисования
      • Отладка с помощью Watchers
      • Вкладка «Анимация»
        • Редактирование изображений
        • Многокадровая анимация
    • Лаборатория приложений
      • Ответ на ввод пользователя
      • Получение ввода с помощью getProperty
      • Мультиэкранные приложения
      • Изменение экранов
      • Проектирование экранов с кодом
      • Шаблон счетчика
      • Режим проектирования
        • Элементы режима проектирования
        • Импорт экранов
      • Операторы if
      • Хранилище данных таблицы App Lab
    • Набор инструментов для изготовления
      • Спортивная площадка
      • Цветные огни
      • Воспроизведение нот
      • Аналоговые датчики
      • Замена шкалы датчика
      • Физический ввод
      • Производство продукции
      • Схемы и кнопки
      • Цепи и светодиоды
      • Акселерометр
      • События акселерометра
      • События Совета
      • События данных и изменений
    • JavaScript
      • Булевы значения и операторы сравнения
      • Операторы if
      • Операторы if-else
      • Для циклов
      • Временная петля
      • Цикл по времени
      • Переменные
      • Именование переменных
      • Массивы
      • Изменение массивов
      • Случайные числа
      • Функции
      • Узоры
    • HTML
      • Теги HTML
      • Заголовки и параграфы
      • изображений в HTML
      • Списки
      • Гиперссылки
      • Форматирование HTML
    • УСБ
      • Таблицы стилей
      • Свойства текста
      • Стайлинг кузова
      • Свойства макета
      • Классы
    • Шаблоны
      • Шаблоны счетчика с событием
      • Переменная с шаблоном конкатенации строк
      • Шаблон updateScreen()
      • Проверка нескольких условий с помощью If-Else-If
      • Шаблон доступа к произвольному списку
      • Шаблон прокрутки списка
      • Когда выполнять функцию
      • Область действия переменной отладки: функции
      • Шаблон фильтра списка
      • Шаблон сокращения списка
    • Прочее
      • Поиск Creative Commons
      • Какой тип диаграммы?
    • Лаборатория искусственного интеллекта
      • Введение в лабораторию искусственного интеллекта
      • Использование данных с категориальными признаками
      • Использование данных с числовыми функциями
      • Выбор метки
      • Выбор функций
      • Точность в лаборатории искусственного интеллекта
      • Создание опроса
      • Сохранение и загрузка CSV-файлов
      • Импорт модели в App Lab
      • Карточки моделей в лаборатории искусственного интеллекта

Существует множество доступных свойств CSS, которые позволяют вам стилизовать текст на вашей странице. Вот обзор некоторых из наиболее распространенных

Собственность Что это меняет Пример
цвет Цвет вашего текста цвет: темно-бордовый;
выравнивание по тексту Выравнивание вашего текста выравнивание текста: по центру;
украшение текста Дополнительный стиль text-decoration: подчеркивание;
семейство шрифтов Какой шрифт использовать семейство шрифтов: фэнтези;
размер шрифта Размер вашего текста размер шрифта: 20 пикселей;

Пример стилизованного текста

Если мы сложим все это вместе, вы можете получить такой текст:

 p {
  цвет: темно-бордовый;
  выравнивание текста: по центру;
  оформление текста: подчеркивание;
  семейство шрифтов: фэнтези;
  размер шрифта: 20px;
}

Указание шрифтов

При использовании CSS можно заметить, что font-family: fantasy; ваш текст выглядит по-разному на разных компьютерах.

No related posts.