Type text css что это
ОСНОВЫ CSS: ЗНАТЬ ОБЯЗАТЕЛЬНО
Oсновным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.
CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. Удобно, не правда ли?
Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц. Потрясающе удобно! И еще одно, связанное с этим, преимущество – возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.
Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.
Давайте рассмотрим, как мы можем воплотить столь замечательные возможности в жизнь.
Практическое освоение CSS
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить броузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://. ») в случае, если файл стилей находится на другом сервере.
И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
Давайте рассмотрим механизм, с помощью которого стили присваиваются элементам Webстраниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:
Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTMLтега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже.
В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.
Также элементы страниц, созданные с использованием CSS, используют механизм наследования: т. е. если вы располагаете изображение внутри тега
, оформленного с помощью CSS, с отступами, так, чтобы параграф занимал только определенную часть ширины страницы, изображение также унаследует значения отступов, указанные для этого параграфа.
CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = «имя класса» или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.
Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных).
Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).
Содержащийся в ячейке текст будет отображаться согласно описанию класса.
Таким образом, вы можете присвоить описанный стиль любым текстовым элементам страниц. Обратите внимание, что при написании названия классов необходимо соблюдать регистр символов, согласно тому, как вы назвали класс в описании стиля!
Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.
Свойства элементов,
управляемых с помощью CSS
В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Но из-за того, что этот стандарт еще очень молод, в полном объеме его пока не поддерживают наиболее популярные броузеры (Netscape Navigator и Microsoft Internet Explorer). Последние версии этих броузеров могут работать с довольно большим количеством команд CSS, а вот 3-и версии или совсем не поддерживают его (Netscape Navigator 3), или поддерживают, но лишь частично (Microsoft IE 3). Более того, поскольку разработчики из этих компаний никак не могут договориться между собой, последние версии броузеров поддерживают неодинаковый набор свойств CSS. Все это делает малоприемлемым использование CSS в полном объеме, так как, при использовании CSS для форматирования элементов страницы и просмотре ее с помощью броузера версии ниже 4й, есть большая вероятность увидеть нечто такое, что вам не понравится. Поэтому будет разумнее воздержаться от использования CSS для форматирования основной структуры страниц до всеобщего перехода на последние версии броузеров. В то же время, применяя «безопасные», т. е. совместимые с максимальным количеством броузеров элементы CSS, вы можете сильно облегчить себе жизнь и сделать ваши Web-странички более привлекательными в плане шрифтового оформления, а пользователи, путешествующие по Internet с помощью устаревших броузеров, просто этого не увидят, но также они не увидят и тех кошмаров, которые появляются при использовании CSS для верстки страниц.
Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
P
Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder
B
Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)
H1
H2
H3
Стиль шрифта. Два вариатна отображения: normal ( обычный ) и italic (курсив)
H1
H2
Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)
img1
img2
img3
Параметр управления расположением блока.
Н 1
Н 2
Н3
Н4
Параметр отображения блока.
Н 1 < visibility : visible ;>Блок виден.
Н 2
Наложение одного блока на другой.
Н 1 < z-index : 2 ;>Чем больше число тем выше окажется блок.
Определяет цвет элемента
H1
Устанавливаем на фон картинку. Причем, прописываем путь не от страницы, где она будет находится, а от файла стиля.
P
background-attachment
background-position
Выравнивание изображения
P
P
P
Размножение изображения
P
P
P
P
Цвет, толщина и стиль границы. Все три значения обязательные.
P
P
P
P
Можно записать так:
P
P
P
Рамка с одной стороны:
P
Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст
Определяет выравнивание элемента.
P
H1
Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
P
Управляет интервалами между строками текста.
P
Параметр отвечающий за восприятие пробелов.
P
P
P
Размер, привязанный к стандартному размеру броузера
Итак, перейдем к изучению безопасных элементов CSS. Описание свойств элементов в CSS состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием.
Указывая абсолютные, а не относительные размеры шрифтов, вы лишаете людей, просматривающих ваши странички, возможности увеличивать или уменьшать размер шрифтов с помощью специальной кнопочки в броузере в соответствии с разрешением их дисплея и зрением. Шрифты будут отображаться только такого размера, который вы указали при написании странички.
Поэтому, если использование абсолютных размеров шрифтов не обусловлено художественным замыслом или коварным умыслом, рекомендую вам использовать для этих целей указание размеров в процентах. В этом случае размер шрифта будет меньше (больше) на указанное вами количество процентов, чем при оформлении его с помощью стандартного HTML-тега.
Устаревшие броузеры посчитают все заключенное между тегами комментариев информацией неотображенной, а новые и сообразительные броузеры определят, что это — описание стилей, и задействуют их.
Еще один из интересных вариантов применения CSS скрывается за, казалось бы, простой возможностью: вы можете указывать значения отступов вокруг объектов, как отрицательные величины! Это позволяет накладывать один слой текста на другой и получать весьма интересные и привлекательные результаты.
Добиться такого эффекта не очень сложно, давайте попробуем создать страничку с заголовком, который будет выглядеть трехмерным, но не будет использовать графику.
Создадим новый html-файл и составим описание стилей для трех объектов:
В этом описании мы присвоили (впрочем, это мог быть практически любой другой тег) размер, шрифт и начертание – в таком стиле будут отображаться все элементы страницы. Это было сделано лишь ради стремления уменьшить размер файла странички, вместо этого можно было описать эти параметры дважды: для каждого из классов z. Далее мы описываем два стиля, которые отличаются цветом и размером отступов вокруг них: нижний слой описывается стилем z1, а верхний – z2. Используя отрицательные значения отступов и подбирая нужное значение, мы добиваемся того, что верхний слой как бы наползает на предыдущий.
Откроем наш любимый Web-редактор Notepad и создадим файл с будущим названием styles.css (название файла может быть любым). Опишем в этом файле стиль параграфа
, который будет использоваться на всех страничках нашего сайта:
Внутри описания стиля для удобства форматирования вы можете использовать любое количество пробелов и переносов строк – при чтении стиля броузер просто отбросит все лишние пробелы.
В этом стиле мы задали, что параграфы
на всех страничках, которые используют это описание, будут отображаться шрифтом Times New Roman или в случае, если этот шрифт на машине не установлен, другим шрифтом, но из этого семейства (serif). Цвет шрифта мы установили черный, выравнивание – полное (по обеим сторонам).
Также мы установили для параграфа ряд значений отступов. Это было сделано со следующей целью: по умолчанию параграф в HTML отображается равным практически 95 % страницы и с интервалами между параграфами, равными 180 % межстрочного интервала. Читать такие параграфы не очень удобно, так как интервалы между ними слишком велики, а ширина параграфа слишком большая. Посмотрите на журнал, который вы сейчас держите в руках: текст сверстан в колонки для того, чтобы его было удобнее читать. В стиле параграфа, который мы создали, установлены боковые отступы в 15 % ширины окна и вертикальные отступы в 1 пункт – так текст статьи будет гораздо читабельнее.
Давайте так же создадим стиль для заголовков статей:
Все заголовки наших страниц, оформленные тегом
Является ли type=»text/css» необходимым в теге?
5 ответов
Это не требуется со спецификацией HTML5, но для более старых версий HTML это необходимо.
Html 4 W3.org spec
используя HTML5 и не указывая тип, я до сих пор не сталкивался с проблемами совместимости даже при тестировании более старых версий IE.
это не обязательно, нет.
частью HTML жизни вы заинтересованы в том,на link элемент, в которой говорится:
на type атрибут дает тип MIME связанного ресурса. Это чисто консультативно. Значение должно быть допустимой строкой типа MIME.
внешних ресурсов, ссылки, используется в качестве подсказки для агентов пользователей.
Я понимаю, что это позволяет спецификацию таблиц стилей в форматах, отличных от text/css.
хотя это стало доминирующим (и стандартным) форматом доставки для таблиц стилей для (X)HTML-документов, спецификация на самом деле достаточно широка, чтобы позволить передавать различные типы MIME, просто стандартные браузеры их не реализуют.
этот атрибут дает консультативную подсказку относительно типа содержимого содержимого, доступного по целевому адресу ссылки. Это позволяет пользователю агенты предпочитают использовать резервный механизм, а не извлекать контент, если им сообщают, что они получат контент в типе контента, который они не поддерживают.
авторы, использующие этот атрибут, несут ответственность за управление риском, что он может стать несовместимым с содержимым, доступным по целевому адресу ссылки.