Вариант 2 — Внешний CSS

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

Тогда как, сами таблицы стилей располагаются в файле style.css. К примеру:

.xleftcol < float: left; width: 33%; background:#809900; >.xmiddlecol

Преимущества внешних CSS:

• Меньший размер страницы HTML и более чистая структура файла.
• Быстрая скорость загрузки.
• Для разных страниц может быть использован один и тот же .css файл.

Недостатки внешних CSS:

• Страница может некорректно отображаться до полной загрузки внешнего CSS.

Вариант 3 — Внутренний CSS

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

   
Руководство Hostinger
 
Здесь что-нибудь полезное.
   

Преимущества внутреннего CSS:

• Полезен для проверки и предпросмотра изменений.
• Полезен для быстрых исправлений.
• Меньше HTTP запросов.

Недостатки внутреннего CSS:

• Внутренние CSS должны быть применены для каждого элемента в отдельности.

Заключение

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

Стилизация HTML-элемента

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

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

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

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

В данном руководстве мы поговорим о стилизации HTML элемента разделения контента – элемента – с помощью CSS. Элемент можно использовать для структурирования макета и разбиения страницы на отдельные компоненты для создания индивидуального стиля. Сможете понять, как создавать и стилизовать элементы , а также научитесь добавлять и стилизовать другие элементы внутри контейнера . Навык работы с элементом как с инструментом компоновки пригодится вам позже, когда вы начнете создавать свой тестовый сайт.

Требования

Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Краткий обзор элемента

Давайте посмотрим на практике, как работает элемент . Сотрите все, что есть в файле styles.css (если вы добавляли в него код из предыдущих мануалов серии). Затем добавьте следующее CSS правило для селектора тега :

div background-color: green;
height: 100px;
width: 100px;
>

Сохраните файл styles.css. Затем откройте файл index.html, сотрите все, что там есть (кроме первой строки кода: ), и добавьте следующий фрагмент:

Обратите внимание, элемент состоит из открывающего и закрывающего тега, но не требует какого-либо контента.

Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).

На вашей веб-странице должно появиться зеленое поле шириной 100 пикселей и высотой 100 пикселей, согласно CSS-правилу:

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

Чтобы попрактиковаться в создании классов для , удалите из файла styles.css только что созданное CSS-правило и добавьте следующие три новых набора правил:

.div-1 background-color: blue;
height: 50px;
width: 50px;
>
.div-2 background-color: red;
height: 100px;
width: 100px;
>
.div-3 background-color: yellow;
height: 200px;
width: 200px;
>

В этом фрагменте содержатся правила стиля для трех разных классов: div-1, div-2 и div-3. Обратите внимание, имена селекторов классов начинаются с точки.

Сохраните файл styles.css и перейдите в файл index.html. Сотрите только что созданный элемент и добавьте три новых элемента, применив к каждому из них класс, который соответствует селекторам CSS из файла styles.css:

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

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

Добавление и стилизация текста в контейнере

Вы можете поместить в контейнер текст, вставив его между открывающим и закрывающим тегами . Попробуйте добавить текст в каждый из трех элементов в файле index.html:

Сохраните файл и загрузите его в браузере. Теперь в каждом из контейнеров должен отображаться текст:

В текст внутри элементов можно добавить дополнительные HTML-элементы. Для примера попробуйте добавить к вашему тексту внутри тегов в файле index.html теги заголовков (от до ):

Сохраните файл и перезагрузите его в браузере. Текст внутри контейнеров теперь будет оформлен в соответствии со свойствами тегов:

Blue

Red

Yellow

Обратите внимание, элементы также немного изменили свои позиции. Это смещение вызвано стандартными свойствами полей для элементов с тегами по . Больше о полях вы узнаете в следующем мануале, посвященном блоковой модели CSS (пока что мы проигнорируем эти поля).

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

.div-1 background-color: blue;
height: 50px;
width: 50px;
font-size: 10px;
color: white;
>
.div-2 background-color: red;
height: 100px;
width: 100px;
font-size: 20px;
color: yellow;
>
.div-3 background-color: yellow;
height: 200px;
width: 200px;
font-size:30px;
color: blue;
>

