Какое свойство задает цвет фона в css
Перейти к содержимому

Какое свойство задает цвет фона в css

  • автор:

14 Цвета и фон

Свойства CSS позволяют авторам управлять цветами переднего плана и фоном элемента. Оформление фона может осуществляться с использованием цветовой палитры или графических объектов. С использованием свойств фона разработчики могут размещать, дублировать фоновое изображение, а также определять, будет ли оно фиксировано относительно окна просмотра или будет перемещаться вместе с документом в процессе его прокрутки.

Информацию о синтаксисе корректных значений цветов можно найти в разделе о цветах.

14.1 Цвета переднего плана: свойство ‘color’

Это свойство описывает цвет переднего плана текстового содержимого элемента. Например, существует несколько способов задания красного цвета:

EM < color: red >/* стандартное название цвета */ EM < color: rgb(255,0,0) >/* значение системы RGB из диапазона 0-255 */

В качестве фона элемента (например, поверхности, на которой он будет отображен) разработчики могут задавать либо цвет, либо изображение. В терминах модели представления документа в виде блоков понятие «фон» относится к фону областей, отведенных для содержимого и отступов. Стиль и цвет границ при этом устанавливаются с помощью свойств границ. Поля всегда прозрачны, так что сквозь них всегда виден фон родительского блока.

Свойства фона не наследуются, но фон родительского блока всегда будет виден, т.к. по умолчанию в качестве начального значения свойства ‘background-color’ выступает значение ‘transparent’.

Фон блока, порождаемого корневым элементом, покрывает всю область представления.

Разработчикам HTML-документов рекомендуется задавать фон для элемента BODY, а не для элемента HTML. Агенты пользователей при оформлении фона должны придерживаться следующей иерархии приоритетов: если значение свойства ‘background’ элемента HTML отлично от ‘transparent’, то следует использовать его. В противном случае следует использовать значение свойства ‘background’ элемента BODY. Если в результате получится значение ‘transparent’, то отображаемый фон окажется неопределенным.

В соответствии с этими правилами область представления, лежащая в основе следующего HTML-документа, будет иметь «мраморный» фон:

   Установка фона области представления   Я использую мраморный фон.  

14.2.1 Свойства фона: ‘background-color’ , ‘background-image’ , ‘background-repeat’ , ‘background-attachment’ , ‘background-position’ и ‘background’

Это свойство задает графический объект в качестве фона элемента. При определении фонового изображения авторам следует также указать цвет фона, который будет использоваться, если изображение недоступно. Если изображение доступно, то оно отображается поверх фонового цвета (который будет виден только сквозь прозрачные фрагменты изображения).

BODY < background-image: url("marble.gif") >P

Если задано фоновое изображение, то данное свойство определяет, будет ли оно дублироваться (в виде мозаики) и каким образом это будет осуществляться. Мозаика покрывает области, отведенные в блоке для содержимого и отступов. Значения данного свойства имеют следующий смысл:

repeat Изображение дублируется в вертикальной и горизонтальной плоскостях. repeat-x Изображение дублируется только в горизонтальной плоскости. repeat-y Изображение дублируется только в вертикальной плоскости. no-repeat Изображение не дублируется: отображается только одна копия изображения.

BODY

Одна копия фонового изображения расположена по центру, а другие копии располагаются сверху вниз, формируя тем самым вертикальную полосу позади элемента.

Если задано фоновое изображение, то данное свойство определяет, будет ли оно фиксироваться относительно окна просмотра (значение ‘fixed’) или будет перемещаться вместе с документом (значение ‘scroll’) в процессе его прокрутки.

Даже в случае фиксации изображения оно остается видимым только тогда, когда находится в области, предназначенной для оформления фона или отступов элемента. Поэтому изображение может оставаться невидимым до тех пор, пока его копии не будут расположены мозаикой (‘background-repeat: repeat’).

В следующем примере формируется бесконечная вертикальная полоса, которая остается «приклеенной» к окну просмотра во время прокрутки элемента.

BODY

