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

Введение

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

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CSSPreprocessorsGroup -.-> css/import_and_extend("Import and Extend") subgraph Lab Skills css/selectors -.-> lab-92744{{"Ваше первое практическое занятие по CSS"}} css/colors -.-> lab-92744{{"Ваше первое практическое занятие по CSS"}} css/import_and_extend -.-> lab-92744{{"Ваше первое практическое занятие по CSS"}} end

Привет, CSS

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

<!doctype html>

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

Затем нажмите кнопку Go Live в правом нижнем углу, это запустит локальный веб-сервер на порту 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 и нажмите кнопку обновления, чтобы увидеть изменения.

Использование внешнего 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 и нажмите кнопку обновления, чтобы увидеть изменения.

Итог

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

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

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