Ваше первое практическое занятие по CSS: овладение основами

Введение

🧑‍💻 Новенький в Linux или LabEx? Мы рекомендуем начать с курса Быстрый старт с Linux.

Привет! Добро пожаловать в LabEx! В этом первом практическом занятии вы научитесь создавать классическую программу "Hello, World!" на CSS.

Нажмите кнопку Продолжить ниже, чтобы начать практическое занятие.

Привет, CSS

Мы уже создали файл index.html в WebIDE. Давайте откроем его и добавим немного HTML-кода.

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
  </body>
</html>

HTML-код в WebIDE

Затем нажмите кнопку Go Live в правом нижнем углу, это запустит локальный веб-сервер на порту 8080.

Теперь вы можете переключиться на вкладку Web 8080 и нажать кнопку обновления, чтобы увидеть изменения.

Вид вкладки Web 8080

Добавление CSS

Давайте добавим немного CSS-кода в файл index.html.

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello HTML</h1>
  </body>
</html>

Переключитесь на вкладку Web 8080 и нажмите кнопку обновления, чтобы увидеть изменения.

"Hello HTML" с примененным CSS-стилем

Использование внешнего CSS

Мы уже создали файл style.css в WebIDE. Давайте откроем его и добавим немного CSS-кода.

h1 {
  color: red;
}

p {
  color: blue;
}

Затем изменим файл index.html так, чтобы он использовал внешний CSS-файл.

<!doctype html>

<html>
  <head>
    <title>My First Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello HTML</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Переключитесь на вкладку Web 8080 и нажмите кнопку обновления, чтобы увидеть изменения.

Веб-страница с примененным внешним CSS

Резюме

Поздравляем! Вы завершили свое первое практическое занятие в LabEx.

Если вы хотите узнать больше о LabEx и о том, как им пользоваться, вы можете посетить наш Центр поддержки. Или вы можете посмотреть видео, чтобы узнать больше о LabEx.

Программирование - это долгий путь, но Следующее практическое занятие находится всего в одном клике от вас. Давайте приступим!