Отчетность по заданиям: ИТ в изучении ин. языков

Каскадные таблицы стилей, их классы.

Каскадные таблицы стилей позволяют прописывать индивидуальный дизайн (оформление и форматирование) отдельно для каждого тега. То есть если один раз прописать каким должен выглядеть тот или иной тег, то можно всегда обращаться на эту запись. Нет необходимости прописывать каждый раз множество атрибутов (align, border, font-size и т.д.) для каждого тега. Перекрывать действия стиля принятого в стандарте.

Настало время познакомиться с тегом < p>. Его функция — разделять вашу страницу на отдельные разделы, с последующим применением отдельного класса стилей для каждого раздела.

Стили:

Связанные стили

Мы можем создать текстовый документ с расширением .css и описать в нем как будут выглядеть в окне браузера различные теги. Ниже представлен пример такого файла:

H1 {

font-family: "Courier New";

font-size: 22px;

color: #A90E12;

}

P {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

margin-left: 40px;

}

A {

color: #7A8CED;

text-decoration: underline;

}

В нем приведены описания для трех тегов H1, P и A. Так для тега H1 описано три свойства: шрифт, размер и цвет. Способ расположения строк в файле может быть любым, важно, чтобы все свойства разделялись символом «точка с запятой» и группировались с помощью фигурных скобок. Для того чтобы назначить стиль web-странице, необходимо в блоке <head> </head> добавить строку:

Предполагается, что файл style.css находится в том же каталоге, что и html-документ. Мы можем добавить эту строчку к каждому документу нашего сайта, и теперь для увеличения размера заголовков, достаточно внести изменения в один единственный файл.

Внедренные стили

Такие стили внедряются в тело html-документа. Принцип построения стиля аналогичен описанному выше. С помощью парного тега <style> </style> таблица стилей помещается внутрь раздела <head></ head>. Например:

<STYLE>

BODY{

background-color: #CCCCCC;

margin-top: 0 px;

margin-left: 0 px;

}

font-size: 12px;

line-height: 100%;

color: #003399;

font-weight: bold;

text-decoration: none

}

h1{

font-size: 18 px;

font-weight: bold;

font-style: normal;

}

</STYLE>

Отличие внедренного стиля от связанного состоит в том, что он относится только к данному конкретному html-документу.

Встроенные стили

Встроенный стиль применяется к конкретному тегу внутри html-документа. Для этого используется параметр style, который можно использовать практически для любого тега:

<p style="font: 12pt Arial">К данному абзацу применен встроенный стиль</p>

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

Классы:

Стандарт CSS представляет возможности создания именованных стилей — стилевых классов. Это позволяет ответить на такой, например, вопрос: Как применить разные стили к одному и тому же селектору?

Предположим, что в документе вам нужны два различных вида основного текста — один без отступа, второй — с левым отступом и шрифтом красного цвета. Для этого нужно создать правила для каждого из них, например так:


p {margin-left: 0;}



p.warn {margin-left: 40px; color: #FF00;}

Для применения созданного класса его имя нужно указать в атрибуте class для выбранных абзацев:

<p class=”warn”>Красный текст с отступом слева</p>

Общий синтаксис описания класса:

селектор.имя_класса {описание}

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

Вот несколько примеров:

Правило:

.solid_blue {color: blue;}

Использование:


<p class=”solid_blue”>Синий текст абзаца</p>


<li class=”solid_blue”>Синий текст элемента списка</li>

Правило:


h1.bigsans  {font-family: Sans; font-size: 1.5em;}


h1.smallserif  {font-family: Serif; font-size: .84em;}

Использование:


<h1 class=”bigsans”>Большой, но рубленый</h1>


<h1 class=”smallserif”>Маленький, но с засечками</h1>

Свойство отступов каскадных стилей:

Margin-top – определяет верхний отступ для элемента.
Margin-right – определяет правый отступ для элемента.
Margin-bottom – определяет нижний отступ для элемента.
Margin-left – определяет левый отступ для элемента.
Margin – задает все свойства отступов в одной строке.

Для создания тени используется свойство 'text-shadow'.
Простейшая форма свойства 'text-shadow' имеет две части: цвет (black) и отступ (0.1em 0.1em 0.05em). Это приводит к резкой тени на видимом отступе. Но отступ может также сделать смазанным, что приведет к более или менее смазанной тени (0.1em 0.1em 0.2em).

Обзор сервиса Intuit.ru

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

Знакомство с сервисом lingualeo.ru .

1. Готовые курсы по определённой тематике. Имеют указания по уровню знания английского и примерное время освоения. Также присутствуют курсы с видео.
2. Возможность составления собственного словаря. Наличие заранее составленных словарей на определённые тематики.
3. Возможность тренировки словаря в виде мини-игр.
4. Пользовательский контент. Включает в себя тесты, музыку и видео.
5. Система прогресса. Фактически гайд по использованию сайта, ознакомляет с основными его функциями. Может послужить мотивацией для продолжения посещения сайта/изучения языка.