Основы CSS за один час

Mar 17, 2025

Как выучить CSS за 1 час

Введение

  • CSS (каскадные таблицы стилей) - язык описания внешнего вида документа.
  • Используется для задания стилей элементов на веб-странице.

Основные понятия CSS

  • Селекторы: выбирают элементы для стилизации.
  • Свойства: определяют, как именно будут изменены выбранные элементы.

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

  • CSS пишется в отдельном файле с расширением .css.
  • Подключение CSS к HTML осуществляется с помощью тега <link> в <head>:
    • href: путь к CSS файлу.
    • rel: тип связи.
    • type: тип файла (text/css).

Основные селекторы CSS

  1. Селектор по имени тега: применяется ко всем элементам данного типа (например, a для ссылок).
  2. Селектор по идентификатору: начинается с # и применяется к уникальным элементам (например, #myID).
  3. Селектор по классу: начинается с . и может применяться к нескольким элементам (например, .myClass).

Работа со свойствами

  • Свойства записываются в формате имя-свойства: значение;.
  • Примеры свойств:
    • color: цвет текста.
    • font-size: размер шрифта.
    • background-color: цвет фона.
    • border: рамка элемента.
    • margin: внешние отступы.
    • padding: внутренние отступы.

Цвета в CSS

  • Цвета можно задавать:
    • Именами (например, red, blue).
    • HEX-кодами (например, #FF0000 для красного).
    • RGB (например, rgb(255, 0, 0)).
    • RGBA (добавляется альфа-канал для прозрачности).

Анимации и трансформации

  • CSS3 позволяет добавлять анимации и трансформации:
    • transition: для плавных изменений свойств.
    • transform: для изменения размера, поворота и других эффектов (например, rotate, scale).

Ресурсы для дальнейшего изучения

  • Рекомендуемые сайты для изучения CSS:
  • После CSS рекомендуется изучать JavaScript для создания динамических веб-страниц.

Заключение

  • Теперь вы знаете основы CSS и можете начать применять их на практике. Удачи!