English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной учебник HTML

Медиа HTML

Руководство HTML

Основные уроки HTML5

API HTML5

Медиа HTML5

HTML и CSS

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

Больше примеров онлайн

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

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

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

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

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

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

  • Встроенные стили - использование свойства "style" в элементе HTML

  • Внутренний таблица стилей - использование элемента <style> в区域内 <head> HTML документа для включения CSS

  • Внешняя ссылка - использование внешнего файла CSS

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

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

Вы можете узнать это через Уроки CSS Узнайте больше о CSS.

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

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

<p style="color:blue;margin-left:20px;">Это абзац.</p>

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

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

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

Пример

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Основной курс (oldtoolbag.com)</title> 
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">Это заголовок</h2>
<p style="background-color:green;">Это абзац.</p>
</body>
</html>
Проверьте это, ‹/

Ранние атрибуты фона (background-color) определялись атрибутом bgcolor.

Проверьте это, ‹/›

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

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

Используйте атрибут text-align (выравнивание текста) дляspecification horizontal and vertical alignment of text:

Онлайн пример

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Основной курс (oldtoolbag.com)</title> 
</head>
<body>
<h1 style="text-align:center;">Центрированный заголовок</h1>
<p>Это абзац.</p>
</body>
</html>
Проверьте это, ‹/›

Атрибут выравнивания текста text-align заменил старый тег <center>.

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

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

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

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

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

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

Теги стиля HTML

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

Убранные теги и атрибуты

В HTML 4, теги и атрибуты, поддерживающие определение стиля элементов HTML, были弃用. Эти теги не будут поддерживаться в новых версиях тегов HTML.

Не рекомендуется использовать теги: <font>, <center>, <strike>

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