1. CSS -
каскадные таблицы стилей, предназначенные для оформления HTML-документов. С
помощью CSS можно изменять цвета, шрифты, размеры, отступы и другие визуальные
характеристики элементов. Стили можно подключить через внешний файл с помощью
элемента <link>, разместить внутри элемента <style> или указать
непосредственно в атрибуте style. Внешний CSS-файл удобен для повторного
использования оформления на нескольких страницах.
2. CSS-селекторы
определяют, к каким HTML-элементам применяются правила оформления. Селектор
элемента выбирает все элементы определённого типа, например p. Селектор класса
записывается через точку, например .info, и может использоваться для нескольких
элементов. Селектор идентификатора записывается через символ #, например
#title, и выбирает элемент с соответствующим id.
3. Каскад CSS - определения
итоговых стилей, когда к одному элементу подходят несколько правил. Браузер
учитывает происхождение правил, их важность, каскадные слои, специфичность и
порядок объявления. Специфичность помогает определить приоритет конкурирующих
селекторов. Например, при одинаковых остальных условиях селектор идентификатора
имеет более высокий приоритет, чем селектор класса. Использование !important
без необходимости может усложнять управление стилями.
4. Блочная модель
CSS состоит из области содержимого, внутренних отступов padding, границы border
и внешних отступов margin. Свойство width задаёт ширину области содержимого при
стандартной модели. Свойство box-sizing: border-box позволяет включить внутренние
отступы и границы в заданную ширину и высоту элемента, что упрощает расчёт
размеров.
5. Для оформления
текста используются свойства font-family, font-size, line-height, color и
другие. Свойство background-color задаёт цвет фона элемента. При выборе цветов
важно обеспечивать достаточный контраст между текстом и фоном. Правильная
организация CSS помогает избежать дублирования правил, облегчает изменение
дизайна и делает код удобнее для сопровождения. Для повторного использования
значений можно применять пользовательские CSS-свойства.