Сохраните файл styles.css и перезагрузите index.html в браузере. Текст внутри контейнеров теперь будет оформлен в соответствии с CSS правилами в файле styles.css:

Заключение

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

Как добавить стиль css в html

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

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

Например, следующая таблица стилей CSS (хранящаяся в файле «special.css») зеленый устанавливает цвет текста абзаца и окружает его сплошной красной рамкой:

Авторы могут связывать таблицы стилей с исходным документом HTML с помощью элемента LINK :

HTML 4.0 обеспечивает поддержку следующих функций таблиц стилей: Гибкое размещение информации о стиле Помещение таблиц стилей в отдельные файлы упрощает их повторное использование. Иногда полезно включать инструкции по представлению в документ, к которому они применяются, в начало документа или в атрибуты элементов в теле документа. Для упрощения управления стилем сайта в данной спецификации описывается использование заголовков HTTP для установки таблиц стилей, применяемых к документу. Независимость от языков таблиц стилей Данная спецификация не привязывает HTML к конкретному языку таблиц стилей. Это позволяет использовать широкий диапазон таких языков, например, простые языки для большинства пользователей и более сложные для более специализированных случаев. Во всех примерах, приведенных ниже, используется язык CSS (Каскадные таблицы стилей) [CSS1], но можно использовать и другие языки. Каскады Эта возможность обеспечивается некоторыми языками таблиц стилей, такими как CSS, для объединения информации о стиле из нескольких источников. Это может быть, например, корпоративные положения о стиле, стили, общие для группы документов, а также стили, специфичные для одного документа. С использованием раздельного хранения эти таблицы стилей могут использоваться повторно, что упрощает работу авторов и повышает эффективность сетевого кэширования. Каскад определяет упорядоченную последовательность таблиц стилей, в которой правила более поздних таблиц имеют приоритет над более ранними. Не все языки таблиц стилей поддерживают каскады. Зависимость от устройств HTML позволяет авторам разрабатывать документы независимо от устройств. Это позволяет пользователям обращаться к Web-страницам с использованием различных устройств, например, графических дисплеев для компьютеров под управлением Windows, Macintosh OS и X11, телевизионных устройств, специальным образом адаптированных телефонов и портативных устройств на базе PDA, речевых браузеров и тактильных устройств на базе азбуки Бройля.

Таблицы стилей, напротив, применяются к конкретным устройствам или группам устройств. Таблица стилей, предназначенная для экрана, может применяться при печати, но бесполезна для речевых браузеров. Данная спецификация позволяет Вам определить широкие категории устройств, к которым применяется конкретная таблица стилей. Это позволяет агентам пользователей избежать загрузки ненужных таблиц стилей. Языки таблиц стилей могут включать функции описания зависимости от устройств в одной таблице. Альтернативные стили Авторы могут предлагать читателям несколько способов просмотра документа. Например, таблица стилей для представления компактных документов с мелким шрифтом, или таблица, задающая крупные шрифты для удобства чтения. Данная спецификация позволяет авторам указать предпочитаемую таблицу стилей, а также альтернативные таблицы для определенных пользователей или устройств. Агенты пользователей должны предоставлять пользователям возможность выбора одной из альтернативных таблиц или отключать все таблицы стилей. Вопросы производительности Некоторые пользователи высказывали сомнения относительно скорости работы таблиц стилей. Например, загрузка внешней таблицы стилей может привести к задержке общего представления материала для пользователя. Подобные ситуации возникают и в том случае, если в заголовок документа включен длинный набор правил относительно стиля.

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

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

14.2 Как добавить стиль в HTML

Примечание. В примере таблицы стилей по умолчанию для HTML 4.0, включенном в [CSS2], выражена общепринятая информация о стиле для каждого элемента. Авторы могут воспользоваться этим ресурсом.

Документы в формате HTML могут содержать правила таблиц стилей непосредственно или могут импортировать таблицы стилей.

