Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
19 слайдов
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
666.40 kB
Просмотров:
145
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img0.jpg)
№2 слайд![Подключаем CSS стили](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img1.jpg)
Содержание слайда: Подключаем CSS стили
№3 слайд![CSS селекторы По названию](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img2.jpg)
Содержание слайда: CSS селекторы
//По названию тега
body{...}
li{...}
div ul li{...}
//По id
#elem {...}
div#elem {...}
//По классу
.element {...}
div.element {...}
//По атрибуту
.element[href="#"] {...}
div.element[src="image.jpg"] {...}
№4 слайд![Псевдоклассы в CSS Стили для](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img3.jpg)
Содержание слайда: Псевдоклассы в 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 слайд![CSS свойства width value auto](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img4.jpg)
Содержание слайда: CSS свойства
width: value | % | auto | calc();
height: value | % | auto | calc();
max-width: value | % | auto | calc();
min-width: value | % | auto | calc();
max-height: value | % | auto | calc();
min-height: value | % | auto | calc();
№6 слайд![](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img5.jpg)
№7 слайд![margin для блочных элементов](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img6.jpg)
Содержание слайда: margin для блочных элементов
№8 слайд![](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img7.jpg)
№9 слайд![Поля в CSS](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img8.jpg)
Содержание слайда: Поля в CSS
№10 слайд![](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img9.jpg)
№11 слайд![Рамки в CSS border-width](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img10.jpg)
Содержание слайда: Рамки в 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](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img11.jpg)
Содержание слайда: Цвета в CSS
№13 слайд![Лайфхаки с border](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img12.jpg)
Содержание слайда: Лайфхаки с border
№14 слайд![Сетка сайта](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img13.jpg)
Содержание слайда: Сетка сайта
№15 слайд![Блочная верстка, вариант -](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img14.jpg)
Содержание слайда: Блочная верстка, вариант 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 lt div class](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img15.jpg)
Содержание слайда: Лайфхаки с float
<div class="main">
<div class="price-block">
<p>★★★★☆</p>
<div class="btn">$2.25</div>
</div>
<div class="description-block">
<h3>Cablexpert CC-HDMI4-10</h3>
</div>
<div class="clear" style="clear: both;"></div>
</div>
№17 слайд![Блочная верстка, вариант -](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img16.jpg)
Содержание слайда: Блочная верстка, вариант 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 слайд![Блочная верстка, вариант -](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img17.jpg)
Содержание слайда: Блочная верстка, вариант 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 слайд![Другие свойства для блоков](/documents_6/f26b473575d236ef546c4ba2b96cfbbd/img18.jpg)
Содержание слайда: Другие свойства для блоков
// Управляет контентом блока, обрезает видимую часть, или добавляет скролл, если контента больше, чем величина блока.
overflow: auto | hidden | scroll | visible | inherit;
// Задает стиль булетов для списков ul => li, для нумерованных списков читай документацию на http://htmlbook.ru
list-style-type: circle | disc | square;
// Позволяет скрывать и отображать блок, оставляя его в потоке
visibility: visible | hidden | inherit;
// Изменяет внешний вид курсора, необходимо для исполнительных элементов на странице, полный перечень возможных значений смотри http://htmlbook.ru
cursor: default | pointer
// Выравнивает элементы между собой по горизонтали (!!! для двух и более элементов !!!)
vertical-align: baseline | bottom | middle | top | inherit;
// Позволяет очистить поток от обтекания
clear: none | left | right | both | inherit;