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

Март 14, 2021

Главная
Информатика
Введение в CSS. Блочная верстка.. Занятие 2

Содержание

2. Подключаем CSS стили My first page body{ background: red; } Структура файлов /project_name index.html /assets /images
3. CSS селекторы //По названию тега body{...} li{...} div ul li{...} //По id #elem {...} div#elem {...}
4. Псевдоклассы в CSS // Стили для непосещенных ссылок a:link {...} a.logo-link:link {...} // Стили для посещенных
5. CSS свойства width: value | % | auto | calc(); height: value | % | auto
6. margin-top: 10px; margin-right: 20px; margin-bottom: 15px; margin-left: 20px; margin: 10px 20px 15px 20px; margin: 10px 20px
7. margin для блочных элементов width: 200px; height: 200px; border: 1px solid; width: 200px; height: 200px; border:
8. width: 200px; height: 200px; border: 1px solid; margin: 10px -50px; width: 200px; height: 200px; border: 1px
9. Поля в CSS height: 200px; border: 1px solid; padding: 20px 80px; width: 200px; height: 200px; border:
11. Рамки в CSS border-width: value; border-style: solid | dashed | dotted; border-color: color | HEX color
12. Цвета в CSS // HEX цвет обозначается хэштегом “#” и записывается в шестнадцатеричной системе счисления, белый
13. Лайфхаки с border border-top: 50px solid red; border-right: 50px solid green; border-bottom: 50px solid gray; border-left:
14. Сетка сайта
15. Блочная верстка, вариант 1 - float .box { border: 1px solid; } .float-element { width: 33.3%;
16. Лайфхаки с float ★★★★☆ $2.25 Cablexpert CC-HDMI4-10 *{margin: 0;} .main{ max-width: 350px; border: 1px solid; }
17. Блочная верстка, вариант 2 - inline-block .box { border: 1px solid; font-size: 0; } .ib-elem {
18. Блочная верстка, вариант 3 - flex .box { border: 1px solid; display: flex; } .flex-elem {
20. Скачать презентацию

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

My first page

Структура файлов
/project_name
index.html
/assets
/images
logo.png
sprite.png
/styles
style.css
/fonts
openSans.ttf
openSans.eot
openSans.woff
openSans.svg

CSS селекторы
//По названию тега
body{...}
li{...}
div ul li{...}
//По id
#elem {...}
div#elem {...}
//По классу
.element {...}
div.element {...}
//По

атрибуту
.element[href="#"] {...}
div.element[src="image.jpg"] {...}

//Для всех элементов
* {...}
li * {...}
//Для всех на том же уровне
.element ~ div {...}
.element + a.link {...}
//Только дочерние элементы
div.element > ul {...}
div.element > ul > li {...}
//Перечисление свойств
div.element > ul,
div.element > ol {...}

Слайд 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 {...}

// Реакция элемента по наведению
a:hover {...}
.element:hover {...}
// Отмена ховера для модификатора
.element {
text-decoration: none;
color: gray;
cursor: pointer;
}
.element._active {
text-decoration: underline;
cursor: default;
}
.element:hover {
text-decoration: underline;
color: red;
}
.element._active:hover {
color: gray;
}

Слайд 5

CSS свойства
width: value | % | auto | calc();
height: value | %

//Записывается внутри фигурных скобок {...}
//Состоит из конструкции ключ/значение разделенные двоеточием, и с точкой с запятой в конце
//Один CSS селектор может содержать любое количество свойств
//key: value;
//width: 100px;

Слайд 6

margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
margin: 10px 20px 15px 20px;
margin: 10px 20px 15px;
margin-top:

10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
margin: 10px 20px 10px 20px;
margin: 10px 20px 10px;
margin: 10px 20px;

Слайд 7

margin для блочных элементов
width: 200px;
height: 200px;
border: 1px solid;
width: 200px;
height: 200px;
border: 1px solid;
margin:

10px 50px;

Слайд 8

width: 200px;
height: 200px;
border: 1px solid;
margin: 10px -50px;
width: 200px;
height: 200px;
border: 1px solid;
margin: 10px

auto;

Слайд 9

Поля в CSS
height: 200px;
border: 1px solid;
padding: 20px 80px;
width: 200px;
height: 200px;
border: 1px solid;
padding:

20px 60px;
display: inline-block;

box-sizing: border-box;

Слайд 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
// HEX цвет обозначается хэштегом “#” и записывается в шестнадцатеричной

системе счисления, белый цвет обозначается #ffffff или #fff, а черный #000000 или #000
//#33aa55 === #3a5
//RGB цвет обозначается:
//color: rgb(‘red’, ‘green’, blue’)
//color: rgb(255,255,255) - белый
//color: rgb(0,0,0) - черный
//RGBA отличается от RGB только четвертым параметром, который отвечает за прозрачность, где 1 - непрозрачная заливка, а 0 - полностью прозрачный цвет. Дробную часть можно указывать как 0.4, так и просто .4
//color: rgba(122, 33, 213, .6);

Слайд 13

Лайфхаки с border
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid gray;
border-left:

50px solid blue;
width: 0;

border-top: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
width: 0;

Более подробно на https://habr.com/post/126207/
или по запросу “геометрия на CSS”

Слайд 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

*{margin: 0;}
.main{
max-width: 350px;
border: 1px solid;
}
.price-block{
float: right;
text-align: center;
padding: 10px;
}
.price-block .btn{
font-size: 18px;
border: 1px solid #ccc;
padding: 3px 5px;
}

.description-block{
padding: 10px;
overflow: hidden;
}
.description-block h3{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

Слайд 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;
}