Type text css: Атрибут type | htmlbook.ru

Leave a Comment / Css / By /

⚡️ HTML и CSS с примерами кода

Тег <style> (от англ. style — стиль) применяется для определения стилей элементов веб-страницы.

Элемент <style> необходимо использовать внутри контейнера <head>. Можно задавать несколько <style>.

Метаданные документа
  • base
  • link
  • meta
  • style
  • title

Синтаксис

<head>
  <style>
    ...;
  </style>
</head>

Закрывающий тег обязателен.

Атрибуты

media
Определяет устройство вывода, для работы с которым предназначена таблица стилей.
type
Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили.

media

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

Синтаксис

<style media="all | print | screen | speech">
  ...;
</style>

Значения

all
Все устройства.
print
Печатающее устройство вроде принтера.
screen
Экран монитора.
speech
Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда же входят речевые браузеры.

Можно устанавливать сразу несколько значений, перечисляя их через запятую.

Значение по умолчанию

  • screen

type

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

<style>.

В HTML4 этот атрибут является обязательным, в HTML5 его можно опустить.

Синтаксис

<style type="text/css">
  ...;
</style>

Значения

В качестве значения используется MIME-тип — text/css.

Значение по умолчанию

  • text/css

Спецификации

  • WHATWG HTML Living Standard
  • HTML 5
  • HTML 4.01 Specification

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>STYLE, атрибут media</title>
    <style media="screen">
      .window {
        background: #333;
        border: 1px solid red;
        font-size: 0.9em;
        color: #fc0;
        padding: 10px;
      }
    </style>
    <style media="print">
      .window {
        border: 1px solid black;
        font-family: Arial;
        font-size: 0.9em;
        color: black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div>
      Ветеринарное свидетельство входит экскурсионный
      эфемероид, но особой популярностью пользуются
      заведения подобного рода, сосредоточенные в районе
      Центральной площади и железнодорожного вокзала.
 
 
    </div>
  </body>
</html>

Ссылки

  • Тег <style> MDN (рус.)

Медиа типы в CSS

Стили могут относиться к различным типам медиа. Например, можно создать отдельный стиль для страницы, которая будет просматриваться в браузере, и другой стиль для печати страницы. Вы можете определять тип медиа в теге <link> для внешней таблицы стилей и внутри тега <style> для внедряемых таблиц стилей. 



<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen">

<style type="text/css" media="all">

/* rules */

</style>

Когда тип медиа неопределен, стили относятся ко всем медиа. Медиа типы могут принимать следующие значения:

  • all – стили для всех типов медиа
  • aural – для синтезаторов речи
  • braille – для устройств чтения символов Брайля
  • embossed – для устройств печати символов Брайля
  • handheld – для портативных устройств
  • print – для печати на принтере
  • projection – для демонстрации с помощью проекторов
  • screen – для показа на экране монитора
  • tty – для показа на терминалах и телетайпах
  • tv – для показа на экране ТВ

Код ниже демонстрирует как применить CSS для дизайна различных медиа:

Пример кода


	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Media</title>
<style type="text/css" media="screen">
	.warning {color:#ff0000}
	h2.warning {text-decoration:underline}
	p.warning {font-weight:bold}
	.printDisplay {display:none}
	</style>
	<style type="text/css" media="print">
	.warning {color:#660000;}
	h2.warning {text-decoration:underline; font-size:1in;}
	p.warning {font-weight:bold; font-size:.5in;}
	.screenDisplay {display:none}
</style>
</head>
<body>
	<h2>WARNING</h2>
	<p>Don't go there!</p>
	<p>This is the print version.</p>
	<p>This is the screen version.</p>
</body>
</html>

Указанный выше CSS-файл может быть прикреплен к любому количеству HTML-страниц. Тег <link>, расположенный в секции head каждой веб-страницы, может использоваться для прикрепления внешней каскадной таблицы стилей к любой странице вашего сайта.

Пример кода


	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>External Style Sheet</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<h2>WARNING</h2>
	<p>Don't go there!</p>
</body>
</html>

Атрибуты <link>

Атрибуты Описание
href указывает на местонахождение внешней каскадной таблицы стилей
rel атрибут должен устанавливать значение stylesheet для ссылки на таблицу стилей
type должно быть установлено text/css для ссылки на таблицу стилей

Количество внешних каскадных таблиц стилей, которые может использовать страница HTML, неограниченно. Более, того, мы можем объединять внешние таблицы стилей, используя технику внедрения стилевых таблиц.

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


	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline Styles</title>
</head>
<body>
	<p>Common Greetings</p>
	<ul>
	<li>Hello</li>
	<li>Hi</li>
	<li>Howdy</li>
</ul>
  • 2.84
  • 1
  • 2
  • 3
  • 4
  • 5

Голосов: 1537 | Просмотров: 5598

html — нужен ли в теге type=»text/css»?

Задавать вопрос

спросил

11 лет, 11 месяцев назад

Изменено 6 месяцев назад

Просмотрено 66 тысяч раз

Мне было интересно, нужно ли использовать ..> из . rel="stylesheet" помечает информацию о том, что это таблица стилей, поэтому text/css на самом деле ничего не добавляет, насколько я понимаю.

Единственным форматом таблиц стилей, используемым HTML, является CSS, так что же text/css «говорит» браузеру? Некоторые веб-сайты добавляют атрибут type="text/css" (http://www.jquery.com/), а другие — нет (http://www.youtube.com/).

Итак, в чем польза type="text/css"

в элементе , и нужно ли его включать?

  • HTML
  • CSS

3

Это не требуется для спецификации HTML5, но требуется для более старых версий HTML.

Html 4 Спецификация W3.org

http://www.w3.org/TR/html40/struct/links.html#edef-LINK http://www.w3.org/TR/html40/present/styles. html

Type означает MIME-тип таблицы стилей. Единственное поддерживаемое значение, которое я когда-либо видел, — это Text/CSS, возможно, поэтому HTML5 отказался от него. Я предполагаю, что у них было это для более ранних версий, чтобы обеспечить возможности расширения в будущем, которых никогда не было.

Используя HTML5 и не указывая тип, я до сих пор не сталкивался с проблемами совместимости даже при тестировании старых версий IE.

3

Не требуется, нет.

Интересующая вас часть HTML Living Standard — это элемент link , в котором указано:

Элемент link должен иметь либо атрибут rel , либо атрибут itemprop , но не оба одновременно.

Атрибут типа указывает тип MIME связанного ресурса. Это чисто рекомендательный характер. Значение должно быть допустимой строкой типа MIME.

Для ссылок на внешние ресурсы атрибут типа используется как подсказка для пользовательских агентов. ..

2

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

тип = тип содержимого [CI]

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

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

1

Насколько я понимаю, это позволяет указывать таблицы стилей в форматах, отличных от text/css.

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

Не относится к большинству людей, но некоторые системы (по крайней мере, Microsoft SharePoint 2013) будут использовать этот атрибут типа при определении того, как обрабатывать HTML (например, при создании файла страницы .master).

Нет, это просто тип MIME, он устарел в HTML, мы можем отказаться от его использования без какой-либо совместимости с браузером.

Разница между &

спросил

Изменено 9 лет, 7 месяцев назад

Просмотрено 34к раз

Я новичок в этом, поэтому в основном (копирование и вставка) с небольшим количеством YouTube и материалов для чтения тут и там.

Почему оба? Пожалуйста, упростите свой ответ, не вдавайтесь в технические подробности.

1

, то это примерно эквивалентно (но с некоторыми незначительными отличиями : см. Разница между @import и ссылкой в ​​CSS).

1

Метод 1 (с использованием