Агенты пользователей могут интерпретировать значение ‘fixed’ как ‘scroll’. Однако рекомендуется, чтобы значение ‘fixed’ все же интерпретировалось корректно, по крайней мере, для элементов HTML и BODY, т.к. у авторов не существует возможности предоставления изображения только для тех браузеров, которые поддерживают значение ‘fixed’. Дополнительную информацию можно получить в разделе, посвященном конформности.

Если задано фоновое изображение, то данное свойство определяет его начальное положение. Значения имеют следующий смысл:

Если задано только одно значение длины или одно процентное соотношение, то оно определяет позицию только по горизонтали, а позиция по вертикали определяется, исходя из значения 50%. Если задано два значения, то первой указывается позиция по горизонтали. Допускается сочетание значений длины и процентных соотношений (например, ‘50% 2cm’). Также допускается использование отрицательных значений. Ключевые слова не могут использоваться вместе со значениями длины или процентными соотношениями (все возможные варианты представлены выше).

BODY < background: url("banner.jpeg") right top >/* 100% 0% */ BODY < background: url("banner.jpeg") top center >/* 50% 0% */ BODY < background: url("banner.jpeg") center >/* 50% 50% */ BODY < background: url("banner.jpeg") bottom >/* 50% 100% */

Если фоновое изображение фиксировано в окне просмотра (см. свойство ‘background-attachment’ ), то оно размещается относительно окна просмотра, а не относительно области элемента, предназначенной для отступов. Например,

BODY

В представленном выше примере изображение (одиночное) помещается в нижнем правом углу окна просмотра.

Свойство ‘background’ является свойством стенографического типа, используемым для определения отдельных свойств фона ( ‘background-color’ , ‘background-image’ , ‘background-repeat’ , ‘background-attachment’ и ‘background-position’ ) одновременно.

Сначала свойство ‘background’ устанавливает всем отдельным свойствам фона их начальные значения, а затем явно назначает им те значения, которые были заданы в объявлении.

В первом правиле следующего примера было задано значение только для свойства ‘background-color’ , в то время как всем остальным свойствам были присвоены их начальные значения. Во втором правиле явно заданы значения всех отдельных свойств.

BODY < background: red >P

14.3 Гамма-коррекция

Информацию о цветовой гамме можно найти в учебнике под названием «Gamma Tutorial» в спецификации PNG ( [PNG10] ).

При вычислении гамма-коррекции агенты пользователей, осуществляющие отображение на дисплеях с ЭЛТ, могут предполагать идеальность используемой ЭЛТ и игнорировать все эффекты, имеющие место в текущей цветовой гамме из-за внесенных в нее возмущений. Поэтому на имеющихся в данный момент платформах минимум, что им следует сделать: ПК с системой MS-Windows ничего не требуется Unix с использованием X11 ничего не требуется Mac с использованием QuickDraw применить цветовую гамму 1.45 [ICC32] (приложения, осуществляющие автономную синхронизацию цветов, могут просто передать профиль sRGB ICC в модуль синхронизации цветов для выполнения корректной настройки цветовой гаммы) SGI с использованием X применить цветовую гамму из /etc/config/system.glGammaVal (по умолчанию используется значение 1.70; приложения, работающие на Irix версии 6.2 и выше, могут просто передать профиль sRGB ICC в систему управления цветовой гаммой) NeXT с NeXTStep применить цветовую гамму 2.22

Фраза «применить цветовую гамму» означает, что каждой из трех составляющих R, G и B перед тем, как она будет передана операционной системе, должно быть присвоено значение R’=R gamma , G’=G gamma , B’=B gamma .

Это можно быстро сделать, осуществив однократное построение 256-элементной таблицы поиска в момент инициализации браузера:

for i := 0 to 255 do raw := i / 255.0; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end

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

Цвет и фон в CSS

Кроме того, а качестве фона может быть использован рисунок. Например:

body

background-image: url(image/apple-blossoms.jpg);

background-color:#0000FF;

color:white;

Цвет и фон в CSS

Инструкция по смене цвета шрифта и фона в CSS

soc-1

Также рекомендуем почитать:

