В данном видео я научу вас, как создавать CSS-файлы и применять их к HTML. Все примеры мы будем делать в отдельной папке, создайте ее заранее. У меня эта папка называется оригинально «Примеры для курса». Итак, давайте перейдем уже в знакомый вам редактор Sublime Text и создадим для начала HTML-разметку. Как вы помните из видео Артема, сделать это достаточно просто — нужно просто набрать команду html и нажать Tab. Мы здесь напишем какой-нибудь заголовок и создадим базовую разметку, где будет div, внутри него будет параграф и ненумерованный список. [ШУМ] [ШУМ] Все, этого нам достаточно, сохраним созданный файл в нашей папке и пойдем дальше. Давайте также сразу же проверим, что этот файл корректно работает в браузере. Для этого я буду пользоваться браузером Safari. Открываем — да, у нас действительно появился параграф и список пунктов. Для того чтобы добавить к созданному HTML CSS, есть несколько способов, о которых мы говорили на лекции. Давайте попробуем каждый из. Первый способ — это написать CSS в отдельном атрибуте style. В данном случае параграф должен стать красного цвета. Давайте проверим. И, действительно, у нас параграф стал красного цвета. Следующий способ, о котором мы говорили на лекции — это писать CSS в отдельном [НЕРАЗБОРЧИВО]. Здесь уже мы пользуемся методом выбора элементов с помощью селекторов, например мы пишем p для параграфа. И в фигурных скобочках мы уже прописываем соответствующие правила. Например, давайте сделаем параграф зеленым. Проверяем — все хорошо. Теперь можно использовать действительно сложные селекторы. Например, мы можем сказать каждому четному элементу списка, чтобы он был красным. Проверяем — работает. Этого способа уже достаточно, чтобы решать наши домашние работы, но мы рекомендуем вам сохранять CSS в отдельном файле. Чтобы это сделать, нужно зайти в секцию head и написать тег link. Если вы нажмете Tab, то Sublime для вас уже подставит все нужные значения атрибутом — вам лишь нужно написать имя файла, которое будет использоваться в качестве CSS. Общепринято, чтобы эти файлы были с расширением CSS. Здесь я ссылаюсь на файл index.css. Этого файла нет в директории, которую мы используем для хранения файла, поэтому нужно его создать. Говорим: новый файл. И здесь пишем какой-нибудь CSS. Сохраняем его в директории, все получилось. Для того чтобы проверить, что этот файл работает, давайте напишем здесь какой-нибудь CSS. Например, зададим параграфу желтый цвет. Сохраняем и проверяем. У нас параграф действительно стал желтого цвета. В этом видео мы рассмотрели, как создавать CSS-правила, как привязывать их к HTML и как смотреть результаты в браузере. Спасибо!
