IkxJ2A64Jt
.pdf3. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ CSS
Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Под каскадностью понимается применение различных стилей к одним и тем же элементам страницы, причем стили могут быть подключены из различных мест [4].
3.1. Способы подключения стилей
Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей. Эти таблицы могут размещаться как в самом документе, внешний вид которого они описывают, так и в отдельных текстовых файлах, имеющих формат CSS. В файле .css должны содержаться только правила CSS и комментарии к ним. Есть четыре способа подключения каскадных стилей.
Если таблица стилей находится в отдельном файле, подключение может осуществляться посредством тега link. Он располагается внутри тега head и имеет атрибут href, в котором записан адрес таблицы стилей.
<html>
<head>
.....
<link rel="stylesheet" href="style.css"> </head>
<body>
.....
</body>
</html>
Если таблица стилей находится в отдельном файле, подключение может осуществляться посредством директивы @import, располагающейся в начале тела тега style (располагаются в теле тега head). После ключевого слова @import указывается путь к стилевому файлу с помощью URL или без него (в кавычках).
<html>
<head>
.....
<style>
@import url(style.css);
.....
</style>
</head>
.....
</html>
21
Если таблица стилей описана в самом документе, она может располагаться в теле тега style.
<html>
<head>
.....
<style>
body { color: red; } </style>
</head>
<body>
.....
</body>
</html>
Допустимо описание стиля тега с помощью атрибута style.
<html><head>.....</head> <body>
<p style="font-size: 20px; color: green;">.....</p> </body>
</html>
В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а следующих двух случаях – внутренние таблицы стилей.
3.2. Формат записи стилей
Каскадные стили записываются в своем формате, отличном от HTML. В начале пишется имя тега, для которого будет применен стиль, затем в фигурных скобках записываются свойства в формате «свойство:значение;». Между собой свойства разделяются символом «;».
body { font-size:36pt; padding:125px; }
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции.
Для одного и того же тега можно задавать несколько стилей, при этом они будут просуммированы.
div { font-size:36pt; } div { text-align:center; } div { display:inline;}
Стили можно применять к нескольким тегам сразу, для этого все теги перечисляются через запятую:
div, table, p {...}
22
3.3. Классы
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. Имена классов задаются разработчиком стилей. Они должны начинаться с латинского символа и могут содержать в себе символы дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Пример записи класса в таблице стилей:
тег.имя класса { свойство1: значение; свойство2: значение; ... }
Для подключения класса стилей к конкретному тегу необходимо воспользоваться атрибутом class:
<table class="abc">
Допускается создавать классы стилей, не привязанные к конкретному
тегу:
.abc{...}
Существуют более гибкие возможности задания классов и стилей. Например, на странице есть несколько таблиц и для ячеек каждой из них необходимо задать свой стиль. Можно задать нужное число классов для тега td и подключить эти классы к каждому тегу td в каждой таблице. Однако при большом числе тегов td значительно возрастут время на подключение классов разработчиком, объем документа и время его загрузки для конечного пользователя. Эффективнее задать классы для таблиц и связать стили ячеек с классами таблиц, записав тег td через пробел после класса таблицы:
table.abc td {...}
В этом случае для подключения стилей ячеек достаточно будет задать в HTML-документе только классы для таблиц.
23
4. ЯЗЫК ПРОГРАММИРОВАНИЯ JAVASCRIPT
JavaScript изначально создавался для того, чтобы сделать веб-страницы интерактивными. Программы на этом языке называются скриптами. Они подключаются напрямую к HTML и выполняются сразу же после загрузки страницы.
Чтобы читать и выполнять текст на JavaScript, нужна специальная программа – интерпретатор. Процесс выполнения скрипта называют интерпретацией. Во все основные браузеры встроен интерпретатор JavaScript, именно поэтому они могут выполнять скрипты на странице.
Современный JavaScript – это «безопасный» язык программирования общего назначения. Он не предоставляет низкоуровневых средств работы с памятью, процессором, так как изначально был ориентирован на браузеры, в которых это не требуется.
В браузере JavaScript умеет делать все, что относится к манипуляции со страницей, взаимодействию с пользователем и, в какой-то мере, с сервером.
4.1. Способы подключения
Для подключения JavaScript используется тег script. Есть два варианта его использования.
Первый вариант – подключить внешний файл, содержащий скрипты. Для этого в теге script используются атрибуты type и src:
<script type=”text/javascript” src=“имя файла”></script>
Второй вариант – писать скрипт прямо в теле тега script:
<script>...</script>
Если браузер не поддерживает JavaScript или обработка скриптов отключена пользователем, можно воспользоваться тегом noscript для информирования пользователя.
<noscript>...</noscript>
В случае, если скрипты поддерживаются, браузер пропустит тег
noscript.
24
4.2.Элементы языка
Влюбом скрипте необходимо работать с информацией и хранить ее. Для хранения информации используются переменные. Для объявления переменной используется ключевое слово var. Имя переменной может состоять из латинских символов, цифр, символов «$» и «_» и не должно начинаться с цифры. Записать данные можно как во время создания переменной, так и после этого.
var a; var b = 3; a = b;
Для работы с переменными, JavaScript поддерживает операторы, перечисленные в таблице.
Виды операторов |
Операторы |
|
|
Присвоения |
= |
|
|
Бинарные |
+ – / * % |
|
|
Унарные |
++ -- – |
|
|
Сравнения |
== != < > <= >= |
|
|
Иногда, в зависимости от определенного условия, нужно выполнить различные действия. Для этого используется оператор if. Оператор if получает условие, и если результат выражения равен true, то выполняет команду. Необязательный блок else выполняется, если результат выражения равен false.
if (a > b)
{
alert(a);
}
else
{
alert(b);
}
Для многократного выполнения одного участка кода предусмотрены циклы. Чаще всего применяется цикл for.
for (начало; условие; шаг)
{
//... тело цикла ...
}
Чтобы не повторять один и тот же код во многих местах, используются функции. Для объявления функции используется следующий формат. Вначале
25
идет ключевое слово function, после него имя функции, затем список параметров в скобках и тело функции – код, который выполняется при ее вызове.
Объявление функции:
function summ(a,b)
{
var с = a + b; return c;
}
Вызов функции:
var x = summ(5, 3);
4.3. Объектная модель документа
Объектная модель документа (DOM) обеспечивает программный интерфейс для HTML и XML-документов. Она определяет логическую структуру документов и способы взаимодействия с ними.
На рисунке представлен набор основных объектов с соблюдением их иерархии:
∙window – предназначен для работы с окнами браузера, дает возможность открывать новые окна с установленными параметрами;
∙screen – позволяет определить такие параметры экрана клиента, как разрешение и глубина цвета;
∙frames – дает доступ к документам, загруженным в фреймы;
∙location – дает доступ к URL документа, отображаемого в окне браузера. Позволяет определить полный URL, а также его части: протокол, доменное имя и т. д.;
∙navigator – дает информацию о версии браузера;
∙history – позволяет выполнять навигацию по посещенным страницам;
∙document – служит для обращения к элементам страницы.
Объекты имеют свойства и методы. Обращение к ним происходит следующим образом:
объект.свойство объект.метод
Свойства объекта могут являться объектами – в этом случае обращения к свойствам и методам объектов второго и последующих уровней происходит аналогично.
26
|
|
|
|
all |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
history |
|
links |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
navigator |
|
anchors |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
frames |
|
forms |
|
elements |
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window |
|
|
|
|
|
|
|
document |
|
scripts |
|
|
|
|
|
|
|
|
||
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
location |
|
frames |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
event |
|
images |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
screen |
|
selection |
|
|
|
|
|
|
|
|
|
stylesheets
body
Например, на странице есть форма, а в форме – поле ввода. Требуется записать содержимое этого поля в переменную. Это можно сделать следующим образом:
var a = document.имя_формы.имя_поля_ввода.value;
4.4.События объектов
ВJavaScript, как и в других объектно-ориентированных языках, определен ряд событий, связанных с элементами документа. Обработчики дают возможность организовать реакцию на возникновение событий из сценария. При этом соответствующий обработчик указывается как атрибут элемента HTML-документа, а значением этого атрибута является выражение
JavaScript.
Следующий пример показывает обработку события наведения курсора на элемент. При этом изменится цвет фона этого элемента.
<div onMouseOver="this.style.bgColor='#CCCCCC'">
Наведите курсор мыши
</div>
Оператор this возвращает ссылку на объект, являющийся текущим контекстом вызова. Это позволяет обращаться к свойствам текущего объекта.
27
Пример использования JavaScript:
<html>
<head></head>
<body>
Начало текста
<div onClick="openClose('1')">подробнее...</div> <div id="1" style="display:none;">скрытый текст</div>
продолжение текста
</body>
</html>
<script language="JavaScript" type="text/javascript"> function openClose(id)
{
var obj = document.getElementById(id).style;
if(obj.display == "") obj.display = "none";
else if(obj.display != "none") obj.display = "none";
else
obj.display = "block";
}
</script>
28
Список литературы
1.Кириленко А. Самоучитель HTML. СПб.: Питер, 2006. 272 с.
2.Матросов А. В., Сергеев А. О., Чаунин М. П. HTML 4.0. СПб.: БХВПетербург, 2007. 672 с.
3.Днепров А. Г. JavaScript на 100 %. СПб.: Питер, 2008. 304 с.
4.Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 – Русская редакция. СПб.: БХВ-Петербург, 2015. 688 с.
29
|
Содержание |
|
Введение................................................................................................................... |
3 |
|
1. |
Основы веб-технологий.................................................................................... |
4 |
2. |
Язык разметки гипертекста .............................................................................. |
7 |
|
2.1. Общие сведения .................................................................................. |
7 |
|
2.2. Структура HTML-страницы............................................................... |
8 |
|
2.3. Служебные символы, пробелы и перевод строки............................ |
8 |
|
2.4. Форматирование текста.................................................................... |
10 |
|
2.5. Списки................................................................................................ |
13 |
|
2.6. Ссылки................................................................................................ |
15 |
|
2.7. Таблицы.............................................................................................. |
15 |
|
2.8. Фреймы............................................................................................... |
17 |
|
2.9. Формы ................................................................................................ |
18 |
3. Каскадные таблицы стилей CSS .................................................................... |
21 |
|
|
3.1. Способы подключения стилей......................................................... |
21 |
|
3.2. Формат записи стилей ...................................................................... |
22 |
|
3.3. Классы................................................................................................ |
23 |
4. |
Язык программирования JavaScript ............................................................... |
24 |
|
4.1. Способы подключения ..................................................................... |
24 |
|
4.2. Элементы языка................................................................................. |
25 |
|
4.3. Объектная модель документа .......................................................... |
26 |
|
4.4. События объектов............................................................................. |
27 |
Список литературы ............................................................................................... |
29 |
|
30