WEB-технологии

IMG[alt] {border: 1px solid;}

Элементы можно выбирать не только на основе содержащихся в них атрибутов, но и по значениям этих атрибутов. Следующее правило будет применяться  ко всем изображениям со значением атрибута scr равным image.jpg:

IMG[src="image.jpg"] {border: 1px solid;}

Селекторы потомков. Селекторы потомков используются для выбора только определенных элементов, которые являются потомками  других определенных элементов. Например, следующее правило будет применяться ко всем элементам STRONG, которые являются потомками элементов H1. Другими словами, оно применяется только к тем элементам STRONG, которые находятся внутри элемента H1, и никакого промежуточного элемента между ними нет:

H1 > STRONG {color: blue;}

Селекторы нижележащих элементов. Селекторы нижележащих элементов  выбирают все подходящие элементы в  любом месте иерархии элементов. Рассмотрим следующий фрагмент кода HTML:

<DIV>

  <STRONG>Первый  потомок элемента DIV</STRONG>

  <P>Второй  потомок элемента DIV

    <STRONG>Единственный  потомок элемента P</STRONG>.

  </P>

</DIV>

В этом фрагменте элемент DIV является предком всех других элементов: двумя его потомками являются элементы STRONG и P. Элемент P имеет один элемент-потомок - еще один STRONG. Можно использовать селектор потомков для выбора только первого элемента STRONG, находящегося непосредственно внутри DIV следующим образом:

DIV > STRONG { ... }

Если вместо этого использовать селектор нижележащих элементов, то будут выбраны оба элемента STRONG:

DIV STRONG { ... }

Селекторы смежных одноуровневых  элементов. Эти селекторы позволяют  выбирать определенный элемент, который  следует непосредственно после  другого определенного элемента на том же уровне в иерархии элементов. Например, если необходимо выбрать только элементы P, следующие непосредственно за элементами H1, можно воспользоваться следующим правилом:

H1 + P { ... }

Псевдоклассы 

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

Псевдоклассы :link и :visited. Современные браузеры по-разному отображают посещенные и непосещенные ссылки. Для того, чтобы можно было применить к этим типам ссылок различные стилевые правила, в CSS предусмотрены специальные псевдоклассы :link и :visited.

a:link {color: red;}

a:visited {color: green;}

В приведенном выше примере первое стилевое правило будет применяться  к непосещенным ссылкам в документе, а второе - к посещенным.

Псевдоклассы :hover, :active и :focus. Стиль отображения некоторых элементов может динамически изменяться в результате определенных действий пользователя. Для этого в CSS используются псевдоклассы :hover, :active и :focus.

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

Псевдокласс :active применяется к соответствующему элементу, когда пользователь нажимает кнопку мыши и до тех пор, пока он ее не отпустит. Как правило, это довольно короткий промежуток времени.

Псевдокласс :focus применяется к соответствующему элементу, когда он получает фокус (в результате нажатия определенных клавиш).

CSS не определяет, к каким именно  элементам могут применяться  указанные псевдоклассы. Однако современные браузеры поддерживают их только применительно к HTML-элементам A, т.е. к ссылкам, например:

A:link    {color: red}   

A:visited {color: blue}  

A:hover   {color: yellow}

A:active  {color: green}  

Псевдокласс :first-child. Данный псевдокласс выбирает все экземпляры элемента, который является первым элементом-потомком своего предка, поэтому, например, следующее правило выбирает первый объект списка любого вида и делает его текст жирным:

LI:first-child {font-weight: bold;}

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

<P lang="en-US">London is a capital of Great Britan.<P>

       

можно было бы выбрать с помощью  кода

p:lang(en-US) { ... }

Псевдоэлементы

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

P:first-letter {

  font-weight: bold;

  font-size: 200%

}

       

Первая буква каждого параграфа  будет теперь жирной и на 200% больше остального текста параграфа.

Чтобы сделать первую строку каждого  параграфа жирной, можно использовать следующее правило:    P:first-line {font-weight: bold;}

Другим применением псевдоэлементов  является вставка автоматически  генерируемого содержимого перед  или после указанного элемента. За эти действия отвечают псевдоэлементы :before и :after соответственно. Подробно ознакомиться с особенностями применения данных пседоклассов можно в Спецификации CSS.

Комментарии

Комментарии в CSS начинаются с группы символов /* и заканчиваются символами */. Например:

/* Так выглядит  комментарий в CSS */

Использование комментариев может сэкономить немало времени при поиске определенного стилевого правила в CSS-файлах. Комментарии в CSS не влияют на интерпретацию таблиц стилей браузерами. Однако не рекомендуется использовать комментарии на русском языке, т.к. в некоторых случаях использование кириллицы в CSS-комментариях может приводить к неправильной интерпретации таблиц стилей некоторыми популярными браузерами.

Включение таблиц стилей в HTML-документ

Имеется три способа задания  стилей в HTML-документе. Перечислим их в  порядке предпочтения.

Внешние таблицы стилей

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

...

<HEAD>

   <LINK rel="stylesheet" href="style.css" type="text/css">

</HEAD>

...

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

<LINK rel="stylesheet" href="style.css" type="text/css" media="screen, print">

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

Внутренние таблицы стилей

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

...

<HEAD>

  <STYLE type="text/css">

      H1 {text-align: center}

  </STYLE>

</HEAD>

<BODY>

  <H1>Этот  заголовок имеет указанный выше  стиль</H1>

</BODY>

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

Таблицы стилей элементов

Последним способом задания стилей является определение таблицы стилей отдельного элемента путем задания  его атрибута style. Например, стиль элемента H1 из предыдущего примера мог бы быть задан и так:

