Структура CSS

Loading...

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

Основы HTML и CSS

139 оценки

Moscow Institute of Physics and Technology

Основы HTML и CSS

139 оценки

Курс 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.

Анатомия CSS очень простая,

в нем есть две базовых компоненты: это селектор и правила.

Селектор сопоставляет элементы на страницы, HTML-элементы,

которые будут потом стилизованы соответственно правилам.

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

Правила же — это пара свойство-значение,

что вы меняете и какое значение вы устанавливаете.

Таких пар, таких правил может быть тоже несколько,

тогда каждая из пар разделяется точкой с запятой.

И еще одна из самых немаловажных частей CSS — это комментарии.

Комментарии в CSS пишутся так же, как и в Javascript'е, то есть /* —

это открывает комментарий, */ — закрывает комментарий.

Я хотел бы обратить ваше внимание на то,

на какие вообще символы опирается парсер в CSS.

Важно понимать, что селекторы в CSS разделяются

только с помощью символа «,», только так.

Правила в CSS — это всегда набор каких-то букв,

которые находятся между символом «{» и «}».

Внутри правила пара свойство-значение всегда

разделяются только с помощью символа «:».

И, наконец, сами правила всегда разделяются только с помощью символа «;».

Пока парсер не встретит точку с запятой, он считает,

что правило не закончено, даже если логически вы его как бы закончили.

И, наконец, комментарии — это всегда последовательность символов между

символом «/*» и «*/».

Почему я вообще заострил внимание на том, как работает парсер CSS?

Давайте рассмотрим вот такой вот пример.

Здесь не надо пока что понимать, что конкретно делает каждое правило,

об этом мы поговорим чуть-чуть попозже.

Это абсолютно правильный и корректный CSS-код.

Теперь давайте его немножко видоизменим и удалим, например,

символ «;» после правила color: red.

Что произойдет в данном случае?

Что сделает парсер CSS?

Он не будет додумывать за вас и пытаться проинтерпретировать

следующий код в text-align: center как следующее правило.

Он просто воспримет этот код, как будто бы вы написали значение

свойства color как red text-align: center.

Ну и, соответственно, не будет этой строчки,

вот так будет выглядеть ваш результирующий CSS.

Ну и, конечно же, если вы CSS хоть немножечко знаете,

то вы поймете, что это некорректное правило.

И значение цвета не будет установлено.

Другой распространенный тип ошибок, который очень часто встречается при

написании CSS — это когда вы, например, забываете закрывающую фигурную скобку.

Допустим, рассмотрим тот же самый пример,

но здесь мы забыли закрывающую фигурную скобку вот здесь вот.

Что в данном случае сделает парсер CSS?

Парсер CSS возьмет и проигнорирует все,

что вы написали после забытой закрывающей фигурной скобочки.

То есть итоговый результат, который вы увидите в браузере,

будет наложением вот этих вот стилей.

Важно также помнить, что это правило действует только на файл,

а не на весь CSS и на порядок подключения CSS.

То есть если вы в одном из файлов забыли закрывающую фигурную скобочку,

то именно в этом файле все стили будут проигнорированы.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

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

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

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

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