Теги и атрибуты оформления 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

Синтаксис CSS

div { 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 являются

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

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

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

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

Слайд 20

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

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

Слайд 21

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

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

Слайд 22

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

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

Слайд 23

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

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

padding: 10px;

margin: 10px;

body {
padding: 0;
margin: 0;
}

У тела

документа есть отступы по умолчанию, необходимо их обнулять.
Слайд 24

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

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

CSS box model

Слайд 25

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

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

margin: 10px;

margin-top: 10px;
margin-right: 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/size
https://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/size
https://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/size
https://webref.ru/course/css-basics/size

Зависят от размера шрифта (родительского элемента/тега или корневого

элемента/тега ).
Слайд 31

CSS. Цвет

CSS. Цвет

Слайд 32

http://www.colorpicker.com CSS. Цвет

http://www.colorpicker.com

CSS. Цвет

Слайд 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/ - сервисе который знает в какому браузере какое css-свойство поддерживается; Где какое свойство будет работать?!

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

Где

какое свойство будет работать?!
Слайд 41

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

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

Слайд 42

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

CSS свойство Transform

https://www.w3schools.com/cssref/css3_pr_transform.asp

Слайд 43

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

CSS свойство Filter

https://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.asp

W3School CSS Tutorial

Имя файла: Теги-и-атрибуты-оформления-CSS.pptx
Количество просмотров: 77
Количество скачиваний: 0