CSS: создание кнопки CSS: стилизация цитат Как подключить CSS к HTML CSS: свойства шрифта CSS: текстовые эффекты CSS: создание горизонтального меню CSS: работа с блоками

  • Блог
  • Хостинг, домены, мировые новости, обзоры ПО
  • Рейтинги, обзоры, отзывы
  • Наши новости, акции, нововведения
  • Руководства, статьи, инструкции
  • RSS

Популярное в категории

blog-img-1

calendar

Июнь

heart

82364

blog-img-1

calendar

Июнь

heart

77461

blog-img-1

calendar

Октябрь

heart

58269

blog-img-1

calendar

Март

heart

45504

blog-img-1

calendar

Сентябрь

heart

39364

Какое свойство задает цвет фона в css

На этой странице:

  • Цвет
  • Фон
    • Фоновый цвет
    • Фоновые изображения
    • Задание фоновой картинки
    • Повторения в определённом направлении
    • Позиционирование начального положения картинки
    • Позиционирование фона относительно окна
    • Интегрированное свойство для задания фона

    • Плитки плохо стыкуются
    • Текст не читается
    • О важности явного задания цветов текста и фона

    Цвет

    color
    Значения: | inherit
    По умолчанию: в зависимости от браузера
    Область применения: все элементы
    Наследование: да

    Свойство color задаёт цвет текста элемента и цвет его рамки (если цвет рамки отдельно не задан). Это свойство передаётся по наследству потомкам.

    Файл style.css

    Файл index.htm

    Фон

    Фон элемента распространяется на содержание элемента, на внутренние отступы и рамку. CSS позволяет задавать для фона чистый цвет или создавать сложные эффекты при помощи фоновых изображений. Фон, в отличие от цвета элемента, не наследуется.

    Фоновый цвет

    background-color
    Значения: | transparent | inherit
    По умолчанию: transparent
    Область применения: все элементы
    Наследование: нет

    Файл style.css

    .warning
    Файл index.htm
    Файл style.css
    Файл index.htm

    Фоновые изображения

    Фон элемента не обязательно должен быть одноцветным. Он может быть таким, как под этим текстом. Как происходит замащивание фона показано на рисунке ниже.

    Для фона, показанного слева, использована картинка — фоновая плиточка:

    Сначала плиточка выводится в своё начальное (базовое) положение — верхний левый угол фона элемента (точнее: в левый верхний угол внутреннего отступа элемента ). Затем она начинает повторяться, замащивая весь фон элемента.

    На рисунке плиточка показана с рамкой для наглядности.

    Несмотря на то, что начальным положением картинки по стандарту является верхний левый угол внутреннего отступа, паркетная укладка распространяется и на рамку, так как фон замащивается во всех четырёх направлениях.

    Для “укладки паркета” на фон элемента можно воспользоваться свойством background-image .

    Задание фоновой картинки

    background-image
    Значения: | none | inherit
    По умолчанию: none
    Область применения: все элементы
    Наследование: нет

    Значение none приводит к тому, что и можно ожидать: изображение на фоне отсутствует.

    Файл style.css

    BODY < color:white; background-color:rgb(20%,20%,20%); background-image:url(pic/fon1.jpg); >

    Фоновая плиточка fon1.jpg :

    Заметим, что в примере, наряду с фоновой картинкой, задан и цвет фона. Так поступать рекомендуется всегда.

    Представьте, что картинка, по какой либо причине, не дошла по сети до браузера, или пользователь отключил показ картинок. Вот что тогда он увидит на экране, если цвет фона не задан:

    А если цвет фона задан, совсем другое дело:

    Повторения в определённом направлении

    По умолчанию фоновая картинка укладывается паркетом из начального положения и по горизонтали, и по вертикали. Этот алгоритм можно изменить, если воспользоваться свойством background-repeat .

    background-repeat
    Значения: repeat | repeat-x | repeat-y | no-repeat | inherit
    По умолчанию: repeat
    Область применения: все элементы
    Наследование: нет

    Значение repeat заставляет браузер укладывать паркет по всем направлениям, а значение no-repeat запрещает повторение. Значение repeat-x укладывает картинку только по горизонтали, а значение repeat-у — только по вертикали.

    Рассмотрим в качестве примера, как задаётся вертикальная полоска, играющая роль страничного поля (как на странице этого учебника).

    Файл style.css

    BODY < color:black; background-color:white; background-image:url(pic/fon.png); background-repeat:repeat-y; margin-left:0; padding-left:100px; >

    Фоновая плиточка fon.png :

    Реальная высота фоновой картинки — 1 пиксел. Здесь она показана более высокой для наглядности. Файл index.htm

    Позиционирование начального положения картинки

    Было уже сказано, что укладка фонового паркета происходит из начального положения картинки, которое по умолчанию совпадает с верхним левым углом внутреннего отступа элемента.

    Начальное положение фоновой картинки можно изменить при помощи свойства background-position .

    Смещение на 50 пикселов вправо и на 30 пикселов вниз.

    Центр картинки совпадает с центром элемента.

    Картинка в левом нижнем углу.

    Значения:
    background-position

    Запись
    [ || ]
    означает: либо оба параметра, либо любой один

    значение это:
    | | left | center | right

    значение это:
    | | top | center | bottom По умолчанию: 0% 0% Область применения: блочные и строчные замещаемые элементы Наследование: нет Проценты: относительно соответствующей точки элемента и картинки

    Свойство background-position задаёт координаты начального (базового) положения фоновой картинки, то есть того положения, из которого начинает укладываться фоновый паркет (по горизонтали, вертикали или во всех направлениях, в зависимости от значения свойства background-repeat ).

    В качестве значений допускаются: ключевые слова, проценты, единицы размера и смесь.

    Ключевые слова

    Ключевые слова обычно используется в паре, например, right top : начальное положение картинки — правый верхний угол.

    Ключевое слово center совмещает центральную точку фоновой картинки (по соответствующей оси) с центральной точкой элемента (по той же оси).

    Допускается использование одного значения (по горизонтали или по вертикали), при этом значение второго автоматически полагается равным center :

    Одно ключевое слово Эквивалентные ключевые слова
    center center center
    top center top
    bottom center bottom
    left left center
    right right center

    Проценты

    Первое процентное значение задаёт смещение от левого верхнего угла по горизонтали, второе — по вертикали.

    Картинка размещается так, что её точка, расположенная в указанном процентном отношении относительно картинки, совпадает с точкой на элементе, расположенной в том же процентном отношении относительно элемента.

    Таким образом, указание 0% 0% размещает левый верхний угол картинки в левом верхнем углу элемента (эквивалентно left top ), а указание 100% 100% размещает правый нижний угол картинки в правом нижнем углу элемента (эквивалентно right bottom ). Указание 50% 50% размещает центральную точку картинки в центральной точке элемента (эквивалентно center center ).

    Если задано одно процентное значение, то оно используется как значение по горизонтали, а значение по вертикали автоматически полагается равным 50%.

    Единицы измерения размера

    Если начальное положение картинки задано в единицах размера, то они интерпретируются как расстояния от левого верхнего угла элемента до левого верхнего угла картинки.

    Если задано одно значение, то оно используется как значение по горизонтали, а значение по вертикали автоматически полагается равным 50% (или, что то же самое — center ).

    Допускается задавать отрицательные значения. Таким образом, можно показывать только часть фонового рисунка.

    Допускается задавать отрицательные значения и для процентов, но надо помнить, что при этом совмещаются две точки, одна, связанная с рисунком, другая связанная с элементом (с одними и теми же процентными значениями, но по отношению к рисунку и элементу).

    Смесь

    Допускается комбинировать разные способы позиционирования, при этом первое значение должно указываться для горизонтали, второе — для вертикали.

    Например, можно расположить фоновую картинку так, чтобы она находилось в правой части элемента на 10 пикселов ниже его верхнего края.

    Пример

    В качестве примера рассмотрим оформление замечания на страницах этой книги.

    Картинка, которую вы видите в шапке замечания, построена как фоновое изображение, в HTML-коде ей не соответствует элемент IMG .

    Файл style.css

    BODY < color:black; background-color:white; >/* Оформление замечания */ .note < border-left:1px dotted gray; padding-top:90px; padding-left: 1em; background-image:url(pic/note.gif); background-repeat:no-repeat; background-position:1em top; color:#666; font-size:0.9em; >

    Высота картинки — 82 пиксела, она помещается в верхний внутренний отступ размеров в 90 пикселов. Файл index.htm

    Позиционирование фона относительно окна

    Начальные координаты фоновой картинки браузер считает по умолчанию заданными относительно элемента, для которого описан фон (начало координат — левый верхний угол внутреннего отступа элемента).

    При помощи свойства background-attachment можно перенести начало координат в левый верхний угол области просмотра окна браузера, если задать значение fixed .

    background-attachment
    Значения: sroll | fixed | inherit
    По умолчанию: sroll
    Область применения: все элементы
    Наследование: нет

    При значении fixed фон не прокручивается вместе с содержимым. Если картинка задана без повторений (или с повторением по одной оси), она становится видимой, если только не лежит за пределами рамки элемента.

    Файл style.css

    BODY < color:black; background-color:white; background-image:url(pic/spider.png); background-repeat:no-repeat; background-attachment:

    Фон задан для BODY со значением scroll . Фон прокручивается вместе с документом. Файл index.htm

    Файл style.css
    BODY < color:black; background-color:white; background-image:url(pic/spider.png); background-repeat:no-repeat; background-attachment:

    Фон задан для BODY со значением fixed . Фон не прокручивается вместе с документом. Файл index.htm

    Браузер IE вплоть до версии IE6 неправильно обрабатывает фиксированный фон в отличных от BODY элементах — фон позиционируется не относительно окна, а относительно элемента. Проверьте это, запустив следующий пример в разных браузерах.

    Файл style.css

    BODY < color:black; background-color:white; >P.first < background-image:url(pic/spider.png); background-repeat:no-repeat; background-attachment:
    

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

    Интегрированное свойство для задания фона

    Все свойства фона можно свести в одну интегрированную запись при помощи свойства background .

    Свойство background объединяет все ранее рассмотренные свойства фона.

    Порядок, в котором идут параметры, не важен, кроме значения координат (): они должны стоять рядом, и если применяются значения размера или проценты, первым должно идти значение по горизонтали.

    Значения:
    background

    Запись вида
    [ || || ]
    означает: все параметры, либо с пропусками отдельных [ || || || || ] | inherit По умолчанию: см. отдельные свойства Область применения: все элементы Наследование: нет Проценты: разрешены для

    Как и во всех интегрированных свойствах, если опустить одно из значений, вместо него автоматически подставляется значение по умолчанию. Таким образом, следующие два правила эквивалентны:

    background: white url(pic/fon.gif); background: white url(pic/fon.gif) left top repeat scroll;

    Свойство background не имеет обязательных параметров, достаточно присутствия только одного. Например, следующие два правила почти эквивалентны:

    background-color: white; background: white;

    Почему почти? Не надо забывать, что интегрированное свойство background устанавливает все параметры для фона, включая и те, которые в нём опущены (их значения устанавливаются по умолчанию).

    Пусть, например, для элементов H1 и H2 установлен фон с картинкой без укладки в паркет с выравниванием по центру элемента:

    H1, H2 < background: gray url(pic/fon.gif) center no-repeat; >

    Допустим, для H2 нужно сменить цвет фона, сохраняя все другие параметры. Определение

    расположенное следом за первым, приведёт к тому, что у элементов H2 будет сплошной серебряный фон без фоновой картинки. Правильным решением будет такой набор определений:

    H1, H2 < background: gray url(pic/fon.gif) center no-repeat; >H2

    Пример

    Предложим в качестве примера ещё один способ оформления замечания.

    Изобразим макет в виде следующей схемы:

    Вот такой объект мы хотим построить. Замечание имеет отступы слева и справа, светло-зелёный фон, прерывистую рамку. В блоке выделен заголовок: текст записан вывороткой поверх фона с градиентной растяжкой цвета, слева расположен рисунок — своеобразный маркер замечания.

    Представим объект в виде блока note в который вложены два последовательных блока: header (заголовочная часть) и content (содержательная часть). На иллюстрации между блоками показаны промежутки для наглядности, реально их не будет.

    Макету на иллюстрации слева соответствует следующий HTML:

    Картинки, которые будем использовать для заголовка замечания:

    /* Блок замечания */ .note < margin: 1em 2em; /* Внешние отступы блока-замечания */ border: 1px dotted gray; /* Рамка */ /* Фон с градиентной растяжкой цвета */ > /* Заголовок внутри блока замечания */ .note .header < height:50px; /* Высота блока-заголовка */ color:white; /* Цвет текста заголовка */ font-size:40px; /* Фиксированный размер шрифта */ font-weight:bold; /* Жирное начертание */ /* Маркер */ padding-left:60px; /* Отступ текста от маркера */ border-bottom: 1px dotted gray; /* Рамка снизу */ > /* Содержательная часть замечания */ .note .content < /* Отступы содержания */ padding:0 10px 10px; >

    В данном конкретном случае можно было обойтись только одной фоновой картинкой:

    Но посмотрите, размер интегрированной картинки в байтах более чем в 3 раза превышает сумму размеров отдельных иллюстраций.

    Кроме того, часто совмещение невозможно: одна фоновая картинка может укладываться паркетом, вторая выводится без повторений.

    Атрибут background элемента BODY

    Для элемента BODY предусмотрен атрибут background , который позволяет задать фоновую картинку для гипертекстовой страницы документа.

    Атрибут background позволяет задать картинку лишь для сплошного (во всех направлениях) фонового паркета, и не имеет возможностей одноимённого стилевого свойства.

    Кроме того, атрибут background можно записывать только для элемента BODY , в то время как стилевое свойство background можно назначать любому элементу на странице.

    Дизайн фона

    Рассмотрим вопросы дизайна, связанные с использованием картинки для фона.

    Плитки плохо стыкуются

    Чтобы фоновый “паркет” смотрелся красиво, необходима визуальная стыковка плиточек между собой. Это надо учитывать при создании фоновой иллюстрации.

    Плохая стыковка плиточек.

    Очень плохая стыковка плиточек.

    Хорошая стыковка простых плиточек.

    Хорошая стыковка сложных плиточек.

    С фоновыми картинками нужно обращаться очень осторожно. Если нет уверенности, что паркет улучшает восприятие документа, лучше использовать одноцветную заливку: на гладком фоне текст всегда читается лучше.

    Текст не читается

    На шершавом фоне текст всегда читается хуже, чем на гладком:

    Когда фоновая картинка кажется необходимой, текст надо выводить в гладкие области:

    О важности явного задания цветов текста и фона

    Цвета текста и фона могут быть заданы на странице CSS-свойствами color и background . Кроме того, они могут задаваться атрибутами text и bgcolor в теге < BODY >(CSS-свойства главнее).

    Если цвета не описаны, браузер будет использовать их значения по умолчанию (разные в разных браузерах).

    Нужно обязательно задавать цвета явно, чтобы не потерять контроль над важными визуальными параметрами страницы.

    Кроме того, задавать фоновый цвет нужно и в том случае, когда используется фоновая картинка.

    • В браузере графика может быть отключена, и фоновую картинку пользователь не увидит.
    • Фоновая картинка “приходит” по сети после того, как страница построена и заменяет фоновый цвет. Чтобы такая перемена не “ударила” по глазам пользователя, нужно подбирать цвет фона близким к доминирующему цвету фоновой картинки.

    “Удар” по глазам пользователя:

    Плавный переход от гладкого фона к фактурному:

    А если фоновая картинка, цвет фона и цвет текста задаются при помощи стилевых свойств?

    BODY < background:#fbeee7 repeat-y url(pic/fon.gif); color:black; >

    Может быть в этом случае не нужно записывать соответствующие атрибуты для тега BODY ?

    Рекомендуется и в этом случае не игнорировать эти важные атрибуты. На всякий случай. Для браузеров, которые не поддерживают CSS.

    CSS-свойство color

    CSS-свойство color позволяет задавать цвет текста и фона элемента на веб-странице.

    ⭐ Поддержка браузерами свойства color

    Синтаксис

    selector

    selector — это селектор элемента, к которому нужно применить стили, color — название свойства, а value — значение цвета.

    Наследование

    Свойство color является наследуемым, что означает, что дочерние элементы наследуют цвет текста от своих родительских элементов, если оно не переопределено у них самих.

    Значения свойства color

    Значение может быть установлено для любого элемента HTML, включая текст, ссылки, заголовки и другие элементы. Оно может быть задано как внутри тега HTML, так и внутри файла CSS.

    Подробно про цветовые форматы рассказали в статье.

    Свойство color может принимать следующие значения.

    Название цвета

    Значение свойства color может быть задано названием цвета на английском языке, например, red — красный, blue — синий и так далее.

    Список всех доступных названий цветов из спецификации CSS

    RGB — Red, Green, Blue

    Модель цвета, основанная на комбинации красного, зелёного и синего цветов. Пример: rgb(255, 0, 0) , где первое число представляет значение красного цвета, второе число — зелёного цвета, а третье число — синего цвета. Каждое значение может быть в диапазоне от 0 до 255 .

    RGBA — Red, Green, Blue, Alpha

    Расширение RGB, которое, кроме трёх цветов, включает значение прозрачности. Пример: rgba(255, 0, 0, 0.5) , где первые три числа — значения RGB, а последнее число — значение прозрачности, которое может быть в диапазоне от 0 — полностью прозрачный до 1 — полностью непрозрачный.

    HSL — Hue, Saturation, Lightness

    Модель цвета, основанная на оттенке — hue, насыщенности — saturation и яркости — lightness цвета. Пример: hsl(0, 100%, 50%) , где первое число — значение оттенка в градусах, второе число — значение насыщенности в процентах, а третье число — значение яркости в процентах.

    HSLA — Hue, Saturation, Lightness, Alpha

    Расширение HSL, которое также включает в себя значение прозрачности. Пример: hsla(0, 100%, 50%, 0.5) , где первые три числа — значения HSL, а последнее число — значение прозрачности, которое может быть в диапазоне от 0 — полностью прозрачный до 1 — полностью непрозрачный.

    HEX — Hexadecimal

    Формат цвета, основанный на шестнадцатеричном коде цвета. Пример: #FF0000 , где первые две цифры обозначают значение красного цвета в шестнадцатеричном формате от 00 до FF , следующие две цифры обозначают значение зеленого цвета, а последние две цифры обозначают значение синего цвета.

    В CSS также существует несколько специальных ключевых слов, которые можно использовать в качестве значения свойства color . Например, transparent означает полностью прозрачный цвет, а currentColor используется для определения текущего цвета элемента.

    Примеры использования

    Изменение цвета текста:

    Этот текст будет с изменённым цветом.
    .text-color

    Изменение цвета фона:

    Этот блок будет с изменённым фоновым цветом.
    .background-color

    Изменение цвета границы:

    Этот блок будет с изменённым цветом границы.
    .border-color

    Нюансы использования

    Контраст. При выборе цвета текста для ссылок, желательно использовать контрастный цвет, который заметно отличается от цвета обычного текста.

    Читаемость. При использовании различных стилей текста, например, жирный или курсив, необходимо убедиться, что цвет текста остаётся читаемым и насыщенным.

    Восприятие. Цвет текста может влиять на эмоциональное восприятие контента, поэтому необходимо выбирать его в зависимости от цели и настроения страницы.

    Материалы по теме

    • CSS-свойство position
    • CSS-свойство height
    • Свойство vertical-align

    «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

    Читать дальше

    Новое в 2023 — text-wrap: balance

    Новое в 2023 — text-wrap: balance

    В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.

    Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .

    Вот пример заголовка c text-wrap: balance и без него.

    На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.

    • 13 ноября 2023

    Знакомство с CSS

    Знакомство с CSS

    После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».

    CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.

    • 1 ноября 2023

    Увеличение ссылки при наведении

    Увеличение ссылки при наведении

    Задача: плавно увеличить ссылку при наведении.

    Решение:

    a < display: inline-block; transition: transform 0.3s ease; >a:hover

    Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.

    Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.

    • 13 октября 2023

    WOFF больше не нужен

    WOFF больше не нужен

    Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.

    Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!

    Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего, вдобавок, TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.

    Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :

    @font-face

    Остался всего один формат. Просто, скажите?

    Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?

    • IE 11, 10, 9, 8, 7, …
    • Chrome 4–35
    • Edge 12 и 13
    • Safari 3–9.1
    • Firefox 2–38
    • Opera 22 и ниже
    • Android 4.4.4 KitKat и ниже (а это
    • Safari на iOS 3.2–9.3

    Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3

    А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.

    С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.

    И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.

    • 23 сентября 2023

    Трясём пароль с помощью CSS

    Трясём пароль с помощью CSS

    Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.

    Вот что получится в итоге:

    • 7 сентября 2023

    Как сделать тёмную тему на сайте

    Как сделать тёмную тему на сайте

    Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html , styles.css и script.js .

    HTML

    Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

    CSS (styles.css):

    Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

    body < font-family: Arial, sans-serif; transition: background-color 0.3s ease; >body.light-theme < background-color: #ffffff; color: #000000; >body.dark-theme < background-color: #121212; color: #ffffff; >.boxed-text

    JavaScript (script.js)

    Этот код нужен, чтобы переключать тему при нажатии на кнопку:

    document.getElementById('themeToggle').addEventListener('click', function() < const currentTheme = document.body.className; if (currentTheme === 'light-theme') < document.body.className = 'dark-theme'; >else < document.body.className = 'light-theme'; >>); 

    При загрузке страницы по умолчанию будет установлена светлая тема. При нажатии на кнопку «Переключить тему» будет происходить переключение между светлой и темной темой.

    • 29 августа 2023

    4 способа центрировать текст в CSS

    4 способа центрировать текст в CSS

    Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое ( text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

    Метод 1: Flexbox

    Flexbox — это один из самых простых и эффективных способов центрирования.

    Заворачиваем текст в с классом center-both :

     

    Центрированный текст

    .center-both

    Метод 2: CSS Grid

    HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center :

    .center-both

    Метод 3: позиционирование и Transform

    Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А

    внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

    .center-both < position: relative; >.center-both p

    HTML остается таким же. Вот что получается:

    Плохой метод: использование line-height

    Если у вас однострочный текст, вы можете установить line-height , равный высоте родительского элемента.

    .center-both < line-height: 200px; /* Пример высоты */ text-align: center; >

    Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

    Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

    • 28 августа 2023

    Как скруглить рамку. CSS-свойство border-radius

    Как скруглить рамку. CSS-свойство border-radius

    CSS-свойство border-radius помогает скруглить углы элемента. Оно особенно полезно для стилизации кнопок, форм, карточек товаров и других элементов сайта.

    • 28 июля 2023

    CSS-свойство contain

    CSS-свойство contain

    Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Свойство contain говорит браузеру, как именно элементы должны взаимодействовать. Например, они могут быть ограничены, влиять на расположение друг друга или менять свои размеры.

    Также свойство помогает повысить производительность страницы. Например, браузер понимает, когда при изменении свойств элемента нужно перерисовать страницу, а когда нет.

    ⭐ CSS-свойство contain определяет, как элемент должен взаимодействовать с другими элементами внутри контейнера.

    Синтаксис

    .container
    • 14 июля 2023

    Как задать позицию и размер элемента. CSS-свойство inset

    Как задать позицию и размер элемента. CSS-свойство inset

    CSS-свойство inset задаёт позицию и размер элемента на странице. Это комбинация четырёх отдельных свойств: top , right , bottom и left , которые определяют отступы от верхнего, правого, нижнего и левого края элемента.

    Синтаксис

    .element
    • 13 июля 2023

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *