Язык CSS: правила написания стилей

Язык стилей (CSS) помогает задавать внешний вид веб-страниц. Существуют определенный правила CSS, которые определяют то, как работать с этим инструментом. Рассмотрим подробнее свойства CSS для шрифтов и текста, сам синтаксис и классы языка.

Базовый синтаксис CSS

Это самая важная часть языка, поэтому ему мы посвятим отдельный раздел. Так, CSS синтаксис – это свойства и их значения, селекторы и комментарии. С помощью селекторов можно выбрать определенные элементы, которые вы хотите стилизовать. Многих новичков интересует вопрос, как писать CSS селекторы – ответ довольно прост: выбирайте элемент по его типу (селектор p), классу (my-class) или по идентификатору (#my-id). Еще селекторы можно комбинировать, выбирать потомки элементов и даже использовать псевдоклассы.

Кроме того, вы можете добавлять комментарии в CSS, чтобы оставить заметки для себя или других разработчиков. Комментарии начинаются с /* и заканчиваются */. Теперь вы знаете, как писать комментарии в CSS. Что касается свойств, они определяют аспекты стиля, но о них мы расскажем позднее. При этом каждое свойство принимает значение, которое указывает, какой конкретный стиль будет применен. Например, значение red для свойства color сделает текст красным, а значение 16px для font-size установит размер шрифта 16 пикселей.

Классы CSS

Классы CSS – это специальные имена, которые вы можете присваивать элементам для применения к ним стилей. Классы дают вам возможность стилизовать несколько элементов на странице одним и тем же стилем или группировать элементы схожего типа. Они позволяют вам гибко управлять стилями на вашей веб-странице и упрощают процесс стилизации элементов схожего типа.

Детальнее про CSS вложенные правила, как использовать тег textarea и другие интересные детали вы можете узнать в Компьютерной школе Hillel.

Все свойства CSS

Любой css справочник содержит информацию не только о классах и синтаксисе, но и о свойствах. Конечно, детально очертить порядок свойств CSS и их особенности мы не можем в рамках одного текста. Но точно расскажем про основные свойства и их назначения.

• За цвет и фон отвечают свойства color (цвет текста), background-color (цвет фона), background-repeat (повторение фона). За шрифт и текст отвечают свойства font-family (шрифт), font-size (кегль), font-weight (жирность), text-align (выравнивание), text-decoration (стиль).
• За отступы и границы margin (вокруг), padding (внутри), border (граница), border-radius (закругление углов).
• За размеры width (ширина элемента), height (высота элемента).
• За позиционирование position (тип позиционирования), top, bottom, left, right (расположение элемента при абсолютном позиционировании).
• За тип отображения display.
• За прозрачность opacity.
• За анимацию и переходы animation (создает анимацию), transition (задает плавные переходы).
• За сам макет float (обтекание элемента), clear (очищает обтекание).

Теперь вы знаете какие в CSS основные свойства. Это необходимо для того, чтобы начать работать с этим языком стилей. Кроме того, существуют кастомные свойства CSS, но о них вы больше узнаете непосредственно в школе Hillel, так как каждое из них может принимать разнообразные формы и приводить к нужным последствиям.

По материалам: https://itwiki.dev/ru