КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Лістинг 2.18. Файл chap2\styles\cssdemo.htm
Лістинг 2.17. Файл chap2\styles\styles.css
H1 { font-size: 24;
font-weigt: bold;
color: red;
margin-left: 10% }
H2{ font-size: 20;
font-weigt: bold;
color: black;
font-family: Courier }
P.italic { font-style: italic }
P.red { color: red }
Тут визначені стилі H1, H2, P.italic і P.red. Визначення стилю починається з імені класу (наприклад, HI), услід за яким в фігурних дужках перераховуються параметри стилю. Для стилю з класом H1 вказаний розмір шрифту, рівний 24 пунктам, задали потовщення, червоний колір і відступ з лівого боку на 10 % від ширини екрана.
0тдельные параметри стильового оформлення задаються своїми іменами, після яких через символ двокрапки слідує значення параметра. Параметри відділяються символом крапка з комою.
2.9.1.5. Посилання на файл таблиці стилів
Для того щоб документ HTML був оформлений з використанням файла таблиці стилів, в розділі заголовка документа необхідно розмістити оператор <LINK>. Приклад посилання на файл таблиці стилів можливо знайти в лістинг 2.18.
<!"DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Команда логічного форматування</ТITLE>
<LINK REL=STYLESHEET HREF="ctyles.css" TYPE="text/css">
</HEAD>
<BODY BGCOLOR=#FFFFFR>
<Н1>3аголовок перших рівні</Н1>
<Р>Звичайний текст
<Н2>3аголовок других рівні</Н2>
<Р CLASS=italic> Похилий текст
<Р CLASS=red> Текст червоного кольору
</BODY>
</HTML>
Параметри оператора <LINK> необхідно задавати, як указано в цьому прикладі. У параметрі HREF повинна бути вказаний адреса URL файла таблиці. Цей файл може знаходитися на будь-якому сервері WWW, а не на тому, де розміщений даний документ HTML
Як користуватися стилями з файла таблиці стилів? Дуже просто. Якщо в файлі визначені параметри для операторів мови HTML, призначених для оформлення тексту (наприклад, для операторів <Н1> або <Н2>, як в нашому прикладі), вказуються ці оператори без змін.
<Н1>Заголовок перших рівні</Н1>
<Р>Звичайний текст
<Н2>Заголовок других рівні</Н2>
Однак при визначенні стилю можливо не тільки перевизначити параметри форматування операторів, але і створити нові класи для цих операторів. Наприклад, нижче визначені класи italic і red для оператора <Р>:
P.itolic { font-style: italic }
P.red { color: red }
Для того щоб ввести в дію створені класи, ви повинні указати ім'я потрібного класу в параметрі CLASS оператора <Р> (або іншого оператора форматування тексту), як це показане нижче.
<Р СLАSS=italic>Похилий текст
<Р CLASS=red>Текст червоного кольору
Зовнішній вигляд документа, оформленого з використанням нашого файла таблиці стилів, показаний на мал. 2.16.
Неважко помітити, що заголовок першого рівня відображається з відступом від лівого краю, як це і було указано в стилі H1.
Заголовок другого рівня зображений з використанням шрифту з фіксованою шириною символів, оскільки у відповідному стилі було вказане сімейство шрифтів Courier.
Останні два параграфи документа відображаються відповідно з нахилом і з виділенням червоним кольором.
На жаль, навігатор Netscape Navigator проигнорировал створений файл таблиці шрифтів і відобразив документ з використанням стандартного оформлення.
Мал. 2.19 Зовнішній вигляд документа, оформленого з використанням файла таблиці стилів
2.9.1.6. Стилі в документі HTML
Ви можете вбудувати таблицю стилів безпосередньо в документ HTML, для чого треба використати оператор <STYLE>. Цей оператор застосовується в парі із закриваючим оператором </STYLE>. Між операторами <STYLE> і </STYLE> знаходиться таблиця стилів. У лістинг 2.19 приведений приклад документа HTML, в який вбудована таблиця стилів.
|
|
Дата добавления: 2014-11-29; Просмотров: 442; Нарушение авторских прав?; Мы поможем в написании вашей работы!