Создание сайта от начала и до конца [Михаил Русаков программист] (pdf) читать постранично, страница - 8

используемых на
вашем сайте. Если название шрифта состоит из нескольких слов с
пробелами нужно его заключать в кавычки.
Свойство font-size указывает размер используемого шрифта (могут быть
pt – пункты, px – пиксели, % и em – относительные размеры).
Далее нужно прописать цвет и стиль шрифта. Для этого переходите в
программу Photoshop, выбираете инструмент «Пипетка» и кликаете им
по какой либо букве меню. Затем кликаете по иконке «Выбор цвета».
Появляется окно «Палитра цветов». Из него нужно скопировать
шестнадцатеричный код цвета шрифта вашего сайта.

MyRusakov.ru

53

Михаил Русаков

СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА

Переходите в файл main.css и делаете запись. Конечное выражение
будет выглядеть так:

MyRusakov.ru

54

Михаил Русаков

СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА

Первая строка этого выражения означает, что описывается стиль и цвет
ссылкименю (#topmenua – для всех тегов , находящихся внутри
элемента с id="topmenu"). Во второй строке указан шестнадцатеричный
код цвета шрифта, который вы скопировали из программы Photoshop
(color: #2e2e2e). В третьей строке указан стиль шрифта – полужирный
(font-weight: bold).
Обновив страницу вашего сайта, вы можете увидеть результат:

Как видите, в вашем меню есть еще отличия от взятого примера – это
подчеркивание текста и расстояние между словами. Для того, чтобы
исправить это, нужно дополнить предыдущее выражение.
Окончательное выражение будет выглядеть так:

MyRusakov.ru

55

Михаил Русаков

СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА

Расстояние между ссылками можно отрегулировать свойством margin: 0
10 рх. Что означает, что сверху и снизу у вас будет 0 рх отступа, а справа
и слева 10 рх. Подчеркивание можно убрать, сделав запись -textdecoration: none.То есть, декорирования текста нет.
Обновив страницу, вы можете увидеть результат:

MyRusakov.ru

56

СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА

Михаил Русаков

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

Это делается через псевдоэлемент hover. Тут вы указываете те стили,
которые у вас будут появляться при наведении курсора мыши. Вам
нужно у этого элемента, у этой ссылки изменить background-color, то
есть цвет фона.
Конечное выражение будет выглядеть так:

MyRusakov.ru

57

СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА

Михаил Русаков

Цвет фона определяется также, как и цвет шрифта. То есть, в
программеPhotoshopинструментом «Пипетка»

кликаете

по фону,

возникающему вокруг ссылки меню при наведении курсора, и из окна
«Палитра цветов» копируете шестнадцатеричный код цвета фона.
Результат записи выражения на странице сайта выглядит так:

Как вы видите, фон вокруг надписи появился, но расположен почти
впритык. Поэтому вам нужно задать отступы, а, вернее сказать, поля.
Задаются они свойством padding. Его нужно ввести в блок #topmenua.
Выражение будет таким:

MyRusakov.ru

58

Михаил Русаков

СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА

Указанные размеры полей 10px и 5рх ориентировочные. В каждом
конкретном случае эти показатели нужно подбирать.
Обновите страницу и посмотрите на результат записи выражения:

MyRusakov.ru

59

СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА

Михаил Русаков

Как видно на скриншоте изменения фона есть, но они недостаточны.
Теперь нужно добавить отступ сверху и снизу. Для этого нужно создать
еще один селектор в CSS- #topmenu со свойством margin.

Значения свойство margin показывают, что размеры отступов:


сверху – 20рх



слева и справа – 0



снизу – 10рх

Обновляете страницу и смотрите результат:

MyRusakov.ru

60

Михаил Русаков

СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА

Теперь ваше меню полностью соответствует изображению на примере.

MyRusakov.ru

61

СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА

Михаил Русаков

Верстка блока новостей
В этом разделе вы сделаете вывод блока новостей на свой сайт.
Для начала давайте посмотрим на пример. На нем блок новостей
состоит из двух частей:правый блок и левый блок.

Поэтому

при

записи

выражений,

выводящих

блок

новостей,

необходимо показать и сам блок, и его составные части. В
файлеindex.html это будет выглядеть так:

MyRusakov.ru

62

Михаил Русаков

СОЗДАНИЕ САЙТА
ОТ НАЧАЛА И ДО КОНЦА

В этой записи первая строка описывает большой блок(