Padding-left, padding-bottom, padding-right

Свойства определяет ширину пространства между левым/нижним/правым бордюром и содержанием элемента.

p {padding-left: 10px}

h3 {padding-bottom: 2px}

div {padding-right: 7%}

Padding

Возможные значения

Ширина нижним отступа задается одним из принятых в CSS способов задания размеров.

auto расстояние будет рассчитываться браузером автоматически,

Свойство padding - сокращённое свойство, предоставляет быстрый способ задать следующие параметры: padding-top, padding-right, padding-bottom и/или padding-left. Padding - это пространство между содержимым элемента и бордюром.

p {padding: 2em}

h1 {padding: 2rem 1vw}

Background-color

Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.

background-color: <цвет> | transparent | inherit

background-color: #3366CC;

Селекторы -формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.

Классы и идентификаторы

Вы можете также задавать свои собственные селекторы, которые могут принимать форму классов и идентификаторов.

Преимущество такого подхода состоит в том, что вы получаете один и тот же элемент HTML, но представляете его различными способами в зависимости от его класса или идентификатора.

В CSS селектор класса обозначают именем, которое следует за точкой (.). Идентификатор обозначают именем, которое следует за знаком решетки (#).

Id

<span id=”identify”>Этот текст мы найдем</span>

span{ color: red; }

#identify {color: red}

Class

<span class=”myclass”>Этот текст мы найдем</span>

span{ color: red; }

.class {color: red}

Разница между идентификатором id и классом заключается в том, что идентификатор может применяться для определения одного элемента, а класс может использоваться для определения нескольких элементов.

/* Выбрать все элементы класса info */

.info {

color: gray;

}

/* Выбрать все элементы h2 (заголовки второго уровня) */

h2 {

margin-left: 1em;

}

/*Выбрать любой элемент с идентификатором banner */

#banner {

background: red;

}

Date: 2016-02-19; view: 401; Нарушение авторских прав