HTML Стиль - CSS

CSS (Cascading Style Sheets) используется для стилизации тегов HTML-элементов.

Смотрите! Стили и цвета

Работа с текстом
Цвета,  Блоки
и многое другое...


实例

Попробуйте - Пример


Этот пример демонстрирует, как форматировать HTML, используя информацию о стилях, добавленную в раздел <head>.

Этот пример демонстрирует, как создать ссылку без подчёркивания с помощью атрибута style.
Как использовать атрибут style для создания ссылки без подчёркивания.


Этот пример демонстрирует, какСсылка на внешнюю таблицу стилей

Как использовать CSS

CSS был введён в HTML 4 для лучшего отображения HTML-элементов.

CSS можно добавить в HTML следующими способами:

  • Встроенные стили — использование "style" в HTML-элементахАтрибуты
  • Внутренняя таблица стилей — использование <style> в разделе <head> HTML-документаЭлементыЧтобы включить CSS
  • Внешняя ссылка — использование внешнего CSS-файлаФайл

Лучший способ — использовать внешнюю ссылку на внешний CSS-файл.

В наших руководствах по HTML на этом сайте мы используем встроенные стили CSS для представления примеров; это упрощённый пример, который облегчает редактирование и запуск примеров онлайн.

Вы можете узнать больше о CSS из следующего:Учебник по CSSУзнайте больше о CSS.

Встроенные стили

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

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

Чтобы узнать больше о стилях, посетите учебник по CSS.

Пример стиля HTML — цвет фона

Свойство цвета фона (background-color) определяет цвет фона элемента:

Пример

<body style="background-color:yellow;"> <h2 style="background-color:red;">Это заголовок</h2> <p style="background-color:green;">Это абзац.</p> </body>

Попробуйте »

Свойство цвета фона (background-color) задавалось с помощью атрибута bgcolor в старом HTML.

Попробуйте: старый HTML для установки фона

Пример стиля HTML — шрифт, цвет шрифта, размер шрифта

Мы можем использовать свойства font-family (шрифт), color (цвет) и font-size (размер шрифта), чтобы задать стиль текста:

Пример

<h1 style="font-family:verdana;">Заголовок</h1> <p style="font-family:arial;color:red;font-size:20px;">Абзац.</p>

Попробуйте »

Теперь обычно мы используем свойства font-family (шрифт), color (цвет) и font-size (размер шрифта), чтобы задать стиль текста, а не тег <font>.

Пример стиля HTML — выравнивание текста

Используйте свойство text-align (выравнивание текста), чтобы задать горизонтальное и вертикальное выравнивание текста:

Пример

<h1 style="text-align:center;">Заголовок по центру</h1> <p>Это абзац.</p>

Попробуйте »

Свойство text-align заменило старый тег <center>.

Попробуйте

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

Когда одному файлу нужны особые стили, можно использовать внутреннюю таблицу стилей. Внутреннюю таблицу стилей можно определить в разделе <head> с помощью тега <style>:

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

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

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

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

HTML-тег style

Тег Описание
<style> Определить стиль текста
<link> Определить адрес ссылки на ресурс

Устаревшие теги и атрибуты

В HTML 4 теги и атрибуты, использовавшиеся для определения стиля HTML-элементов, были признаны устаревшими. Эти теги больше не будут поддерживать новые версии HTML-тегов.

Нерекомендуемые теги: <font>, <center>, <strike>

Нерекомендуемые атрибуты: color и bgcolor.

Другие расширения