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

Loading...

Из курса от партнера Moscow Institute of Physics and Technology

Основы HTML и CSS

115 оценки

Moscow Institute of Physics and Technology

Основы HTML и CSS

115 оценки

Курс 2 из 5 — Specialization Разработка интерфейсов: вёрстка и JavaScript

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

Из урока

Введение в CSS

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

История4:08

Структура CSS2:22

Основные селекторы4:59

Псевдоэлементы и псевдоклассы11:08

Отношения4:42

Специфичность11:15

Единицы измерения7:55

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

Познакомьтесь с преподавателями

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

В данном видео я научу вас, как создавать 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 делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

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

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

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