Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначенные для поддерживания проводов на необходимой высоте над землей, водой...
История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...
Топ:
Определение места расположения распределительного центра: Фирма реализует продукцию на рынках сбыта и имеет постоянных поставщиков в разных регионах. Увеличение объема продаж...
Проблема типологии научных революций: Глобальные научные революции и типы научной рациональности...
Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного...
Интересное:
Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...
Национальное богатство страны и его составляющие: для оценки элементов национального богатства используются...
Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...
Дисциплины:
 2022-10-27 |
 38 |
из
5.00
|
Заказать работу |
Есть несколько способов применить правила CSS к HTML-документу. Рассмотрим один из них - внешнюю таблицу стилей.
Внешняя таблица стилей это просто текстовый файл с расширением.css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.
Например, скажем, ваша таблица стилей называется style.css и находится в той же папке, что и html файл документа.
В этом случае, вам необходимо в HTML-документе добавить одну строчку HTML-кода:
<link rel="stylesheet" type="text/css" href="style.css"/>
Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:
< html >
< head >
< title >Моя страничка</ title >
< link rel =" stylesheet " type =" text / css " href =" style. css " />
</head>
<body>
...Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла. Очень удобным свойством такого подхода является то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.
Если вы, например, хотите изменить цвет фона на всех страницах своего web-сайта, то эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.
Давайте посмотрим, как это сделать.
Задание 9
1. Откройте блокнот и создайте CSS-файл с именем style.css такого содержания:
----------------------------------------------------------------------------------------------
body {
background - color: # FF 0000;
}
---------------------------------------------------------------------------------------------
2. В каждую страницу вашего HTML-сайта контрольной работы перед закрывающим тегом </head> вставьте следующую строку:
<link rel="stylesheet" type="text/css" href="style.css" />
Просмотрев свой сайт с помощью браузера, посмотрите на получившийся результат. Фон всех страниц, в которых есть ссылка на таблицу стилей style. css станет красным.
ПРИМЕЧАНИЕ. Если ваш сайт заполнен фоновым изображением, то никаких изменений вы не увидите. Вначале необходимо убрать ссылки на это фоновое изображение из текста файла своего сайта.
Управление цветом и фоном сайта
Рассмотрим некоторые CSS-свойства, которые можно применить к различным элементам:
· color (цвет элемента)
· background-color (цвет фона)
· background-image (фоновое изображение)
· background-repeat (заполнение страницы фоновым изображением)
· background-attachment (блокировка прокрутки фонового изображения)
· background-position (размещение фонового изображения)
· background (сокращённая запись кода).
Если созданная вами таблица стилей успешно применяется для оформления страниц вашего сайта, тогда самое время испробовать некоторые возможности CSS по изменению дизайна.
Свойство «color»
Свойство color описывает цвет элемента.
Задание 10
Сделаем все заголовки первого уровня зелёными. Напомним, что эти заголовки обозначаются HTML-элементом <H1>. Добавим в созданный нами ранее файл style.css следующие строки:
----------------------------------------------------------------------------------------------
h 1 {
color: #00 ff 00;
}
----------------------------------------------------------------------------------------------
Сохраните сделанное, посмотрите, как изменился ваш сайт.
Свойство «background-color»
Свойство background-color описывает цвет фона элемента.
В элементе <body> размещается всё содержимое HTML-документа. Таким образом, для изменения цвета фона всей страницы свойство background-color нужно применить к элементу <body>.
Вы можете также применять это свойство к другим элементам, в том числе - к заголовкам и тексту. В следующем примере, который нужно добавить к файлу style.css, различные цвета фона применяются к элементам <body> и <h1>.
----------------------------------------------------------------------------------------------
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background - color: # FC 9804;
}
---------------------------------------------------------------------------------------------
ПРИМЕЧАНИЕ. Заметьте, что устанавливая два свойства для <h1>, необходимо разделять их точкой с запятой.
Посмотрите на получившийся у вас результат.
Цвета можно указывать как шестнадцатеричные значения, как в примере (#ff0000), либо вы можете использовать названия цветов ("red") или rgb-значения (rgb(255,0,0)).
Таблица некоторых «безопасных» цветов приведена на рис. 1.13. Цвета называются безопасными, поскольку во всех браузерах они будут восприниматься и отображаться одинаково. Использование других оттенков или названий цветов могут приводить к непредсказуемым результатам цветового оформления.
| Yellow Желтый | Maroon Багровый | Red Красный | Purple Пурпурн. | Blue Голубой | Navy Синий | Aqua Аква | Lime Лайм | Green Зеленый | Olive Оливковый | White Белый | Silver Серебро | Gray Серый | Black Черный |
| #FFFF00 | #800000 | #FF0000 | #800080 | #0000FF | #000080 | #00FFFF | #00FF00 | #008000 | #808000 | #FFFFFF | #C0C0C0 | #808080 | #000000 |
Рис. 1.13
Семя – орган полового размножения и расселения растений: наружи у семян имеется плотный покров – кожура...
История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...
Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...
Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!