Дополнение к уроку:
Информацию как создать новый сайт Вы можете увидеть в дополнении к предыдущему уроку. Там же есть архив, необходимый распаковать в корень сайта (базовые файлы проекта). Если Вы пропустили, то качайте:
пакет файлов.
Базовые CSS свойства на каждый день
Конечно я сторонник того, чтобы вы начиная с первого урока тренировались гуглить и умели ввести "
css жирный текст" и получить тут же ответ как это делается, ведь умение гуглить правильно = 50% мастерства! Но для первого старта я всё же дам несколько полезных CSS свойств на каждый день:
.class {
color: red; /* красный цвет */
color: #009900; /* Цвет в формате RGB (Red, Green, Blue). Я указал 99 для зеленого. */
font-size:20px; /* Размер шрифта в пикселях */
font-weight:bold; /* Текст жирным */
font-weight:normal; /* Текст не жирный (абзацы по умолчанию не жирные, а вот заголовки - жирные) */
font-style: normal; /* Текст не курсивом (по умолчанию почти все теги не курсивом) */
font-style: italic; /* Текст курсивом */
text-decoration: underline; /* Добавляем нижнее подчеркивание тексту */
text-decoration: none; /* Убираем декорации тексту включая нижнее подчеркивание. Обычно ссылки имеют нижнее подчеркивание по умолчанию */
text-decoration: line-through; /* Зачеркиваем текст */
border-bottom: 1px solid green; /* указываем блоку рамки снизу, почти как decoration с возможностью указать другой цвет и толщину, но есть отличия */
text-transform:uppercase; /* Весь текст в верхнем регистре. Тоже самое, что писать большими буквами */
letter-spacing:2px; /* отступы между буквами */
word-spacing:7px; /* отступы между словами */
font-family: Comic Sans MS; /* Особые шрифты. Доступный список из 10-15 шрифтов, остальные надо подключать особым способом! */
}
CSS файл не работает, CSS файл не подключается. Решение проблемы:
Если Вы скачаете архив и поместите его в корень сайта, то у Вас всё будет работать без проблем. Но расширяя Ваши знания и экспериментируя с новым кодом рано или поздно Вы увидите, что свойства CSS не работают. Тут я соберу распространённые ошибки новичков.
1) Если Вы работаете с сайтом test1.ru, то в адресной строке браузера должно быть написано именно "test1.ru", ошибкой будет писать localhost/test1.ru, так как в данном случае сайтом выступает localhost, а test1.ru будет его поддиректорией. Допустим Вы захотели создать несколько папок для разных уроков, тогда создавайте отдельные сайты test1.ru , test2.ru , test3.ru. И не забудьте, что каждый из сайтов необходимо регистрировать в настройках Domain в Open Server!
2) Чтобы убедиться, что CSS файл браузер видит и подгружает, то открываем консоль F12 , выбираем вкладку Network и обновляем страницу. В колонке `status` мы увидим ответ кодом, 200 - это значит, что браузер подключил файл корректно, 404 - файл не найдет, он либо удалён, либо лежит в другой папке.
Помимо того, что мы убедимся, что файл загружается корректно, мы так же обновим файл до последней версии. Запомните, браузер кэширует (ЗАПОМИНАЕТ) старую версию файла по своим собственным алгоритмам, обновить страницу с открытой консолью и установленной галочкой "disable cache" заставит сбросить весь свой кэш для данной страницы и загрузить файлы по новой. О том, как обновлять кэш у пользователей Вашего сайта будет рассказано в следующих уроках, а вот пока Вы работаете локально, то Вы просто обязаны сидеть с включенной вкладкой Network и установленной галочкой "disable cache" всегда на своем сайте (на других сайтах не надо).
3) Если всё же Файл обновился, ответ 200, но стили не применяются, то тут могут быть 2 проблемы. Невнимательность - Вы работаете с сайтом test1.ru, а в браузере открыли test2.ru, и вторая более распространённая - Вы допустили ошибку в CSS файле. За счёт особенности CSS стили будут подгружаться сверху вниз и до той строчки, в которой возникнет ошибка, на том месте обработка стилей остановится. Тут поможет банальное решение - очистить файл и прописать 1 любое свойство и убедиться, что оно работает. Далее возвращая код по кусочкам можно найти строчку, в которой была ошибка.
4) Если ответ 404, а файл Вы создали сами, ручками, то переименуйте его и пропишите заново. Дело в том, что русская и английская буквы "с" визуально одинаковые и Вы могли ошибиться при наборе имени файла. В офисах даже существуют подобные шутники, которые своим коллегам переименовывают файл и выносят мозг :) А так, эта ошибка на столько редкая, что вряд ли у Вас именно она, но я на всякий случай её записал, мало ли что.
Хочу заметить, что я постарался указать распространённые на сегодня ошибки, с которыми может столкнуться каждый из учеников. Ошибок может быть и больше, так что если вдруг что, то пишите смело в скайп и я помогу!
Под каждым уроком есть 10 тестов, которые помогут Вам закрепить пройденный материал.
Один из тестов будет развивать Вашу логику и интеллект!
Чтобы получить доступ к тестам -
авторизируйтесь!
{"3":{"id":"3","lesson":"1","type":"input","title":"Тег выделения жирным","text":"Каким тегом можно выделить текст жирным?","answer_type":"Tag","answer":{"0":"b","1":"strong"},"variables":{"0":""},"group":"lvl1","course":"1"},"4":{"id":"4","lesson":"1","type":"input","title":"Тег переноса","text":"Укажите тег мягкого переноса","answer_type":"Tag","answer":"br","variables":{"0":""},"group":"lvl1","course":"1"},"5":{"id":"5","lesson":"1","type":"input","title":"Тег линии","text":"Назовите тег разделительной линии","answer_type":"Tag","answer":"hr","variables":{"0":""},"group":"lvl1","course":"1"},"6":{"id":"6","lesson":"1","type":"input","title":"Тег абзаца","text":"Напишите тег, которым выделяют абзацы","answer_type":"Tag","answer":"p","variables":{"0":""},"group":"lvl1","course":"1"},"7":{"id":"7","lesson":"1","type":"input","title":"","text":"Сложное задание, отнеситесь к нему внимательно. У нас есть тег, которому указан класс \u0022lesson\u0022 (без кавычек, конечно же). Как бы вы записали на CSS строчку указав следующее свойство для данного класса: размер шрифта 24px. Строчку начните с указания класса и заканчивая закрывающей фигурной скобкой.","answer_type":"css","answer":".lesson{font-size:24px}","variables":{"0":""},"group":"lvl1","course":"1"},"9":{"id":"9","lesson":"1","type":"radio","title":"Зачеркнутый текст","text":"Выберите зачеркнутый (перечёркнутый) текст","answer_type":"Int","answer":"3","variables":{"0":"\u0026lt;b\u0026gt;У меня сегодня кошка\u0026lt;\/b\u0026gt;","1":"\u0026lt;em\u0026gt;родила вчера котят\u0026lt;\/em\u0026gt;","2":"\u0026lt;p\u0026gt;И котята выросли немнжно\u0026lt;\/p\u0026gt;","3":"\u0026lt;s\u0026gt;Кушать с миски не хотят\u0026lt;\/s\u0026gt;"},"group":"lvl1","course":"1"},"10":{"id":"10","lesson":"1","type":"radio","title":"Заголовки","text":"Сколько всего уровней заголовков есть в HTML","answer_type":"Int","answer":"2","variables":{"0":"3","1":"4","2":"6","3":"10"},"group":"lvl1","course":"1"},"11":{"id":"11","lesson":"1","type":"radio","title":"Жирный текст","text":"Какое из определений верное касательно выделения жирным словосочетаний тегом b и strong","answer_type":"Int","answer":"1","variables":{"0":"Жирный текст не влияет на продвижение сайтов в поисковиках. Используйте заголовки","1":"Жирным выделяются ключевые слова, по которым находят наш сайт","2":"Жирным выделяют второстепенные слова, которые гугл не должен находить","3":"Необходимо абсолютно весь текст на странице выделить тегом b, тогда сайт будет выше по позициям в поисковике"},"group":"lvl1","course":"1"},"12":{"id":"12","lesson":"1","type":"yesno","title":"","text":"Правда ли, что заголовки h1-h6 прямо участвуют и помогают продвигать поисковые слова и фразы для поисковых систем таких как Google и Yandex ? То есть если я возьму в заголовок первого уровня h1 слово \u0022Рыба заморская\u0022, поможет ли это вывести на первые позиции по этой фразе страницу сайта?","answer_type":"Int","answer":"0","variables":{"0":""},"group":"lvl1","course":"1"},"13":{"id":"13","lesson":"1","type":"input","title":"Наиболее важный заголовок","text":"Введите самый важный заголовок. Заголовок высшего уровня","answer_type":"Tag","answer":"h1","variables":{"0":""},"group":"lvl1","course":"1"}}
{"0":"3","1":"4","2":"5","3":"6","4":"7","5":"9","6":"10","7":"11","8":"12","9":"13"}