Упражнение. Использование концепций CSS

  • 7 мин

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

Этот модуль использует vscode.dev — веб-версию Visual Studio Code и CodeSwing. Эти средства помогают упростить процесс разработки. Для выполнения следующих упражнений не требуется локальная установка.

Создание проекта

Сначала создайте папку, настройте ваши инструменты разработки и создайте "свинг" с помощью CodeSwing в vscode.dev. Качели автоматически отображают результаты кода в vscode.dev. Использование Microsoft Visual Studio Code с CodeSwing позволяет быстро вносить изменения с предварительной версией обновлений, происходящих в режиме реального времени.

  1. Создайте папку на рабочем столе с именем резюме.
  2. Откройте vscode.dev.
  3. Выберите Открыть папку.
  4. Перейдите в созданную ранее папку возобновления и выберите "Выбрать папку".
  5. Когда появится запрос на предоставление файлов представления сайта, выберите "Просмотреть файлы".
  6. Нажмите кнопку "Расширения".

    Снимок экрана: кнопка расширений Visual Studio.

  7. В текстовом поле "Расширения поиска" в Marketplace введите CodeSwing.
  8. Выберите "Установить", чтобы установитьCodeSwing.
  9. Откройте палитру команд, нажав клавиши CTRL+SHIFT+P или CMD-SHIFT-P на компьютере Mac.
  10. Введите CodeSwing в палитре команд и выберите CodeSwing: New Swing in Directory.
  11. Выберите "Выбрать папку ", чтобы использовать текущий каталог (который был создан на предыдущем шаге).
  12. Выберите "Базовый": HTML/CSS/JavaScript.
  13. Если появится запрос на сохранение изменений в возобновлении, нажмите кнопку "Сохранить изменения".
  14. Нажмите x рядом с script.js внутри vscode.dev, чтобы закрыть файл JavaScript, так как вы не используете этот файл во время упражнения.

Visual Studio Code создает два раздела рядом друг с другом. Слева будут ваши редакторы, где можно ввести HTML и CSS. Правый ведет себя как браузер, отображая результаты работы вашего кода.

Создание кода HTML

Вы используете существующий HTML, чтобы мы могли сосредоточиться исключительно на CSS. HTML включает link элемент для ссылки на CSS-файл.

  • Скопируйте следующий HTML-код в окно с заголовком index.html:

    <html>
    <head>
        <title>Your Name resume</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>Your Name</h1>
        <a href="mailto:your-email@example.com">your-email@example.com</a>

        <div id="social-media">
            <h2>Social media</h2>
            <ul>
                <li><a href="https://github.com/">GitHub</a></li>
                <li><a href="https://linkedin.com/in/">LinkedIn</a></li>
                <li><a href="https://x.com/">X</a></li>
            </ul>
        </div>

        <h2>Education</h2>
        <h3>School name</h3>
        <h4>Major</h4>
        <ul>
            <li>GPA: 4.0</li>
            <li>Years attended</li>
        </ul>

        <h2>Experience</h2>
        <div class="experience">
            <h3>Company name</h3>
            <h4>Title</h4>
        </div>
        <div class="experience">
            <h3>Cool hackathon</h3>
            <h4>Project title</h4>
        </div>

    </body>
</html>

Установка типа и размера шрифта

По умолчанию большинство браузеров используют шрифт с засечками, например Times New Roman. Вы хотите задать страницу по умолчанию для более популярного шрифта. Кроме того, необходимо задать размер шрифта для страницы и различных заголовков.

  1. В файле с заголовком style.css добавьте следующий CSS, чтобы задать семейство шрифтов Verdana с резервными параметрами, а размер шрифта — 12 пикселей в элементе html :

    html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

    Элемент используется html для обновления корневого шрифта и размера. С html помощью элемента можно использовать rem размеры.

  2. Обратите внимание, что страница автоматически обновляется с изменениями.

  3. Добавьте следующий код CSS в конец style.css , чтобы задать размеры для h1 до h4.

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem основан на корневом размере, который составляет 14 пикселей. Например, этот CSS устанавливает размер h1 22,4 пикселя.

  4. Страница автоматически обновляется в vscode.dev.

  5. Оставьте окно открытым, как вы будете использовать его в следующем упражнении.

Результат и дальнейшие действия

На следующем снимке экрана показан результат css, который вы применили в этом упражнении. Если вы хотите поэкспериментировать с различными шрифтами и размерами, можно изменить CSS по желанию.

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