Встроенный, вложенный и внешний CSS


26.12.2020


Встроенный (inline) CSS

Использование встроенного стиля является одним из способов для вставки таблицы стилей. С помощью встроенного стиля, применяется уникальный стиль к одному элементу.

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

В нижеуказанном примере отображено, как создавать параграф с серым фоном и белым текстом:


<p style="color:white; background-color:gray;"> Это пример встроенного CSS стиля.</p>      

CSS, стили, пример CSS встроенного
Атрибут style может содержать любое свойство CSS.

Вложенный (Embedded) CSS

Вложенные стили определяются с помощью элемента <style>, внутри секции head HTML страницы.

Например, следующий код определяет стиль всех параграфов:


<html>
    <head>
        <title>Название страницы</title>
        <style>
            p {
              color: white;
              background-color: gray;
            }
        </style>
    </head>
    <body>
        <p>Это первый параграф</p>
        <p>Это второй параграф</p>
    </body>
</html>

CSS, стили, пример CSS вложенного
Внутренняя таблица стилей может использоваться, если один документ имеет уникальное оформление.

Внешний (External) CSS

В этом способе, все правила стилей содержатся в одном текстовом файле, который сохраняется с расширением .css.

Затем на этот файл ссылается HTML с помощью тега <link>. Элемент <link> располагается внутри секции заголовка (head).


<html>
    <head>
        <title>Название страницы</title>
        <link rel="stylesheet" type="text/css" href="example.css">
    </head>
    <body>
        <p>Это первый параграф</p>
        <p>Это второй параграф</p>
        <p>Это третий параграф</p>
    </body>
</html>


p {
  color: white;
  background-color: gray;
}

CSS, стили, пример CSS внешнего
И относительный и абсолютный пути могут быть использованы для определения href для CSS файла. В нашем примере путь относительный, так как CSS файл находится в одной директории с HTML файлом.

Проверка знаний

Выберите атрибут, который организует встроенную стилизацию:



В какие теги заключаются все элементы, отвечающие за визуальное и структурное оформление документа?



Итого баллов:

Дополнительные сведения
Данные уроки мы - модераторы Web-infinity стараемся делать простыми в понимании, интересными, полезными и эффективными особенно для начинающих. Если у вас появились вопросы на каком либо этапе, уроке, то вы можете обратиться в поддержку по адресу web-infinity-team@mail.ru