Лабораторная работа 4 (LAB4 Захаров А.Е.)

Посмотреть архив целиком

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

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

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






Лабораторная работа № 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, имеющий значением адрес этой таблицы стилей. Все правила этой таблицы действуют на протяжении всего документа;


<head>

<link rel="stylesheet" type="text/css" href="style.css">

</head>


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


<head>

<style type="text/css" media="all">

@import url(style.css);

</style>

</head>


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

<p style="font-size: 21px; color: green;">Кафедра прикладной математики</p>


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

Как известно, 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;}


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


Основные свойства 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;


Случайные файлы

Файл
109152.rtf
144828.rtf
5454.rtf
33659.rtf
50630.doc




Чтобы не видеть здесь видео-рекламу достаточно стать зарегистрированным пользователем.
Чтобы не видеть никакую рекламу на сайте, нужно стать VIP-пользователем.
Это можно сделать совершенно бесплатно. Читайте подробности тут.