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

РефератПомощь в написанииУзнать стоимостьмоей работы

CSS предоставляет гораздо больший объем параметров форматирования объектов HTML Подробный перечень параметров, доступных при использовании CSS смотрите в Приложении 3 в разделе «Приложения» данного пособия. Во-первых, без использования CSS здесь не обойтись, потому что разреженный интервал невозможно создать стандартными средствами HTML, следовательно, прибегнем к использованию CSS. Создаем стиль… Читать ещё >

Каскадные таблицы стилей (реферат, курсовая, диплом, контрольная)

Используя тот или иной тэг из стандартного набора, мы задаем стандартный (определенный по умолчанию) внешний вид абзацу, символам, рисунку и т. д. Если же мы хотим получить иной вид, то нужно использовать дополнительные тэги.

Например, чтобы создать абзац с полужирным начертанием, красного цвета и с подчеркиванием, нужно использовать 3 тэга —, и :

Абзац с красным полужирным подчеркнутым шрифтом

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

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

Использование каскадных таблиц стилей имеют ряд преимуществ:

1. CSS предоставляет гораздо больший объем параметров форматирования объектов HTML Подробный перечень параметров, доступных при использовании CSS смотрите в Приложении 3 в разделе «Приложения» данного пособия.
2. Используя CSS, зачастую можно легко сократить размер исходного HTML-документа.
3. CSS позволяет «настраивать» такие объекты HTML, как таблицы, списки, гиперссылки и т. д.

Первые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны старые.

Способы задания CSS.

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

1 способ — cтрочный (внутренние таблицы стилей — Inline Style Sheets) — стили вставляются прямо в описание тэгов HTML с помощью специального параметра style.

<�ТЭГ style="описание стиля" >текст Этот способ обычно используется, если стиль нужно применить единожды к конкретному тэгу и требуется использование параметров, доступных только через CSS.

Упражнение 8.1.

Создайте HTML-документ inline.html, содержащий абзац с разреженным шрифтом и таблицу с жирной верхней границей (см. рис. 8.1).

Для этого:

· Во-первых, без использования CSS здесь не обойтись, потому что разреженный интервал невозможно создать стандартными средствами HTML, следовательно, прибегнем к использованию CSS. Создаем стиль у тэга.

Разреженный текст в абзаце задан с помощью CSS.

Аналогично создаем стиль у тэга.

(параметры, доступные без CSS описывает вне «style»):

· Во-вторых, будем использовать строчный способ задания CSS, т.к. стиль у каждого элемента (абзац и таблица) нужно применить единожды.

В данном примере описаны 2 стиля: стиль абзаца и стиль таблицы. При описании каждого стиля использовались стандартные и новые атрибуты.

Например, letter-spacing задает разреженность текста, border-top-width — толщину верхней границы, а border-color — цвет границы таблицы.

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

2 способ — вложенный (глобальные таблицы стилей — Global Style Sheets): стили описываются все в одном месте между тегами и (обычно этот раздел размещается в разделе).

тег1 {описание стиля}.

тег2 {описание стиля}.

тег{описание стиля}.

Используя этот способ, мы переназначаем форматирование тэгов. Этот способ обычно применяется, если стиль тэга в документе используется несколько раз. Тогда описав стиль один раз в разделе, при указании тэга в тексте уже не нужно стиль описывать повторно.

Упражнение 8.2

Создайте HTML-документ seti.html по образцу (рис. 8.2). Названия классификаций заданы тэгом.

