Введение в CSS. Блочная верстка.. Занятие 2 - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Введение в CSS. Блочная верстка.. Занятие 2, слайд №1

Введение в CSS. Блочная верстка.. Занятие 2, слайд №2

Введение в CSS. Блочная верстка.. Занятие 2, слайд №3

Введение в CSS. Блочная верстка.. Занятие 2, слайд №4

Введение в CSS. Блочная верстка.. Занятие 2, слайд №5

Введение в CSS. Блочная верстка.. Занятие 2, слайд №6

Введение в CSS. Блочная верстка.. Занятие 2, слайд №7

Введение в CSS. Блочная верстка.. Занятие 2, слайд №8

Введение в CSS. Блочная верстка.. Занятие 2, слайд №9

Введение в CSS. Блочная верстка.. Занятие 2, слайд №10

Введение в CSS. Блочная верстка.. Занятие 2, слайд №11

Введение в CSS. Блочная верстка.. Занятие 2, слайд №12

Введение в CSS. Блочная верстка.. Занятие 2, слайд №13

Введение в CSS. Блочная верстка.. Занятие 2, слайд №14

Введение в CSS. Блочная верстка.. Занятие 2, слайд №15

Введение в CSS. Блочная верстка.. Занятие 2, слайд №16

Введение в CSS. Блочная верстка.. Занятие 2, слайд №17

Введение в CSS. Блочная верстка.. Занятие 2, слайд №18

Введение в CSS. Блочная верстка.. Занятие 2, слайд №19

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Введение в CSS. Блочная верстка.. Занятие 2. Доклад-сообщение содержит 19 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Слайд 2

Описание слайда:

Подключаем CSS стили

Слайд 3

Описание слайда:

CSS селекторы //По названию тега body{...} li{...} div ul li{...} //По id #elem {...} div#elem {...} //По классу .element {...} div.element {...} //По атрибуту .element[href="#"] {...} div.element[src="image.jpg"] {...}

Слайд 4

Описание слайда:

Псевдоклассы в CSS // Стили для непосещенных ссылок a:link {...} a.logo-link:link {...} // Стили для посещенных ссылок a:visited {...} a.logo-link:visited {...} // Стили для активного элемента .element:active {...} a.logo-link:active {...} // Стили для элемента, получающего фокус .element:focus {...} a.logo-link:focus {...}

Слайд 5

Описание слайда:

Слайд 6

Описание слайда:

Слайд 7

Описание слайда:

margin для блочных элементов

Слайд 8

Описание слайда:

Слайд 9

Описание слайда:

Поля в CSS

Слайд 10

Описание слайда:

Слайд 11

Описание слайда:

Рамки в CSS border-width: value; border-style: solid | dashed | dotted; border-color: color | HEX color | rgb color | rgba color; border-top: 30px solid red; border-right: 30px dotted #ccc || #4d5aa7; border-bottom: 30px dashed rgb(0, 255, 216) || rgba(0, 255, 216, .8); border-left: 30px solid transparent; // Скругленные углы CSS3 свойство border-radius: value | % | auto; // Группировка свойств border: [border-width || border-style || border-color];

Слайд 12

Описание слайда:

Цвета в CSS

Слайд 13

Описание слайда:

Лайфхаки с border

Слайд 14

Описание слайда:

Сетка сайта

Слайд 15

Описание слайда:

Блочная верстка, вариант 1 - float .box { border: 1px solid; } .float-element { width: 33.3%; box-sizing: border-box; padding: 0 10px; border: 1px solid red; float: left; }

Слайд 16

Описание слайда:

Лайфхаки с float ★★★★☆ $2.25 Cablexpert CC-HDMI4-10

Слайд 17

Описание слайда:

Блочная верстка, вариант 2 - inline-block .box { border: 1px solid; font-size: 0; } .ib-elem { width: 33.3%; box-sizing: border-box; padding: 0 10px; border: 1px solid red; display: inline-block; font-size: 16px; }

Слайд 18

Описание слайда:

Блочная верстка, вариант 3 - flex .box { border: 1px solid; display: flex; } .flex-elem { width: 33.3%; box-sizing: border-box; padding: 0 10px; border: 1px solid red; }

Слайд 19

Описание слайда:

Другие свойства для блоков // Управляет контентом блока, обрезает видимую часть, или добавляет скролл, если контента больше, чем величина блока. overflow: auto | hidden | scroll | visible | inherit; // Задает стиль булетов для списков ul => li, для нумерованных списков читай документацию на list-style-type: circle | disc | square; // Позволяет скрывать и отображать блок, оставляя его в потоке visibility: visible | hidden | inherit; // Изменяет внешний вид курсора, необходимо для исполнительных элементов на странице, полный перечень возможных значений смотри cursor: default | pointer // Выравнивает элементы между собой по горизонтали (!!! для двух и более элементов !!!) vertical-align: baseline | bottom | middle | top | inherit; // Позволяет очистить поток от обтекания clear: none | left | right | both | inherit;