🗊Презентация Введение в CSS. Блочная верстка.. Занятие 2

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

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

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();

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

Поля в CSS

Рамки в 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];

Цвета в CSS

Лайфхаки с border

Сетка сайта

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

Лайфхаки с 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>

Блочная верстка, вариант 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; }

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

Другие свойства для блоков // Управляет контентом блока, обрезает видимую часть, или добавляет скролл, если контента больше, чем величина блока. 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;