Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Теги и атрибуты оформления CSS

Содержание

Теги и атрибуты оформления
CSS, часть 1express.courses.dp.ua Теги и атрибуты оформления Теги и атрибуты оформленияКуча проблем: захламляется HTML-разметка, многократно дублируется один и тот CSS (англ. Cascading Style Sheets — каскадные таблицы* стилей) — язык описания внешнего вида документа, Теги и атрибуты оформления CSS CSS отвечает за такие аспекты Внешний вид элемента (цвет, шрифт, прозрачность и Синтаксис CSSdiv { color: red; font-size: 16pt; }CSS селектор, говорит к каким Как использовать стили?style=“” style=“” mystyle.css… На практике… CSS ExampleСкачайте заготовку:http://files.courses.dp.ua/web/03/ex04.htmlИ скопируйте в ваш текстовый редактор Внешний вид элементов CSS. Внешний вид элемента (тега) CSS. Внешний вид элемента (тега) Консоль разработчика, инспектор объектов Консоль разработчика, инспектор объектов DIV & SPANВ отличии от других тегов DIV и SPAN являются соответственно Размеры элемента (тега) CSS. Размеры элемента (тега) CSS. Размеры элемента (тега) CSS. Размеры элемента (тега) padding: 10px;margin: 10px;body { padding: 0; margin: 0;}У тела документа CSS. Размеры элемента (тега) CSS box model CSS. Размеры элемента (тега) margin: 10px; margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;Отступы можно padding: 5px; +padding: 0px; +padding: 5; -padding: 0; +CSS. Размерности Абсолютные единицы измерения Не зависят от размера устройства и плотности точек на Относительные единицы измерения https://webref.ru/css/value/sizehttps://webref.ru/course/css-basics/sizeЗависят от размера окна браузера. Относительные единицы измерения https://webref.ru/css/value/sizehttps://webref.ru/course/css-basics/sizeЗависят от размера шрифта (родительского элемента/тега или корневого элемента/тега ). Относительные единицы измерения https://webref.ru/css/value/sizehttps://webref.ru/course/css-basics/sizeЗависят от размера шрифта (родительского элемента/тега или корневого элемента/тега ). CSS. Цвет http://www.colorpicker.comCSS. Цвет Позиция элемента на экране CSS. Позиция элемента на странице Браузер сам занимается определением того где какой CSS. Позиция элемента на странице CSS. Позиция элемента на странице position: relative – задаёт расположение элемента относительно CSS. Позиция элемента на странице position: absolute – задаёт расположение элемента «конкретно CSS. Позиция элемента на странице position: fixed – также фиксирует элемент на Can I use? http://caniuse.com/ - сервисе который знает в какому браузере какое css-свойство поддерживается;Где какое свойство будет работать?! Обратите особое внимание на… CSS свойство Transformhttps://www.w3schools.com/cssref/css3_pr_transform.asp CSS свойство Filterhttps://www.w3schools.com/cssref/css3_pr_filter.asp Вендорные префиксы Вендорные префиксыПеред тем как добавить в свой браузер новое стилевое свойство разработчики Итого Как при помощи CSS навести красоту?CSS предоставляет множество инструментов («кирпичиков») из которых Домашнее задание Cверстать вот такую кнопку?Есть тег который позволяет отобразить на странице кнопку, но «Изучаем HTML и CSS». Эрик Фримен, Элизабет Фримен. http://www.w3schools.com/css/default.aspW3School CSS Tutorial https://webref.ru/cssСправочник по CSS
Слайды презентации

Слайд 2 Теги и атрибуты оформления

Теги и атрибуты оформления

Слайд 3 Теги и атрибуты оформления
Куча проблем: захламляется HTML-разметка, многократно

Теги и атрибуты оформленияКуча проблем: захламляется HTML-разметка, многократно дублируется один и

дублируется один и тот же код и т.д. и

т.п.

Слайд 4 CSS (англ. Cascading Style Sheets — каскадные таблицы* стилей) — язык

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

описания внешнего вида документа, написанного с использованием HTML.
Зачем?
*

таблицы здесь не при чём.

Разделение данных (тегов и текста) и их оформления;

Повторное использование кода.

CSS нужен чтобы задать оформление конкретным тегам.

Слайд 5 Теги и атрибуты оформления CSS

Теги и атрибуты оформления CSS

Слайд 6 CSS отвечает за такие аспекты
Внешний вид элемента

CSS отвечает за такие аспекты Внешний вид элемента (цвет, шрифт, прозрачность

(цвет, шрифт, прозрачность и т.д. );
Размеры элемента (высота, ширина,

границы, отступы и т.д.);
Положение элемента на странице;

* под элементом, подразумевается тег.

Слайд 7 Синтаксис CSS
div { color: red; font-size: 16pt; }
CSS

Синтаксис CSSdiv { color: red; font-size: 16pt; }CSS селектор, говорит к

селектор, говорит к каким тегам (элементам) будет применятся описываемый

стиль (css selector).


Имя свойства, которое устанавливается (property).

Значение которое устанавливается для свойства (value).

Слайд 8 Как использовать стили?
style=“”


Как использовать стили?style=“”

Слайд 9 style=“”

style=“”

Слайд 10

Слайд 11

mystyle.css
…

mystyle.css…

Слайд 12 На практике…

На практике…

Слайд 13 CSS Example
Скачайте заготовку:
http://files.courses.dp.ua/web/03/ex04.html
И скопируйте в ваш текстовый редактор

CSS ExampleСкачайте заготовку:http://files.courses.dp.ua/web/03/ex04.htmlИ скопируйте в ваш текстовый редактор

Слайд 14 Внешний вид элементов

Внешний вид элементов

Слайд 15 CSS. Внешний вид элемента (тега)

CSS. Внешний вид элемента (тега)

Слайд 16 CSS. Внешний вид элемента (тега)

CSS. Внешний вид элемента (тега)

Слайд 17 Консоль разработчика, инспектор объектов

Консоль разработчика, инспектор объектов

Слайд 18 Консоль разработчика, инспектор объектов

Консоль разработчика, инспектор объектов

Слайд 19 DIV & SPAN
В отличии от других тегов DIV

DIV & SPANВ отличии от других тегов DIV и SPAN являются

и SPAN являются соответственно блочным и строчным тегами для

которых не установлено никаких стилей по умолчанию. В отличии от других тегов DIV и SPAN удобно использовать в качестве «болванок» для оформления элемента стилями, с нуля.

Например: если мы хотим покрасить одно слово в предложении красным цветом, нам необходимо выделить это слово (т.е. взять его в теги), и применить стиль color:red; для него.

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

Использование SPAN решило проблему, и слово выделено, и никаких других стилей к нему не применено.

Слайд 20 Размеры элемента (тега)

Размеры элемента (тега)

Слайд 21 CSS. Размеры элемента (тега)

CSS. Размеры элемента (тега)

Слайд 22 CSS. Размеры элемента (тега)

CSS. Размеры элемента (тега)

Слайд 23 CSS. Размеры элемента (тега)
padding: 10px;

margin: 10px;

body {
padding:

CSS. Размеры элемента (тега) padding: 10px;margin: 10px;body { padding: 0; margin: 0;}У тела

0;
margin: 0;
}
У тела документа есть отступы по умолчанию, необходимо

их обнулять.


Слайд 24 CSS. Размеры элемента (тега)
CSS box model

CSS. Размеры элемента (тега) CSS box model

Слайд 25 CSS. Размеры элемента (тега)

margin: 10px;
margin-top: 10px;
margin-right:

CSS. Размеры элемента (тега) margin: 10px; margin-top: 10px;margin-right: 10px;margin-bottom: 10px;margin-left: 10px;Отступы

10px;
margin-bottom: 10px;
margin-left: 10px;
Отступы можно задать для каждой стороны в

отдельности

Слайд 26 padding: 5px; +
padding: 0px; +
padding: 5; -
padding: 0; +
CSS. Размерности

padding: 5px; +padding: 0px; +padding: 5; -padding: 0; +CSS. Размерности

Слайд 27 Абсолютные единицы измерения
Не зависят от размера устройства

Абсолютные единицы измерения Не зависят от размера устройства и плотности точек

и плотности точек на нём. Величина заданная при помощи

абсолютных единиц измерения будет одинакова на всех устройствах.

https://webref.ru/css/value/size
https://webref.ru/course/css-basics/size

Слайд 28 Относительные единицы измерения
https://webref.ru/css/value/size
https://webref.ru/course/css-basics/size
Зависят от размера окна браузера.

Относительные единицы измерения https://webref.ru/css/value/sizehttps://webref.ru/course/css-basics/sizeЗависят от размера окна браузера.

Слайд 29 Относительные единицы измерения
https://webref.ru/css/value/size
https://webref.ru/course/css-basics/size
Зависят от размера шрифта (родительского

Относительные единицы измерения https://webref.ru/css/value/sizehttps://webref.ru/course/css-basics/sizeЗависят от размера шрифта (родительского элемента/тега или корневого элемента/тега ).

элемента/тега или корневого элемента/тега ).

Слайд 30 Относительные единицы измерения
https://webref.ru/css/value/size
https://webref.ru/course/css-basics/size
Зависят от размера шрифта (родительского

Относительные единицы измерения https://webref.ru/css/value/sizehttps://webref.ru/course/css-basics/sizeЗависят от размера шрифта (родительского элемента/тега или корневого элемента/тега ).

элемента/тега или корневого элемента/тега ).

Слайд 31 CSS. Цвет

CSS. Цвет

Слайд 32 http://www.colorpicker.com
CSS. Цвет

http://www.colorpicker.comCSS. Цвет

Слайд 33 Позиция элемента на экране

Позиция элемента на экране

Слайд 34 CSS. Позиция элемента на странице
Браузер сам занимается

CSS. Позиция элемента на странице Браузер сам занимается определением того где

определением того где какой элемент должен быть расположен, однако

можно ему немного подсказать…

Скопируйте себе заготовку http://files.courses.dp.ua/web/03/ex01.html

Слайд 35 CSS. Позиция элемента на странице

CSS. Позиция элемента на странице

Слайд 36 CSS. Позиция элемента на странице

position: relative –

CSS. Позиция элемента на странице position: relative – задаёт расположение элемента

задаёт расположение элемента относительно его положенного места, т.е. элемент

должен был расположен «вот тут», но с relative мы можем его чуть сдвинуть относительно «вот тут».

Слайд 37 CSS. Позиция элемента на странице

position: absolute –

CSS. Позиция элемента на странице position: absolute – задаёт расположение элемента

задаёт расположение элемента «конкретно тут», и абсолютно не важны

позиции остальных элементов на странице. Для остальных элементов позиция «абсолютного» элемента тоже уже не важна, они выстраиваються так, как будто «абсолютного» элемента и не нет.

Слайд 38 CSS. Позиция элемента на странице

position: fixed –

CSS. Позиция элемента на странице position: fixed – также фиксирует элемент

также фиксирует элемент на странице, как и «absolute», но

при этом его позиция сохранятся даже при прокрутке страницы.

Слайд 39 Can I use?

Can I use?

Слайд 40 http://caniuse.com/ - сервисе который знает в какому браузере

http://caniuse.com/ - сервисе который знает в какому браузере какое css-свойство поддерживается;Где какое свойство будет работать?!

какое css-свойство поддерживается;
Где какое свойство будет работать?!

Слайд 41 Обратите особое внимание на…

Обратите особое внимание на…

Слайд 42 CSS свойство Transform
https://www.w3schools.com/cssref/css3_pr_transform.asp

CSS свойство Transformhttps://www.w3schools.com/cssref/css3_pr_transform.asp

Слайд 43 CSS свойство Filter
https://www.w3schools.com/cssref/css3_pr_filter.asp

CSS свойство Filterhttps://www.w3schools.com/cssref/css3_pr_filter.asp

Слайд 44 Вендорные
префиксы

Вендорные префиксы

Слайд 45 Вендорные префиксы
Перед тем как добавить в свой браузер

Вендорные префиксыПеред тем как добавить в свой браузер новое стилевое свойство

новое стилевое свойство разработчики браузера «обкатывают» его, включая в

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

Слайд 46 Итого

Итого

Слайд 47 Как при помощи CSS навести красоту?
CSS предоставляет множество

Как при помощи CSS навести красоту?CSS предоставляет множество инструментов («кирпичиков») из

инструментов («кирпичиков») из которых возможно построить практически всё.
Мастерство верстальщика

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

Поэтому: практика и еще раз практика!

Слайд 48 Домашнее задание

Домашнее задание

Слайд 49 Cверстать вот такую кнопку?
Есть тег который позволяет

Cверстать вот такую кнопку?Есть тег который позволяет отобразить на странице кнопку,

отобразить на странице кнопку, но кнопку вот в таком

виде . Однако CSS позволяет её изменить до неузнаваемости, при помощи стилей.

Слайд 50 «Изучаем HTML и CSS». Эрик Фримен, Элизабет Фримен.

«Изучаем HTML и CSS». Эрик Фримен, Элизабет Фримен.

Слайд 51 http://www.w3schools.com/css/default.asp
W3School CSS Tutorial

http://www.w3schools.com/css/default.aspW3School CSS Tutorial
  • Имя файла: tegi-i-atributy-oformleniya-css.pptx
  • Количество просмотров: 100
  • Количество скачиваний: 0
- Предыдущая Железница – центр Партизанского Края
Следующая - Скарлатина у детей. Дифтерия у детей

Похожие презентации

umk perspektiva umk perspektiva 113
Курсова роботаТема: Ветеринарно-санітарна експертиза меду Курсова роботаТема: Ветеринарно-санітарна експертиза меду 77
Этика. Правила поведения в различных ситуациях. 5 класс. 6 урок. Этика. Правила поведения в различных ситуациях. 5 класс. 6 урок. 127
Сюжетно-ролевая игра в развитии дошкольников проект Сюжетно-ролевая игра в развитии дошкольников проект 88
Презентация Проект вода презентация Презентация Проект вода презентация 115
Экспериментирование - ведущий вид деятельности в детском возрасте статья Экспериментирование - ведущий вид деятельности в детском возрасте статья 84
Исследовательская работа ученицы Семейный бюджет. творческая работа учащихся (3 класс) по теме Исследовательская работа ученицы Семейный бюджет. творческая работа учащихся (3 класс) по теме 124
Электронное портфолио педагога-психолога презентация Электронное портфолио педагога-психолога презентация 112
Физ. минутка Бурый медвежонок презентация Физ. минутка Бурый медвежонок презентация 95
Қанды өңдеу. Қаннан дайындалатын өнімнің ассортименттері, мінездемесі стандарт талаптары. (Дәріс 7-8) Қанды өңдеу. Қаннан дайындалатын өнімнің ассортименттері, мінездемесі стандарт талаптары. (Дәріс 7-8) 85
Стратегии успеха ведущих мировых брэндов. Стратегии успеха ведущих мировых брэндов. 136
Механизм трансплантационного иммунитета. Реакция отторжения трансплантата. Механизм трансплантационного иммунитета. Реакция отторжения трансплантата. 105
Булат Солтангәрәев исемендәге Республика премияһына дәғүә итеүсе Дыуан районыреспублика лицей-интернатының 10-сы класс уҡыусыһы Шәрипова Айһылыуҙың эше. Етәксеһе: Баева Гүзәлиә Рид ҡыҙы. Булат Солтангәрәев исемендәге Республика премияһына дәғүә итеүсе Дыуан районыреспублика лицей-интернатының 10-сы класс уҡыусыһы Шәрипова Айһылыуҙың эше. Етәксеһе: Баева Гүзәлиә Рид ҡыҙы. 96
Презентация по черчению на тему ШПОНОЧНОЕ И ШТИФТОВОЕ СОЕДИНЕНИЕ Презентация по черчению на тему ШПОНОЧНОЕ И ШТИФТОВОЕ СОЕДИНЕНИЕ 131
Презентация для занятий по внеурочной деятельности для детей История возникновения канзаши Презентация для занятий по внеурочной деятельности для детей История возникновения канзаши 121
Осложнения терапии блокаторами иммунных чекпоинтов Осложнения терапии блокаторами иммунных чекпоинтов 97
Описание рабочей программы ПНШ Описание рабочей программы ПНШ 50
Воля Воля 92
12 12 87
Условия позитивной социальной адаптации старших дошкольников презентация Условия позитивной социальной адаптации старших дошкольников презентация 98
Организация и проведениеизобразительной деятельности в детском саду презентация Организация и проведениеизобразительной деятельности в детском саду презентация 41
Иллюстративный материал по теме :Домашние животные презентация к уроку (младшая группа) Иллюстративный материал по теме :Домашние животные презентация к уроку (младшая группа) 44
Визитная карточка Оксаны Валерьевны Милованцевой презентация Визитная карточка Оксаны Валерьевны Милованцевой презентация 150
ПК 4.4. Педагогические разработки методическая разработка ПК 4.4. Педагогические разработки методическая разработка 89
родительское собрание материал (4 класс) родительское собрание материал (4 класс) 51
esli hochesh byt zdorov esli hochesh byt zdorov 96
Безусловные рефлексы Безусловные рефлексы 102
способы разрешения, профилактики конфликтов способы разрешения, профилактики конфликтов 93
Сургутский газоперерабатывающий завод Сургутский газоперерабатывающий завод 126
Устаревшие слова в татарском языке. Устаревшие слова в татарском языке. 174