⚡️ 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»?
Задавать вопрос
спросил
Изменено 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 (с использованием )
Это простой способ объявить CSS.Но его следует использовать для небольших кодов. Когда вы хотите перезаписать атрибут основной таблицы стилей.
Метод 2 (с использованием )
Первое преимущество этого метода заключается в том,что у нас есть стиль во внешнем файле . А это значит,что мы можем использовать его неоднократно. Но на этом преимущества не заканчиваются. Вы можете указать своему браузеру сохранить файл в кеше. Что сокращает время загрузки страницы.
Что лучше?
По-моему Метод 2 .
Использование для кода CSS в вашем файле HTML и
для включения внешнего файла CSS.
0
Первый вариант предназначен для включения определений css в ваш html-файл. Второй случай помещает определения css в style.