CSS Cascading Style Sheets. Структура css селектор { свойство1: значение1; свойство2: значение2; } - презентация

1 CSS Cascading Style Sheets

2 Структура css селектор { свойство1: значение1; свойство2: значение2; }

3 Блочная модель

4

5 width ширина элемента Значения: абсолютные единицы проценты auto inherit

6 height высота элемента Значения: абсолютные единицы проценты auto inherit

7 min-height минимальная высота max-height максимальная высота min-width минимальная ширина max-width максимальная ширина Значения: абсолютные единицы проценты auto inherit

8 padding внутренний отступ Значения: абсолютные единицы проценты inherit

9 padding внутренний отступ Вариации: padding-top отступ сверху padding-right отступ справа padding-bottom отступ снизу padding-left отступ слева

10 padding внутренний отступ Формат записи: padding: 5px; - все стороны padding: 10px 5px; - сверху/снизу, по бокам padding: 4px 10px 15px; сверху, по бокам, снизу padding: 5px 10px 8px 12px; сверху, справа, снизу, слева

11 margin внешний отступ Значения: абсолютные единицы проценты inherit auto

12 margin внешний отступ Вариации: margin-top отступ сверху margin-right отступ справа margin-bottom отступ снизу margin-left отступ слева

13 margin внешний отступ Формат записи: margin: 5px; - все стороны margin: 10px 5px; - сверху/снизу, по бокам margin: 4px 10px 15px; сверху, по бокам, снизу margin: 5px 10px 8px 12px; сверху, справа, снизу, слева

14 border границы вокруг элемента Формат записи: border: border-width border-style border-color;

15 border-width толщина границ элемента Значения: абсолютные единицы проценты thin (2px) medium (4px) thick (6px) inherit

16 border-width толщина границ элемента Формат записи: border-width: 5px; - все стороны border-width: 10px 5px; - сверху/снизу, по бокам border-width: 4px 10px 15px; сверху, по бокам, снизу border-width: 5px 10px 8px 12px; сверху, справа, снизу, слева

17 border-style стиль границ элемента Значения: none hidden dotted dashed solid double

18 border-style стиль границ элемента

19 Формат записи: border-style: solid; - все стороны border-style: solid none; сверху/снизу, по бокам border-style: solid none dotted; сверху, по бокам, снизу border-style: solid none none dotted; сверху, справа, снизу, слева

20 border-color цвет границ элемента Значения: цвет transparent inherit

21 border-color цвет границ элемента Формат записи: border-color: #000; - все стороны border-color: #000 red; сверху/снизу, по бокам border-color: #fff #000 #00f; сверху, по бокам, снизу border-color: #fff #0f0 #00f #f00; сверху, справа, снизу, слева

22 border границы вокруг элемента Формат записи: border: border-width border-style border-color; border: 2px solid #ff0203;

23 border границы вокруг элемента Формат записи: border: border-width border-style border-color; border-top: 2px solid #ff0203; border-top-width: 2px; border-top-style: solid; border-top-color: #ff0203;

24 border-collapse склеивание границ

25 Значения: collapse склеиваение соседних границ separate разделение соседних границ

26 border-spacing расстояние между границами Формат записи: border-spacing: 3px; со всех сторон border-spacing: 3px 5px; сверху/снизу, слева/справа

27 border-radius радиус скругления Формат записи: border-radius: 3px; со всех сторон border-radius: 3px 5px; верхний левый/нижний правый, верхний правый/нижний левый border-radius: 3px 5px 1px; - верхний левый, верхний правый/нижний левый, нижний правый border-radius: 3px 2px 4px 1px; - верхний левый, верхний правый, нижний правый, нижний левый

28 border-radius радиус скругления

29 overflow отображение контента, не умещающегося в блок

30 Значения: visible отображается весь контент hidden контент не отображается scroll добавляется скролл auto добавляется скролл при необходимости inherit

31 overflow отображение контента, не умещающегося в блок Дополнительные свойства: overflow-x отображение по горизонтали overflow-y отображение по вертикали

32 background фон элемента Формат записи: background: background-attachment background- color background-image background-position background-repeat; CSS3: background: background1, background2, … ;

33 background-attachment прокрутка фона Значения: fixed scroll inherit

34 background-color цвет фона Значения: цвет transparent inherit

35 background-image фоновое изображение Значения: url('picture.gif') none inherit

36 background-position положение фона Формат записи: background-position: отступ_по_горизонтали отступ_по_вертикали;

37 background-position положение фона Значения: абсолютные значения проценты left / center / right top / center / bottom inherit

38 background-repeat повторение фона Значения: no-repeat не повторять фон repeat повторять repeat-x повторять по горизонтали repeat-y повторять по вертикали inherit

39 background-repeat повторение фона

40 position позиционирование Значения: absolute абсолютное relative относительное fixed фиксированное static стандартное inherit

41 position позиционирование Дополнительные свойства: position: absolute; /* или relative */ top: 10px; left: 30px; bottom: 5px; right: 10px;

42 z-index расположение по Z-оси Формат записи: z-index: число;

43 float обтекание элемента

44 Значения: left right none inherit

45 clear запрет обтекания элемента

46 Значения: left right both none inherit

47 display отображение элемента Значения: block inline inline-block none list-item

48 visibility видимость элемента Значения: visible hidden collapse inherit