| Россия, Санкт Петербург |
Инспектор
Вы можете этот курс.
Опубликован: 05.08.2010 | Уровень: для всех | Доступ: платный
Лекция 5:
Работа с каскадными таблицами стилей
Аннотация: В этой лекции слушатели освоят приемы работы с каскадными таблицами стилей. Ознакомятся со способами связывания web-страниц с CSS, научатся применять единые правила форматирования сразу к нескольким тэгам, а также разных правил к одному и тому же тэгу. Будут рассмотрены такие аспекты использования CSS, как атрибуты id и классы.
Ключевые слова: запись, visual, Web, developer, edition, таблица стилей, связывание, внешний файл, директива, ссылка, css, каскадная таблица стилей, контейнер, шрифт, атрибут, класс, значение, объединение
Презентацию к данной лекции Вы можете скачать здесь.
Лекцию мы начнем с разбора различных способов добавления каскадных таблиц стилей к документу. Одним из таких способов является внедрение - запись правил непосредственно в (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. Продемонстрируем такую возможность в следующем примере.
