Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Упражнение № 2. Определение классов для создания тегов




Создайте html-файл и сохраните его под именем css1_2.html.

Добавьте в него блок, параграф и цитату. Внутри блока предусмотрите возможность выделения фрагмента текста (тег span). Текст возьмите из раздела «Материал» данной практической работы.

Для блока и цитаты (blockquote) примените класс copy.

Добавьте на страницу следующие стили:

.copy { font-size:24px; /* Задание размера шрифта */ }

blockquote.copy { color: green; /* Задание цвета шрифта */ }

Дополнительно задайте для цитаты выравнивание по ширине.

И добавьте также стиль для элемента <span> с id=”color” такой, чтобы текст стал наклонным, цвет текста был темно-красным.

Для параграфа (p) задайте выравнивание по правому краю.

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

Сделайте выводы об использовании стилей тега, класса, идентификатора, их приоритетности.

Упражнение № 3. Определение стилей с одинаковыми правилами.

В блокноте создайте файл style.css, в котором задайте следующие стили

В той же папке создайте html-файл, в разделе <head> которого добавьте тег <link rel="stylesheet" type="text/css" href="style.css" >, а в тело документа вставьте следующий код:

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

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

Упражнение № 4. Буквица

Первую букву абзаца можно выделить не с помощью тега <span>, задав ему особое оформление, а с помощью псевдокласса::first-letter.

Создайте два html-страницу и css-документ. В стилевом документе определите стиль для оформления абзаца:

В html-документе в разделе <head> добавьте тег <link>, в котором укажите путь к css-файлу. В разделе <body> вставьте два абзаца:

Текст можно взять из раздела «Материалы» этой практической работы.

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

Упражнение № 5. Капитель

В html-файл, созданный в упражнении 2 для тега <span> стиль font-variant: small-caps. Просмотрите страницу в браузере. Она может выглядеть так:

Сделайте выводы о возможности оформлять текст капителью.

 

Упражнение № 6. Красная строка

Любой новый текст начинается с красной строки. Красную строку можно установить в тексте, расположенном на Web-странице, согласно синтаксису:

    {text-indent: величина _отступа}

Величина отступа может указываться в пикселах (px), дюймах (in), сантиметрах (cm), а так же в типографских пунктах (pt).

В html-файл, созданный в упражнении 5 добавьте красную строку 40 px для тега blockquote.

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

Сделайте выводы об оформлении абзаца красной строкой.

Упражнение № 7. Форматирование первой буквы и первой строки абзаца.

CSS даёт возможность форматирование абзаца с использованием псевдоэлементов:first-letter и:first-line. Например, можно выделить первый символ каждого абзаца, имитируя буквицу или придать особое форматирование первому предложению абзаца. В качестве фона для:first-letter также можно устанавливать градиентную заливку.

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

И оформите текст так:

Задания

Выполните самостоятельно

Задание 1. С помощью стилей создайте текст в рамке, как показано на рисунке:

Задание 2. С помощью стилей создайте текст, как показано на рисунке:

Задание 3. Применяя свойство text-transform, оформите текст, как показано на рисунке:

Задание 4. Применяя свойство text-decoration, оформите текст, как показано на рисунке:

Задание 5. Применяя свойство line-height, оформите текст, как показано на рисунке:

Задание 6. Применяя свойство word-spacing, оформите текст, как показано на рисунке:

Задание 7. Применяя свойство letter-spacing, оформите текст, как показано на рисунке:

Задание 8. Применяя псевдостиль :first-letter, оформите текст, как показано на рисунке:


 

Практическая работа № 2

Тема: «Каскадные таблицы стилей. Псевдоклассы и псевдостили».

Цель:

Время выполнения: шесть академических часов.

Форма занятия: практическая работа.

Технология работы

Материал

Ознакомьтесь с материалом, необходимым для выполнения работы:

В CSS оформление для некоторых элементов, например, для текстовых ссылок, задается с помощью псевдоклассов.

Псевдоклассы - это переменные, при помощи которых меняется оформление определенных элементов страницы в основном в зависимости от действий пользователя или в зависимости от положения этих элементов.

Синтаксис применения псевдоклассов немного отличен от привычного синтаксиса CSS и имеет следующую структуру:

Селектор: Псевдокласс {свойство: значение; свойство: значение;...}

задавать стилевое оформление, используя псевдоклассы, можно при помощи тега <style> (глобальные стили), который как известно располагается в голове документа. Либо работать с внешним файлом со стилями (связанные или внешние стили).

Параметр style не используется для применения псевдоклассов (внутренние стили).

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...