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

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

Показывать лекцию целиком

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

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

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

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

Результат:

(рис 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}

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

<!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>

Результат:

(рис 5.2)

Рассмотрим связывание CSS с помощью ссылки.

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

Создайте новую таблицу стилей StyleSheet2.css со следующим содержимым:

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-документ и введите в него следующий код (5_3.htm):

<!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. Продемонстрируем такую возможность в следующем примере.

Пример 4. Встраивание стиля непосредственно в HTML-тэг

Создайте новый HTML-документ. В контейнер ):

<body>
<h1 style="color:Fuchsia;font-family:Arial Cyr; font-size:18pt">Онегин, добрый мой приятель,
<br/>
Родился на брегах Невы.</h1>
<h2 style="color:Red; font-family: Calibri; font-size:14pt">Где может родились и вы,
<br/>
Или блистали, мой читатель.</h2>
<h3>/А.С. Пушкин/</h3>
</body>

Результат:

(рис 5.4)

В вышеприведенных примерах стили применялись к отдельным тэгам. Однако можно применять единые правила оформления и для разных тэгов. В следующем примере мы применим одинаковый шрифт и цвет для тэгов разного размера.

Пример 5. Применение общих правил оформления к разным тэгам

Создайте новую HTML-страницу со следующим кодом (5_5.htm):

<!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>Применение общих правил оформления к разным тэгам</title>
    <style type="text/css">
    h3,h4,h5,h6 {font-family:Comic Sans MS;color:Red}
    </style>
</head>
<body>
<h3>Над кем глумятся, тот уж не смеется,
<br/>Кто платит подать, тот и разорен,
<br/>Кто жертвует - с рубашкой расстается,</h3>
<h4>Ссудил на грош, потребует мильон.
<br/>Кто слово дал, держись: оно - закон,
<br/>Кто ходит в церковь, тот и к Богу вхож,</h4>
<h5>Подует ветер - меркнет небосклон,
<br/>Но Рождество наступит, если ждешь.</h5>
<h6>/Франсуа Вийон/</h6>
</body>
</html>

Результат:

(рис 5.5)

Вместе с тем, можно применять правила форматирования к отдельно взятым тэгам. Для этого используется атрибут id. В следующем примере мы покажем, как можно покрасить в разный цвет текст в одном и том же тэге.

Пример 6. Применение правила форматирования по атрибуту id

Создайте новый HTML-документ и введите в него следующий код (5_6.htm):

<!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>Применение правила форматирования по атрибуту id</title>
    <style type="text/css">
    #code_1 {color:Blue;font-family:Comic Sans MS}
    h3{color:Red; font-family:Verdana}
    </style>
</head>
<body>
<h3 id="code_1">Без труда не выловишь и рыбку из пруда</h3>
<h3>Что посеешь, то и пожнешь</h3>
</body>
</html>

Результат:

(рис 5.6)

Из одного и того же элемента можно назначить несколько разновидностей стилей, называемых классами. Класс применяется к тем элементам, у которых значение атрибута class является имя этого класса [1].

Пример 7. Использование классов в CSS

Создайте новый HTML-документ и введите в него следующий код (5_7.htm):

<!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>Использование классов в CSS</title>
    <style type="text/css">
    p.a {font-family: Tahoma; text-align: center; font-size:12pt}
    p.b {font-family:Comic Sans MS; text-align:justify; font-size:14pt}
    </style>
</head>
<body>
<p class="a">ВИЙ?Н (Villon) Франсуа (наст. имя и фамилия Франсуа де Монкорбье, Montcorbier) 
(1431, Париж - после 1463), выдающийся французский поэт позднего Средневековья.</p>
<p class="b">О Франсуа Вийоне известно очень немного. Его отец умер, когда он был ребенком, 
и мальчика усыновил родственник Гийом де Вийон, капеллан церкви Святого Бенедикта.</p>
</body>
</html>

Результат:

(рис 5.7)

Краткие итоги

Каскадные таблицы стилей делают возможным разделение кода и представления. Это облегчает объединение усилий кодировщиков и дизайнеров в рамках одного проекта. Дизайнеры формируют концепцию внешнего оформления сайта и сохраняют ее в виде каскадных таблиц стилей, или CSS. CSS можно связывать с документом несколькими способами: непосредственно размещая правила форматирования в (X)HTML-коде, с помощью директив импорта и ссылок на внешние файлы с расширением .css, или применяя правила внутри тэгов. Одни и те же правила оформления можно применять к разным тэгам, возможно и обратное - применение разных правил к одному тэгу.

Набор для практики

Вопросы:

  • Какими способами можно связывать web-страницы с каскадными таблицами стилей?
  • Что такое атрибут id?
  • Что такое класс?
    •

    Упражнения:

  • Создайте небольшой сайт туристического агентства. Разработайте фирменный стиль заголовка и подвала (нижней части) web-страницы и сохраните его во внешнем файле с расширением .css. Примените стиль на всех страницах сайта с помощью директивы импорта.
  • Создайте небольшой сайт, посвященный охране диких животных. Разработайте для него CSS, форматирующую фон, заголовки и абзацы. Используйте в работе атрибуты id и классы.
    •
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^