Просмтор этого файла доступен только зарегистрированным пользователям. Но у нас супер быстрая регистрация: достаточно только электронной почты!

Текст из файла

МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ (ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)

ИНСТИТУТ АВТОМАТИКИ И ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ

КАФЕДРА ПРИКЛАДНОЙ МАТЕМАТИКИ

Лабораторная работа № 4.

Применение каскадных таблиц стилей (CSS).

Выполнил

студент группы А-13-08

каф. Прикладной Математики

Захаров Антон

Преподаватель

Куриленко Иван Евгеньевич

Москва, 2012

Цель работы

Изучить каскадные таблицы стилей (CSS) и научиться применять их на практике.

Подготовка к работе

1. Ознакомиться с технологией CSS.

2. Изучить базовые принципы привязки стилей к элементам страницы.

3. Изучить стили форматирования текста.

Порядок выполнения работы

Модифицировать разработанные в рамках лабораторной работы №3 страницы, внедрив в них поддержку CSS.

Требования

• Наличие печатного отчёта с титульным листом, содержащего результаты работы.

• Настройки стилей должны размещаться в отдельном файле (например, styles.css).

• В коде страниц не должно присутствовать тегов , , , ,

  ---

  ,

  ,

  , . Соответствующие стили должны быть реализованы через CSS.

Подготовка к работе.

1. Знакомство с технологией CSS.

Определение

CSS (Cascading Style Sheets, каскадные таблицы стилей) – формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

1. Базовые принципы привязки стилей к элементам страницы.

Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, то есть таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих формат CSS. По сути, формат CSS – это обычный текстовый файл. В файле .css не содержится ничего, кроме перечня правил CSS и комментариев к ним.
То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:

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

• Когда таблица стилей находится в отдельном файле, она может быть подключена к веб-документу посредством директивы @import, располагающейся в этом документе между тегами и (которые, в свою очередь, располагаются в этом документе между тегами и ) сразу после тега , которая также указывает (в своих скобках, после слова url) на адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;

• Когда таблица стилей описана в самом документе, она может располагаться в нём между тегами и (которые, в свою очередь, располагаются в этом документе между тегами и ). Все правила этой таблицы действуют на протяжении всего документа;

• Если таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута style) этого документа. Все правила этой таблицы действуют только на содержимое этого тега.

Кафедра прикладной математики

В первых двух случаях говорят, что к документу применены внешние таблицы стилей, а во вторых двух случаях – внутренние таблицы стилей.

Как известно, HTML-документы строятся на основании иерархии элементов, которая может быть наглядно представлена в древовидной форме. Элементы HTML друг для друга могут быть родительскими, дочерними, элементами-предками, элементами-потомками, сестринскими.

Элемент является родителем другого элемента, если в иерархической структуре документа он находится сразу, непосредственно над этим элементом. Элемент является предком другого элемента, если в иерархической структуре документа он находится где-то выше этого элемента.
Пускай, например, в документе присутствуют два абзаца p, включающие в себя шрифт с полужирным начертанием b. Тогда элементы b будут дочерними элементами своих родительских элементов p, и потомками своих предков body. В свою очередь, для элементов p элемент body будет являться только родителем. И кроме того, эти два элемента p будут являться сестринскими элементами, как имеющими одного и того же родителя – body.

В CSS могут задаваться, при помощи селекторов, не только одиночные элементы, но и элементы, являющиеся потомками, дочерними или сестринскими элементами других элементов.

Виды селекторов:

1. Стили форматирования текста.

Основные свойства CSS, используемые при форматировании текста:

Выполнение работы.

В данной лабораторной работе был модифицирован сайт, разработанный в лабораторной работе № 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

{

Характеристики

Тип файла документ

Документы такого типа открываются такими программами, как Microsoft Office Word на компьютерах Windows, Apple Pages на компьютерах Mac, Open Office - бесплатная альтернатива на различных платформах, в том числе Linux. Наиболее простым и современным решением будут Google документы, так как открываются онлайн без скачивания прямо в браузере на любой платформе. Существуют российские качественные аналоги, например от Яндекса.

Будьте внимательны на мобильных устройствах, так как там используются упрощённый функционал даже в официальном приложении от Microsoft, поэтому для просмотра скачивайте PDF-версию. А если нужно редактировать файл, то используйте оригинальный файл.

Файлы такого типа обычно разбиты на страницы, а текст может быть форматированным (жирный, курсив, выбор шрифта, таблицы и т.п.), а также в него можно добавлять изображения. Формат идеально подходит для рефератов, докладов и РПЗ курсовых проектов, которые необходимо распечатать. Кстати перед печатью также сохраняйте файл в PDF, так как принтер может начудить со шрифтами.

Список файлов лабораторной работы