Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
<STYLE>...</STYLE>

Внутри элемента STYLE допускается любое количество CSS правил, которые могут относится как к определенным элементам, так и к элементам помеченных с помощью атрибута class или id.

Например, для того чтобы все элементы заголовки первого уровня (H1) имели рамку, необходимо указать следующее CSS правило:

  1.<HEAD>
  2. <STYLE type="text/css">
  3. H1 {border-width: 1; border: solid; text-align: center}
  4. </STYLE>
  5.</HEAD>

Для того чтобы не все элементы заголовки первого уровня имели данную рамку, а только те, которые имеют определенный атрибут class, укажите следующее CSS правило:

  1.<HEAD>
  2. <STYLE type="text/css">
  3. H1.myclass {border-width: 1; border: solid; text-align: center}
  4. </STYLE>
  5.</HEAD>
  6.<BODY>
  7. <H1 class="myclass"> This H1 is affected by our style </H1>
  8. <H1> This one is not affected by our style </H1>
  9.</BODY>
10.

Для того, чтобы не все элементы заголовки первого уровня имели данную рамку, а только те, которые имеют определенный id, укажите следующее CSS правило:

  1.<HEAD>
  2. <STYLE type="text/css">
  3. H1#myid {border-width: 1; border: solid; text-align: center}
  4. </STYLE>
  5.</HEAD>
  6.<BODY>
  7. <H1 class="myclass">
  8. Наука есть не что иное, как отображение действи¬тельности .
  9.Фрэнсис Бэкон.
10.</H1>
11. <H1 id="myid"> Воспитатель сам должен быть воспитан. Карл Маркс
12.</H1>
13. <H1> Другой элемент H1 </H1>
14.</BODY>

Элемент STYLE поддерживает атрибут media, с помощью которого допускается ограничивать использование различных CSS свойств в зависимости от различных типов выводящих устройств – для экрана, для принтера и тд. Значений атрибута media:

screen таблицы CSS предназначены для экрана монитора
print таблицы CSS предназначены для печатных страниц
braille таблицы CSS предназначены для систем чтения, созданных с помощью шрифта Брайля
speech таблицы CSS предназначены для голосовых браузеров
all таблицы CSS предназначены для всех устройств вывода

В следующем примере цвет текста элемента H1 для экрана монитора будет синим, однако, при печати цвет текста останется черным, но будет отцентрирован. Для браузеров, поддерживающих воспроизведение текста, до и после заголовка будет воспроизведены звуковые сигналы bell.aiff и dong.wav.

  1.<HEAD>
  2. <STYLE type="text/css" media="screen">
  3. H1 { color: blue}
  4. </STYLE>
  5.
  6. <STYLE type="text/css" media="screen, print">
  7. H1 { text-align: center }
  8. </STYLE>
  9.
10. <STYLE type="text/acss" media="speech">
11. H1 { cue-before: url(bell.aiff); cue-after: url(dong.wav)}
12. </STYLE>
13.</HEAD>
14.

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

  1.<HEAD>
  2.<LINK href="doc1-screen.css" rel="stylesheet"
  3. type="text/css" media="screen">
  4.<LINK href="doc1-print.css" rel="stylesheet"
  5. type="text/css" media="print">
  6.<LINK href="doc1-speech.css" rel="stylesheet"
  7. type="text/css" media="speech">
  8.</HEAD>

При использовании атрибута title элемента link современные браузеры должны предоставлять пользователю возможность выбора более комфортного стиля из нескольких стилей, достигается это путём указания разных имен стилей в атрибуте title и значении alternate атрибута rel. Данный механизм не поддерживается браузером Internet Explorer, однако поддерживается браузерами Opera и Firefox. Выбрать альтернативные стили в FireFox можно используя меню "Вид" далее вкладка "Стиль страницы" (см. рисунок ниже).

Выбор стилей в браузере FireFox

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

  1.<LINK href="mystyle.css" title="Compact" rel="stylesheet">
  2.<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet">
  3.

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

  1.<LINK href="mystyle.css" title="Compact" rel="stylesheet">
  2.<LINK href="mystyle1.css" title="Medium" rel="alternate stylesheet">
  3.<LINK href="mystyle2.css" rel="stylesheet">
  4.
  5.

Допускается применять несколько стилей с одинаковыми атрибутами title, например:

  1.<LINK rel="alternate stylesheet" title="compact" href="small-base.css">
  2.<LINK rel="alternate stylesheet" title="compact" href="small-extras.css">
  3.<LINK rel="alternate stylesheet" title="big print" href="bigprint.css">
  4.<LINK rel=stylesheet href="common.css">
  5.

В этом примере автоматически подключается файл common.css и, если пользователь выберет стиль compact, то подключит дополнительно ещё два стиля - compact, если пользователь выберет стиль big print, то будет подключен файл bigprint.css. Если пользователь ничего не выберет, то при загрузке страницы будет подключен только файл common.css.

Однако это правило легко обойти, добавив заголовок, устанавливающий первичный стиль по умолчанию:

  1.<META http-equiv="Default-Style" content="compact">
  2.

В этом случае, даже если пользователь не выберет стиль, то все равно будут загружены 3 CSS файла – compact (2 файла) и common.css.


Доступ и установка с jQuery

  • Получить коллекцию элементов STYLE: val = $("STYLE");
  • Получить класс элементаSTYLE: val = $("STYLE").attr("class");
  • Установить несколько CSS свойств HTML элементу STYLE: $("STYLE").css({"...":"..."});
  • Установить единичное CSS свойство HTML элементу STYLE: $("STYLE").css("...","...");
  • Как использовать jQuery для HTML, - читайте статью "jQuery и HTML для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org