Метод | Описание | Пример |
Inline-стили | Непосредственно в атрибуте style | <p style="color:red"> |
Внутренняя таблица стилей | В разделе <style> документа | style p { color: red } |
Внешний CSS-файл | Подключение отдельного файла стилей | <link rel="stylesheet" href="styles.css"> |
- color: цвет текста
- font-family: гарнитура шрифта
- font-size: размер шрифта
- text-align: выравнивание текста
- width/height: ширина/высота
- margin: внешние отступы
- padding: внутренние отступы
- border: границы элемента
Тег | CSS |
<h1> | font-family: Arial; color: #333; text-align: center |
- a { color: blue; text-decoration: none }
- a:hover { text-decoration: underline }
- display: flex
- justify-content: выравнивание по главной оси
- align-items: выравнивание по поперечной оси
Свойство | Назначение |
display: grid | Создание сетки |
grid-template-columns | Определение колонок |
- Используйте внешние CSS-файлы
- Применяйте семантические классы
- Избегайте !important
- Оптимизируйте для мобильных устройств
При стилизации тегов учитывайте специфичность CSS-селекторов. Более специфичные селекторы имеют приоритет при применении стилей к элементам.