Значения стилевых свойств

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

Строки

Все строки должны быть заключены в двойные или простые кавычки; если одна или несколько кавычек должны остаться в строке, их можно объединить или добавить вертикаль перед вводной частью (пример 6. 1).

Пример 6. 1. допустимая строка

Отель турист «»Отель турист «»Отель Ј турист Ј»».

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

Числа

Цены могут быть целыми числами число содержащими цифры от 0 до 9, а также полные и дробные десятичные дроби, разделенные точкой (см. 6. 2).

Пример 6. 2. как число. значений

HTML5 CSS 2. 1 IE CR OP SA FX

   %MINIFYHTML8a22295d558c6062d3219eec99f5a50b14% 
Пример.
%MINIFYHTML8a22295d558c6062d3219eec99f5a50b6% 

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

Проценты

Проценты обычно используются, когда необходимо изменить значение относительно родительского элемента или если размерность зависит от внешнего условия. Например, ширина 100% соответствует окну браузера, с шириной окна (пример 6.3).

Пример 6.3. процент ввода

HTML5 CSS 2. 1 IE CR OP SA FX

   %MINIFYHTML8a22295d558c6062d3219eec99f5a50b15%  
Содержание таблицы
 
  

Проценты не обязательно должны быть целыми числами. числом Допускаются и десятичные числа. значения 56.8%.

Размеры

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

Относительные единицы

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

Таблица 6. 1. единицы измерения

Единицы	Описание.
em	Размер шрифта текущего элемента
ex	Высота символа x
px	Пикселей
%	Скорость.

