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

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

Содружество – взаимодействие - поддержка консультация Содружество – взаимодействие - поддержка консультация 128
Конспект совместного с родителями занятия по ПДД с детьми 2-3 лет план-конспект занятия (младшая группа) Конспект совместного с родителями занятия по ПДД с детьми 2-3 лет план-конспект занятия (младшая группа) 113
Презентация Ориентировка в пространстве презентация к уроку по математике (младшая группа) по теме Презентация Ориентировка в пространстве презентация к уроку по математике (младшая группа) по теме 90
Презентация к докладу Новые формы работы учителя с подростками в условиях воспитательной колонии (из опыта работы) Презентация к докладу Новые формы работы учителя с подростками в условиях воспитательной колонии (из опыта работы) 118
Поговорим о родительском авторитете 5-6 класс Поговорим о родительском авторитете 5-6 класс 106
Развитие творческого мышления и воображения дошкольников методами ТРИЗ - РТВ презентация к уроку (средняя, старшая, подготовительная группа) Развитие творческого мышления и воображения дошкольников методами ТРИЗ - РТВ презентация к уроку (средняя, старшая, подготовительная группа) 156
Лекция №5. Переходные процессы в электроприводах Лекция №5. Переходные процессы в электроприводах 110
С наступающим 2018 годом. Поздравление С наступающим 2018 годом. Поздравление 101
organizatsiya vneurochnoy deyatelnosti v litsee1 organizatsiya vneurochnoy deyatelnosti v litsee1 47
организация работы по профилактике детского дорожно - транспортного травматизма рабочая программа (средняя группа) организация работы по профилактике детского дорожно - транспортного травматизма рабочая программа (средняя группа) 119
Выбираем экологичную мебель Выбираем экологичную мебель 116
Алматы қаласы Алматы қаласы 130
Презентация к общешкольному родительскому собранию Правильное питание-залог здоровья школьника Презентация к общешкольному родительскому собранию Правильное питание-залог здоровья школьника 163
Клинико-правовые аспекты обеспечения медицинской помощи: сестринская ошибка Клинико-правовые аспекты обеспечения медицинской помощи: сестринская ошибка 94
стимул персонала стимул персонала 118
ПК.4.5 презентация к уроку по теме ПК.4.5 презентация к уроку по теме 103
МЫЛА. ИСТОРИЯ СОЗДАНИЯ. ХИМИЧЕСКОЕ СТРОЕНИЕ МЫЛОВ МЫЛА. ИСТОРИЯ СОЗДАНИЯ. ХИМИЧЕСКОЕ СТРОЕНИЕ МЫЛОВ 145
Шанхайская фондовая биржа Шанхайская фондовая биржа 161
Управление персоналом Управление персоналом 96
Фильмы, созданные на реальных историях Фильмы, созданные на реальных историях 105
Проект Я - иду в первый класс! проект (подготовительная группа) Проект Я - иду в первый класс! проект (подготовительная группа) 129
Особенности программы Перспективная начальная школа Особенности программы Перспективная начальная школа 110
презентация презентация к уроку презентация презентация к уроку 93
Столыпинская аграрная реформа1906-1917 гг. Столыпинская аграрная реформа1906-1917 гг. 107
Социологический опрос презентация к уроку (младшая группа) Социологический опрос презентация к уроку (младшая группа) 47
Презентация к родительскому собранию Родительский дом - начало начал презентация по теме Презентация к родительскому собранию Родительский дом - начало начал презентация по теме 284
Народные росписи презентация Народные росписи презентация 88
В 20 школе В 20 школе 96
zdorovesberegayushchie tehnologii zdorovesberegayushchie tehnologii 90
Презентация Холодное лакомство презентация к уроку (старшая группа) Презентация Холодное лакомство презентация к уроку (старшая группа) 140