1. Home
  2. Создание CSS

Лучшее руководство по Создание CSS в 2024 году. В этом руководстве вы можете изучить Как вставить таблицу стилей,Внешний таблица стилей,Внутренний таблица стилей,Инлайн стиль,Несколько стилей,Несколько стилей наслаиваются один,

Создание CSS

При чтении таблицы стилей, браузер будет основан на его форматированный HTML-документа.

Как вставить таблицу стилей

Вставьте таблицу стилей тремя способами:

  • Внешний таблица стилей
  • Внутренний таблица стилей
  • Инлайн стиль

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

Когда стиль применяется ко многим страницам требуется, внешний таблица стилей будет идеальным выбором. В случае внешней таблицы стилей, вы можете изменить файл, чтобы изменить внешний вид всего сайта. Каждая страница использует тег <LINK> для ссылки на таблицу стилей. <Link> тег в (документ) Руководитель:

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

Браузер будет читать из декларации mystyle.css стиля файла в соответствии с ним для форматирования документа.

Внешний таблица стилей может быть отредактирован в любом текстовом редакторе. Файлы не могут содержать HTML-теги. Таблица стилей должен быть сохранен с расширением .css. Ниже приведен пример файла таблицы стилей:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("ru/images/back40.gif");}

замечание Не оставляйте пробелы между значением свойства и единицы измерения. Если вы используете "Левое: 20 пикселей" вместо "Левое: 20px", он действителен только в IE 6, но он не работает в Mozilla / Firefox или Netscape в.

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

Когда один документ требует особый стиль, внутренний лист стиль должен быть использован. Вы можете использовать тег <STYLE> в заголовке документа, чтобы определить внутреннюю таблицу стилей, как это:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Инлайн стиль

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

Чтобы использовать встроенные стили, вам нужно использовать атрибут стиля (стиль) в соответствующем теге. Атрибут Style может содержать любое свойство CSS. Этот пример показывает, как изменить цвет абзаца и левого края:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Несколько стилей

Если какие-то атрибуты определяются один и тот же селектор в разных таблицах стилей, то значение свойства из более конкретной таблицы стилей по наследству.

Например, внешний таблица стилей имеет три свойства для h3 селектора:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Внутренняя таблица стилей имеет два свойства для h3 селектора:

h3
{
text-align:right;
font-size:20pt;
}

Если стиль имеет внутренние таблицы стилей и внешние таблицы стилей связывают эту страницу в то же время, то h3 получаете:

color:red;
text-align:right;
font-size:20pt;

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

Несколько стилей наслаиваются один

Таблицы стилей позволяют информацию о стиле, указанный различными способами. Стили могут быть заданы в одном HTML элемента, первый элемент страницы HTML, или во внешнем файле CSS. Даже несколько внешних таблиц стилей можно ссылаться внутри одного HTML-документа.

Stacking заказ

Когда тот же элемент HTML определяется более одного стиля, какой стиль будет использовать его?

В общем, все стили будут сложены в новом виртуальном стилей в соответствии со следующими правилами, где число 4 имеет наивысший приоритет.

  1. браузер по умолчанию
  2. Внешний таблица стилей
  3. Внутренняя таблица стилей (в <HEAD> тег внутри)
  4. Строчный стиль (HTML элементы внутри)

Таким образом, встроенный стиль (внутри элемента HTML) имеет наивысший приоритет, что означает, что он имеет приоритет над следующей декларации стиля: этикетка заявление стиль, внешний стиль заявление таблица стилей, или стиль заявление браузера (значение по умолчанию).

замечаниеСовет: Если вы используете внешний файл стилей в <голове> также определяется стиль, таблица стилей будет заменить внешние файлы внутреннего стиля.

Горячие учебники

Contact US

Создание CSS
10/30