Опубликован: 05.08.2010 | Доступ: свободный | Студентов: 2851 / 383 | Оценка: 4.12 / 4.02 | Длительность: 10:07:00
Лекция 5:

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

Аннотация: В этой лекции слушатели освоят приемы работы с каскадными таблицами стилей. Ознакомятся со способами связывания web-страниц с CSS, научатся применять единые правила форматирования сразу к нескольким тэгам, а также разных правил к одному и тому же тэгу. Будут рассмотрены такие аспекты использования CSS, как атрибуты id и классы.

Презентацию к данной лекции Вы можете скачать здесь.

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

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

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


Результат:


Рис. 5.1.

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

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

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

Добавьте каскадную таблицу стилей к нашему проекту с помощью следующей последовательности действий: нажмите правой кнопкой мыши на названии проекта в обозревателе решений \to Добавить новый элемент \to Таблица стилей \to Введите имя 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>

Результат:


Рис. 5.3.

Стиль можно встраивать непосредственно в HTML-тэг с помощью атрибута style. Продемонстрируем такую возможность в следующем примере.