CSS предоставляет стили для элементов HTML на странице.
Встраиваемый стиль, использующий атрибут style
в тегах элементов, не рекомендуется.
Внутренние таблицы стилей используют тег <style>
и применяется для объявления правил конкретной страницы.
Внешние таблицы стилей можно использовать с помощью тега <link>
, который берет внешний файл CSS и применяет правила к документу. В этом разделе рассматривается использование всех трех методов подключения.
Используйте атрибут link
в заголовке документа:
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
Вы также можете использовать таблицы стилей, предоставляемые с веб-сайтов через CDN (Cеть доставки содержимого). Например, 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 внутри HTML, используя тег <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>
Вы можете указать определенный стиль для элемента, используя атрибут style
:
<span style="color: 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;
}
если используются оба файла, фон документа будет синим.