Неделя шестая, Стили CSS. часть первая

Стили CSS. часть первая

background-color – установка цвета
background-image – вставка изображения
background-position – позиционирования изображения

background – универсальное свойство

Значения свойство background.

#номер цвета – задает цветовую заливку для селектора
#000 – заливка черным цветом
url(путь к изображению) – задает заливку изображением для селектора
url(images/run.png)
Может использоваться сразу две заливки – как цветов, так и изображением
repeat – указывает заливку селектора. Стоит по умолчанию
repeat-x - указывает заливку изображением только по горизонтали
repeat-y - указывает заливку изображением только по вертикали
no-repeat - полностью отменяет заливку
0px 0px задает начальное положение в пикселях слева и справа
0% 0% задает начальное положение в процентах слева и справа
left, right, center– задает начальное положение по горизонтали
op, bottom, center – задает начальное положение по вертикали
scroll – перематывает фон с вместе с содержимым. Стоит по умолчанию
ixed- фиксирует фон. Содержимое перематывается. Фон остается на месте

Сегодня мы разобрали полностью свойство background и даже немного отредактировали нашу шапку

Получилось целых пять уроков, но так как практики было, а в каждом урок я узнал по паре атрибутов - времени ушло мало.

Пройдя эти уроки, я понял, что в уроке будет объяснять CSS в мельчащих подробностях, а ещё мы этот CSS будем практиковать до победы! :)

День второй. Свойство padding и margin.

Значение свойство padding:

Поля со всех сторон по 10 пикселей:
padding:10px
Поля по вертикали 10 пикселей, а по горизонтали – 20 пикселей
padding:10px 20px
Поля с каждый стороны: сверху 10 пикселей, справа 20 пикселей, снизу 30 пикселей, слева 40 пикселей
padding:10px 20px 30px 40px

Значение свойство margin:

Отступ со всех сторон по 10 пикселей:
margin:10px
Отступ по вертикали 10 пикселей, а по горизонтали – 20 пикселей
pmargin:10px 20px
Отступ с каждый стороны: сверху 10 пикселей, справа 20 пикселей, снизу 30 пикселей, слева 40 пикселей
margin:10px 20px 30px 40px

Поля указывает расстояние внутри селектора padding, а отступы на расстояние снаружи margin.

Поля участвуют в размерах селектора:

Блок без полей

Тот же блок, но с полями

Сегодня мы изучили отступы, и сразу же применили их на нашем дневнике. Так же еще пару симпатичных вещей.

Пройдя эти уроки, я понял, что Евгения есть талант в веб-дизайну, наш дневник с каждым днем ставится все красивее и лучше! УРА!!!

День третий. Свойство border

border-width – толщина рамки
border-style – тип рамки
border-color – цвет рамки
border-collapse:collapse – делает рамку одинарной

Значение свойство border

border:толщина тип цвет – универсальное свойство, которое состоит из трех основных значений

none – указывает на отсутствие границы
border:none;
solid – указывает на сплошную линию
border: #066 solid;
dotted – указывает на линию из точек
border: #066 dotted;
dashed – указывает на линию из отрезков
border: #066 dashed;
double – указывает на двойную линию
border: #066 double;
inset – указывает на псевдотрехмернаю линию (верху темная внизу светлая)
border: #066 inset;
outset - указывает на псевдотрехмернаю линию (верху светлая внизу темная)
border: #066 outset;
groove – указывает на вдавленную линию
border: #066 groove;
ridge – указывает на рельефную линию
border: #066 ridge;

Установка границ только с определенной стороны

border-top – указывает на линию сверху
border-top:1px solid #066;
border-right – указывает на линию справа
border-right:1px solid #066;
border-bottom – указывает на линию снизу
border-bottom:1px solid #066
border-left – указывает на линию слева
border-left:1px solid #066;
border-left; border-bottom – указывает на линию слева и внизу
border-right:1px solid #066; border-left:1px solid #066;

День четвертый. Продолжаем изучать границы.

border-radius – делает округление углов селектора (Способы округления границ )

1 значение – устанавливает радиус для всех углов сразу.
border-radius:5px;
2 значение – 1 радиус для левого верхнего и правого нижнего углов; 2 радиус для правого верхнего и левого нижнего углов.
border-radius:5px 10px;
3 значение – 1 радиус для левого верхнего; 2 радиус для правого и левого нижнего углов; 3 радиус для нижнего правого угла.
border-radius:5px 10px 15px;
4 значение – начинаем с левого верхнего угла и движемся по часовой.
border-radius:5px 10px 15px 20px;
значение/значение – задаем радиус для одного угла по горизонтали и вертикали
border-radius:10px/10px 15px 20px;

outline– создает внешнюю границу для селектора, но в отличи от свойство border, оно не участвует в размерах селектора.

Как правило, свойство outline состоит из трех атрибутов - толщины, стиля, цвета (можно применять значений от свойство border)

Задается сразу для четырех сторон ( минус: нельзя задавать для каждой из сторон)

Блок без границы

Тот же блок, но с границами

День пятый. Свойство list-style

list-style – универсальное свойство, которое состоит из трех основных значений
list-style: вид маркера, положение маркера, url(путь _к_изображению) все пераметры не обязательные, указываються без запятой.

ist-style-type– задает вид маркера
list-style-position – задает положение маркера
list-style-images – задает изображение в качестве маркера.

значения свойство list-style:

Типы маркеров:

disc – маркер виде точек (по умолчанию для ul)
circle – маркер виде кружков
square – маркер виде квадрата

decimal – арабские числа – (по умолчанию для ol)
decimal-leading-zero – нули перед арабскими числами c числами
armenian – армянская нумерация
lower-alpha, lower-latin – строчные латинские буквы
upper-alpha, upper-latin – заглавные латинские буквы
lower-roman – римские числа в нижнем регистре
upper-roman – числа в верхнем регистре
lower-greek – строчные греческие буквы
georgian – грузинская нумерация
none – отменяет все маркеры

list-style-position, значения:

outside – маркеры выносятся за текстовый блок (значение по умолчанию)
inside – маркеры идут в текстовом блоке

list-style-images – можно задать любое нужное изображение, надо просто указать адрес.