Рассмотрим пример описанный в разделе 1.
| 1. | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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="https://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 (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.</p> |
| 59. | <p>HTML является приложением («частным случаем») SGML (стандартного обобщенного языка разметки) и соответствует международному стандарту ISO 8879. XHTML же является приложением 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;">© 2009-2010 Examle</div> |
| 67. | <div>E-mail: <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.
Рис. 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.
Рис. 3.5. Пример HTML-страницы с использования CSS
Ключевые термины
Каскадные таблицы стилей CSS, Таблицы связанных стилей, Таблицы глобальных стилей, Внутренний стиль, Селектор, Класс, Идентификатор, Контекстный селектор, Соседние селекторы, Дочерний селектор, Селекторы атрибутов, Универсальный селектор, Группировка, Наследование, Псевдоклассы, Псевдоэлементы.