Форматирование псевдоклассов и псевдоэлементов
Псевдоклассы это - ссылки, first-child и lang:
a: link - свойства обычной ссылки; a: active - свойства активной ссылки;a: visited - свойства посещенной ссылки; a: hover - свойства ссылки при наведении на неё мыши; a: focus - свойство ссылки при фокусе
first-child - выделяет первый элемент среди последующих.
lang - форматирование элементов в зависимости от применения языков на странице.
В каскадных листах стилей при форматировании ссылок применяются те же значения, что и к обычному тексту. При описании других псевдоклассов в CSS перед их значениями указывается символ ">".
К псевдоэлементам в стилях относятся свойства: first-letter - форматирует первый символ для первой строки; first-line - назначается отдельное форматирование первой строки блока текста; after - назначает месторасположения объекта после текущего элемента; before - назначает месторасположения объекта до текущего элемента.
Единицы измерения в CSS
В CSS используeтcя несколько способов для задания размеров: относительный размер в про-центах (%), относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large), абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), пикселях (px), средней ши-риной буквы "m" (em), средней шириной буквы "x" (eх) , абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in), абсолютный в пикселях (px)
Цвет может быть определен одним из трех способов: при помощи названия цвета: yellow, red, green, grey,.. ; шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..; десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..
Приведем несколько примеров описания таблицы стилей:
.epigraph {
font-size: 12pt;
font-style: italic;
text-align: right;
color: rgb(127,127,0);
}
p.big {
font-size: 16px;
font-weight: bold;
color: #ff0000;
}
.menu {
font-weight: bold;
font-size: 9pt;
font-family: arial, helvetica, sans-serif;
}
a:hover {
color: #b63a3a;
text-decoration: none;
}
Новое в CSS3
border-radius, box-shadow, text-shadow, opacity, border-image, rgba(x,y,z,a), backgroun-size, background:url(), url(), column-count, transition, transform, @font-face, background-clip, animation, @animation-keyframes.
Закруление углов: .radius_border { border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
}
Тень от блока:box_shadow { box-shadow: 5px 5px 2px #000;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
}
Тень от текста: TEXT.text_shadow { text-shadow: 2px 2px 2px #000;
-moz-text-shadow: 2px 2px 2px #000;
-webkit-text-shadow: 2px 2px 2px #000;
}
Transition: .pic { margin-left: 80%;
-webkit-transform: rotate(-30deg) scale(1.5);
-webkit-transition: all 2s ease-in;
}
Валидация CSS
Валидацией называется проверка CSS-кода на соответствие спецификации CSS. Соответственно, корректный код, не содержащий ошибок, называется валидный, а не удовлетворяющий спецификации —невалидный. Чтобы проверить правильно ли оформлена страницу и лист стилей, можно загрузить их прямо со своего компьютера на сайт валидаторов и получить развернутое сообщение об ошибках. Наиболее удобно делать проверку кода CSS через сайт http://jigsaw.w3.org/css-validator/. С помощью этого сервиса можно указать адрес документа, загрузить файл или проверить набранный текст. Для проверки HTML-кода можно перейти на сайт validator.w3.org
Глава 4. Язык JavaScript
Введение
Язык JavaScript был разработан в 1995 году компанией Netscape Communication Corporation, известной также как создатель Web-браузера Netscape Navigator. JavaScript — это язык сценариев (скриптов), исполняемых в первую очередь на стороне клиента и позволяющих улучшить внешний вид Web-страниц. JavaScript — это интерпретируемый язык программирования. Это означает, что браузер выполняет каждую строку скрипта последовательно, строка за строкой. Все проведенные изменения вступают в силу сразу после загрузки документа в окне браузера. Интерпретируемые языки программирования позволяют легко перносить приложения на различные платформы. Они имеют также и недостаток —программы на них выполняются медленно.
JavaScript принес на клиентскую Web-страницу динамику и интерактивность. Ближайшей альтернативой JavaScript является технология Flash, содержащая средства для работы с мультимедиа.
К проблемам, часто решаемым на JavaScript можно, например, отнести следующие:
• отображение изменяющихся данных, таких как текущее время или дата;
• программирование переменного содержания в зависимости от браузера пользователя, имени пользователя, текущей даты, или других условий;
• изменение внешнего вида элементов страницы при возникновении события, например щелчка мышью;
• выполнение вычислений на клиентской странице.
Улучшение пользовательского интерфейса.С помощью Javaascript реализуются анимационные рисунки, часы, календари, бегущие строки, средства перемещения по документу и отображения информации. Одно из основных применений состоит в изменении рисунка, используеммого в качестве гиперссылки при наведении на него указателя мыши. JavaScript позволяет последовательно отображать рисунки, создавая анимационные картинки, хотя анимация и не входит в число преимуществ JavaScript.
Использование строки состояния.Строка состояния — это серая панель в нижней части окна браузера. Она позволяет отобразить описание команд меню и кнопок панели инструментов, например, с помощью бегущих строк.
Средства перемещения по документу.JavaScript позволяет создать меню и раскрывающиеся списки для перемещения между различными страницами Web-узла.
Окна с сообщениями и другие элементы. JavaScript позволяет создать окна сообщениий с предупреждением, напоминанием или подтверждением. Если необходимо вывести много информации, с помощью JavaScript создается новое окно браузера
Проверка и изменение форм.Формы позволяют проводить самые различные операции - от заказа товаров в электронных магазинах до получения сведений о популярности узла. JavaScript часто используется для проверки правильности заполнения полей формы.
Определение версии браузера. В JavaScript предусмотрена возможность определения типа браузера и выполнения команд, поддерживаемых только им.
Внедряемые модули. Надстройки браузера, позволяют отображать в документах HTML разные типы данных, например для отображения видео, и аудио информации.
Структура языка
Структурно JavaScript можно представить в виде объединения трёх частей:
• ядро (ECMAScript),
• объектная модель браузера (Browser Object Model или BOM ),
• объектная модель документа (Document Object Model или DOM).
Спецификация ECMAScript описывает типы данных, инструкции, ключевые и зарезервированные слова, операторы, объекты, регулярные выражения.
BOM представляется объектом window и объектами: navigator, location, history, frames, screen, а также функциями setTimeout() и setInterval().
Помимо управления окнами, в рамках объектной модели браузера обеспечивается:
• управление фреймами,
• задержка в исполнении кода и зацикливания с задержкой,
• системные диалоги,
• управление адресом открытой страницы,
• управление информацией о браузере,
• управление информацией о параметрах монитора,
• ограниченное управление историей просмотра страниц,
• поддержка работы с HTTP cookie.
Согласно объектной модели документа DOM, документу можно поставить в соответствие дерево объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:
• получение узлов,
• изменение узлов,
• изменение связей между узлами,
• удаление узлов.