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

Упражнение № 1. Применение :focus




Создайте файл с кодом:

Должен получиться следующий результат: а) до получения фокуса

б) после получения фокуса

Упражнение № 2. Применение: selection

Создайте файл с кодом:

Должен получиться следующий результат: а) без выделения:

б) При выделении:

 

Упражнение № 3. Применение:first-child, last-child

Создайте файл с кодом:

Стили:

Результат в браузере:

Упражнение № 4. Применение: nth- child

Создайте файл с кодом:

Стили:

Результат в браузере:

Упражнение № 5. Применение: nth- child

Создайте файл с кодом:

Стили:

Результат в браузере:

Упражнение № 6. Применение: nth- child

Создайте файл с кодом:

Стили:

Результат в браузере:

Задания

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

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

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

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

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

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

Тема: «Каскадные таблицы стилей. Позиционирование элементов. Создание меню».

Цель: Научиться использовать свойства position и z-index для расположения элементов на странице. Научиться создавать горизонтальные и вертикальные меню.

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

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

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

Материал

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

Строчные и блочные элементы

По умолчанию все элементы на странице располагаются последовательно:

- блочные элементы располагаются один под другим,

- строчные элементы располагаются один за другим.

Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К строчным элементам относятся теги <span>, <a>, < em > и др. В основном они используются для изменения вида текста или его логического выделения.

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся <div>, <h1>, <p> и др.

Вспомним структуру блочного элемента:

Разница между блочными и строчными элементами следующая:

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

<h2><a href="link1.html">Текст</a></h2> - правильно

<a href="link1.html"><h2>Текст</h2></a> - неправильно

  • Блочные элементы всегда начинаются с новой строки, а строчные таким способом не акцентируются.

Строчный элемент
Блочный элемент

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

Еще пример блочных элементов (возможность просмотра в браузере):

Свойство display

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

display: block | inline | inline-block | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Список возможных значений этого свойства, понимаемый разными браузерами короткий — block, inline, list-item и none. Все остальные допустимые значения поддерживаются браузерами выборочно. Описание основных значений представлено в таблице:

Значение Описание
block Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline Элемент отображается как встроенный. Использование блочных тегов, таких как <div>и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
list-item Элемент выводится как блочный и добавляется маркер списка.
none Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
inline-table Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.

Скрытие элементов

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

- display: none; - указание браузеру скрыть элемент, убрав его из общего потока элементов. В этом случае элемент, расположенный после скрытого элемента, будет смещаться вверх, занимая место скрытого элемента.

- visibility: hidden; - указание браузеру скрыть элемент, зарезервировав под него место на веб-странице. В этом случае браузер только скрывает элемент, не удаляя его из общего потока, поэтому на месте скрытого элемента останется пустое пространство, совпадающее по размеру с размером скрытого элемента.

Пример.

Код:

Результат:

Скрытие элементов

Свойство overflow сообщает браузеру, как нужно поступить в том случае, если содержимое блока превышает его размер. Это свойство может принимать одно из четырех значений:

visible - значение, используемое браузером по умолчанию. Указание этого значения будет иметь тот же эффект, что и отсутствие установки свойства overflow.

scroll - добавляет к элементу полосы прокрутки по вертикали и горизонтали.

auto - добавляет полосы прокрутки при необходимости.

hidden - скрывает часть содержимого, которое выходит за границы блочного элемента

Поделиться:





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



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