перечисления — элементы маркированного списка (тэг.

Элементы имеют следующие параметры форматирования:


Тэг.	межсимвольный интервал — 10 пикселей, начертание — полужирное, размер шрифта — 20 пикселей.
Тэг.	Начертание — нежирный курсив, размер шрифта — 18 пикселей.

Для этого:

· Так как в числе описанных параметров встречаются нестандартные, то опять же прибегнем к использованию CSS.
· При описании стиле будем использовать вложенный способ, так как в тексте примера один и тот же стиль будет применяться несколько раз.
· Описываем стили в разделе :

P {letter-spacing:10px;font-style:normal;font-weight:bold;font-size:20px;}.

LI {font-style:italic; font-size:18px;font-weight:none;}.

· Теперь создаем текст HTML-документа, указывая нужные тэги (стили описывать не нужно).
3 способ — Внешний (связанные таблицы стилей — Linked Style Sheets): отличается от предыдущего тем, что описания стилей помещаются не в разделе, а вносятся в отдельный тестовый файл с расширением *.css (например, style. css). Если мы хотим использовать описанные стили на страничке, мы должны включить ссылку на этот файл в наш html-документ между тэгами и с помощью тэга .

Такой способ используется, если описанные стили используются не в одном документе, а сразу в нескольких — мы просто вставляем ссылку на файл с описаниями стилей в каждый HTML-документ.

Упражнение 8.3

Создайте HTML-документ inform.html (рис. 8.3). Оба HTML-документа — seti.html и inform.html должны использовать одни и те же параметры форматирования, описанные в упражнении 8.2.

Для этого:

· Будем использовать внешний способ задания стилей, так как у нас имеются две странички, использующие один и тот же набор параметров форматирования.
· Создайте файл style.css.
· Переместите описание стилей из HTML-документа seti.html в css-файл. Сохраните изменения.
· В обоих HTML-документах в разделе добавьте ссылку на созданный css-файл с описанными стилями.

Задание 8.1

Создайте html-документ по образцу (рис. 8.4), используя наиболее подходящий способ задания стиля:

Примечание. Для задания границы слева используйте таблицу. Цвета выберите на Ваше усмотрение.

Задание 8.2

Создайте html-документ по образцу (см. рис .8.5), используя подходящий способ задания стилей.

Примечание. При выполнении упражнения используйте следующие параметры форматирования:


стиль.	параметры форматирования.
Заголовок.	выравнивание: по центру; Courier New, полужирный, 18 пт, цвет красный.
Подзаголовок.	нумерованный список, цвет шрифта — зеленый, межсимвольный интервал — разреженный на 5пт, начертание — жирный.
Текст абзацев.	шрифт Verdana, размер шрифта — 11пт.
Выделяемые слова внутри абзацев.	подчеркнутый курсив, цвет синий.

Задание 8.3

Создайте еще один HTML-документ, отформатированный в том же стиле, что и в задании 8.2. При форматировании используйте подходящий способ задания стилей.

Классы.

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

Но иногда требуется использование нескольких вариантов отображения одного и того же элемента в HTML-документе. Например, несколько абзацев (тэг.

) имеют вид, отличающийся от других.

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

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

P.zagolovok {text-align: center; font-weight: bold; font-size:16px;},.

В данном примере задан класс zagolovok, который описывает набор параметров форматирования тэга.

: выравнивание, полужирное начертание, размер шрифта 16 px.

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

P {text-align: center; font-weight: bold; font-size:16px;}.

.text {text-align: left; font-weight: normal; font-size: 12px;}.

.right {text-align:right}.

Способы задания классов

Существует 2 способа задания классов:

1. внутренний — в разделе
2. внешний — в отдельном файле с расширением .css

Применение класса в HTML-документе осуществляется с помощью параметра class. Например,.

Можно задать универсальный класс — класс, который можно применять не к одному, к нескольким тэг гам. Этот класс описывается самым первым или после описания классов тэга, и при его задании тэг не указывается. Например,.

.left {text-align: left}.

Созданный в примере класс left можно будет применить к тэгу.

, и другим тэгам, где этот параметр форматирования применим.

Упражнение 8.4.

Работа по созданию и применению классов.

Создайте HTML-документ class. html (см. рис. 8.6). Для форматирования текста создайте 2 класса тэга.

с различными параметрами форматирования.

Для этого:

· Введите текст странички.
· В разделе создайте 2 класса у тэга
: heading — для заголовков и text — для основного текста.

P .heading {font-family:Arial; background: yellow; font-weight:bold}.

.text {font-family:Times New Roman; padding-left:130}.

Задание 8.4.

Создайте HTML-документ по образцу (см. рис. 8.7), задав классы у тэга для выделения элементов окна и пунктов меню.

Позиционирование элементов HTML.

Все элементы языка разметки HTML выводятся в той последовательности, в какой размещены тэговые конструкции. С помощью средств CSS можно прибегнуть к позиционированию необходимых объектов в пределах web_странички. Позиционирование — это пространственное размещение элементов HTML-документа.

Существует два типа визуального позиционирования элементов:

· абсолютное;
· относительное.

Позиционирование элемента задается с помощью CSS через параметр style, где параметры перечисляются через точку с запятой:

В параметры позиционирования входит:

1. Параметры размещения элемента:
- · position — устанавливает, каким образом вычисляется положение слоя на странице. Возможные значения:
  - — absolute — координаты позиции элемента будут вычисляться от верхнего левого угла странички;
  - — relative — координаты будут вычисляться от верхнего левого угла родительского элемента, т. е. элемента, в котором находится позиционируемый элемент;
  - — static — элемент всегда будет находиться в зафиксированной месте окна браузера при прокручивании странички.
- · top — устанавливает вертикальную координату элемента (в пикселях: px, в процентах: % - от ширины родительского элемента);
- · left — устанавливает горизонтальную координату элемента (в пикселях: px, в процентах:% - относительно ширины родительского элемента);
- · width — устанавливает ширину элемента (в пикселях: px, в процентах: % - от ширины родительского элемента);
- · height — устанавливает высоту элемента (в пикселях: px, в процентах: % — от ширины родительского элемента).
2. Параметры «видимости» элемента:
- · visibility — устанавливает, будет ли виден элемент. Возможные значения:
  - — visible — слой будет виден;
  - — hidden — слой не будет виден.
- · z-index — указывает, в каком порядке слои будут перекрываться. Слои с бульшим z-index будут перекрывать слои с меньшим z-index. Возможны любые значения, включая отрицательные. В случае отрицательных значений элементы данного слоя будут закрыты обычным текстом; с положительным значением — будут лежать «перед» обычным текстом, перекрывая его. По умолчанию z-index=0.

Упражнение 8.5

Создайте HTML-документ position.html, содержащий абзац «Позиционирование в HTML» с тенью (рис. 8.8).

Для этого:

· Создайте в HTML-документе абзац с заданным текстом. Отформатируйте его: измените цвет текста, шрифт, размер шрифта.
· Для создания тени используйте копию абзаца, но со смещением. Для этого у тэга
через CSS задайте координаты размещения второго абзаца:

z-index:-1«>

Слои

Обычно в позиционировании используют слои.

Слой — это объект HTML-документа, который объединяет несколько элементов, расположенных на HTML-документе (таблицы, текст, картинки) в одну группу.

Использование слоев позволяет управлять группой элементов в целом, в том числе и позиционировать. Слои делают web_страницу компактной, динамичной, неожиданной и неотразимо привлекательной.

Слой задается тэгами и :

элементы слоя.

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

Упражнение 8.6.

Создайте HTML-документ sloi.html (рис. 8.9). При позиционировании.

используйте слои.

Для этого:

· Создайте три слоя: для слова «HTML», слова «Учебник» и основного текста.
· Разместите слои в HTML-документе, используя позиционирование через CSS (параметры размещения каждого слоя определите сами):

'элементы слоя.

· Определите порядок расположения слоев, задав у каждого слоя z-index.
· Просмотрите результат в окне браузера.

Вопросы для повторения.

1. Каковы преимущества использования стилей в HTML?
2. Назовите и опишите способы задания стилей, когда рекомендуется тот или иной способ?
3. Что такое классы? Когда необходимо задавать классы?
4. Назовите и опишите способы задания классов.
5. Что такое позиционирование? Возможно ли работа с позиционированием без CSS?
6. Дайте понятие слоя, для чего используются слои?

Контрольное задание Создайте HTML-документ по образцу, используя классы, слои и позиционирование.

Проектное задание.

Разработка сайта «Моя личная страничка».

Примерное техническое задание на разработку сайта «Моя личная страничка».

I. Описание сайта Сайт относится к категории «личная страничка». На сайте размещена информация о владельце сайта: его биография, увлечения, фотографии и т. д.

II. Структура сайта Посетитель сайта вначале попадает на главную (титульную) страницу, затем по ссылке переходит на второстепенную страницу (макеты титульной и второстепенной страниц см. п. III «Макеты страниц»). Второстепенная страница имеет фреймовую структуру, состоящую из 4-х фреймов: левый фрейм — меню_список всех разделов сайта, верхний фрейм — бегущая строка, нижний фрейм — ссылка на адрес электронной почты автора странички, центральный фрейм — содержание изменяется в зависимости от выбранного раздела в меню.

Сайт включает в себя следующие разделы:

1. «Биография»: краткая биография о себе, сопровождаемая фотографиями разных лет.
2. «Моя семья»: небольшой рассказ о членах семьи, сопровождаемый фотографиями.
3. «Мои друзья»: фотографии друзей и подписи к ним.
4. «Мои увлечения»: перечисление увлечений и краткий рассказ об одном из них.
5. «Анкета»: форма, предлагающая внести личную информацию посетителя и пожелания по сайту.

III. Макеты страниц Образец главной страницы (index.html):

Образец второстепенной страницы (main.html).

IV. Форматирование сайта.

1. Страницы всех разделов оформлены в едином стиле: одинаковое форматирование основного текста, заголовков разделов, текста ссылок, используется один фоновый рисунок на страницах всех разделов.
2. Текст главной страницы сайта расположен по центру по горизонтали и по вертикали.
3. Меню выровнено по центру по вертикали.

Показать весь текст

Заполнить форму текущей работой