Включение css в html. Связывание

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

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

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

Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей.

Тег <LINK>

См. стр. 9

Синтаксис css

селектор { свойство: значение;}

селектор - элементы сообщают браузеру, где применить стиль. Это могут быть имена HTML-тегов, идентификаторы элементов, авторские классы, псевдоклассы, псевдообъекты и др.

свойство – свойство стиля . Свойства шрифта, цвета, текста, таблицы, позиционирование и т.д.

 body { color: blue;}

#form3 {color:red; background-color: blue}

Синтаксис css. Селекторы

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

< STYLE TYPE="text/css"> <!--   A {text-decoration: none; }

p {color: red; } --> </STYLE>

Если некоторые экземпляры нужно отобразить по-другому, CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого описывается класс.

Для присвоения класса используется параметр CLASS = "имя класса».

< STYLE TYPE="text/css"> p.blue {color: blue }

.green {color: green;} </STYLE>

…

<p class=“blue”> Синий абзац</p>

<h1 class=“blue”> А вот заголовок синим не стал</h1>

<h1 class=“green ”> А зеленым , пожалуйста. И абзац тоже может стать зеленым. </h1>

Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.

Параметр ID задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.

< STYLE TYPE="text/css"> #myID {letter-spacing: 1em; } </STYLE>

…

<P ID=myID> Разрежённые слова в абзаце</P>

Синтаксис css. Псевдоклассы

Псевдокласы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта.

Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для тега P псевдокласс :first-letter, в котором устанавливаете различные стили:

p:first-letter { float: right; font-size: 2em; color: red;}

В CSS2 определяются следующие псевдоклассы:

• :link - еще не посещенные ссылки;

• :visited - посещенные ссылки;

• :hover - элемент, над которым в настоящее время находится курсор;

• :first-line - первая формированная строка абзаца;

• :first-letter - первая буква абзаца;

• :first-child -первый дочерний элемент другого элемента;

• :active - активный в данный момент элемент ;

• :focus - элемент, имеющий фокус ввода;

• :lang - этот псевдокласс определяет текущий язык;

• :before - определяет содержимое перед элементом;

• :after - определяет содержимое после элемента.