В HTML можно использовать все языки таблиц стилей. Простого языка таблиц стилей может быть достаточно для большинства пользователей, в то время как другие языки могут подходить для более специализированных задач. В примерах в данной спецификации используется язык «Каскадные таблицы стилей» ([CSS1]), сокращенно CSS.

Синтаксис данных стиля зависит от языка таблицы стилей.

14.2.1 Установка языка таблицы стилей по умолчанию

Авторы должны указывать язык таблицы стилей для информации о стиле, связанной с документом HTML.

Для установки языка таблицы стилей для документа по умолчанию следует использовать элемент META . Например, чтобы установить по умолчанию язык CSS, следует поместить в раздел HEAD следующее объявление:

зык таблиц стилей по умолчанию можно также установить с помощью заголовков HTTP. Показанное выше объявление с использованием тэга META эквивалентно заголовку HTTP:

1. Если в объявлении META задается «Content-Style-Type», язык таблиц стилей определяет последнее объявление в потоке символов.
2. В противном случае, если «Content-Style-Type» задается в заголовках HTTP, язык таблиц стилей определяет последний заголовок в потоке символов.
3. В противном случае по умолчанию используется язык «text/css».

Документы, включающие элементы, в которых устанавливается атрибут style , но не определяется язык таблиц стилей по умолчанию, являются некорректными. Средства разработки должна генерировать информацию о языке таблиц стилей по умолчанию (обычно с помощью объявлений META ), чтобы агенты пользователей не полагались на язык по умолчанию «text/css».

14.2.2 Встроенная информация о стиле

Определения атрибутов style = style [CN] Этот атрибут определяет информацию о стиле текущего элемента.

style Атрибут style определяет информацию о стиле одного элемента. Язык таблиц стилей встроенных правил стиля определяется языком таблиц стилей по умолчанию. Синтаксис данных стиля зависит от языка таблиц стилей.

В данном примере устанавливается информация о цвете и размере шрифта текста определенного абзаца.

В CSS объявления свойств имеют форму «имя : значение» и разделяются точкой с запятой.

Атрибут style может использоваться для применения определенного стиля к отдельному элементу HTML. Если стиль повторно используется для нескольких элементов, авторы должны использовать элемент STYLE для перегруппировки этой информации. Для оптимальной гибкости авторам следует определять стили во внешних таблицах стилей.

14.2.3 Информация о стиле в заголовке: элемент STYLE

Начальный тэг: обязателен, Конечный тэг: обязателен

Определения атрибутов type = content-type [CI] Этот атрибут определяет язык таблиц стилей для содержимого элемента и имеет приоритет над языком таблиц стилей, ипользуемы. Язык таблиц стилей указывается как тип содержимого (например, «text/css»). Авторы должны указать значение для этого атрибута; для него нет значения по умолчанию. media = дескрипторы устройств [CI] Этот атрибут задает целевое устройство для информации о стиле. Это может быть один дескриптор устройства или список дескрипторов, разделенных запятыми. По умолчанию устанавливается значение «screen».

атрибуты, определяемые в другом месте

Элемент STYLE позволяет авторам помещать правила таблиц стилей в раздел head документа. В HTML допустимо любое число элементов STYLE в разделе HEAD .

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

Синтаксис данных стиля зависит от языка таблицы стилей.

• Всех экземпляров определенного элемента языка HTML (например, для всех элементов P , всех элементов H1 и т.д.)
• Всех экземпляров элемента HTML, принадлежащих определенному классу (т.е. для атрибута class которых установлено определенное значение).
• Отдельных экземпляров элемента языка HTML (т.е. для атрибута id которого установлено определенное значение).

Правила приоритета и наследования правил таблиц стилей зависят от языка таблиц.

Следующее объявление CSS STYLE приводит к появлению границы вокруг всех элементов H1 в документе и центрированию их на странице.

Чтобы указать, что эта информация о стиле должна применяться только к элементам H1 определенного класса, можно изменить определение следующим образом:

И, наконец, для ограничения области действия информации о стиле единственным экземпляром элемента H1 , установите атрибут id :

