HTML => Использование HTML с CSS

Вступление

CSS предоставляет стили для элементов HTML на странице. Встраиваемый стиль включает использование атрибута стиля в тегах и сильно обескуражен. Внутренние таблицы стилей используют <style> и используются для объявления правил для направленных частей страницы. Внешние таблицы стилей можно использовать с помощью <link> который берет внешний файл CSS и применяет правила к документу. В этом разделе рассматривается использование всех трех методов вложения.

Синтаксис

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<style></style>

Использование внешней таблицы стилей

Используйте link атрибут в документе head :

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

Вы также можете использовать таблицы стилей, предоставляемые с веб-сайтов через сеть доставки контента, или CDN для краткости. (например, Bootstrap):

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

Как правило, вы можете найти поддержку CDN для фреймворка на своем веб-сайте.

Внутренняя таблица стилей

Вы также можете включать элементы CSS внутри, используя <style> :

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>  
</head>

В программу также можно включить несколько внутренних таблиц стилей.

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>

    <style type="text/css">
        p {
           background-color: blue;
        }
    </style>  
</head>

Стиль Inline

Вы можете создать определенный элемент, используя атрибут style :

<span style="color: red">This text will appear in red.</span>

Примечание. Старайтесь избегать этого - точка CSS заключается в том, чтобы отделить контент от презентации.

Несколько таблиц стилей

Можно загрузить несколько таблиц стилей:

<head>
    <link rel="stylesheet" type="text/css" href="general.css">
    <link rel="stylesheet" type="text/css" href="specific.css">
</head>

Обратите внимание, что более поздние файлы и декларации будут отменять предыдущие . Поэтому, если general.css содержит:

body {
    background-color: red;
}

и specific.css содержит:

body { 
    background-color: blue;
}

если оба используются, фон документа будет синим.

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

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

Поиск…