27. Css determination methods. Principles of cascading and inheritance of styles. Методы определения css. Принципы каскадирования и наследования стилей.

Наследование. Каскадирование. Приоритеты стилей CSS.

Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p. Так сделано в предположении, что обрамление всех-всех вложений в тег - менее тривиальная задача, чем задание одиночной рамки. А вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе, до тех пор, пока этому тегу не будет назначен свой цвет шрифта. Который, в свою очередь, будет теперь наследоваться всеми вложенными в него подэлементами, не распространяясь на элементы-соседи тега.

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

Наиболее низким приоритетом обладает стиль браузера;

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

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

Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;

Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;

Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел «виды селекторов»), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. При расчёте специфичности селектора принимается во внимание:

количество идентификаторов (#id) в селекторе — ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);

количество классов (.class), атрибутов ([attr], [attr="value"]) и псевдоклассов (:pseudo-class) в селекторе — ((0,1,0) за каждый объявленный класс, атрибут и псевдокласс в селекторе правила CSS);

количество элементов (h1, input) и псевдоэлементов (::pseudo-element) в селекторе — ((0,0,1) за каждый объявленный элемент и псевдоэлемент в селекторе правила CSS).

Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно — бо́льший приоритет, чем даже (0,10,0), (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.

Ещё более высоким приоритетом обладают стили, объявленные непосредственно в теге данного элемента посредством атрибута style этого тега;

И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова !important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.

Пример таблицы стилей

Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css либо же обрамлена тегами <style> и размещена в «шапке» той самой веб-страницы, на которую она действует):

p {

font-family: arial, helvetica, sans-serif;

}

h2 {

font-size: 20pt;

color: red;

background: white;

}

.note {

color: red;

background-color: yellow;

font-weight: bold;

}

p#paragraph1 {

padding-left: 10px;

}

a:hover {

text-decoration: none;

}

#news p {

color: blue;

}

[type="button"] {

background-color: green;

}

Здесь приведено семь правил CSS с селекторами p, h2, .note, p#paragraph1, a:hover, #news p и [type="button"].

Первое правило присвоено HTML-элементу p (абзацу) — назначен стиль. Абзацы будут отображаться шрифтом Arial или, если такой шрифт недоступен, тогда Helvetica или Sans-serif, иначе, другим шрифтом этого семейства.

