КАТЕГОРИИ: Архитектура-(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) |
Листинг 1.7. Использование атрибута style
Совет На странице можно делать ссылки на отображение документа в формате для вывода на печать. Это даст возможность пользователю определить, устраивает ли его установленный формат вывода.
Есть еще один способ применения к элементу стиля: встроить CSS‑код непосредственно в элемент разметки в виде значения атрибута style. Такой атрибут доступен для всех элементов HTML. В нем в формате CSS через точку с запятой прописываются значения разных свойств элемента. Вот как это выглядит для элемента P:
<p style="color:#CC0000; background:#9999CC; word‑spacing:20px;">
Как видите, CSS‑код совпадает с содержимым элемента STYLE из предыдущего примера. В листинге 1.7 представлен пример задания свойств элементов с помощью встраивания CSS‑кода в значение атрибута style.
<!DOCTYPE HTML PUBLIC «‑//W3C//DTD HTML 4.01 Transitional//EN» "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http‑equiv="Content‑Type" content="text/html; charset=windows‑1251" /> <title>Использование стилей</title> </head> <body> <p style="color:#CC0000; background:#9999CC; word‑spacing:20px;"> Текст с атрибутом style="color:#CC0000; background:#9999CC; word‑spacing:20px;" </p> <p style="color:#66FFFF; background:#990000; word‑spacing:10px;"> Текст с атрибутом style="color:#66FFFF; background:#990000; word‑spacing:10px;" </p> <table border="1" > <tr> <td style="color:#66FFFF; background:#990000; word‑spacing:10px;"> Описание ячейки таблицы с атрибутом style="color:#66FFFF; background: #990000; word‑spacing:10px;" </td> </tr> </table> </body> </html>
Здесь применены такие же стили, как и в предыдущем примере, но параметры заданы с помощью атрибута style. На рис. 1.4 показан результат обработки кода из листинга 1.7. Рис. 1.4. Установка стилей с помощью атрибута style
Как видно из рисунков, результаты обоих листингов одинаковые по стилям. Однако задавать стили в начале документа удобнее, потому что при необходимости их легко будет найти и исправить.
Еще один способ задать стили для документа – записать их в отдельный файл с разрешением CSS. Синтаксис записи в этот файл такой же, как и при использовании элемента STYLE, однако этот способ более универсален. Подключить файл со стилями к документу можно двумя способами. Первый представлен в листинге 1.8 и использует элемент STYLE. Внутри этого элемента нужно записать такую строку: @import URL("nyTb к файлу с таблицами");.
Листинг 1.8. Импорт файлов с таблицами стилей
<!DOCTYPE HTML PUBLIC «‑//W3C//DTD HTML 4.01 Transitional//EN» "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> @import URL("test.css"); </style> <meta http‑equiv="Content‑Type" content="text/html; charset=windows‑1251" /> <title>Использование стилей</title> </head> </html>
При такой настройке к элементам нашего документа можно будет применять стили, описанные в файле test.css.
Дата добавления: 2014-11-25; Просмотров: 382; Нарушение авторских прав?; Мы поможем в написании вашей работы! Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет |