РАБОЧАЯ ТЕТРАДЬ по разделу «Основы CSS. Форматирование Web-страниц с помощью каскадных таблиц стилей»

Министерство образования Тульской области

ГОСУДАРСТВЕННОЕ ПРОФЕССИОНАЛЬНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ

ТУЛЬСКОЙ ОБЛАСТИ

«ТУЛЬСКИЙ ГОСУДАРСТВЕННЫЙ КОММУНАЛЬНО-СТРОИТЕЛЬНЫЙ ТЕХНИКУМ»

РАБОЧАЯ ТЕТРАДЬ

по разделу

«Основы CSS.

Форматирование Web-страниц с помощью каскадных таблиц стилей»

МДК.02.01 «Информационные технологии

и платформы разработки ИС»

ПМ.02. Участие в разработке информационных систем

для специальности

09.02.04 «Информационные системы (по отраслям)»

Тула 2016

Составлена в соответствии с рабочей программой по ПМ.02 «Участие в разработке ИС» по специальности 09.02.04 «Информационные системы (по отраслям)».

Автор: Козлова С.Д., преподаватель ГПОУ ТО «Тульский государственный коммунально-строительный техникум».

Рабочая тетрадь - это учебное пособие, способствующее самостоятельной работе студента по освоению учебной дисциплины в аудитории и дома, может быть использована студентами в самостоятельном освоении теоретического материала и формировании практических умений и навыков, при подготовке к промежуточной аттестации по дисциплине «Информационные технологии и платформы разработки ИС».

Методическое пособие содержит задания по теоретической части темы, практические задания, понятийный аппарат, тестовые задания, список литературы.

Рабочая тетрадь предназначена для студентов, обучающихся по специальности 09.02.04 «Информационные системы по отраслям».

Введение 4

Тема №1. Основные понятия CSS. Способы встраивания определения стилей 6

Тема №2. Внешние и внутренние таблицы стилей 9

Тема №3. Правила и селекторы CSS 10

Тема №4. Свойства CSS 14

Тема №5. Графическое CSS меню 17

Тестовые задания 22

Словарь терминов «Ключевые слова языка HTML и CSS» 33

Литература 34

Современные интернет-технологии позволяют нам общаться, обмениваться информацией, продавать, покупать и многое другое. Все возможные действия в глобальной сети производятся с помощью некоторых ресурсов, называемых веб-сайтами.

Основа любого сайта, т.е. его каркас, создается при помощи языка гипертекстовой разметки HTML и каскадных таблиц стилей CSS.

CSS – это образный язык описания того, как будет выглядеть страница в браузере на экране монитора. Этот язык включает в себя набор правил, которые указывают браузеру - какой цвет, размер, форма, и даже позиционирование и тени объектов.

Любой сайт можно образно назвать клиент-серверным приложением, который находится на сервере какой-либо хостинг-компании.

Стандартный веб-сервер представляет собой следующее:

• установленная база данных с информацией сайта;

• язык программирования, например, PHP, занимающийся запросами, посланными браузером;

• имеется папка с картинками или видео, которые находятся на сайте;

• обязательно присутствует файл с CSS-правилами;

• язык динамической активности страниц – Java Script и прочие инструменты.

Язык PHP и база данных работает с сервером, а CSS и Java Script отрабатываются у клиента (пользователя) на компьютере. В этом и есть основной смысл работы сайта. Если бы веб-программисты и дизайнеры не использовали CSS, то сайты выглядели бы скучно, неинтересно.

Интернет-страницы строятся с помощью HTML и CSS. Первое используется для составления макета (структуры) страницы, а второе - для придания формы и внешнего вида этому макету.

Что можно делать при помощи этого универсального декоратора:

• управлять внешним видом всех страниц сайта с помощью единственного файла стилей;

• изменять поведение веб-содержимого на любом устройстве, отображая по-разному одну и ту же страницу на экране ноутбука и смартфона;

• точно до мелочей контролировать внешний вид и форму каждой, отдельно взятой страницы;

• задавать наследование определенного стиля любым элементом на странице;

• создавать сложные, новомодные, и в то же время элементарно видоизменяемые файлы стилей.

Основное удобство применения этого языка дизайнерами и программистами – это возможность быстро отредактировать или поменять внешний вид сайта, затронув только один файл на сервере, а браузер клиента самостоятельно получит обновленный вариант интернет-страницы.

Методическое пособие является актуальным, так как в нем представлено множество заданий для изучения каскадных таблиц стилей, которые используются в верстке сайтов.

Целью разработки данного методического пособия является научить обучающихся основам, достаточным для полноценного использования CSS. Для улучшения усвоения учебного материала по данной теме студентам предлагаются теоретические и тестовые задания по темам для самостоятельной работы.

Студент должен знать и понимать:

• Методы верстки веб-сайтов и их стандартную структуру;

• World Wide Web Consortium (W3C) стандарты HTML и CSS;

• Как применять соответствующие CSS правила и селекторы для получения ожидаемого результата.

Студент должен уметь:

• Создавать веб-страницы, которые способны оставаться функциональными на различных устройствах при разных разрешениях;

• Использовать CSS наиболее эффективно для обеспечения единого дизайна в разных браузерах.

Цель занятия: изучение основных понятий при форматировании web-страниц, области применения стилей

План занятия

1 Преимущества применения каскадных таблиц стилей

2 Определение стиля

3 Способы встраивания определения стилей

Содержание каждого вопроса иллюстрируется примерами

Основные понятия темы

Каскадные таблицы стилей (CSS)- _______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Определение стиля или стиль - _______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________Селектор стиля - _______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________Атрибут стиля - _______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________Значение стиля - _______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Таблица стиля - _______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Задание 1. В каких условных единицах указывается размер шрифта в языке HTML?

_______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Задание 2. С помощью CSS можно точно задать размер шрифта в пунктах. С помощью какого параметра это делается? Напишите теги

_______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Задание 3. Перечислите преимущества применения каскадных таблиц стилей

_______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________Задание 4. Перечислите способы подключения CSS

_______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Задание 5. Как будет отображен текст на странице браузера, написанный данным тегом? Каким способом задан стиль? Сколько атрибутов в данном теге?

font style="font-size": 12 pt; color: red " Текст font

_______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Задание 6. В каком разделе HTML-документа должен быть расположен тег style ?

_______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Задание 7. К какому тегу нужно применить стиль, указывав имя стиля с помощью параметра class?

_______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

Практическое задание

Каким способом применена каскадная таблица стилей в данном листинге примера?

Как страница будет отображена в браузере? (сделайте скрин-шот)

Листинг 1. Пример использования стилей

 charset="utf-8"

Цвета

body { background-color: #F9F2E3; }

h2 {

background-color: rgb(214,86,43);

color: rgba(255,255,255,.9);

padding: 10px;

}

p { color: green; }

div {

background-color: hsl(60,100%,25%);

color: hsla(120,100%,50%,0.1);

}

Предупреждение

Все перечисленные на сайте методы ловли льва являются теоретическими

и базируются на вычислительных методах. Авторы не гарантируют вашей

безопасности при их использовании и снимают с себя всякую

ответственность за результат. Помните, лев это хищник и

опасное животное!

Арррргх!