Хотя информация о стиле может устанавливаться почти для всех элементов HTML, два элемента, DIV и SPAN , особенно полезны тем, что они не накладывают никакой семантики представления (кроме block-level vs. inline). Вместе с таблицами стилей эти элементы позволяют пользователям неограниченно расширять язык HTML, особенно при использовании атрибутов class и id .

В следующем примере элемент SPAN используется для установки малых прописных букв для стиля шрифта первых нескольких слов абзаца.

В следующем примере мы используем элемент DIV и атрибут class для установки выравнивания текста для ряда абзацев, составляющих введение в научную статью. Информация о стиле может повторно использоваться для других разделов введения путем установки атрибута class в любом месте документа.

14.2.4 Типы устройств

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

Объявления в следующем примере применяются к элементам H1 . При показе на проекторе во время встречи все экземпляры будут отображаться синим цветом. При печати они будут отцентрированы.

Этот пример добавляет звуковые эффекты для устройства речевого вывода:

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

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

Авторы могут отделять таблицы стилей от документов HTML. Это дает следующие преимущества:

• Авторы и менеджеры Web-сайтов могут совместно использовать таблицы стилей в ряде документов (и сайтов).
• Авторы могут изменять таблицы стилей без изменения документа.
• Агенты пользователей могут загружать таблицы стилей выборочно (в зависимости от описаний устройств).

14.3.1 Предпочитаемые и альтернативные таблицы стилей

HTML позволяет авторам связывать с документом любое число внешних таблиц стилей. Язык таблиц стилей определяет взаимодействие нескольких внешних таблиц стилей (например, правила «каскадов» CSS).

Авторы могут указать ряд взаимоисключающих таблиц стилей, называемых . Пользователи могут выбирать таблицы, которые им больше нравятся. Например, автор может указать один стиль для небольших экранов, другой — для слабовидящих пользователей (например, с использованием крупного шрифта). Агенты пользователей должны предоставлять пользователям возможности выбора одной из альтернативных таблиц.

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

Авторы могут сгруппировать несколько альтернативных таблиц стилей (включая предпочитаемые автором) под одним . Если пользователь выбирает именованный стиль, агент пользователя должен применять все таблицы стилей с этим именем. Агенты пользователей не должны применять альтернативные таблицы стилей с другим именем стиля. Как присвоить имя группе стилей, описано в разделе об определении внешних таблиц стилей.

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

Агенты пользователей также должны позволять пользователям полностью отключать таблицы стилей автора; в этом случае агент пользователя не должен применять ни одну из таблиц стилей.

