Федеральное агентство по образованию
Национальный Исследовательский Университет«БелГУ»
Факультет компьютерных наук и телекоммуникаций
Кафедра прикладной информатики
Отчет по лабораторной работе №1
Дисциплина: «Web-программирование»
Тема: «Каскадные таблицы стилей»
Вариант №1
Выполнила: студентка группы 141003
Агафонова Лидия Сергеевна
Проверил: должность, ФИО
URL для запуска сайта на выполнение:
ftp://141003/index.html
Белгород 2011
Теоретическая часть
Каскадные таблицы стилей/Cascading Style Sheets (CSS) это поразительное изобретение для улучшения вида ваших web-сайтов. Оно поможет сэкономить уйму времени и предоставит вам совершенно новые возможности в дизайне web-сайтов. CSS совершенно необходим каждому, работающему с web-дизайном.
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
CSS используется для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы от описания внешнего вида этой веб-страницы.
Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющихформат CSS.
Размещение стилей в отдельном файле позволяет ускорить загрузку веб-страниц за счет уменьшения кода, а также кэширования файла с описанием стиля. Также файл со стилями позволяет, изменяя параметры в одном единственном месте, управлять видом всех страниц, где указана на него ссылка.
Селекторы Class удобно использовать, когда нужно применить стиль к разным тегам веб-страницы: ячейкам таблицы, ссылкам, параграфам и др.
Чтобы изменить отдельные слова или предложения используют тег SPAN, а чтобы изменить блок текста, то используют тег DIV.
Подключение таблицы связанных стилей: <link rel="stylesheet" type="text/css" href="mysite.css">
Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега <link>, располагающегося в этом документе между тегами <head> и </head>. (Тег <link> будет иметь атрибут href, имеющий значением адрес этой таблицы стилей). Все правила этой таблицы действуют на протяжении всего документа:
<head>
.....
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Когда таблица стилей находится, описана в самом документе, она может располагаться в нём между тегами <style> и </style> (которые, в свою очередь, располагаются в этом документе между тегами <head> и </head>). Все правила этой таблицы действуют на протяжении всего документа:
<head>
.....
<style type="text/css">
body {
color: red;
}
</style>
</head>
Когда таблица стилей находится, описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега:
<p style="font-size: 21px; color: green;">Текст со стилем</p>
Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css, либо же обрамлена тегами <style> и размещена в «шапке» той самой веб-страницы, на которую она действует):
p {
font-family: "Garamond", serif;
}
h2 {
font-size: 110 %;
color: red;
background: white;
}
.note {
color: red;
background: yellow;
font-weight: bold;
}
p#paragraph1 {
margin: 0;
}
a:hover {
text-decoration: none;
}
#news p {
color: blue;
}
Здесь приведено шесть правил CSS с селекторами p, h2, .note, p#paragraph1, a:hover и #news p.
Селектор id
Возьмем другой случай. Предположим, вы хотите создать на странице какие-либо уникальные элементы, к которым в дальнейшем планируете обращаться из программ JavaScript.
Селектор class
Допустим, мы хотим создать страницу, на которой будет два вида абзацев <p>, причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы – интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого
Практическая часть
Вариант 1
Задание: Создать сайт кадрового агентства, состоящий из 4-х страниц, страницы должны быть оформлены с использованием css. На главной странице сайта должно быть меню, позволяющее переходить на другие страницы. Все страницы, кроме главной должны быть оформлены с помощью css, хранящейся в отдельном файле.