Занятие № 22 Лабораторная работа № 17
по дисциплине «Web-проектирование».
для специальности
2 – 40 01 01 «Программное обеспечение информационных технологий».
Инструкционно-технологическая карта
Тема: Изучение панели инструментов в Dreamweaver. Вставка текста и форматирование его при помощи CSS.
Цель работы: Изучить панель инструментов Dreamweaver. Научиться использовать классы и идентификаторы в CSS, группировать селекторы.
Время на выполнение работы: 2 часа
Этапы работы:
Ознакомиться с теоретическими сведениями.
Выполнить задания, предложенные преподавателем.
Ответить на контрольные вопросы.
I. Краткие теоретические сведения
Внешние таблицы стилей:
В head подключаем стилевой файл
<link rel="stylesheet" type="text/css" href="имя файла">
Внутренние таблицы стилей:
Так называют таблицу стилей, заданную внутри элемента HTML, при помощи атрибута style. Пример кода:
<h1 style="color:red">Это заголовок красного цвета</h1>
Недостаток этого способа очевиден: параметр style придется задавать каждому заголовку. Таким образом, теряется преимущество использования CSS.
Встроенные таблицы стилей
При этом способе таблица стилей встраивается в заголовок html-страницы. Для этого в HTML существуют теги <style></style>, с параметром type, который указывает, что подключается именно таблица стилей CSS. Пример:
<html>
<head>
<title>Подключение CSS к HTML</title>
<style type="text/css">
h1{
color:red
}
</style>
Пример:
<html>
<head>
<title>Подключение CSS к HTML</title>
<style type="text/css">
h1{
color:red
}
</style>
</head>
<body>
<h1>Этот заголовок будет красного цвета</h1>
<h1 style="color:blue">Этот заголовок будет синего цвета</h1>
<h1>Этот заголовок будет красного цвета</h1>
</body>
</html>
В этом случае и применяется принцип каскадирования, который разрешит конфликт: в данном случае внутренняя таблица имеет высший приоритет, поэтому заголовок и станет синим.
Недостаток этого способа также очевиден: таблицу стилей придется создавать для каждой страницы. Это является одной из причин по которой мы будем пользоваться внешней таблицей стилей.
Правила и селекторы css.
CSS, как и любой язык, имеет свой синтаксис. В нем нет ни элементов, ни параметров, ни тегов. В нем есть правила. Правило состоит из селектора и блока объявления стилей, заключенного в фигурные скобки:
Сам блок объявления стилей состоит из свойств и их значений, разделенных точкой с запятой:
Давайте зададим нашей странице голубой фон. Как вы помните, за это отвечает тег <body>, значит идем на страницу style.css и пишем следующий код:
body{
background: blue;
}
Откройте вашу html-страницу в браузере и убедитесь, что ее фон стал синим. Теперь, давайте сделаем текст на странице белым цветом:
body{
background: blue;
color: white;
}
Обновите html-страницу в браузере (Ctrl+F5) и убедитесь, что теперь весь текст белого цвета. Теперь сделаем цвета заголовков красным (для h1) и желтым (для h2):
body{
background: blue;
color: white;
}
h1{
color:red;
}
h2{
color:yellow;
}
Cнова обновите страницу в браузере и убедитесь, что все так, как и задумывалось, т.е. элемент, к которому применяется стиль, а в фигурных скобках - его свойства и их значения. Свойствам и значениям будут посвящены отдельные уроки.