• Установите в атрибуте href местоположение файла таблицы стилей. Значением атрибута href должен быть URI.
• Установите для атрибута type значение, указывающее язык связанного ресурса (таблицы стилей). Это позволяет агентам пользователей не загружать таблицы стилей, использующие неподдерживаемые языки.
• Укажите, является ли таблицы стилей постоянно, предпочитаемой или альтернативной:
  • Чтобы таблицы была постоянной, установите для атрибута rel значение «stylesheet», и не устанавливайте атрибут title .
  • Чтобы таблица была предпочитаемой, установите для атрибута rel значение «stylesheet», и дайте таблице имя с помощью атрибута title .
  • Чтобы указать альтернативную таблицу, установите для атрибута rel значение «alternate stylesheet» а дайте таблице имя с помощью атрибута title .

  Агенты пользователей должны обеспечивать пользователям средства просмотра и выбора таблицы стилей из списка альтернатив. Для атрибута title рекомендуется устанавливать значение, которое будет представлять эту таблицу в списке.

  В этом примере мы сначала определяем постоянную таблицу стилей, находящуюся в файле mystyle.css:

  Установка атрибута title назначает ее предпочитаемой автором таблицей:

  Добавление ключевого слова «alternate» а атрибут rel сделает ее альтернативной таблицей стилей:

  Подробнее о внешних таблицах стилей Вы можете узнать в разделе о ссылках и внешних таблицах стилей.

  Авторы также могут использовать для установки предпочитаемой таблицы стилей элемент META . Например, чтобы установить предпочитаемую таблицу стилей «compact» (см. предыдущий пример), авторы могут включить в элемент HEAD следующую строку:

  Предпочитаемую таблицу стилей можно также указать с помощью заголовков HTTP. Объявление META выше эквивалентно заголовку HTTP:

  Если предпочитаемая таблица стилей указывается двумя или более элементами META или заголовками HTTP, преимущество имеет последнее объявление. Считается, что заголовки HTTP обрабатываются раньше, чем объявления HEAD .

  Если предпочитаемая таблица стилей задается двумя или более элементами LINK , преимущество имеет первая.

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

  14.4 Каскады таблиц стилей

  языки таблиц стилей, такие как CSS, позволяют использовать информацию о стиле из нескольких источников. Однако не все языки таблиц стилей поддерживают каскады. Чтобы определить каскад, авторы указывают последовательность элементов LINK и/или STYLE . Каскад информации таблиц стилей производится в порядке указания элементов в разделе HEAD .

  Примечание. В данной спецификации не описано каскадирование таблиц стилей разных языков. Авторам следует избегать смешивания языков.

  В следующем примере мы определяем две альтернативные таблицы стилей с именем «compact». Если пользователь выбирает стиль «compact», агент пользователя должен применять обе внешние таблицы, а также постоянную таблицу «common.css». Если пользователь выбирает стиль «big print», применяться будут только альтернативная таблица «bigprint.css» и постоянная таблица «common.css».

  Вот пример каскада, в котором задействованы оба элемента — LINK и STYLE .

  14.4.1 Каскады, зависящие от устройств

  Каскад может включать таблицы стилей, применяемые к различным устройствам. Элементы LINK и STYLE могут использоваться с атрибутом media . Агент пользователя несет ответственность за отфильтровывание таблиц стилей, не применяющихся к текущему устройству.

  В следующем примере мы определяем каскад, в котором таблица стилей «corporate» представляется в нескольких версиях: одна для печати, другая для экранного представления, третья для речевых браузеров (полезная, например, при чтении электронной почты в машине). Таблица «techreport» применяется ко всем устройствам. Цветная rule, определяемая элементом STYLE , используется для печати и для экрана, но не для звукового представления.

  14.4.2 Наследование и каскады

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

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

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

  14.5 Как скрыть информацию о стиле от агентов пользователей

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

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

  14.6 Привязка таблиц стилей с помощью заголовков HTTP

  Менеджеры Web-серверов могут сконфигурировать сервер таким образом, чтобы таблица стилей применялась к группе страниц. Заголовок HTTP Link, описанный в [RFC2068], раздел 19.6.1.2, действует так же, как элемент LINK , с теми же атрибутами и значениями. Несколько заголовков Link соответствуют нескольким элементам LINK в том же порядке. Например,

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

  В следующем примере стиль «compact» применяется по умолчанию, поскольку в нем отсутствует ключевое слово «alternate» для атрибута rel .

  Это работает и при отправке документов HTML по электронной почте. Некоторые агенты электронной почты могут изменять порядок заголовков [RFC822]. Чтобы защитить стиль от изменения порядка каскадов для таблиц, задаваемых заголовками Link, авторы могут использовать объединение заголовков для объединения нескольких экземпляров одного и того же поля заголовка. Кавычки необходимы только в случае, если значения атрибутов включают пробелы. Используйте SGML entities для ссылок на символы, недопустимые в заголовках HTTP или электронной почты или символов, которые могут быть изменены при передаче через шлюзы.

  Элементы LINK и META , implied заголовками HTTP, определяются как встреченные раньше явного элемента LINK and META а разделе HEAD документа.

  Похожие публикации:

  1. Как подключить sonoff basic
  2. Как подключить наушники mi true wireless earbuds basic 2 к ноутбуку
  3. Как подключить шрифт к сайту css google fonts
  4. Как подчеркнуть текст в html css
  Читать:

  Как вставить формулу в презентацию powerpoint