CSS Редактор

Вы можете использовать профессиональные редакторы CSS для редактирования CSS. Вот несколько часто используемых редакторов, которые мы вам рекомендуем:

Microsoft VS Code
Бесплатный открытый кроссплатформенный лёгкий редактор кода от Microsoft с огромной экосистемой плагинов, обеспечивающий почти полный набор возможностей IDE для разработки.
Alibaba Qoder
Интеллектуальный инструмент программирования на основе агентов, разработанный Alibaba, понимает код всего проекта и может автономно выполнять полный цикл разработки — написание кода, рефакторинг, создание тестовых примеров и многое другое — по инструкциям на естественном языке.
ByteDance Trae
Trae: AI-нативный IDE от ByteDance, поддерживающий как традиционный режим программирования, так и режим автономной разработки с ИИ; позволяет создать полный проект одним нажатием с помощью естественного китайского языка.

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

Вы также можете использовать наш онлайн-редактор:https://www.jyshare.com/front-end/61/

Далее мы покажем, как использовать инструмент VS Code для создания файлов CSS.

VS Code

Visual Studio Code (сокращённо VS Code) — это открытый редактор кода, разработанный Microsoft, поддерживающий операционные системы Windows, Linux и macOS, со встроенной функцией управления расширениями.

Справочник по установке VS Code:https://www.example.com/vscode/vscode-tutorial.html

Установите необходимые плагины (Extensions):
Нажмите значок квадрата (Extensions) на левой боковой панели VS Code, найдите и установите следующие два плагина. Они крайне важны для начинающих:

  • Live Server:Позволяет просматривать веб-страницы в реальном времени в браузере. После сохранения кода браузер автоматически обновится.
  • HTML CSS Support:Улучшает интеллектуальные подсказки CSS.

Шаг 1: Настройка структуры проекта

Создайте на компьютере папку с именемmy-first-cssэта папка

Откройте в VS Code: нажмите File -> Open Folder... в левом верхнем углу VS Code, затем выберите папку, которую только что создали.

  • Щёлкните правой кнопкой мыши по пустой области проводника слева и создайте новый файл index.html (это каркас веб-страницы).

  • Снова щёлкните правой кнопкой мыши и создайте новый файл style.css (это оформление веб-страницы).

Шаг 2: Напишите HTML-каркас

CSS должен быть подключён к HTML. Ниже приведён код файла index.html.

В<body>Введите следующий код внутри тега, иОбязательно добавьте его<link>Используйте тег для подключения файла CSS：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Моя практика CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <h1>Привет, CSS!</h1> <p>Это первая карточка стиля, которую я написал с помощью VS Code.</p> <button>Нажми меня</button> </div> </body> </html>

Шаг 3: Напишите стили CSS

Введите следующий код в файл style.css:

Пример

/* Добавить цвет фона для всей страницы */
body {
    background-color: #f0f2f5;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center; /* Горизонтальное центрирование */
    align-items: center;     /* Вертикальное центрирование */
    height: 100vh;           /* Заполнить всю высоту экрана */
    margin: 0;
}

/* Стили карточки */
.card {
    background-color: white;
    width: 300px;
    padding: 30px;
    border-radius: 15px;      /* Закруглённые углы */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Тень */
    text-align: center;
}

/* Цвет заголовка */
h1 {
    color: #333;
}

/* Стили кнопки */
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s; /* Переход анимации */
}

/* Эффект наведения на кнопку */
button:hover {
    background-color: #0056b3;
}

Шаг 4: Запуск и предпросмотр

  1. Назадindex.htmlФайл.
  2. Нажмите в любом месте области редактированияЩелкните правой кнопкой мыши。
  3. Выберите"Open with Live Server"。

На этом этапе ваш браузер по умолчанию откроется автоматически, и вы увидите центрированную белую карточку с заголовком и кнопкой на ней. Когда вы наведёте курсор мыши на кнопку, цвет станет темнее.

Результат выполнения похож на следующий:

Другие расширения