Каскадные таблицы стилей CSS |
Каскадные таблицы стилей или CSS (Cascading Style Sheets) были революцией, потрясшей WWW. Если до этого Web-дизайнер не знал, как будет выглядеть его творение в разных программах Web-обозревателей, то теперь он может контролировать все: от начертания шрифта до положения картинки на странице. Предположим, вам нужно изменить цвет текста в HTML-документе с черного на синий. Вы помещаете его в пару тегов <FONT> и </FONT> следующего вида: <P><FONT color="blue">Это синий текст</FONT></P> А теперь представим, что вы внесли определение внешнего вида текста в другое место документа: P.bluetext { color: blue } Эта строка обозначает, что мы определили для текста, находящегося внутри тега <P> и помеченного стилевым классом bluetext, синий цвет шрифта. Такая конструкция HTML называется определением стиля или просто стилем. В результате в HTML-тексте у нас остануться только теги логического форматирования текста: <P class="bluetext">Это синий текст</P> Здесь мы пометили нужный текст с помощью атрибута class, присвоив ему значение bluetext. Атрибут class задает имя стилевого класса для тега, и его поддерживают все теги. Вы можете переназначить цвета текста для всех тегов <P>. В этом случае мы не задаем имя стилевого класса: P { color: blue } Или вы можете задать форматирование для стилевого класса, не привязанного ни к какому тегу: .bluetext{ color: blue } И теперь вы можете присваивать стилевой класс тексту, заключенному в любые теги: <H1 class="bluetext">Это синий цвет</H1> <CENTER class="bluetext">Это синий цвет</CENTER> Это <B class="bluetext">жирный синий</B> текст Вы можете дать специальное форматирование тегу только в том случае, если он заключен внутрь другого тега: H7 B { color: blue } И теперь: <H7><B>Этот</B> текст будет синим</H7> <P>А <B>этот</B> - не будет!</P> Более того, вы можете встроить определение стиля прямо в тег: <P style="color: blue">Это синий текст</P> Это достигается при помощи атрибута style, который также поддерживают все теги HTML. И еще один способ привязать стиль к какому-либо тегу - использовать атрибут id, задающий уникальное имя элемента HTML. #headerofdocument { font-size: 20pt } Здесь мы задали размер шрифта 20 пунктов. <H1 id="headerofdocument">Это заголовок документа</H1> Вы можете задавать несколько атрибутов в определении стиля. В этом случае они разделяются точкой с запятой: P { color: blue; fotn-size: 9ptl; text-align: center } Определение стилей, вынесенные в заголовок HTML-документа, составляют таблицу стилей. Таблица стилей заключается в теги <STYLE> и </STYLE>: <Style [type="text/css"]>... </STYLE> Тег <STYLE> может содержать необязательный атрибут type, содержащий обязательное значение text/css. Таблицу стилей можно вынести в отдельный файл и использовать сразу в нескольких документах. В этом случае в заголовке HTML-документа необходимо разместить тег <LINK>, указывающий на эту таблицу стилей: <LINK rel="stylesheet" href="{Адрес файла таблицы стилей}"> | |||
Свойства шрифта |
font
Задает параметры шрифта элемента страницы.
Заменяет атрибуты font-family, font-height, font-size, font-style, font-variant и font-weight. Значения этих атрибутов могут располагаться в любом порядке.
font: {font-family} [{font-height}] [{font-size}] [{font-style}] [{font-variant}] [{font-weight}]; Значение по умолчанию - normal normal normal medium normal "Times New Roman".
Альтернативный формат:
font: caption|icon|menu|message-box|small-caption|status-bar; В этом случае доступны шесть предопределенных значений, задающие один из стандартных шрифтов, используемых в элементах интерфейса Windows:
| |||
Цветовая гамма |
background
Задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-position и background-repeat.
background: [{background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}]; Значения этих свойств могут располагаться в любом порядке.
Значение по умолчанию transparent none repeat scroll 0% 0%.
Поддерживается IE начиная с 3.02; задание значений background-position и background-repeat поддерживается начиная с 4.0
background-color
Задает фоновый цвет Web-страницы или ее элемента.
background-color: {Цвет}|transparent; Предопределенное значение transparent задает "прозрачный" фон. Оно же является значением по умолчанию.
Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02
Поддерживается NN начиная с 4.0
background-image
Задает фоновый рисунок Web-страницы или ее элемента.
background-image: url({Интернет-адрес файла рисунка})|none; Предопределенное значение none отключает фоновый рисунок. Оно же является значением по умолчанию.
Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02
Поддерживается NN начиная с 4.0
background-attachment
Данный атрибут позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы.
background-attachment: scroll|fixed;
| |||
Свойства текста |
text-decoration
Задает специальное оформление текста: подчеркнутый, зачеркнутый и т.п.
text-decoration: none|underline|overline|line-through|blink;
| |||
Свойства текста, содержащего иероглифы |
text-justify
Задает тип текста по ширине. Значение атрибута text-align при этом должно быть равно justify.
text-justify: auto|newspaper|distribute|distribute-all-lines|distribute-center-last|inter-word|inter-ideograph|inter-cluster|kashida;
Дата добавления: 2015-06-27; Просмотров: 404; Нарушение авторских прав?; Мы поможем в написании вашей работы! Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет |