Практическая работа "Разработка web-сайтов + css"

Разработка клиентских приложений Web-сайтов

Работа с каскадными таблицами стилей

Лекцию мы начнем с разбора различных способов добавления каскадных таблиц стилей к документу. Одним из таких способов является внедрение - запись правил непосредственно в (X)HTML-коде внутри контейнера .

Пример 1. Внедрение CSS в HTML-код.

Запустим программу MS Visual Web Developer 2008 Express Edition. Добавим HTML-страницу. Добавим следующий код (наш код будет выделен жирным шрифтом) ().

Результат:

Рис. 5.1.

Внедренная в (X)HTML-код таблица стилей доступна только в рамках данного документа. Более универсальным является связывание, когда правила записываются во внешний файл с расширением .css. В (X)HTML-коде web-страницы размещается директива @import в контейнере или ссылка , размещенная в контейнере .

Продемонстрируем связывание CSS, размещенной во внешнем файле с помощью директивы @import.

Пример 2. Связывание каскадной таблицы стилей с помощью директивы @import

Добавьте каскадную таблицу стилей к нашему проекту с помощью следующей последовательности действий: нажмите правой кнопкой мыши на названии проекта в обозревателе решений Добавить новый элемент Таблица стилей Введите имя StyleSheet1.css.

В появившемся окне кода введите следующий текст:

body { background-color:Silver}

h2 { font-family:Comic Sans MS; font-size:24pt; color:Maroon}

h3{font-family: Verdana; font-size:18pt; color: Teal}

Разработав каскадную таблицу стилей , создайте новую web-страницу и введите следующий код ():

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

Связывание каскадной таблицы стилей с помощью директивы @import

@import url("StyleSheet1.css");

"Ад и рай - в небесах", - утверждают ханжи.

Я, в себя заглянув, убедился во лжи:

Ад и рай - не круги во дворе мирозданья,

Ад и рай - это две половины души.

/Омар Хайам/