CSS, часть 1 sp. courses. dp. ua

  • Размер: 1.9 Мб
  • Автор:
  • Количество слайдов: 48

Описание презентации CSS, часть 1 sp. courses. dp. ua по слайдам

CSS, часть 1 sp. courses. dp. ua CSS, часть 1 sp. courses. dp. ua

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

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

CSS  ( англ.  Cascading Style Sheets — каскадные таблицы* стилей ) — язык CSS ( англ. Cascading Style Sheets — каскадные таблицы* стилей ) — язык описания внешнего вида документа , написанного с использованием HTML. Зачем? 4* таблицы здесь не при чём. Разделение данных (тегов и текста) и их оформления; Повторное использование кода. CSS нужен чтобы задать оформление конкретным тегам.

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

CSS отвечает за такие аспекты  61. Внешний вид элемента (цвет, шрифт,  прозрачность и т.CSS отвечает за такие аспекты 61. Внешний вид элемента (цвет, шрифт, прозрачность и т. д. ); 2. Размеры элемента (высота, ширина, границы, отступы и т. д. ); 3. Положение элемента на странице; * под элементом, подразумевается тег. 4. Анимационные эффекты.

Синтаксис CSS 7 div { color :  red ;  font-size :  16 ptСинтаксис CSS 7 div { color : red ; font-size : 16 pt ; }CSS селектор , говорит к каким тегам (элементам) будет применятся описываемый стиль ( css selector ). Имя свойства, которое устанавливается ( property ). Значение которое устанавливается для свойства ( value ).

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

style=“” 9 style=“”

style/style 10

link href=“” / mystyle. css … 11 mystyle. css …

Немного практики Немного практики

13 CSS Example Скачайте заготовку: http : // sp. courses. dp. ua/ files/02 /ex 0 1.13 CSS Example Скачайте заготовку: http : // sp. courses. dp. ua/ files/02 /ex 0 1. html И скопируйте в ваш текстовый редактор

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

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

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

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

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

DIV & SPAN 19 В отличии от других тегов DIV и SPAN являются соответственно блочным иDIV & SPAN 19 В отличии от других тегов DIV и SPAN являются соответственно блочным и строчным тегами для которых не установлено никаких стилей по умолчанию. В отличии от других тегов DIV и SPAN удобно использовать в качестве «болванок» для оформления элемента стилями, с нуля. Например : если мы хотим покрасить одно слово в предложении красным цветом, нам необходимо выделить это слово (т. е. взять его в теги), и применить стиль color: red ; для него. Однако использование строчных тегов на подобии , помимо возможности выделить слово, добавит свой стиль – курсив, а нам это не нужно. Использование SPAN решило проблему, и слово выделено, и никаких других стилей к нему не применено.

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

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

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

CSS. Размеры элемента (тега) 23 padding: 10 px; margin: 10 px; body { padding: 0; margin:CSS. Размеры элемента (тега) 23 padding: 10 px; margin: 10 px; body { padding: 0; margin: 0; } У тела документа есть отступы по умолчанию, необходимо их обнулять.

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

25 CSS. Размеры элемента (тега) margin: 10 px;  margin-top: 10 px; margin-right: 10 px; margin-bottom:25 CSS. Размеры элемента (тега) margin: 10 px; margin-top: 10 px; margin-right: 10 px; margin-bottom: 10 px; margin-left: 10 px; Отступы можно задать для каждой стороны в отдельности

26 Абсолютные единицы измерения Единица Описание px Пиксель in Дюйм (1 дюйм равен 2, 54 см)26 Абсолютные единицы измерения Единица Описание px Пиксель in Дюйм (1 дюйм равен 2, 54 см) cm Сантиметр mm Миллиметр pt Пункт (1 пункт равен 1/72 дюйма) pc Пика (1 пика равна 12 пунктам) Не зависят от размера устройства и плотности точек на нём. Величина заданная при помощи абсолютных единиц измерения будет одинакова на всех устройствах. https: // webref. ru/css/value/size https: // webref. ru/course/css-basics/size

27 Относительные единицы измерения https: // webref. ru/css/value/size https: // webref. ru/course/css-basics/size. Единица Описание vw 127 Относительные единицы измерения https: // webref. ru/css/value/size https: // webref. ru/course/css-basics/size. Единица Описание vw 1% от ширины области просмотра vh 1% от высоты области просмотра vmin 1% от меньшего значения из ширины и высоты области просмотра vmax Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1% Зависят от размера окна браузера.

28 Относительные единицы измерения https: // webref. ru/css/value/size https: // webref. ru/course/css-basics/size. Единица Описание em Размер28 Относительные единицы измерения https: // webref. ru/css/value/size https: // webref. ru/course/css-basics/size. Единица Описание em Размер шрифта текущего элемента ex Высота символа x ch Ширина символа 0 текущего элемента rem Размер шрифта корневого элемента Зависят от размера шрифта (родительского элемента/тега или корневого элемента/тега ). Единица Описание % При задании размера шрифта – аналогичен em , при задании размерностей берёт процент от доступной размерности (т. е. если ширина экрана 1000 пикселей, и мы ставит для элемента ширину 35%, то его ширина будет составлять 350 пикселей).

29 Относительные единицы измерения https: // webref. ru/css/value/size https: // webref. ru/course/css-basics/size. Единица Описание em Размер29 Относительные единицы измерения https: // webref. ru/css/value/size https: // webref. ru/course/css-basics/size. Единица Описание em Размер шрифта текущего элемента ex Высота символа x ch Ширина символа 0 текущего элемента rem Размер шрифта корневого элемента Зависят от размера шрифта (родительского элемента/тега или корневого элемента/тега ).

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

CSS. Цвет 31 CSS. Цвет

http: //www. color picker. com 32 CSS. Цвет http: //www. color picker. com 32 CSS. Цвет

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

34 CSS. Позиция элемента на странице Браузер сам занимается определением того где какой элемент должен быть34 CSS. Позиция элемента на странице Браузер сам занимается определением того где какой элемент должен быть расположен, однако можно ему немного подсказать… Скопируйте себе заготовку http : // files. courses. dp. ua/web/03/ex 01. html

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

36 CSS. Позиция элемента на странице position:  relative – задаёт расположение элемента относительно его положенного36 CSS. Позиция элемента на странице position: relative – задаёт расположение элемента относительно его положенного места, т. е. элемент должен был расположен «вот тут» , но с relative мы можем его чуть сдвинуть относительно «вот тут» .

37 CSS. Позиция элемента на странице position:  absolute – задаёт расположение элемента  «конкретно тут»37 CSS. Позиция элемента на странице position: absolute – задаёт расположение элемента «конкретно тут» , и абсолютно не важны позиции остальных элементов на странице. Для остальных элементов позиция «абсолютного» элемента тоже уже не важна, они выстраиваються так, как будто «абсолютного» элемента и не нет.

38 CSS. Позиция элемента на странице position: fixed – также фиксирует элемент на странице, как и38 CSS. Позиция элемента на странице position: fixed – также фиксирует элемент на странице, как и «absolute» , но при этом его позиция сохранятся даже при прокрутке страницы.

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

40 Вендорные префиксы Перед тем как добавить в свой браузер новое стилевое свойство разработчики браузера «обкатывают»40 Вендорные префиксы Перед тем как добавить в свой браузер новое стилевое свойство разработчики браузера «обкатывают» его, включая в экспериментальном виде. Но чтобы избежать проблем в будущем свойство добавляют не под тем названием которое значится в стандарте, а под спец-названием. Префикс Браузеры -o- Opera -moz- Mozilla, Firefox -ms- IE, Edge -webkit- Safari, Chrome, Opera > 12.

Итого Итого

42 Как при помощи CSS навести красоту? CSS  предоставляет множество инструментов ( «кирпичиков» ) из42 Как при помощи CSS навести красоту? CSS предоставляет множество инструментов ( «кирпичиков» ) из которых возможно построить практически любое оформление. Мастерство верстальщика состоит в том, чтобы разложить задачу на множество деталей каждую из которых можно описать правилом. Поэтому: практика и еще раз практика!

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

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

45 http: //www. w 3 schools. com/css/ W 3 School CSS Tutorial 45 http: //www. w 3 schools. com/css/ W 3 School CSS Tutorial

46 https: // webref. ru/css. Справочник по CSS 46 https: // webref. ru/css. Справочник по CSS

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

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