Продолжаем начатый общий курс вёрстки. Хотелось бы уточнить - первые несколько уроков будут не конкретно по вёрстке дизайнов mybb. Для начала, нужно освоить основы, так сказать.

1. Файлы css

Держать весь CSS код в одном файле с вёрсткой неудобно, поэтому его можно вынести в отдельный файл. Создаём новую папку, в которую переносим файл с нашёл вёрсткой, после чего создаём ещё одним файл style.css, в который переносим наш CSS код без тегов <style></style>.
В шапку добавляем следующий код:

<link rel="stylesheet" type="text/css" href="style.css" />

Теперь весь CSS код будет подгружаться из файла style.css

2. Файлы шрифтов

К слову, через <link> в шапке можно подключить ещё и шрифты. В CSS шрифт указывается при помощи

font-family: название шрифта

Если указанный шрифт есть в операционной системе пользователя (к примеру, Arial), тогда на странице будет применен этот шрифт. Если его не будет - он будет заменен на другой. Подключать шрифты непосредственно с другого сайта нельзя - не позволяет браузер. К примеру, если вы хотите подключить шрифт для colorforum.ru с сайта google.com, вы это не сможете сделать, просто указав ссылку на шрифт (все шрифты хранятся в форматах .odf и .ttf). Впрочем, это можно обойти.
Чтобы на colorforum.ru подключить шрифты с google.com, вы указывает ссылку на .css файл, расположенным на google.com, а в этом файле уже подключаются шрифты. Т.е. мы обходим запрет, поскольку мы вызывает файл, который сам вызывает шрифты, и таким образом получаем нужный нам результат.

Одним из самых популярных репозиториев шрифтов является Google Fonts. Там можно выбрать размер, выбрать настройки для него (если для шрифта отсутствует эта опция, все символы кириллицы будут отображаться шрифтов по-умолчанию, а не загруженным вами). Там же получаем код для вставки. Я выбрал шрифт Ubuntu:

<link href='https://fonts.googleapis.com/css?family=Ubuntu&subset=latin,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>

Вставляем его между тегом head. Теперь, чтобы применить его для всего текста, добавим в наш файл css следующее:

body {
  font-family: 'Ubuntu';
}

Теперь на странице везде будет подключенный шрифт. Можно указывать не всему тексту, а только отдельным элементам, указывая вместо body их.

3. Псевдоклассы в CSS

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

:hover
стиль ссылки при наведении

a:hover {
color: #fff; /* ссылка при наведении будет белой */
}

:last-child
стиль последнего элемента родителя

ul li:last-child {
color: #000; /* цвет текста последнего li в ul будет чёрным */
}

:not
стиль применяется ко всем, кто не имеет указанный класс/тип/ИД

a:not(.special) {
    color: red; /* все ссылки, кроме тех, что имеют класс special, будут красными */
}

:nth-child
стиль применяется для элементы в соответствии с его номером (или посредством нумерации)

ul li:nth-child(2) {
color: #000; /* цвет второй элемент li в ul будет чёрного цвета */
}

ul li:nth-child(even) {
color: #fff; /* цвет в каждом чётном li (2, 4, 6, 8...) в ul будет белого текста /*
}

4. Линейный градиент

В CSS можно сделать для фона линейный градиент.

linear-gradient(to top, #fff, #000);

to top - направление или позиция (полный список возможных направлений)
#fff - начальный/первый цвет
#000 - конечный/второй цвет

Применить градиент можно для любого элемента на странице, указав его в качестве фона:

body {
background: linear-gradient(to top, #fff, #000);
}

5. Трансформация текста

При помощи CSS можно масштабировать, вращать, сдвигать, наклонять элементы страниц. Есть много опций, но самым популярным является:

rotate
Поворачивает элемент под заданный угол
Угол 360 градусов, указывается как [цифра]deg. К примеру, 90deg будет 90 градусов по часовой стрелке. Чтобы повернуть против часовой стрелке, перед цифрой указывается минус. -180deg будет 180 градусов против часовой стрелке. Подробнее

transform: rotate(90deg) /* 90 градусов по часовой стрелке */

6. Задания

1. Скинуть мне ссылку на папку, в которой должен быть файл с вёрсткой и файл стиля (css) и подключенный шрифт (любой). См. 1 и 2 пункт урока. Папку можно загружать на Я.Диск, Google Drive или любой другой файлообменник, кроме всякого дерьма, а ля letitbit и т.д.

2. Сделать так, чтобы каждая чётная строка в таблице была другого цвета, чем изначально.

3. Сделать так, чтобы во втором ряду таблицы вторая ячейка была обведена границей другого цвета (скажем, голубого).

4. Сделать для любого элемента на странице линейный градиент. Цвета выбираете на свой вкус.

5. Повернуть изображение аватара под любой угол.

6. Добавить в любое место (желательно в текст) 5 ссылок. 3 из них должны быть одного цвета, 1 другого, и 1 совсем другого. Сделать это наиболее простым способом.

P.S. В результате вы должны дать ссылку на папку со страницей вёрстки и css файлом со всеми заданиями. Ссылку скройте под скрытый текст.

Если у вас будут вопросы по прошлому или этому уроку  - задавайте здесь.