ОИТ
.pdfУсловно все псевдоклассы делятся на три группы:
-определяющие состояние элементов - к этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.
-имеющие отношение к дереву элементов - к этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса.;
-указывающие язык текста - для документов, одновременно содержащих тексты на нескольких языках имеет значение соблюдение правил синтаксиса, характерные для того или иного языка. С помощью псевдоклассов можно изменять стиль оформления иностранных текстов, а также некоторые настройки.
19. Варианты применения каскадных таблиц стилей на веб-странице.
Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:
●Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега <link>.
●Внутренняя таблица стилей — определение правил таблицы стилей с
использованием |
тега <style>, |
который |
обычно |
располагается |
в |
разделе <head> HTML-документа . |
|
|
|
|
|
●Встроенный стиль — это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.
Давайте познакомимся со всеми тремя способами на конкретных примерах.
Внешняя таблица стилей
Внешняя таблица стилей хранится в отдельном файле с расширением CSS. Это самый эффективный способ, т. к. он полностью отделяет правила форматирования от ваших HTML-страниц. Он также позволяет легко применять одни и те же правила ко многим страницам. Отдельный файл с таблицей стилей прикрепляется к HTMLдокументу с помощью тега <link>. Это одинарный тег, который располагается внутри элемента <head>. Элемент должен использовать три следующих атрибута. В атрибуте href указывается абсолютный или относительный URL-адрес файла CSS. Атрибут rel определяет отношение между НТМL-страницей и связанным файлом. При создании ссылки на файл CSS он должен иметь значение stylesheet, показывающее, что присоединяемый таким образом документ содержит таблицу стилей. Атрибут type определяет тип документа, на который указывает ссылка. В нем должно быть указано значение text/css.
CSS, как и HTML, не является языком программирования. Это язык каскадных таблиц стилей, то есть он позволяет выборочно применять нужные стили к элементам в HTML-документах. Например, чтобы выбрать все элементы <p>, т.е. параграфы на HTML-странице и окрасить их текст в красный цвет, вы должны написать на CSS следующее:
Внутренняя таблица стилей
Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили
в одном месте. В данном случае, стили располагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>, но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.
Встроенный стиль
Тег <style> позволяет записывать внутри себя код в формате CSS:
Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style.
Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style>.
20. Коробочная модель CSS. Назначение. Основные элементы.
CSS (Cascading Style Sheets), или каскадные таблицы стилей, используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.
Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).
Способы добавления CSS стилей
Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:
●Внешняя таблица стилей — определение правил таблицы стилей в отдельном файле .css, с последующим подключением этого файла в HTML-документ с помощью тега <link>.
●Внутренняя таблица стилей — определение правил таблицы стилей с
использованием |
тега <style>, |
который |
обычно |
располагается |
в |
разделе <head> HTML-документа . |
|
|
|
|
|
●Встроенный стиль — это способ вставки языка таблицы стилей прямо в начальный тег HTML-элемента.
Давайте познакомимся со всеми тремя способами на конкретных примерах.
Внешняя таблица стилей
Внешняя таблица стилей хранится в отдельном файле с расширением CSS. Это самый эффективный способ, т. к. он полностью отделяет правила форматирования от ваших HTML-страниц. Он также позволяет легко применять одни и те же правила ко многим страницам. Отдельный файл с таблицей стилей прикрепляется к HTML-документу с
помощью тега <link>. Это одинарный тег, который располагается внутри элемента <head>. Элемент должен использовать три следующих атрибута. В атрибуте href указывается абсолютный или относительный URL-адрес файла CSS. Атрибут rel определяет отношение между НТМL-страницей и связанным файлом. При создании ссылки на файл CSS он должен иметь значение stylesheet, показывающее, что присоединяемый таким образом документ содержит таблицу стилей. Атрибут type определяет тип документа, на который указывает ссылка. В нем должно быть указано значение text/css.
CSS, как и HTML, не является языком программирования. Это язык каскадных таблиц стилей, то есть он позволяет выборочно применять нужные стили к элементам в HTMLдокументах. Например, чтобы выбрать все элементы <p>, т.е. параграфы на HTMLстранице и окрасить их текст в красный цвет, вы должны написать на CSS следующее:
Внутренняя таблица стилей
Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили располагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>, но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.
Встроенный стиль
Тег <style> позволяет записывать внутри себя код в формате CSS:
Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style.
Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе <style>.
21. Язык программирования JavaScript. Назначение и область применения.
JavaScript предназначен для создания интерактивных web-страниц и web-приложений, позволяющих полностью управлять как самими web-страницами, так и браузерами, в которых ти страницы открыты.
JavaScript — прототипно-ориентированный сценарный язык программирования. Фрагменты кода на языке JavaScript, выполняемые браузером, называют сценариями.
JavaScript отличается:
●прототипным стилем программирования (вместо классов и наследования — прототипы и клонирование);
●слабой динамической типизацией;
●функциями как объектами первого класса (то есть их можно создавать прямо во время выполнения программ).
Итак, в каких областях нашёл себя JavaScript:
●Динамические веб-страницы
●Веб-приложения и игры
●Расширения для браузера
●Серверные приложения
●Мобильные приложения
●Десктоп
22.Виды сценариев JavaScript.
Сценарии могут быть внешними и встроенными.
●Внешний сценарий (размещается в отдельном ресурсе).
●Встроенный сценарий (размещается в самой Web-странице)
Внешний сценарий (размещается в отдельном ресурсе).
Сам скрипт размещается в отдельном файле, например myScript.js
•Скрипт подключается к HTML-документу при помощи тега <script> и атрибута src в том месте, где он должен быть исполнен <script src="myScript.js"></script>;
•В одном теге <script> нельзя одновременно подключить внешний скрипт и указать код. Код не будет исполнен. Необходимо разделить сценарии;
Для подключения нескольких скриптов рекомендуется использование нескольких тегов.
Встроенный сценарий (размещается в самой Web-странице)
Сценарии могут встраиваться в HTML-документ тремя стандартными способами:
• с помощью тега script;
Внутри контейнера script сценарий JavaScript может быть помещен в любом месте webстраницы. Язык сценария указывается с помощью атрибута type.
<script type="text/javascript">код сценария</script>
• в виде гиперссылки;
Для встраивания сценариев в гиперссылку применяется контейнерный тег <a>, имеющий атрибут href. В качестве адреса атрибут href содержит JavaScript-сценарий, предваренный ключевым словом javascript: (со знаком двоеточия).
<a href="javascript:alert('Приветствую вас!')">Нажмите</a>
• с помощью обработчика события.
Выполнение сценария привязано к какому-либо событию и служит для его обработки.
В качестве событий выступают любые действия пользователя, например: - щелчок мыши (сlick);
-перемещение курсора мыши относительно элемента страницы;
-наведение указателя на элемент (mouseover);
-перемещение указателя за пределы элемента (mouseout) и т.п.
Любое событие может быть перехвачено и обработано процедурой сценария. Для перехвата события в теги элементов страницы вводятся параметры обработки события.
Имя параметра обработки начинается с приставки on, за которой следует название обрабатываемого события (например, onclick). В качестве значения параметра обработки указывается действие, которое необходимо выполнить.
23. Способы встраивания JavaScript-сценария в веб-страницу.
Сценарии могут встраиваться в веб-страницу следующими основными способами:
1.с помощью тега script;
2.в виде гиперссылки;
3.с помощью обработчика события;
4.подключением сценария, размещаемого во внешнем файле.
Первые три способа встраивания относятся к внутренним сценариям, размещаемым непосредственно на странице.
1.Внутри контейнера <script>...</script> сценарий JavaScript может быть помещен в любом месте web-страницы. Если при обработке кода страницы веб-браузер встретит тег <script>, то он интерпретирует сценарий JavaScript до закрывающего тега </script> и далее продолжит обработку кода страницы. Язык сценария указывается с помощью атрибута type:
<script type="text/javascript">
код сценария
</script>
Атрибут type можно и не указывать, так как значение «text/javascript» является значением по умолчанию.
2.Для встраивания сценариев в гиперссылку применяется контейнерный тег <a>, имеющий атрибут href.
В качестве адреса атрибут href содержит JavaScript-сценарий, предваренный ключевым словом javascript: (со знаком двоеточия).
<a href="javascript:alert('Приветствую вас!')">Нажмите</a>
3.Выполнение сценария привязано к какому-либо событию и служит для его обработки.
В качестве событий выступают любые действия пользователя, например:
• щелчок мыши (сlick);
• перемещение курсора мыши относительно элемента страницы;
• наведение указателя на элемент (mouseover);
• перемещение указателя за пределы элемента
(mouseout);
• и т.п.
Любое событие может быть перехвачено и обработано процедурой сценария.Для перехвата события в теги элементов страницы вводятся параметры обработки события.
Имя параметра обработки начинается с приставки on, за которой следует название обрабатываемого события (например, onclick).
В качестве значения параметра обработки указывается действие, которое необходимо выполнить.
<input type="button" value="Нажать" onclick="alert('Спасибо')" />
4.Сам скрипт размещается в отдельном файле, например myScript.js
•Скрипт подключается к HTML-документу при помощи тега <script> и атрибута src в том месте, где он должен быть исполнен
<script src="myScript.js"></script>
•В одном теге <script> нельзя одновременно подключить внешний скрипт и указать код.
Код не будет исполнен. Необходимо разделить сценарии.
Для подключения нескольких скриптов рекомендуется использование нескольких тегов.
24.Операторы JavaScript. Типы операторов JavaScript.
Операторы могут содержать:
•переменные — могут изменять свое значение в программе,
•константы — не изменяют свое значение,
•выражения.
ВJavaScript есть следующие типы операторов. Данный подраздел описывает каждый тип и содержит информацию об их приоритетах друг над другом.
●Операторы присваивания
Врезультате операции присваивания операнду слева от оператора присваивания (enUS) (знак "=") устанавливается значение , которое берётся из правого операнда. Основным оператором присваивания является =, он присваивает значение правого операнда операнду, находящемуся слева. Таким образом, выражение x = y означает, что x присваивается значение y.
●Операторы сравнения
Оператор сравнения (en-US) сравнивает свои операнды и возвращает логическое значение, базируясь на истинности сравнения. Операнды могут быть числами, строками, логическими величинами или объектами. Строки сравниваются на основании стандартного лексикографического порядка, используя Unicode-значения. В большинстве случаев, если операнды имеют разный тип, то JavaScript пробует преобразовать их в тип, подходящий для сравнения. Такое поведение обычно
происходит при сравнении числовых операндов. Единственным исключением из данного правила является сравнение с использованием операторов === и !==, которые производят строгое сравнение на равенство или неравенство. Эти операторы не пытаются преобразовать операнды перед их сравнением. Следующая таблица описывает операторы сравнения в контексте следующего примера кода:
●Арифметические операторы
Арифметические операторы (en-US) используют в качестве своих операндов числа (также литералы или переменные) и в качестве результата возвращают одно числовое значение. Стандартными арифметическими операторами являются сложение (+), вычитание (-), умножение (*), и деление (/).
●Битовые (поразрядные) операторы
Битовые операторы (en-US) обрабатывают свои операнды как последовательности из 32 бит (нулей и единиц), а не как десятичные, шестнадцатеричные или восьмеричные числа. Например, десятичное число 9 имеет двоичное представление 1001. Битовые операторы выполняют операции над таким двоичным представлением, но результат возвращают как обычное числовое значение JavaScript.
●Логические операторы
Логические операторы (en-US) обычно используются с булевыми (логическими) значениями; при этом возвращаемое ими значение также является булевым.
●Строковые операторы (не нужно учить, думаю)
Вдополнение к операторам сравнения, которые могут использоваться со строковыми значениями, оператор (+) позволяет объединить две строки, возвращая при этом третью строку, которая представляет собой объединение двух строк-операндов.
Сокращенный оператор присваивания += также может быть использован для объединения (конкатенации) строк.
●Условный (тернарный) оператор
Условный оператор является единственным оператором JavaScript, который использует три операнда. Оператор принимает одно из двух значений в зависимости от заданного условия.
●Оператор запятая
●Унарные операторы
●Операторы отношения
25.Методы ввода/вывода данных в JavaScript-сценарии.
Ввод/вывод данных в JavaScript можно реализовать с помощью следующих методов:
• Метод prompt( ) - ввод данных через модальное окно
Метод prompt() выводит на экран диалоговое окно, которое запрашивает у пользователя информацию.
<html>
<head>
<title>Метод prompt </title> </head>
<body>
<script>
var rating=prompt("Как Вы оцените свою работу?", "отлично"); </script>
</body>
</html>
• Метод confirm( ) - ввод булевских данных через модальное окно
Метод confirm() отображает диалоговое окно с сообщением и двумя кнопками.
Обычно используется для запроса у пользователя разрешения на выполнение того или иного действия.
<body>
<script>
confirm(«Вас интересует тема сайта");
</script>
</body><body>
<script>
if (confirm("Вас заинтересовала тема настоящего сайта ?"))
{
alert("Предлагаю перейти на главную страницу");
}
else {
alert("Благодарю за внимание ");
}
</script>
</body>
• Метод alert( ) - вывод данных через модальное окно