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

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

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

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













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

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


Выполнила

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

А-13-08

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

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

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




















Москва, 2012

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

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

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

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

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

.....

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

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

    .....

    • когда таблица стилей описана в самом документе, она может располагаться в нём в теле какого-то отдельного тега (посредством его атрибута 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. Теперь английский для меня это не скучные учебные часы в аудитории и чтение пособий, а общение с друзьями, путешествия и приключения.

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








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

    </span></font><font face="Consolas, serif">Бакалаврская</font><font face="Consolas, serif"><span lang="en-US"> </span></font><font face="Consolas, serif">работа</font><font face="Consolas, serif"><span lang="en-US">

    Geek-plans!

    Общая идея.

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

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

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

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

    окно
приложения
для кафе

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

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

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

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

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

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

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

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

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

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

    окно приложения
для кино

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

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

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






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