20. Основные понятия и определения. Типы данных css. Применение стилей и классов к элементам документа html.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Значения типа "ключевое слово":

У большинства свойств стиля есть значения типа "ключевое слово". Некоторые ключевые слова уникальны, например, значение underline свойства text-decoration. Другие ключевые слова используются в качестве значений целого ряда свойств стиля, например, значение normal есть у большинства свойств текста.

Размеры:

Размеры указывают на вертикальный или горизонтальный размеры чего-либо. Размер задается как <число>, за которым следует единица измерения. Если размер равен 0, то единицу измерения можно не указывать.

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

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

• em: значение свойства 'font-size' соответствующего шрифта;

• ex: x- высота (строчных букв) ('x-height') соответствующего шрифта;

• px: пиксел, относительно к устройству представления (0.0227^o);

Единицы em и ex основываются на размере шрифта того элемента, к которому относится данная декларация. При этом em задает размер шрифта, т. е. размер его наибольшей буквы (обычно это буква 'M', отсюда аббревиатура em), а ex — высоту строчных букв шрифта (обычно это высота буквы 'x', отсюда английское название x-height и аббревиатура ex).

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

• in: дюйм - 1 дюйм равен 2.54 сантиметра;

• cm: сантиметр;

• mm: миллиметр;

• pt: поинт (пункт) - поинт равен 1/72 дюйма;

• pc: пика - 1 пика равна 12 поинтам или 1/6 дюйма.

Проценты (±%). Значения многих свойств шрифтов и размеров могут задаваться в процентах к текущему размеру. Каждое свойство, допускающее процентные значения, определяет также значение, на которое ссылается процентное.

Способы задания цвета EM { color : red; } EM { color : #FF0000; } EM { color : #F00; } EM { color : rgb(255, 0, 0); } EM { color : rgb(100%, 0%, 0%); }

Стили можно реализовать тремя способами:

• связанные таблицы стилей (Linked Style Sheets) – таблица стилей определяется в отдельном текстовом файле (с расширением *.css) и связывается (тег LINK) с одной или несколькими страницами. Связанные стили воздействуют на все страницы, с которыми они связаны;

внутренние таблицы стилей (Global Style Sheets) – стили можно внедрить непосредственно в текст на HTML (тег STYLE). Внедренные стили воздействуют на отдельную страницу;

• встроенные таблицы стилей (Inline Style Sheets) – встроенные стили создаются с помощью атрибута STYLE. Встроенные стили воздействуют на отдельный элемент

21. Типы простых селекторов. Использование псевдоклассов и псевдоэлементов.

Селектор это цепь из одного или более простых селекторов, разделённых комбинаторами.

Комбинаторами являются: пробелы, ">" и "+".

Простой селектор –

• селектор типа- селектор типа совпадает с именем типа элемента языка документа.

• универсальный селектор.

• Группировка – объединение селекторов с одинаковыми объявлениями

• селектор атрибутов

CSS2 позволяет специфицировать правила, которые определяют совпадение атрибутов, определённых в документе-источнике.

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

• элемент[атрибут]

• элемент[атрибут=“значение”]

• элемент[атрибут~=“значение”]

• элемент[атрибут|=“значение”]

  1. селектор классов. Употребляется точка (.) как альтернатива "~=" при совпадении с атрибутом "class". Значение атрибута обязано следовать сразу за ".".

  2. селектор ID, ID-селектор CSS содержит "#" непосредственно перед значением ID.

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

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

Псссееевдоклассы:

:first-child совпадает с элементом, являющимся первым дочерним элементом какого-либо другого элемента,

:link применяется к ссылкам, которые ещё не посещены,

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

:hover применяется, если элемент указан, но не активирован,

:active применяется, если элемент активирован,

:focus применяется, если элемент имеет фокус,

:lang применяется для изменения стилей в разных языках.

Псевдоэлеметы:

:first-line применяет специальный стиль к первой форматированной строке параграфа

:first-letter можно использовать для "начальных заглавных" и "зависающих заглавных",

':before' и ':after' можно использовать для вставки генерируемого содержимого до или после содержимого элемента.