Второе правило присвоено HTML-элементу h2 (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным размером.

Третье правило будет применено к любому элементу, атрибут class которого равен «note». Например, к параграфу: <p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне. </p>

Четвёртое правило будет применяться только к элементу p, атрибут id которого равен paragraph1. Такой элемент будет иметь внутренний отступ в 10 пикселей (padding).

Пятое правило определяет стиль hover для элементов a — гиперссылок. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.

Шестое правило, применяется для элементов p, которые находятся внутри какого-либо элемента с атрибутом id, равным «news» (#news p — это типичный случай селектора потомков, см. 5-й пункт списка выше).

Седьмое правило применяется для всех элементов, у которых атрибут type равен button. Например, это правило будет применено к элементу <input type="button"> (обычная кнопка), изменив его цвет фона на зеленый.

28 CSS өлшеу бірліктері.

CSS – Cascading Style Sheets (каскадная таблица стилей) – это средство, позволяющее задавать различные визуальные свойства HTML – тегам.

Аббревиатура CSS расшифровывается, как Cascading Style Sheets или же, в русском переводе, как каскадные таблицы стилей.  опираясь на изученный нами чуть раньшеучебник Html мы можем сказать, что разметка веб документа осуществляется с помощью тегов этого языка. Т.е. с помощью ХТМЛ мы создаем структуру наших документов (вебстраницы). Например, в чистом Html мы можем задавать заголовки через теги H1-H6, абзацы P и другие элементы структуры документов, и даже придать им нужный нам вид в браузере. Но время диктовало необходимость использования в ХТМЛ все новых и новых атрибутов визуального оформления, которые сильно захламляли исходный код. В связи с этим был предложен другой, более перспективный вариант развития — создание отдельного языка стилевой разметки CSS. И этот вариант имел ряд преимуществ перед простым наращиванием количества атрибутов оформления

Основными принципами применения CSS к html-документам являются наследование и каскадирование, вот именно поэтому таблицы стилей называются каскадными. 

Каскадирование

что означает само понятие Cascading Style Sheets?

Cascading Style Sheets переводиться как «каскадная таблица стилей».

Каскадная это потому, что css использует принципкаскадирования

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

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

Таблицы стилей для html-документа могут задавать три субъекта:

Непосредственно браузер;

Интернет-пользователь;

Разработчик веб-страницы.

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

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

Таблица стилей, заданная пользователем имеет более высокий приоритет, чем таблица стилей заданная браузером по умолчанию. Пользователь сам может задать таблицу стилей для отображения html-документа на странице в настройках браузера, если браузер позволяет это сделать.

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

Если в одной таблице стилей заданы несколько правил для одного элемента, приоритетом будет обладать последнее заданное правило. Например, в подключенной к html-документу таблице стилей веб-разработчика написано:

p { color:blue; } p { color:green; } p { color:red; }

В этом случае текст, на веб-странице будет красного цвета, так как это правило задано последним.

Встроенная таблица стилей обладает более высоким приоритетом, чем внешняя.

Внутренняя таблица стилей обладает более высоким приоритетом, чем встроенная и внешняя.

Наиболее высоким приоритетом обладает правило с директивой!important. Подключается эта директива следующим образом:

p { color:blue !important; }

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

Принцип наследования заключается в получении элементами-предками заданных свойств от элементов-потомков. Иерархию элементов можно проследить по дереву элементов html.

Рассмотрим некоторые определения.

Элемент A вложен в элемент B. В этом случае элемент A называетсяпотомком элемента В, а элемент В -предком элемента А.

Элемент A вложен в элемент В и между ними нет нет промежуточных звеньев. В этом случае элемент А называется непосредственным потомком по отношению к В. Непосредственный потомок - частный случай элемента-потомка.

Элементы A и B имеют один родительский элемент C и не вложены друг в друга (А в В и наоборот). В этом случае элементы А и В называются смежными по отношению друг к другу.

Здесь HTML является предком по отношению ко всем остальным элементам. Элементы HEAD и BODYявляются непосредственными потомками по отношению к HTML, также они являются смежными между собой.

Так вот, некоторые свойства CSS элементы-предки могут наследовать от элементов-потомков (цвет), а некоторые нет.

№29 Методы работы цвета в CSS. Цвет таблицы (гурманов). Принципы выбора цвета.

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

В модели RGB используются только три цвета (понятно, что это красный, зеленый и синий), каждый из которых может быть представлен с разным уровнем яркости свечения. Для каждого из каналов (красный, зеленый и синий) можно будет выбрать одну из 256 возможных градаций яркости. Число 256 взято по той причине, что столько значений оттенков можно закодировать в одном байте информации.

Соответственно, для своего web документа мы можем выбрать любой оттенок из огромного количества возможных (256*256*256). Например, для получения черного цвета нужно, чтобы у всех трех каналов цветовой схемы было нулевое значение яркости, а для получения белого — красный, зеленый и синий цвета должны иметь максимальную яркость.

Давайте теперь попробуем разобраться, как задать яркость в каждом канале и сколько у нас есть для этого возможностей?

На самом деле, есть два основных способа:

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

задание с помощью ввода названия цвета в коде web документа

Давайте начнем со сложного и попробуем разобраться с записью цветов в шестнадцатиричном коде. Если бы мы хотели, например, записать код белого в десятичной системе, то получили бы код 256 256 256, а для черного — 0 0 0. Тут, наверное, все понятно.

Но в шестнадцатеричной системе счисления кроме арабских цифр используются еще и первые шесть букв латинского алфавита, ну и есть своя специфика формирования цифр. Углубляться в это, думаю, не стоит, но для примера скажу, что белый для Html можно будет задать так: #ffffff, а черный так: #000000. Т.е. 00 соответствует 0 в десятичной системе счисления, а ff соответствует 256.

Т.е. на каждый канал RGB цвета в CSS коде отводится две шестнадцатеричных цифры, поэтому записи значения цвета состоят из шести цифр (или букв, которые приравнены к цифрам в шестнадцатеричной системе), перед которыми ставится знак решетки «#». Все довольно просто.

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

Оттенок	Шестнадцатиричная запись
Желтый	#ffff00
Зеленый	#008000
Белый	#ffffff
Красный	#ff0000
Серый	#808080
Синий	#0000ff
Черный	#000000

Естественно, что вы не обязаны сами придумывать и сопоставлять шестнадцатиричные коды оттенков с теми, что вы хотите увидеть на своем интернет проекте. Подбирать колор для сайта вы можете в любом графическом редакторе (даже в бесплатном онлайн-редакторе Pixlr Editor), где вам обязательно покажут запись этого оттенка в формате RGB, или найти таблицу Html цветов и скопировать нужный вам код оттуда.

Некоторые цвета в языке гипертекстовой разметки могут быть заданны с помощью слов, например, «black» означает черный, «white» — белый и т.д. Но тут есть один нюанс. Задание колора, таким образом, возможно только для ограниченного их числа.

Ну, во-первых, наверное, понятно, что все 16 миллионов возможных в RGB схеме оттенков вы с помощью слов представить не сможете ни в одной таблице (устанете ее прокручивать).

Во-вторых, в валидаторе W3C для спецификации языка гипертекстовой разметки 4.01 (ее в полной мере поддерживают все возможные браузеры на текущий момент) определено только 16 колоров, которые в Html или CSS коде можно задавать словами:

Вы можете встретить и гораздо более развернутые таблицы оттенков, которые можно будет задать в коде словами, но там существует вероятность, что в каком-нибудь браузере данный цвет будет отображаться не корректно.

Поэтому, кроме приведенной чуть выше таблицы 16 базовых оттенков, все остальные цвета следует задавать в коде web документов только с помощью шестнадцатеричной записи, во избежании никому не нужных эксцессов.

Использование кодов и названий цветов в вебмастеринге

На данный момент все внешнее оформление web страниц отдано на откуп CSS (таблицам каскадных стилей) и указание кода цвета непосредственно в Html встречается крайне редко, но все же встречается. К тому же бывают ситуации, когда нельзя по тем или иным причинам использовать внешние таблицы стилей CSS (например, в случае создания выпуска почтовой рассылки subscribe).

Поэтому я все же приведу пример задания цвета в Html, хотя при этом и будут использоваться уже не рекомендованные валидатором W3C теги. Например, раньше колор для фона задавали в теге «BODY» через атрибут «bgcolor», а текст раскрашивали сразу на всей вебстранице с помощью атрибута «text».

Задание нужных оттенков в таком случае могло выглядеть, например, так:

<body  bgcolor="#fff8dc" text="navy">Содержимое документа</body>

В результате вы получите вебстраницу с бежевым фоном и темно-синим шрифтом. До того, как CSS вошел в обиход, для изменения цвета шрифта какого-либо отдельного участка текста повсеместно использовали сейчас уже не рекомендуемый валидатором W3C тег «FONT», в который для задания колора включали одноименный атрибут «color»:

<font color="#0000ff">участок текста, который нужно было окрасить в синий колор</font>

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

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

Как вы можете видеть, иногда для сокращения записи оттенка используют не шесть знаков, а только три, в том случае, если они совпадают для каждого канала — «#6с0» вместо «#66сс00».

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

По шестнадцатеричному значению

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	3.5+	1.3+	1.0+	1.0+	1.0+

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.

По названию

Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.

С помощью RGB

Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255. Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).

RGBA

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.

HSL

Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.

Рис. 1. Цветовой круг

Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.

Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.

HSLA

Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.

Пример

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Цвета</title>

<style>

body { background-color: #F9F2E3; }

h2 {

background-color: rgb(214,86,43);

color: rgba(255,255,255,.9);

padding: 10px;

}

p { color: green; }

div {

background-color: hsl(60,100%,25%);

color: hsla(120,100%,50%,0.1);

}

</style>

</head>

<body>

<h2>Предупреждение</h2>

<p>Все перечисленные на сайте методы ловли льва являются теоретическими

и базируются на вычислительных методах. Авторы не гарантируют вашей

безопасности при их использовании и снимают с себя всякую

ответственность за результат. Помните, лев это хищник и

опасное животное!</p>

<div>Арррргх!</div>

</body>

</html>

30. Font design in CSS. Typefaces.

Если по какой-либо причине вам необходимо изменить регистр букв в тексте веб-страницы, на помощь придет свойство CSS text-transform. Какие значения можно устанавливать для данного свойства, смотрите в таблице ниже.

Значение	Что делает
uppercase	Делает заглавными (прописными) все буквы в тексте
lowercase	Делает строчными все буквы в тексте
capitalize	Делает заглавной первую букву каждого слова в тексте
none	Не делает изменений
inherit	Наследует значение родителя

Пример записи стиля:

1 2 3

h3 {     text-transform: uppercase; }

Используйте значение uppercase, если вам нужно сделать все буквы большими в заголовке или абзаце текста, словно текст набран в режиме Caps Lock. В случае, когда вам требуется убрать все заглавные буквы, оставив только строчные, воспользуйтесь значением lowercase. Значение capitalize может пригодиться, к примеру, в веб-форме для поля «ФИО», чтобы каждое новое слово автоматически начиналось с прописной буквы.

Обратите внимание: применение text-transform в CSS никак не влияет на исходное содержимое веб-страницы. Регистр букв изменяется лишь во время отображения страницы в окне браузера, а сам текст HTML-документа остается неизменным.

Примеры отображения стилей можно увидеть на скриншоте:

60-вопрос

Объект события в Standard событий DOM

События могут быть вызваны в любой части документа, будь то в результате операций пользователя или браузером. Они не просто начинаются и заканчиваются в одном месте; они представляют собой поток и формируют свой собственный жизненный цикл. Именно этот жизненный цикл делает DOM события такими гибкими и полезными. Мы, как разработчики, должны понимать особенности работы DOM событий. Только в этом случае мы сполна можем использовать свой потенциал и создавать оптимальный опыт пользовательского взаимодействия.

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

Я хочу представить основы работы с DOM событиями, раскрыть особенности их внутренней работы, объяснить, как мы можем использовать их для решения общих проблем.

ОБРАБОТЧИКИ СОБЫТИЙ.

В прошлом браузеры имели серьезные несоответствия в способе передачи событий слушателей (процесс, обеспечивающий, например, контроль правильности выражений, вводимых с клавиатуры) в DOM узлы. Такие библиотеки, как jQuery внесли неоценимый вклад в улучшение существующей ситуации.

По мере продвижения к более стандартизированной браузерной среде, мы можем без опасений использовать API-интерфейсы из официальной спецификации. Чтобы не усложнять общую картину я просто опишу, как управлять событиями в современном интернете. Если вы создаете JavaScript код для Internet Explorer (IE) 8 или версий ниже, я бы посоветовал использовать polyfill или специализированный фреймворк (например, jQuery) для управления событием слушателей.

В JavaScript мы можем обрабатывать события с помощью следующей функции:

element.addEventListener(<event-name>, <callback>, <use-capture>);

 event-name (строковое значение) – это имя или тип события, которое вы хотели бы обработать. Это может быть любое из стандартных DOM событий. (click, mousedown, touchstart, transitionEnd и т.д.) или даже собственные названия события (мы поговорим о пользовательских событиях позже).

 callback (функции) – эта функция вызывается, когда происходит событие. Объект event, содержащий данные о событии, передается в качестве первого аргумента.

 use-capture (логическое значение) – это объявление отвечает за установление обратной связи на стадии «сбора данных» (не волнуйтесь: мы объясним, что означает этот термин немного позднее).

var element = document.getElementById('element');

function callback() {

alert('Hello');

}

// Add listener

element.addEventListener('click', callback);

Демо: addEventListener.

УДАЛЕНИЕ ОБРАБОТЧИКОВ.

Обработчики событий необходимо удалять, как только они теряют свою актуальность. Это наиболее правильное решение (особенно для веб-приложений с долгосрочной перспективой). Чтобы сделать это, используйте методelement.removeEventListener():

element.removeEventListener(<event-name>, <callback>, <use-capture>);

Но у метода removeEventListener есть одна особенность: вы должны размещать ссылку на функцию обратной связи. Простой вызов element.removeEventListener('click'); не будет работать.

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

var element = document.getElementById('element');

function callback() {

alert('Hello once');

element.removeEventListener('click', callback);

}

// Add listener

element.addEventListener('click', callback);

Демо: removeEventListener.

СЛЕДИТЕ ЗА ПРАВИЛЬНОСТЬЮ КОНТЕКСТА ОБРАТНОЙ СВЯЗИ.

Вызов обратной связи при неверном контексте может привести к возникновению ошибки. Поясним на примере.

var element = document.getElementById('element');

var user = {

firstname: 'Wilson',

greeting: function(){

alert('My name is ' + this.firstname);

}

};

// Attach user.greeting as a callback

element.addEventListener('click', user.greeting);

// alert => 'My name is undefined'

31. Font design in CSS. Setup of type, size, outline and modification of a font. Collective font design.

CSS Fonts________________________________________The CSS свойства шрифта определяют семейство шрифтов, смелостью, размер и стиль текста.

Семьи CSS Font

В CSS существует два типа имен семейств шрифтов:

• общая семья - группа семейств шрифтов с подобным взглядом (как "Serif" или "") шрифт фиксированной

• семейство шрифтов - специфический семейство шрифтов (например, "Times New Roman" или "Arial")

Родовой семьи семьи Шрифт Описание

Serif Times New Roman

Грузия шрифты с засечками имеют маленькие линии на концах на некоторых персонажей

Рубленый Arial

Verdana "Санс" означает, что без - эти шрифты не имеют линий на концах символов

Monospace Courier New

Lucida консоли Все символы Monospace имеют одинаковую ширину

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

________________________________________Семейство шрифтов

Семейство шрифтов текста задается с помощью шрифта семейной собственности.

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

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

Примечание: Если имя семейства шрифтов больше, чем одно слово, оно должно быть заключено в кавычки, как: "Times New Roman".

Более одного семейства шрифтов указывается в списке через запятую:

пример

п {

    семейство шрифтов: "Times New Roman", Times, с засечками;

}

Для наиболее часто используемых шрифтов комбинаций, смотрите на нашем Web Safe сочетаний шрифтов.

________________________________________

Стиль шрифта

Свойство стиль шрифта в основном используется для указания курсивного текста.

Это свойство имеет три значения:

• нормальный - текст отображается нормально

• наклонным - текст выделен курсивом

• наклонная - Текст "наклоняясь" (косая очень похож на курсив, но менее поддерживается)

пример

p.normal {

    стиль шрифта: нормальный;

}

p.italic {

    стиль шрифта: курсив;

}

p.oblique {

    стиль шрифта: косой;

}

________________________________________

Размер шрифта

Свойство размер шрифта устанавливает размер текста.

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

Всегда используйте соответствующие HTML-теги, как <h1> - <h6> для заголовков и <p> для параграфов.

Значение размера шрифта может быть абсолютным, или относительный размер.

Абсолютный размер:

• Устанавливает текст определенного размера

• Не позволяет пользователю изменять размер текста во всех браузерах (плохо по причинам доступности)

• Абсолютный размер полезен, когда физический размер выводимого известен

Относительный размер:

• Устанавливает размер по сравнению с окружающими элементами

• Позволяет пользователю изменять размер текста в браузерах

Примечание: Если вы не указываете размер шрифта, размер по умолчанию для обычного текста, как абзацы, 16px (16px = 1em).

________________________________________

Установить размер шрифта пикселями

Установка размера текста с пикселями дает вам полный контроль над размер текста:

пример

h1 {

    размер шрифта: 40px;

}

h2 {

    размер шрифта: 30px;

}

п {

    размер шрифта: 14px;

}

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

________________________________________

Установить размер шрифта С Em

Чтобы разрешить пользователям изменять размер текста (в меню браузера), многие разработчики используют EM вместо пикселов.

Размер блока EM рекомендуется W3C.

1em равен текущему размеру шрифта. размер шрифта по умолчанию в браузерах 16px. Таким образом, по умолчанию размер 1em является 16px.

Размер может быть рассчитано из пикселей в EM, используя эту формулу: пикселей / 16 = EM

пример

h1 {

    размер шрифта: 2.5em; / * 40px / 16 = 2.5em * /

}

h2 {

    размер шрифта: 1.875em; / * 30px / 16 = 1.875em * /

}

h 3 {

    размер шрифта: 0.875em; / * 14px / 16 = 0.875em * /

}

32. Design of the text in CSS. Alignment, indents and intervals, transformation, intervals and scenery.

ALIGMENT.The выравнивания текста свойство используется для установки горизонтального выравнивания текста.

Текст может быть оставлено или выравнивание по правому краю, по центру или оправдан.

Следующий пример показывает выровнен по центру, а также левый и выравнивание по правому краю текста (выравнивание по левому краю по умолчанию, если направление текста влево-вправо, и выравнивание по правому краю по умолчанию, если направление текста справа налево):

Пример:

h1 {

выравнивания текста: центр;}

h2 {

выравнивания текста: слева;}

h3 {

выравнивания текста: справа;}

Декорирования текста. Свойство текста украшения не используется для установки или удаления украшений из text.The значения текста-украшение: нет; часто используется для удаления подчеркивания из ссылок:

Пример: {

текст-отделка: нет;}

TEXT углублений. Текст-отступов свойство используется для задания отступа первой строки текста:

Пример: р {

    Текст-отступов: 50px;}

TEXT трансформацией. Свойство Текст-преобразования используется для указания прописные и строчные буквы в text.It могут быть использованы, чтобы превратить все в верхний или нижний регистр букв, или первые буквы каждого слова:

Пример: p.uppercase {

Текст-преобразования: верхний регистр;}

p.lowercase {

Текст-преобразования: в нижнем регистре;}

p.capitalize {

Текст-преобразования: капитализировать;}

33.Basic syntax of CSS. Selectors of tags.

CSS селекторы используются для "find" (или выберите) HTML-элементы на основе их имени элемента, идентификатор, класс, атрибут, и многое другое. Элемент выбора Селектор элемент выбирает элементы на основе имени элемента. Вы можете выбрать все элементы <p> на странице, как это (в данном случае все элементы <p> будет выровнен по центру, с красным цветом текста): пример P { Text-align:center; Color:red; Селектор идентификатора Селектор идентификатора использует атрибут идентификатор HTML-элемента, чтобы выбрать конкретный элемент. Идентификатор элемента должен быть уникальным в пределах страницы, поэтому селектор идентификатор используется, чтобы выбрать один уникальный элемент! Чтобы выбрать элемент с определенным идентификатором, написать хэш (#) характер, за которой следует идентификатор элемента. Правило стиля ниже будет применяться к элементу HTML с идентификатором = "para1": пример # Para1 { Text-align:center; Color:red; } Класс Selector Селектор класс выбирает элементы с определенным атрибутом класса. Для выбора элементов с определенным классом, написать период (.) Символов, за которым следует имя класса. В приведенном ниже примере, все HTML элементы с классом = "center" будет красным и выровнен по центру: пример .center { Text-align:center; Color:red; }Попробуй сам " Можно также указать, что только конкретные HTML элементы должны быть затронуты классом. В приведенном ниже примере, только <р> элементы с классом = "center" будет выровнен по центру: пример p.center { Text-align:center; Color:red; }Попробуй сам " HTML элементы могут также относиться к более чем одному классу. В приведенном ниже примере элемент <р> будет в стиле в соответствии с классом = "center" и класс = "large": пример <Р класс = "Центр большой"> Этот параграф относится к двум классам. </ P> Группировка селекторов Если у вас есть элементы с теми же определениями стиля, как это: h1 { Text-align:center; Color:red; } h2 { Text-align:center; Color:red; } p{ Text-align:center; Color:red; } Это будет лучше сгруппировать селекторы, чтобы минимизировать код. Группировка селекторов, разделите каждый селектор с запятой. В приведенном ниже примере мы сгруппировали селекторы из кода выше: пример h1, h2, р { Text-align:center; Color:red; }

34. Basic syntax of CSS. Classes and identifiers.

мы рассмотрим такое понятие как селекторы CSS и как с их помощью мы можем сократить нашу разметку HTML, сделав её чище.

Селектор CSS – это тот элемент, к которому мы собираемся применять CSS свойства. Слово «селектор» говорит само за себя, оно обозначает выбор.

p {color: red}

div span {background: green}

ul li {list-style: none}