Что такое 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
  • Количество просмотров: 89
  • Количество скачиваний: 0
- Предыдущая Железница – центр Партизанского Края
Следующая - Скарлатина у детей. Дифтерия у детей

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

Олимпиады НОО. методическая разработка Олимпиады НОО. методическая разработка 93
Презентация Воспитание и современность: опыт, проблемы, решения. Презентация Воспитание и современность: опыт, проблемы, решения. 125
Как помочь своему ребенку учиться. методическая разработка (2 класс) по теме Как помочь своему ребенку учиться. методическая разработка (2 класс) по теме 102
Здоровьесбережение в процессе реализации раздела программы Здоровьесбережение в процессе реализации раздела программы 107
ОКРУЖНОСТЬ ОКРУЖНОСТЬ 82
Методологічні основи навчання зарубіжної літератури. Завдання, зміст та структура курсу зарубіжна література в школі. Методологічні основи навчання зарубіжної літератури. Завдання, зміст та структура курсу зарубіжна література в школі. 145
Методическая разработка занятия по теме: Рыбы методическая разработка Методическая разработка занятия по теме: Рыбы методическая разработка 77
Контрольные микропрепараты Контрольные микропрепараты 77
Презентация для детей старшего дошкольного возраста День Победы презентация к уроку (старшая группа) Презентация для детей старшего дошкольного возраста День Победы презентация к уроку (старшая группа) 80
Презентация по истории Калужского края Екатерина II в Калуге Презентация по истории Калужского края Екатерина II в Калуге 125
Законы Менделя Законы Менделя 79
детский сад материал ( группа) детский сад материал ( группа) 81
Презентация по экономике организации на тему Формы и системы оплаты труда (4 курс) Презентация по экономике организации на тему Формы и системы оплаты труда (4 курс) 175
КИСЛОТНО-ОСНОВНЫЕ СВОЙСТВА ОРГАНИЧЕСКИХ СОЕДИНЕНИЙ КИСЛОТНО-ОСНОВНЫЕ СВОЙСТВА ОРГАНИЧЕСКИХ СОЕДИНЕНИЙ 101
Установочный педсовет презентация Установочный педсовет презентация 97
Специальная педагогикаРаздел 3.Педагогические системы специального образования Специальная педагогикаРаздел 3.Педагогические системы специального образования 102
Презентация Моя будущая профессия Презентация Моя будущая профессия 84
Разработка урока по Охране труда Разработка урока по Охране труда 95
Современные подходы к созданию развивающей предметно-пространственной среды в ДОО методическая разработка (старшая, подготовительная группа) Современные подходы к созданию развивающей предметно-пространственной среды в ДОО методическая разработка (старшая, подготовительная группа) 101
Презентация к докладу Система оценки достижений учащихся начальной школы презентация к уроку Презентация к докладу Система оценки достижений учащихся начальной школы презентация к уроку 98
Ангельские чины и их предназначение Ангельские чины и их предназначение 202
Современные концепции дошкольного образования. Современные концепции дошкольного образования. 322
Презентация для родительского собрания по теме Безопасность детей в сети Интернет презентация к уроку (1, 2, 3, 4 класс) по теме Презентация для родительского собрания по теме Безопасность детей в сети Интернет презентация к уроку (1, 2, 3, 4 класс) по теме 133
Диагностика готовности к школе как условие успешной адаптации первоклассников. презентация к уроку Диагностика готовности к школе как условие успешной адаптации первоклассников. презентация к уроку 107
Презентация предметно-развивающей среды гр. Цыплята презентация к уроку (младшая группа) Презентация предметно-развивающей среды гр. Цыплята презентация к уроку (младшая группа) 102
Планируемые результаты презентация к уроку ( класс) Планируемые результаты презентация к уроку ( класс) 57
Родительское собрание Как помочь ребенку при подготовке к участию в ВПР презентация к уроку (4 класс) Родительское собрание Как помочь ребенку при подготовке к участию в ВПР презентация к уроку (4 класс) 110
Быстрый старт в психологическом бизнесе Быстрый старт в психологическом бизнесе 85
Способы повышения мотивации к обучению и активизация познавательной деятельности учащихся Способы повышения мотивации к обучению и активизация познавательной деятельности учащихся 84
novikova novikova 200