Что хотел узнать web-мастер про css, да стеснялся спросить.

     Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис.

Селектор { свойство1: значение; свойство2: значение; ... }

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

     CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере показаны две разновидности оформления селекторов и их правил.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование стилей</title>
<style type="text/css">
h1 { color: #a6780a; font-weight: normal; }

H2 {
color: olive;
border-bottom: 2px solid black
}
</style>
</head>
<body>

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>

</body>
</html>

     В данном примере свойства селектора H1 записаны в одну строку, а для селектора H2 каждый параметр находится на отдельной строке. Во втором случае легче отыскивать параметры и править их по необходимости, но при этом незначительно возрастает объем данных за счет активного использования пробелов и переносов строк.

     Имена селекторов обязательно должны начинаться с латинского символа (a-z, A-Z) и могут содержать в себе цифры,например — terminator4, Titanic2, extra.

Изменение важности элементов с помощью !important

      И авторы сайта и его посетители могут использовать свою собственную таблицу стилей. Авторы добавляют стили для управления видом элементов и для верстки веб-страниц, а посетители — чтобы поменять по своему желанию некоторые параметры. Например, они могут сменить размер шрифта в ту или иную сторону, сделав его меньше или больше, а также указать свои любимые цвета для заголовков. CSS позволяет повышать важность стилевого параметра за счет добавления ключевого слова !important. Синтаксис его применения следующий.

Селектор { свойство: значение !important }

      Ключевое слово !important пишется через пробел после значения стилевого атрибута.

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

  • !important добавлен в авторский стиль — будет применяться стиль автора.
  • !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
  • !important нет как в авторском стиле, так и стиле пользователя - будет применяться стиль автора.
  • !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Итог от применения !important зависит от того, где он присутствует и в общем случае показан в таблице

Стиль автора Стиль пользователя Результат
BODY {
/* Серый цвет текста, повышенная важность */
color: silver !important;

/* Размер текста 8 пунктов, повышенная важность */
font-size: 8pt !important
}

BODY {
/* Черный цвет текста */
color: #000;

/* Размер текста 12 пунктов */
font-size: 12pt
}

Будут использоваться все параметры автора. Текст станет отображаться как серый, размер 8 пунктов.
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt;
}

BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов */
font-size: 12pt
}

Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt;
}

BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов, повышенная важность */
font-size: 12pt !important
}

Будут использоваться все параметры пользователя. Текст станет отображаться как черный, размер 12 пунктов.
BODY {
/* Серый цвет текста */
color: silver;

/* Размер текста 8 пунктов */
font-size: 8pt;
}

BODY {
/* Черный цвет текста */
color: #000;

/* Размер текста 12 пунктов */
font-size: 12pt
}

Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
BODY {
/* Серый цвет текста, повышенная важность */
color: silver !important;

/* Размер текста 8 пунктов, повышенная важность */
font-size: 8pt !important;
}

BODY {
/* Черный цвет текста, повышенная важность */
color: #000 !important;

/* Размер текста 12 пунктов, повышенная важность */
font-size: 12pt !important
}

При добавлении !important в ту и другую таблицу приоритет в этом случае имеет стиль пользователя. В результате текст станет черным, а размер его увеличится до 12 пунктов.

     В разных браузерах по своему реализован механизм подключения пользовательского стиля. Например, в браузере Internet Explorer для этого требуется выбрать пункт меню Сервис > Свойства обозревателя..., после чего на вкладке Общие нажать на кнопку Оформление и задать путь к локальному файлу.

     В браузере Firefox управление пользовательскими стилями возложено на специальное расширение Web Developer. С помощью его удобной панели инструментов можно легко установить пользовательский файл со стилем через пункт CSS > Add User Style Sheet...

     В CSS1 при одновременном использовании !important у автора и пользователя преимущество имеет авторский стиль. В CSS2 сделано наоборот и применяется уже пользовательский стиль, как показано в таблице выше.

     В примере ниже показано применение !important совместно со стилевыми атрибутами.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Важность элементов</title>
<style type="text/css">
BODY {
font-family: Georgia, Times New Roman, Times, serif; /* Семейство шрифта */
font-size: 90%; /* Размер шрифта */
color: yellow !important; /* Цвет текста */
background: navy !important /* Цвет фона */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>

     В данном примере с помощью стилей задается цвет текста и фона для всей веб-страницы, причем повышенной важности.

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

Проверка тИЦ и PR online! PR CY счетчик
Hosted by uCoz