Изучение концепций CSS

  • 4 мин

Структура CSS

Если вы хотите, чтобы HTML-страница отображала весь текст между h1 тегами с цветом оранжевым цветом, можно использовать приведенный ниже код CSS.

h1 {
    color: orange;
}

Приведенный выше код CSS начинается с (h1), который выбирает HTML-код, который требуется стиль. В примере h1 это называется селектор.

Обратите внимание, что код внутри фигурных скобок color: orange;не объявляет стиль выбранного h1 тега. Код CSS в фигурных скобках{ }, например color: orange; называется объявлением.

Пример объявления содержит свойство, которое отделяется

Примечание.

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

Внедрение CSS-файла

Быстрый способ добавления сведений о стиле заключается в том, чтобы поместить его в head теги HTML-страницы с помощью атрибута style . Этот метод не считается лучшей практикой, но подходит для обучения и тестирования.

В следующем примере добавляется <style> тег со сведениями о стилизации для любого h1 отображаемого серого цвета. Так как это единственный стилизация, остальная часть HTML отображается с стилем браузера по умолчанию.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

При просмотре в браузере текст приветствия в теге <h1> отображает серый цвет.

Снимок экрана: отрисовка страницы H T M L отображает заголовок 1 серым цветом.

Применение стилей к HTML с помощью CSS

При добавлении стилей в язык разметки гипертекста (HTML) лучше всего выполнять стили в отдельном CSS-файле. Когда несколько HTML-файлов используют один и тот же CSS, они имеют одинаковый внешний вид. Кроме того, обновление одного CSS-файла проще, чем обновление каждого отдельного HTML-файла.

Чтобы ссылаться на CSS-файл, используйте link этот элемент.

link имеет два атрибута и relhref. rel используется для идентификации типа ресурса, на который вы ссылаетесь, например, таблицы стилей для стилей. href используется для определения пути к CSS-файлу. Если CSS-файл был в той же папке, что и HTML-файл и имел имя style.css, можно использовать следующее, чтобы ссылаться на него на странице:

<link rel="stylesheet" href="style.css">

Теперь у вас есть как минимум два файла, файл .html и .css файл. В предыдущем примере будет HTML-файл, который ссылается на CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>