Единицы измерения переменны значение Зависит от размера шрифта текущего элемента (размер определяется командой стилевое свойство (размер шрифта). Для каждого браузера применяется свой размер текста, если этот размер не определен явно. Поэтому 1em сначала определяется размером шрифта по умолчанию браузера или размером шрифта родительского элемента. Размер регистрации в этом смысле такой же, как и для em. что значения 1em и 100% равны.

Единицы EX определяются как высота пешеходного символа ‘X’; EX подчиняется тем же правилам, что и EM. Другими словами, он привязан к размеру шрифта по умолчанию браузера или размеру шрифта родительского элемента.

Пиксель — это элементарная точка, отображаемая на экране или подобном устройстве, например, смартфоне. Размер пикселя зависит от анализа устройства и его технических характеристик. Пример 6. 4 иллюстрирует использование пикселей и EM для определения размера шрифта.

Пример 6. 4. использование относительных единиц

HTML5 CSS 2. 1 IE CR OP SA FX

   H1< font-size: 30px; >P 
Заголовок размером 30 пикселов
 
Размер текста 1. 5 em
  

Результаты этого примера показаны ниже (рис. 6. 1).

Рисунок 6. 1. Различные размеры текста единицах

Абсолютные единицы

Абсолютные единицы применяются реже, чем относительные При использовании текста в целом. Таблица 6. 2. Перечислены основные из них абсолютные единицы .

Таблица 6. 2. абсолютный. единицы измерения

Единицы	Описание.
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Точки (1 точка равна 1/72 дюйма)
pc	Вершина (1 точка равна 12 точкам)

Вероятно, самый распространенный. единицей Это точка, используемая для обозначения размера шрифта. Мы привыкли считать все в миллиметрах и т.д. единицах Пункты, вероятно, единственное неметрическое измерение, используемое во всем мире. Это связано с системами редактирования и публикации текстов. Использование точек и миллиметров показано в примере 6.5.

Пример 6. 5. использование абсолютных единиц

HTML5 CSS 2. 1 IE CR OP SA FX

   H1< font-size: 24pt; >P 
Заголовок размером 24 пункта
 
Текст смещен вправо на 30 мм
  

Результат использования. абсолютных единиц измерений показан ниже (рис. 6. 2).

Рисунок 6. 2. Различные размеры текста единицах

При определении размеров обязательно указывайте единицы размер, например, ширина: 30 px; в противном случае браузер не сможет отобразить желаемый результат, поскольку не знает требуемого размера. Единица измерения. не добавляются только при нулевом значении ( margin : 0 ).

Цвет

Цвет в стилях Может быть определена тремя способами в шестнадцатеричном исчислении значению Шестнадцатеричная, указанная в формате RGB.

Шестнадцатеричная значению

Цвет определяется в числа шестнадцатеричной системе. Шестнадцатеричная система отличается от десятичной, как следует из его названия, на числе 16. цифры: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, F. латинские буквы. числа выше 15 в шестнадцатеричной системе образуются путем объединения двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе; чтобы избежать путаницы при создании системы счисления, секстическая система числом Перед сетью ячеек #s стоит сеть ячеек #s, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения 00 до ff. Таким образом, название цвета разбивается на три компонента #RRGGBB, где первые две буквы представляют красный компонент цвета, две средние — зеленый компонент и две последние — синий компонент. Допускаются короткие формы #RRGGBB, при этом каждая буква должна быть удвоена (#RRGGBB). Например, #FE0 определяется как #ffee00.

По имени.

Браузеры поддерживают определенные цвета по имени. См. таблицу 6. 3 для названий, шестнадцатеричных кодов и описаний.

Таблица 6. 3. названия цветов

Имя.	Цвет	Код	Описание.
Белый.	#ffffffff или #ffffffff	Белый
Серебристый	#C0C0C0	Серый.
Серый.	#808080	Темно-серый
Черный	#000000 или #000	Черный.
Коричневатый	#800000	Темно-красный
Красный	#ff0000 или #f00	Красный
Оранжевый.	#FFA500	Оранжевый
Желтый.	#ffff00 или #ff0	Желтый
Оливковый	#808000	Оливковый
Лайм	#00FF00 или #0F0	Светло-зеленый
Зеленый	#008000	Зеленый
Aqua	#00ffffff или #0ff	Синий
Синий	#0000ff или #00f	Синий
Темно-синий	#000080	Темно-синий
Тиловый	#008080	Сине-зеленый
Фуксия	#ff00ff или #f0f	Розовый
Пурпурный	#800080	Фиолетовый

RGB

Цвета могут быть заданы с помощью значения Красный, зеленый и синий элементы в десятичной системе; каждый из трех цветов может принимать значения значения 0-255. Цвет также может быть задан с помощью в процентном Отношение. Сначала указывается слово RGB, затем цветовой компонент; RGB (255, 0, 0, 0, 0) или RGB (100%, 20%, 20%), разделенные запятой.

Пример 6. 6 иллюстрирует различные способы придания цвета цветовому элементу.

Пример 6. 6. представление цвета

HTML5 CSS 2. 1 IE CR OP SA FX

   %MINIFYHTML8a22295d558c6062d3219eec99f5a50b16% 
Lorem ipsum dolor sit amet
 
lorem ipsum dolor sit amet, conectetuer adipiscing elit, sed diem no n-ummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  

Результаты этого примера показаны на рисунке 6.3.

Рисунок 6. 3. Цвета веб-сайта.

Адреса

Uris (унифицированный идентификатор ресурса) используется для определения маршрута к файлу. Он определяет обои страницы. Для этого используется ключ URL, относительный или абсолютный Адрес файла. Адрес может быть указан в необязательных одинарных или двойных кавычках (см. пример 6. 7).

Пример 6. 7. адрес графического файла

HTML5 CSS 2. 1 IE CR OP SA FX

   %MINIFYHTML8a22295d558c6062d3219eec99f5a50b17% 
Обратите внимание, запрашиваемая страница не найдена!
  

Селектор body в этом примере использует абсолютный файл изображения и адрес селектора DIV. — относительный .

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

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

Вопросы для проверки

1. В какой строке содержится ошибка?

1. Размер шрифта: 20px
2. Размер шрифта: 0
3. Размер шрифта: 1. 5EM
4. Размер шрифта: 5 мм
5. Размер шрифта: 300EX

2. что является правильным письменным изображением?

1. Цвет: #FCO
2. Ширина: ‘автоматическая’
3. Размер шрифта: синий
4. Фон: красный
5. Границы: нет

3. каков размер текста в пикселях

Пример.

Если на странице. стиль ?

4. ANE хочет определить цвет фона для веб-сайта Lilac. Каким он будет? значение свойства будет ли он лучше?

1. #cbd1e8
2. RGB (121, 232, 47)
3. #33f.
4. #b6b7be.
5. RGB (205%, 85%, 53%)

5. ошибки, включенные в следующее. стиле ?

1. Отсутствует верхняя точка в конце списка.
2. Не указаны единицы измерения свойства border-width.
3. Левые и блочные значения записаны без кавычек.
4. Границы не присутствуют.
5. Значение block свойства Свойства отображения не могут быть применены к изображению.

Ответы

1. размер шрифта: 1. 5EM

5. Не указаны единицы измерения свойства border-width.