<H1 style="text-align: center">

   Подобной практики следует избегать. Она приемлема только в том случае, когда документ HTML содержит единственный элемент с данным набором стилей.

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

Наследование в CSS является механизмом, с помощью которого определенные свойства передаются от элемента предка его элементам потомкам. Наследуются не все свойства CSS: например, поля не наследуются, так как маловероятно, что элементу-потомку могут понадобиться такие же поля, как и его предку. В большинстве случаев здравый смысл подскажет, какие свойства наследуются, а какие нет, но для абсолютной уверенности необходимо проверить свойство в итоговой таблице свойств в Спецификации CSS (http://www.w3.org/TR/CSS21/propidx.html). Однако следует помнить, что значения, заданные в виде процентных величин, не наследуются никогда.

Пусть, например, элемент H1 содержит элемент EM:

<H1>Этот заголовок  <EM>очень важен</EM>!</H1>

Если элементу EM не присвоен цвет, то он унаследует цвет своего предка, т.е. элемента H1. Для задания стиля отображения элементов по умолчанию, достаточно задать стиль элемента BODY. Все остальные элементы являются потомками этих элементов, поэтому они будут наследовать их свойства.

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

P {background: inherit;}

Принудительное наследование не предназначено для постоянного использования. Оно может быть полезно для отмены объявления в конфликтующем правиле. Однако данный вид наследования необходимо использовать с осторожностью, так как, например, Internet Explorer, включая версию 7, не поддерживает это ключевое слово.

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

Сам термин CSS означает Каскадные таблицы  стилей (Cascading Style Sheets), поэтому нет  ничего удивительного, что каскадирование является его важной характеристикой. Это механизм, который управляет конечным результатом, когда несколько конфликтующих объявлений CSS применяется к одному элементу. Например, поверх стилевых спецификаций, примененных к какой-нибудь отдельной Web-странице, может действовать стилевой файл, общий для всех страниц Web-сайта.

Имеется три основных показателя, которые управляют порядком, в  котором применяются объявления CSS. К таким показателям относятся  важность, специфичность и порядок  исходного кода.

Важность объявления CSS зависит  от того, где оно определено. Таблицы  стилей могут иметь три источника происхождения: автор, пользователь и агент пользователя.

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

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

Таблица стилей автора является таблицей стилей, которую автор документа (или, более вероятно, дизайнер сайта) написал и присоединил к соответствующему документу HTML или включил в него.

Как правило, вес правил таблицы  автора больше, чем вес правил таблицы  пользователя, а вес правил таблиц автора и пользователя больше, чем вес правил таблицы агента пользователя.

Для того, чтобы правила пользовательской таблицы стилей могли перекрывать  авторскую, CSS содержит атрибут !important. Правило пользовательской таблицы  стилей, имеющее такой атрибут, имеет  больший вес, чем соответствующее правило авторской таблицы стилей. Например, если в пользовательской таблице определено следующее ниже правило, то не имеет значения, что определил автор Web-страницы, и не имеет значение, какое семейство шрифтов задано по умолчанию в браузере - все будет выводиться шрифтом Comic Sans MS.

* {

  font-family: "Comic Sans MS" !important;

}

      

Лекция 12-15.  JavaScript

 

JavaScript - предназначен для написания сценариев для активных HTML-страниц. Язык JavaScript не имеет никакого отношения к языку Java. Java разработан фирмой SUN. JavaScript – фирмой Netscape Communication Corporation. Первоначальное название – LiveScript. После завоевания языком Java всемирной известности LiveScript из коммерческих соображений переименовали в JavaScript.

JavaScript не предназначен для создания  автономных приложений. Программа  на JavaScript встраивается непосредственно  в исходный текст HTML-документа  и интерпретируется брaузером  по мере загрузки этого документа.  С помощью JavaScript можно динамически  изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состоятия документа или окна.

Важная особенность JavaScript – объектная  ориентированность. Программисту доступны многочисленные объекты, такие, как документы, гиперссылки, формы, фреймы и т.д. Объекты характеризуются описательной информацией (свойствами) и возможными действиями (методами).

Тег <SCRIPT>

Сценарий JavaScript встраивается в HTML-документ с помощью тега <SCRIPT>.

Пример

<HTML><HEAD>

<meta http-equiv=Content-Type content="text/html; charset=windows-1251">

</HEAD>

<BODY lang=RU><H1>Начнем?</H1>

<SCRIPT LANGUAGE="JavaScript">

<!--

document.write("Привет!");

//-->

</SCRIPT></BODY></HTML>

РЕЗУЛЬТАТ:

Начнем?

Привет!

Атрибут LANGUAGE указывает язык программирования. Если мы имеем дело с HTML версии 4.0, то вместо LANGUAGE рекомендуется использовать атрибут TYPE в следующем виде:

<SCRIPT TYPE="text/javascript">

Текст сценария оформляется как  комментарий, чтобы не было проблем  у посетителей, брaузеры которых не понимают JavaScript. Кроме того к символам, завершающим комментарий добавляется еще два символа “/”, т.к. некоторые браузеры, например, Netscape Navigator рассматривает строку, состоящую только из символов “-->”, как ошибочную.

В первом примере для объекта  с именем document вызывается метод write. В качестве параметра ему передается текстовая строка “Привет!”. Строка закрывается символом “;”, которым отделяются друг от друга все операторы JavaScript.

Объект document – это HTML-документ, загруженный в окно брaузера. Метод write записывает в тело HTML-документа строку “Привет!”. При этом документ будет выгдядеть так, как будто эта строка находится в нем на месте сценария.

Имейте в виду, что JavaScript различает  строчные и прописные буквы. Кроме того символ дефиса в JavaScript распознается как минус, т.е. если фон объекта в HTML-документе задается через свойство background-color, то в JavaScript - через backgroundColor.