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

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

Презентация к библиотечному уроку Азбука школьной библиотеки-13 Презентация к библиотечному уроку Азбука школьной библиотеки-13 97
Проектная деятельность как инструмент формирования УУД презентация к уроку по теме Проектная деятельность как инструмент формирования УУД презентация к уроку по теме 106
182
консультация для родителей по правилам дорожного движения консультация (средняя группа) консультация для родителей по правилам дорожного движения консультация (средняя группа) 38
Моделісоціальноїполітики держав з ринковоюекономікою. Японська модель Моделісоціальноїполітики держав з ринковоюекономікою. Японська модель 78
Схема реализации проекта Схема реализации проекта 180
Дети в великую отечественную войну презентация к уроку (3 класс) по теме Дети в великую отечественную войну презентация к уроку (3 класс) по теме 115
Презентация Береги свою планету Презентация Береги свою планету 106
Презентация-фотоотчет социального проекта Киностудия презентация к уроку (старшая, подготовительная группа) Презентация-фотоотчет социального проекта Киностудия презентация к уроку (старшая, подготовительная группа) 58
по теме: Развитие интеллектуального и творческого потенциала учащихся начальной школы в процессе организации проектной деятельности материал по теме по теме: Развитие интеллектуального и творческого потенциала учащихся начальной школы в процессе организации проектной деятельности материал по теме 101
Презентация по теме Библиотеки БЕН РАН Презентация по теме Библиотеки БЕН РАН 97
Презентация по ПМ.02 Новинки в технологии приготовления гарниров Презентация по ПМ.02 Новинки в технологии приготовления гарниров 146
проект Вторая жизнь предмета презентация по конструированию, ручному труду проект Вторая жизнь предмета презентация по конструированию, ручному труду 97
Развитие мелкой моторики у детей дошкольного возраста Развитие мелкой моторики у детей дошкольного возраста 113
Презентация по здоровому образу жизни Понятие здоровья Презентация по здоровому образу жизни Понятие здоровья 117
4 4 77
Томас Гоббс родился 5 апреля 1588 года, егоотец был приходскимсвященником. В 1608 годутомасокончилОксфордскийуниверситет, а в 1610 годустал учителем лорда Гадвика, сына аристократа УильямаКавендиша Томас Гоббс родился 5 апреля 1588 года, егоотец был приходскимсвященником. В 1608 годутомасокончилОксфордскийуниверситет, а в 1610 годустал учителем лорда Гадвика, сына аристократа УильямаКавендиша 97
Презентация по фармакологии на тему Витаминные препараты Презентация по фармакологии на тему Витаминные препараты 115
Науково – дослідницька роботаСемантичне поле “коза” на матеріалі усної народної творчості Науково – дослідницька роботаСемантичне поле “коза” на матеріалі усної народної творчості 88
Название презентации Название презентации 111
Презентация по методике преподавания математики Формирующее оценивание Презентация по методике преподавания математики Формирующее оценивание 157
Архип Куинджи Архип Куинджи 125
Презентация Методического объединения учителей математики, физики и информатики Презентация Методического объединения учителей математики, физики и информатики 93
Масленица. презентация к уроку (старшая группа) Масленица. презентация к уроку (старшая группа) 92
Восьмое сентября Восьмое сентября 115
Организационная культура организации Организационная культура организации 151
Презентация воспитателя начальных классов Портфолио педагога Презентация воспитателя начальных классов Портфолио педагога 105
Презинтация Развивающая экологическая среда как метод воспитания дошкольника презентация Презинтация Развивающая экологическая среда как метод воспитания дошкольника презентация 129
Уровни организации методической работы в ДОУ презентация Уровни организации методической работы в ДОУ презентация 112
Родительское собрание: Развиваем внимание презентация по теме Родительское собрание: Развиваем внимание презентация по теме 134