LAB4 Захаров А.Е. (Лабораторная работа 4)
Описание файла
Файл "LAB4 Захаров А.Е." внутри архива находится в папке "Лабораторная работа 4". Документ из архива "Лабораторная работа 4", который расположен в категории "". Всё это находится в предмете "вычислительные машины, системы и сети (вмсис)" из 8 семестр, которые можно найти в файловом архиве НИУ «МЭИ» . Не смотря на прямую связь этого архива с НИУ «МЭИ» , его также можно найти и в других разделах. Архив можно найти в разделе "лабораторные работы", в предмете "вычислительные машины, системы и сети (вмсс)" в общих файлах.
Онлайн просмотр документа "LAB4 Захаров А.Е."
Текст из документа "LAB4 Захаров А.Е."
МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ (ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)
ИНСТИТУТ АВТОМАТИКИ И ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ
КАФЕДРА ПРИКЛАДНОЙ МАТЕМАТИКИ
Лабораторная работа № 4.
Применение каскадных таблиц стилей (CSS).
Выполнил
студент группы А-13-08
каф. Прикладной Математики
Захаров Антон
Преподаватель
Куриленко Иван Евгеньевич
Москва, 2012
Цель работы
Изучить каскадные таблицы стилей (CSS) и научиться применять их на практике.
Подготовка к работе
-
Ознакомиться с технологией CSS.
-
Изучить базовые принципы привязки стилей к элементам страницы.
-
Изучить стили форматирования текста.
Порядок выполнения работы
Модифицировать разработанные в рамках лабораторной работы №3 страницы, внедрив в них поддержку CSS.
Требования
-
Наличие печатного отчёта с титульным листом, содержащего результаты работы.
-
Настройки стилей должны размещаться в отдельном файле (например, styles.css).
-
В коде страниц не должно присутствовать тегов , ,
, ,
,,
, . Соответствующие стили должны быть реализованы через CSS.
Подготовка к работе.
-
Знакомство с технологией CSS.
Определение
CSS (Cascading Style Sheets, каскадные таблицы стилей) – формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.
-
Базовые принципы привязки стилей к элементам страницы.
Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. По сути, формат CSS – это обычный текстовый файл. В файле .css не содержится ничего, кроме перечня правил CSS и комментариев к ним.
То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:
-
Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством тега , располагающегося в этом документе между тегами и . Тег будет иметь атрибут href, имеющий значением адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;
-
Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами и (которые, в свою очередь, располагаются в этом документе между тегами и ) сразу после тега , которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;
-
Когда таблица стилей описана в самом документе, она может располагаться в нём между тегами и (которые, в свою очередь, располагаются в этом документе между тегами и ). Все правила этой таблицы действуют на протяжении всего документа;
-
Если таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.
Кафедра прикладной математики
В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях – внутренние таблицы стилей.
Как известно, HTML-документы строятся на основании иерархии элементов, которая может быть наглядно представлена в древовидной форме. Элементы HTML друг для друга могут быть родительскими, дочерними, элементами-предками, элементами-потомками, сестринскими.
Элемент является родителем другого элемента, если в иерархической структуре документа он находится сразу, непосредственно над этим элементом. Элемент является предком другого элемента, если в иерархической структуре документа он находится где-то выше этого элемента.
Пускай, например, в документе присутствуют два абзаца p, включающие в себя шрифт с полужирным начертанием b. Тогда элементы b будут дочерними элементами своих родительских элементов p, и потомками своих предков body. В свою очередь, для элементов p элемент body будет являться только родителем. И кроме того, эти два элемента p будут являться сестринскими элементами, как имеющими одного и того же родителя – body.
В CSS могут задаваться, при помощи селекторов, не только одиночные элементы, но и элементы, являющиеся потомками, дочерними или сестринскими элементами других элементов.
Виды селекторов:
| Селектор | Пример |
| Селектор элементов | p {font-family: Garamond, serif;} |
| Селектор класса | .note {color: red; } |
| Селектор идентификатора | #paragraph1 {margin: 0;} |
| Селектор атрибута | a[href]{font-weight:bold;} |
| Селектор потомков | ul li {color: red;} |
| Селектор дочернего элемента | p.note > b {color: green;} |
| Селектор сестринского элемента | h1 + p {font-size: 24pt;} |
| Селектор псевдокласса | a:active {color:yellow;} |
| Селектор псевдоэлемента | p:first-letter {font-size: 32px;} |
| Универсальный селектор | * {color:red;} |
-
Стили форматирования текста.
Основные свойства CSS, используемые при форматировании текста:
| Название свойства | Назначение |
| direction | Свойство предназначено для сайтов, в которых имеет значение направление текста. |
| letter-spacing | Определяет интервал между символами в пределах элемента. |
| line-height | Устанавливает интерлиньяж (межстрочный интервал) текста, отсчёт ведётся от базовой линии шрифта. |
| tab-size | Используется для изменения ширины отступа заданного с помощью символа табуляции. |
| text-align | Определяет горизонтальное выравнивание текста в пределах элемента. |
| text-decoration | Добавляет оформление текста в виде его подчёркивания, перечёркивания, линии над текстом и мигания. |
| text-indent | Устанавливает величину отступа первой строки блока текста. |
| text-overflow | Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. |
| text-shadow | Добавляет тень к тексту, а также устанавливает её параметры. |
| text-transform | Управляет преобразованием текста элемента в заглавные или прописные символы. |
| white-space | Устанавливает, как отображать пробелы между словами. |
| word-spacing | Устанавливает интервал между словами. |
| word-wrap | Указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. |
Выполнение работы.
В данной лабораторной работе был модифицирован сайт, разработанный в лабораторной работе № 3: была внедрена поддержка CSS, модифицирован исходный html страниц.
Сайт доступен по адресу: http://a1308.ru/tmp/vmss/lab4
CSS [css/common.css]
/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
}
html
{
overflow-y: scroll;
height: 100%;
}
body
{
line-height: 1;
color: black;
background: white;
}
:focus
{
outline: 0;
-moz-outline: 3px solid #fff !important;
}
/* all */
html
{
background: #fff url('../images/bg.png') repeat-x top left;
font: 14pt "Segoe UI", Candara, "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}
body
{
margin-top: 150px;
}
/* menu */
#menu
{
list-style: none;
display: block;
background: transparent url('../images/menu.jpg') repeat-x top left;
height: 42px;
text-align: center;
}
#menu li
{
display: inline-block;
height: 42px;
}
#menu li a
{
display: block;
padding: 8px 15px;
line-height: 26px;
height: 26px;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 #888;
}
#menu li a:hover, #menu li.current a
{
background-color: #8EBFE5;
color: #333;
}
p.info
{
padding: 15px;
text-align: right;
line-height: 150%;
}
p.info span
{
font-style: italic;
}
/* content */
#content
{
width: 900px;
margin: 0 auto 60px auto;
}
#content .title
{
text-align: center;
margin: 150px 0;
}
#content .title span
{
color: #8EBFE5;
}
#content .title div
{
