LAB4 Мясникова О.А. (Лабораторная работа 4)

НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ

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

Лабораторная работа №4 по дисциплине ВМСС

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

Выполнила

студентка группы

А-13-08

Мясникова Ольга

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

Куриленко И.Е.

Москва, 2012

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

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам.

Способы подключения CSS к документу

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

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

.....

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

.....

@import url(style.css);

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

.....

body {

color: red;

}

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

Рассказ о том, как вредно красить батареи

Построение правила CSS

В первых трёх случаях подключения таблицы CSS к документу (см. выше) каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.

селектор, селектор {

свойство: значение;

свойство: значение;

свойство: значение;

}

В четвёртом случае подключения таблицы CSS к документу (см. список) правило CSS (являющееся значением атрибута style тега, на который оно действует) представляет собой перечень объявлений («свойство CSS : значение »), разделённых знаком «;».

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

Селекторы правила CSS могут быть

• селекторами элементов;

p {font-family: Garamond, serif;}

• селекторами классов;

.note {color: red; background: yellow; font-weight: bold;}

• селекторами идентификаторов;

#paragraph1 {margin: 0;}

• селекторами атрибутов;

a[href="http://www.somesite.com"]{font-weight:bold;}

• селекторами потомков (контекстными селекторами);

div#paragraph1 p.note {color: red;}

• селекторами дочерних элементов;

p.note > b {color: green;}

• селекторами сестринских элементов;

h1 + p {font-size: 24pt;}

• селекторами псевдоклассов;

a:active {color:yellow;}

• селекторами псевдоэлементов.

p::first-letter {font-size: 32px;}

• Также в CSS существует так называемый универсальный селектор, обозначающий любой элемент, встречающийся в документе. Например, * {color:red;}. Перед любым селектором, задающим класс или идентификатор, можно поставить знак универсального селектора, в результате получится эквивалентное выражение, например, .first {...} и *.first {...} имеют один и тот же смысл.

Файл CSS

body

{background:white url('webtreats_grungy_mauve_pattern_74.jpg');

margin:0;

}

#main

{

width:800px;

height:100%;

margin: 2px auto;

}

#menu

{height:90px;

background:url('white-round.png');

margin-top:10px;

margin-bottom:2px;

}

a

{text-decoration:none;}

#content

{background:url('white.png');

padding:10px 20px;

}

.mbox

{ width:33%;

position:relative;

float:left;

margin:auto;

font: bold 130% Courier New;

text-align:center;

margin-top:30px;

}

.h1

{text-align:center;

font-family:Courier New;

font-size:x-large;

font-weight:bold;

}

.h2

{font-family:Courier New;

font-size:large;

font-weight:bold;

}

p

{font-family:Times New Roman;}

Главная страница. Обо мне.

Лабораторная работа 3

Обо мне

О бакалаврской работе

Формула

Здравствуйте!

Меня зовут Мясникова Ольга Александровна. Мне 20 лет и сейчас я учусь в МЭИ(ТУ). Я живу в Москве с рождения вместе с моей семьей.

Я учлась в общеобразовательной школе №1741 в математическом классе. С выбором профессии определилась довольно рано, классе в 9. В МЭИ поступила по олимпиадам, что обеспечило мне довольно свободное лето: ЕГЭ я конечно же писала, но результаты его никуда не подавала.

Помимо основного бразования сейчас я также получаю дополнительное высшее по английскому языку. В школе я не очень-то любила языки, но все изменилось после поездки в Англию летом 2010. Теперь английский для меня это не скучные учебные часы в аудитории и чтение пособий, а общение с друзьями, путешествия и приключения.

Сейчас я не работаю, так как этот семестр полностью загружен учебой: пишется бакалаврская работа и заканчивается дополнительное высшее, а следовательно надо сдавать госэкзамены по всем его предметам. Но в следующем семестре я собираюсь начать работать по специальности.

Бакалаврская.

Бакалаврская работа

Обо мне

О бакалаврской работе

Формула

Geek-plans!

Общая идея.

Моя бакалаврская работа является продолжением курсового проекта пердыдущего семестра. Это приложение, которое помогает человеку в планировании свободного времени.

Пользователь выбирает вид досуга и его желаемые характеристики. Но самое главное он вводит свое местоположение и время, а так же место,

куда он хочет попасть, и время, когда он хочет там оказаться. Учитывая эту информацию программа нахдит подходящие места, достаточно близко расположенные,

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

Как это сделано.

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

кинотеатрам. Однако расширение базы данных не является трудной задачей. Для каждого заведения в базе описаны критерии, по которым осуществляется выборка,

дано словесное описание и указан адрес. Пользователь определяет критерии, по которым выбираются заведения.

Программа извлекает из базы данные и представляет в удобной форме.

Таблица адресов во всей базе общая, то есть в ней содержаться адреса всех заведений,

а в описании заведения проставлены ссылки на таблицу адресов, из этой же таблицы пользователь выбирает свое начальное и конечное положения.

Для подсчета времени затрачиваемого на дорогу, всё множество адресов поделено на сегменты. Соответственно, чем больше сегментов, тем точнее

определяется местомоложение и время на дорогу.

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

Используется база данных Microsoft SQL Server, а приложение реализовано на C#.

Дальнейшее развитие.

На данный момент не все заявляемые функции приложения реализованы.
В рамках работы над бакалаврской работой и в дальнейшем развитии предполагается реализовать следующее:

реализовать подсчет времени

сделать web-версю приложения

топ самых посещаемых мест

возможность персоонализации

Формула.

Формула

Обо мне

О бакалаврской работе

Формула

Формула вариант №14

∫

∞

-∞

e

-x

2

dx

=

[

π

∫

∞

0

e

-u

du

]

1

2

=

π