Лабораторні роботи з КМІ / Лабораторна робота № 10
.docЛАБОРАТОРНАЯ РОБОТА № 10
Основные положения CSS
-
Теоретические сведения
CSS – технология, позволяющая управлять оформлением дизайна одновременно на всех страницах сайта одновременно изменением всего нескольких строк кода. Эта технология позволяет отделить дизайн сайта от его содержания. Этот так называемые каскадные таблицы стилей CSS.
CSS, Cascading Style Sheets (Таблицы каскадных стилей) – это набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходиться каждый раз описывать эти свойства. Применяя CSS, можно один раз описать свойства элементов и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.
Можно также сохранить описание стиля как в тексте самой веб-странички, так и в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц.
Данный файл, так же как и html-страничка, создается в стандартном блокноте или любом текстовом редакторе и сохраняется в корневой папке сайта обычно под именем style.css. Название файла может быть любое, но обязательно расширение .css.
Чтобы привязать данный файл стилей к конкретному html-документу, в этом документе между тегами <head> </head> прописывается код:
<link rel=stylesheet type="text/css" href="style.css">
HTML-документов, к которым привязывается данная таблица стилей, может быть бесчисленное множество. В местах html-страницы, где нужно применить данный стиль, ставятся специальные метки при написании кода. Если таблица стилей лежит в какой-либо папке, то необходимо вместо "style.css" прописать полный путь к этому файлу как это делается для указания пути к графическим файлам.
Внешний вид элементов на странице изменяется с помощью правил, которые прописываются в таблице стилей style.css.
Правило (набор правил) – это утверждение сообщающее браузеру, как отображать элементы на HTML-странице. Набор правил состоит из селектора, за которым следует блок объявлений. Внутри блока объявлений может быть одно или несколько объявлений, каждое из которых содержит свойство и значение.
При создании набора правил первым этапом является выбор селектора, к которому будут применяться данные правила.
2. Ход работы
В качестве селектора выбираем элемент <p> т.е. абзац и придаем ему определенные правила отображения, например:
-
font-famile: Arial; – сообщает браузеру что текст в абзацах отображать шрифтом Arial;
-
font-size: 12px; – сообщает браузеру что шрифт должен быть размером 12px;
-
color: #000000; – сообщает браузеру, что шрифт должен черного цвета;
-
margin: 15 px; – сообщает браузеру, что отступы по краям (сверху, снизу, слева и справа от текста заключенного в абзаце) должны быть 15рх.
Теперь эти свойства будут применены ко всем страничкам, к которым привязана данная таблица стилей и если мы изменим, например, цвет шрифта с черного на темно-синий, то цвет изменится на всех страницах.
Если нужно выделить, например, третий абзац красным цветом, увеличить в этом абзаце шрифт и сделать его жирным, то для этого прописываем новое правило в таблице стилей.
Прежде всего, нужно присвоить новому стилю название, а затем прописать свойства, например:
.red {font-family:Arial; font-size:16px; color:#FF0000; margin:15px; font-weight: bold; }
Затем следует открыть код файла, в котором мы хотим изменить внешний вид какого-то элемента (контейнера) и в теге, например, <p> прописываем данный класс таким образом: class="red". Если раньше в этом контейнере было прописано только выравнивание по ширине, то теперь эта запись выглядит так:
<p align="justify" class="red">
В результате, абзацу присвоен новый класс red со своими свойствами.
3. Задание для самостоятельного выполнения
1. Взять готовую html-страничку одной из собственных работ, выполненных ранее.
2. Убрать форматирование страницы.
2. Создать файл "style.css" и прописать в нем наборы правил для абзацев и заголовков.
3. Изменить форматирование одного из абзацев и одного из заголовков, прописав новое правило в файле "style.css" и добавив новый класс в html-документ.
4. Изменить цвет фона страницы, добавив соответствующую запись в файл "style.css".
5. Еще раз изменить цвет фона, применяя графический файл, добавив соответствующую запись в файл "style.css".
6. Изменить цвет фона, применяя графический файл с эффектом размножения, добавив соответствующую запись в файл "style.css".
7. Ко всей html-странице добавить рамку, используя ширину, цвет, стиль и вид рамки (сверху, снизу, справа, слева).
8. Создать отдельный стиль рамки для какого-либо объекта.
9. Добавляя соответствующие записи в файл "style.css", оформить вид ссылок с помощью псевдоклассов.
4. Содержание отчета
1. Выполнить все пункты задания.
2. Представить коды выполненных операций.
3. Представить скрины первоначального (без форматирования) HTML-документа.
4. Представить скрины конечного HTML-документа.
4. При сдаче работы иметь исходные файлы.
5. Задания и вопросы для аттестации
1. Как расшифровывается аббревиатура CSS?
2. Каково назначение технологии CSS?
3. Как задаются параметры стиля?
4. Что такое класс и как он используется?