3. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ 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