Стилистический особенности HTML тэгов. (Тема 7) презентация

Содержание

План Присущность тех или иных стилей для тэгов. Классификация и способность взаимного использования. Способы сокращения и упрощение Вёрстки, используя стилистические особенности тэгов. Успех, 2016, «ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS»

Слайд 1Тема №7 «Стилистический особенности HTML тэгов»
Успех, 2016, «ВЕРСТКА САЙТА: HTML, CSS,

jQuery, CMS»

Слайд 2План
Присущность тех или иных стилей для тэгов.
Классификация и способность взаимного использования.


Способы сокращения и упрощение Вёрстки, используя стилистические особенности тэгов.

Успех, 2016, «ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS»

Слайд 3Присущность тех или иных стилей для тэгов.
В чём разница HTML тэгов?

Отличие

написания;
Стилистические особенности.

Успех, 2016, «ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS»

Слайд 4Отличие написания
Отличия:

Открывающиеся, закрывающиеся;


Обязательное наличие атрибутов;


Успех, 2016, «ВЕРСТКА САЙТА: HTML,

CSS, jQuery, CMS»

Слайд 5Стилистические особенности
Все HTMl тэги по разному отображаются, а так же по

разному размещаются.

Сравним написание тэгов

,,:
Запишем в новый проект тэги

,,;
Наполним тэги текстом;
Проверим отображение в браузере и сравним отличия.

Успех, 2016, «ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS»

Слайд 6Стилистические особенности
Некоторые блоки расставляются друг под другом, а некоторые расставляются в

ряд, за данное отличие отвечает свойство display.

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

Block, inline, inline-block, table, table-cell

Успех, 2016, «ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS»

Слайд 7Стилистические особенности
Исходные параметры тэга :
Display: block;
Color: black;
~Font-size: 12px;
~Line-height: 21px;
Border: 0px;

Задание:
Создайте

тэг

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

и проверьте, как они себя ведут.

Успех, 2016, «ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS»

Слайд 8Стилистические особенности
Исходные параметры тэга :
Display: inline;
Color: inherit;
~Font-size: 12px;
~Line-height: 21px;
Border: 0px;

Задание:
Создайте

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


Успех, 2016, «ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS»

Слайд 10Стилистические особенности
Исходные параметры тэга :
Display: inline-block;
Color: #0017EE;
~Font-size: 12px;
~Line-height: 21px;
Border: solid 1px

#000;
~Padding: 1px 6px;
Background – градиент;
~Border-radius: 2px.

Задание:
Создайте тэг

Слайд 11Классификация и способность взаимного использования
Тэги делятся на линейные и блочные.

К линейным

относятся такие как : ,,,.
К блочным относятся:
,,,