Работа с каскадными таблицами стилей
Презентацию к данной лекции Вы можете скачать здесь.
Лекцию мы начнем с разбора различных способов добавления каскадных таблиц стилей к документу. Одним из таких способов является внедрение - запись правил непосредственно в (X)HTML-коде внутри контейнера <style> [1].
Пример 1. Внедрение CSS в HTML-код.
Запустим программу MS Visual Web Developer 2008 Express Edition. Добавим HTML-страницу. Добавим следующий код (наш код будет выделен жирным шрифтом) ().
Результат:
Внедренная в (X)HTML-код таблица стилей доступна только в рамках данного документа. Более универсальным является связывание, когда правила записываются во внешний файл с расширением .css. В (X)HTML-коде web-страницы размещается директива @import в контейнере <style> или ссылка <link>, размещенная в контейнере <head> [1].
Продемонстрируем связывание 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-страницу и введите следующий код ():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Связывание каскадной таблицы стилей с помощью директивы @import</title> <style type="text/css"> @import url("StyleSheet1.css"); </style> </head> <body> <h2>"Ад и рай - в небесах", - утверждают ханжи.</h2> <h2>Я, в себя заглянув, убедился во лжи:</h2> <h2>Ад и рай - не круги во дворе мирозданья,</h2> <h2>Ад и рай - это две половины души.</h2> <br /> <h3>/Омар Хайам/</h3> </body> </html>
Результат:
Рассмотрим связывание CSS с помощью ссылки.
Пример. 3. Связывание каскадной таблицы стилей с web-страницей с помощью ссылки
Создайте новую таблицу стилей со следующим содержимым:
body { background-color: Transparent} h3 { font-family: Calibri; font-size:16pt; color: Navy} h4{font-family: Courier New CYR; font-size:14pt; color: Orange}
Далее, создайте новый HTML-документ и введите в него следующий код ():
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Связывание каскадной таблицы стилей с web-страницей с помощью ссылки</title> <link rel="Stylesheet" type="text/css" href="StyleSheet2.css"/> </head> <body> <h3>"Надо жить, - нам внушают, - в постах и в труде!"</h3> <h3>"Как живете вы - так и воскреснете-де!"</h3> <h3>Я с подругой и чашей вина неразлучен, </h3> <h3>Чтобы так и проснуться на страшном суде.</h3> <br /> <h4>/Омар Хайам/</h4> </body> </html>
Результат:
Стиль можно встраивать непосредственно в HTML-тэг с помощью атрибута style. Продемонстрируем такую возможность в следующем примере.