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

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

Лабораторная работа по ВМСС № 4.

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

Выполнил

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

Апухтин М.А.

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

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

Москва, 2012

Оглавлени

Технология CSS 3

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

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

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

Style.css 6

Index.htm 6

Coin1.htm 7

Coin2.htm 8

Список использованных источников 9

Технология CSS

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

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

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

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

То есть, эти таблицы стилей могут быть подключены, внедрены в описываемый ими веб-документ четырьмя различными способами:

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

.....

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

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

  .....

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

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

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

  В первых трёх случаях подключения таблицы 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, используемые при форматировании текста:

  Семейство шрифта [font-family]

  Свойство font-family указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы. Если первый шрифт списка не установлен на компьютере, с которого выполняется доступ к сайту, ищется следующий шрифт списка, пока не будет найден подходящий.

  Стиль шрифта [font-style]

  Свойство font-style определяет normal, italic или oblique.

  Вариант шрифта [font-variant]

  Свойство font-variant используется для выбора между вариантами normal и small-caps. Шрифт small-caps использует малые заглавные буквы (upper case) вместо букв нижнего регистра.

  Вес шрифта [font-weight]

  Свойство font-weight описывает, насколько толстым, или "тяжёлым", должен отображаться шрифт. Шрифт может быть normal или bold.

  Размер шрифта [font-size]

  Размер шрифта устанавливается свойством font-size.

  Используются различные единицы измерения (например, пикселы и проценты) для описания размера шрифта. В данном учебнике мы будем использовать самые распространённые и удобные единицы измерения.

  Отступы [text-indent]

  Свойство text-indent позволяет выделить параграф с помощью установки отступа для его первой строки.

  Выравнивание текста [text-align]

  CSS-свойство text-align соответствует атрибуту, используемому в старых версиях HTML. Текст может быть выровнен left, right, centred или justify.

  Декоративный вариант [text-decoration]

  Свойство text-decoration позволяет добавлять различные "декоративные эффекты". Например, можно подчеркнуть текст, провести линию по или над текстом и т. д.

  Интервал между буквами [letter-spacing]

  Интервал между буквами текста можно специфицировать свойством letter-spacing. Значение - нужная величина.

  Трансформация текста [text-transform]

  Свойство text-transform управляет регистром символов. Можно выбрать capitalize, uppercase или lowercase, в зависимости от того, как выглядит текст в оригинальном HTML-коде.

  Например, слово "headline" можно показать "HEADLINE" или "Headline". Имеются четыре возможных значения text-transform:

  capitalize

  Капитализирует каждое слово. Например: "john doe" станет "John Doe".

  uppercase

  Конвертирует все символы в верхний регистр. Например: "john doe" станет "JOHN DOE".

  lowercase

  Конвертирует все символы в нижний регистр. Например: "JOHN DOE" станет "john doe".

  none

  Трансформации нет - текст отображается так же, как в HTML-коде.

  Цвет переднего плана : свойство 'color'

  Свойство color описывает цвет переднего плана элемента.

  Свойство 'background-color'

  Свойство background-color описывает цвет фона элемента.

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

  Style.css

  .header {color:#4B0082;

  font-family:"Times New Roman",serif;

  font-style:normal;

  font-size:40px;

  font-weight:bold;

  text-align:center;

  letter-spacing:3px}

  a:hover {font-style:italic;

  color:#00FF7F;}

  .header2 {color:Black;

  font-family:"Times New Roman",serif;

  font-style:normal;

  font-size:20px;

  font-weight:bold;

  text-align:center;

  text-decoration:underline;}

  #formula {font-size:30px;

  color:#006400;

  text-align:center;

  }

  #index {vertical-align: super;}

  .b-u {font-weight:bold;

  text-decoration:underline;}

  .picture {float:left;

  width: 230px;}

  .text {text-align:justify;

  margin-right:20px;}

  Index.htm

  Главная

  Сочи 25 рублей
  

  10 рублей Воронежская область
  

  Формула:

  y(x)=sin(x)*ex

  Coin1.htm