Loading...

Создание CSS файлов

Course video 24 of 40

Поговорим о том, почему появился CSS, и разберёмся в его структуре. Вы научитесь грамотно применять и комбинировать различные типы селекторов (селекторы тегов, классов, идентификаторов и атрибутов). Также мы расскажем, что такое псевдоэлементы и псведоклассы, какие они бывают и как с ними работать. Вы разберётесь в том, что такое специфичность, как она высчитывается и как это влияет на порядок применения свойств в CSS.

Основы HTML и CSS

Московский физико-технический институт

Курс 2 из 5 — Разработка интерфейсов: вёрстка и JavaScript Специализация

HTML и CSS — языки, с помощью которых верстают страницы в интернете. Овладеть основами этих языков совсем нетрудно — это первый шаг к профессии веб-разработчика. Вначале вы узнаете, как работать со шрифтами и текстом, а в конце концов научитесь верстать несложные страницы с анимацией и без. Авторы курса — разработчики из Яндекса. У курса есть продолжение.

Просмотреть программу курса

Преподаватели

Мохов Олег
разработчик интерфейсов, Яндекс
Артем Кувалдин
разработчик интерфейсов, Яндекс
Олег Семичев
разработчик интерфейсов, Яндекс

Текст видео

В данном видео я научу вас, как создавать 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 и как смотреть результаты в браузере.

Спасибо!

О Coursera

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

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

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

© Coursera Inc., 2019 Все права защищены.

Загрузить из App Store

Загрузить в Google Play