Опубликован: 04.05.2010 | Доступ: свободный | Студентов: 4196 / 555 | Оценка: 4.64 / 4.44 | Длительность: 41:24:00
Лекция 3:

Создание статического содержания. CSS

3.1.9. Пример использования CSS

Рассмотрим пример описанный в разделе 1.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html>
3 <head>
4 <!-- Этот раздел предназначен для заголовка страницы и технической информации. -->
5 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
6 <meta http-equiv="Content-Language" content="ru"/>
7 <meta name="description" content="Это тестовая страница." />
8 <meta name="keywords" content="HTML, CSS, DTD, теги" />
9 <meta name="robots" content="index, follow" />
10 <title>Тестовая страница</title>
11 <link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
12 <link type="text/css" href="reset.css" rel="Stylesheet" />
13 <link type="text/css" href="main.css" rel="Stylesheet" />
14 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
15 </head>
16 <body>
17 <div class="container">
18 <NOINDEX>
19 <div class="header">
20 <div class="navArea">
21 <table cellpadding="0" cellspacing="0" border="0">
22 <tr>
23 <td>
24 <h1>
25 <a href="index.html" title="На главную">Главная<span /> </a>
26 </h1>
27 </td>
28 <td>
29 <a href="http://www.yandex.ru" title="Яндекс">Яндекс</a>
30 </td>
31 <td>
32 <a href="#" title="Услуги">Услуги</a>
33 </td>
34 <td>
35 <a href="#" title="Товары">Товары</a>
36 </td>
37 <td>
38 <a href="#" title="Контактная информация">Контактная информация</a>
39 </td>
40 </tr>
41 </table>
42 </div>
43 </div>
44 </NOINDEX>
45 <div class="textArea">
46 <div class="leftMenu">
47 <ul>
48 <li>
49 <span>Общее описание</span>
50 </li>
51 <li>
52 <a href="advantages.html" title="Преимущества">Преимущества</a>
53 </li>
54 </ul>
55 </div>
56 <div class="mainText">
57 <h2>Описание тестовой страницы</h2>
58 <p>HTML (от&nbsp;англ. HyperText Markup Language&nbsp;&mdash; &laquo;язык разметки гипертекста&raquo;)&nbsp;&mdash; стандартный язык разметки документов во&nbsp;Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и&nbsp;отображается в&nbsp;виде документа, в&nbsp;удобной для человека форме.</p>
59 <p>HTML является приложением (&laquo;частным случаем&raquo;) SGML (стандартного обобщенного языка разметки) и&nbsp;соответствует международному стандарту ISO 8879. XHTML&nbsp;же является приложением XML.</p>
60 <p><img src="images/ex.jpg" alt="Картинка" /></p>
61 </div>
62 </div>
63 <NOINDEX>
64 <div class="footer">
65 <div class="downMenu">
66 <div style="padding-top:7px; padding-bottom: 5px;">&copy;&nbsp;2009-2010 Examle</div>
67 <div>E-mail:&nbsp;<a href="mailto:mailbox@example.com">mailbox@example.com</a></div>
68 </div>
69 </div>
70 </NOINDEX>
71 </div>
72 </body>
73 </html>

Без использования CSS браузер будет отображать данный код, как показано на рис. 3.4.

Пример HTML-страницы без использования CSS

увеличить изображение
Рис. 3.4. Пример HTML-страницы без использования CSS

Если применить следующий CSS, описанный в файле main.css:

/************************** General ******************************/
body
{
	font-family:Arial, Sans-Serif;
}
.container
{
	overflow:visible;
	width: 980px;
	margin: 0  auto;
	position:relative;
}
h1
{
	font-size:200%;
	color: #3A9C20;
	font-weight:normal;
}
h2
{
	font-size:145%;
	color: #8f8f8f;
	font-weight:normal;
	padding-top:10px;
	padding-bottom:5px;
	text-align:right;
	font-style:italic;
}
p
{
	padding-top:5px;
	padding-bottom:5px;
}
a, a:link
{
	color: #537ABC;
}
a:visited
{
}
a:hover
{
	color: #DB762A;	
}
/*****************************************************************/
/************************** Header *******************************/
.header
{
	padding-top:10px;
	float:left;
	width:100%;
	position:relative;
}
.header h1
{
	float:left;
	left: -70px;
	position:relative;
	height:72px;
	width:86px;
}
.header h1 a
{
	padding:10px;
}
.navArea
{
	overflow:visible;
}
.navArea a, .navArea a:link, .navArea a:visited
{
	text-decoration:none;
	color: #537ABC;
}
.navArea a:hover
{
	color: #DB762A;
}
.navArea table
{
	width:100%;
}
.navArea td
{
	vertical-align:bottom;
	height:72px;
	text-align: left;
}
/********************************************************************/
/******************* Main text area ********************************/
.textArea
{
	position:relative;
	font-size:90%;
	width:980px;
}
.mainText
{
	position:relative;
	float:right;
	width:780px;
	line-height:1.2em;
}
.leftMenu
{
	position:relative;
	float:left;
	width: 200px;
}
.leftMenu ul
{
	padding-right:10px;
}
.leftMenu ul li
{
	padding-bottom: 10px;
}
/*******************************************************************/
/*********************** footer ************************************/
.footer
{
	position:relative;
	float:left;
	border-top: 1px solid #7383C0;
	margin-top: 20px;
	padding-top:5px;
	width:100%;
}
.downMenu
{
	float:left;
	width: 652px;
	font-size:10pt;
	color:#777777;
	vertical-align: bottom;
}
/*******************************************************************/

Браузер будет отображать наш пример, как показано на рис. 3.5.

Пример HTML-страницы с использованием CSS

увеличить изображение
Рис. 3.5. Пример HTML-страницы с использованием CSS

3.1.10. Ключевые термины

Каскадные таблицы стилей CSS, Таблицы связанных стилей, Таблицы глобальных стилей, Внутренний стиль, Селектор, Класс, Идентификатор, Контекстный селектор, Соседние селекторы, Дочерний селектор, Селекторы атрибутов, Универсальный селектор, Группировка, Наследование, Псевдоклассы, Псевдоэлементы.