Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь FAQ Написать работу КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Таблицы стилей и управление стилямиСодержание книги
Поиск на нашем сайте
Современные текстовые процессоры, например, Microsoft Word, позволяют пользователю определять стиль, то есть, набор правил оформления и форматирования, который может применяться к различным частям документа. С другой стророны, в стандартном HTML для присвоения элементу определенных свойств (цвет, размер, положение на странице) эти свойства приходится каждый раз описывать заново, даже если на странице находится 10 или 100 таких элементов. Каскадные таблицы стилей (Cascading Style Sheets, сокращенно CSS) предназначены для хранения информации о стилях Web-страниц. CSS позволяет отделить форматирование HTML-документа от его содержания и, таким образом, экономично и удобно использовать однажды созданные стили для оформления любого количества Web-страниц. В настоящее время CSS является одной из самых перспективных технологий, облегчающих и автоматизирующих разработку Web-сайтов. Браузеры Internet Explorer и Netscape Navigator поддерживают стили начиная с четвертых версий. К сожалению, как и сам HTML, технология CSS тоже стала жертвой "войны браузеров" и не все элементы стилевого форматирования поддерживаются обеими лидирующими браузерами. Мы ограничимся рассмотрением "ядра" CSS, одинаково воспринимаемого Internet Explorer и Netscape Navigator. Существует 3 основных способа применения таблицы стилей к документу: 1) связывание (Linking) - можно связать HTML-документ с таблицей стилей, хранящейся в отдельном файле; 2) встраивание (Embedding) - можно встроить таблицу стилей в документ с помощью тага <style>; 3) задание стиля для отдельного элемента (Inline) - можно определять элементы стиля "на лету", то есть, указывать их в тагах HTML, например, в таге абзаца <p>. Наиболее перспективен первый способ, поскольку однажды созданный и размещенный на сервере стиль может быть затем применен ко всем страницам Вашего сайта. Хранить таблицу стилей следует в тектовом файле с расширением *.css, который можно создать при помощи любого текстового редактора. Для связывания таблицы стилей с документом HTML в последнем используется таг следующего вида: <link rel=stylesheet type="text/css" href="URL"> Здесь URL, как всегда, обозначает абсолютный или относительный адрес стилевого файла, а остальные опции служат для того, чтобы сообщить браузеру, что на странице используется CSS. Обычно этот таг располагают в таге <head> или между тагами <head> и <body>. Вместо первого можно использовать второй способ - встроить таблицу стилей непосредственно в документ. В этом случае указывать таг <link> не нужно, а таблица стилей будет действовать только внутри одного документа. Общий вид таблицы стилей следующий: <style type="text/css"> <!-- описание стиля --> </style> Таблица стилей заключена в таг HTML-комментария <!--... --> для того, чтобы спрятать ее от старых браузеров. Точно такой же общий вид имеет и стилевой файл *.css Наконец, для определения стиля конкретного тага достаточно добавить к нужному тагу опцию style и присвоить ей строковое значение определяющее новый стиль: <h1 style="color: blue">...</h1> Здесь мы определили цвет текущего заголовка первого уровня как синий. Данный метод указания стиля поддерживается всеми подчиненными тагами тага <body>. Три способа определения стиля упорядочены иерархически - наивысший приоритет имеет оперативное указание стиля в конкретном таге, затем - указание стиля в таге <style> и затем - указание в стилевом файле. Поэтому второй и третий способ обычно используются лишь для "разового" переопределения свойств какого-либо тага, указанных в стилевом файле. При злоупотреблении оперативным определением стиля теряется основное преимущество CSS - разделение содержание и форматирования. Следует также помнить, что CSS поддерживает механизм наследования - то есть, подчиненные таги по умолчанию копируют некоторые свойства, определенные для родительских тагов. Например, используя стиль в таге <div> можно определять стиль целого раздела документа: <div style="color: blue"> <h1>Это заголовок внутри раздела</h1> <p>Это абзац внутри раздела</p> </div> Здесь таги <h1> и <p> унаследуют синий цвет шрифта от тага <div>. Опишем основные возможности технологии CSS. Таблица описания стилей состоит из определений, в простейшем случае имеющих вид: название_элемента { свойство: значение; } где "название_элемента" - имя HTML-тага без символов <...> (например, H1, P, TD), а параметры в фигурных скобках - список свойств элементов и присвоенных им значений. Элементы списка разделены символом точки с запятой. Пример: h1 { color: blue; font-size: 12pt; text-line: center }
Если это определение сделано в таге <style> или в стилевом файле, все заголовки первого уровня будут выведены синим шрифтом размером 12 пунктов с выравниванием по центру окна. Для всех прочих свойств будут использованы значения по умолчанию. Если Вы хотите определить одно и то же свойство для нескольких тагов HTML, Вы можете перечислить их в отдельном списке: P { font-size: 12pt } UL { font-size: 12pt } или более компактно указать в одной строке P, UL { font-size: 12pt } Иногда возникает необходимость определения двух (и более) стилей для одного тага - например, для тага элемента списка <li> может понадобиться один стиль, если <li> подчинен тагу нумерованного списка <ol> и другой - если он находится в маркированном списке <ul>. Это можно сделать с помощью контекстных определений, задав точную последовательность тагов, для которой будет применен стиль: OL LI { list-type-style: decimal } UL LI { list-type-style: square } Обратите внимание, что имена тагов не разделены запятыми. В противном случае всем тагам списка будет приписан один и тот же стиль. Таблицы стилей позволяют также создавать классы - то есть, совокупности определений, каждое из которых может использоваться в нужном месте страницы. Например, Вы можете определить 3 варианта стиля заголовка H1. Определение вариантов отличается от указания стиля лишь тем, что к названию тага добавляется произвольное имя класса, отделенное точкой: H1.blue { color: blue } H1.red { color: red } Теперь, включая в документ таг <H1>, можно указать в нем конкретный стиль при помощи опции CLASS: <h1 class=red>Красный заголовок</h1> <h1 class=blue>Синий заголовок</h1> Здесь описаны два класса для форматирования текста с именами normal и letter. Они могут использоваться с любыми текстовыми элементами страниц, для чего достаточно указать в нужном таге опцию class="имя_класса": <font class="normal">текст</font> При указании любых размеров в CSS используются следующие единицы измерения: px - пикселы, pt - пункты, cm - сантиметры, mm - миллиметры, % - проценты Следует помнить, что все перечисленные единицы измерения, кроме процентов, являются абсолютными и указание их в стиле лишает пользователя возможности управлять размерами шрифта с помощью браузера. Наконец, таблицы стилей можно комментировать. Комментарии располагаются между символами /* и */ и игнорируются программами просмотра. Пример: body { margin-left: 1.5in } /* отступ на 1.5 дюйма */ Познакомимся со свойствами CSS более подробно: Свойства шрифта. font-family используется для указания шрифта или шрифтового семейства, которым будет отображаться документ. Пример: P { font-family: Times New Roman, serif} В качестве приоритетного шрифта абзацев указан шрифт Times New Roman, при его отсутствии документ будет отображаться любым подходящим шрифтом семества serif. font-weight определяет жирность шрифта и имеет значения lighter, normal, bold и bolder. Можно задавать жирность также числами 100,200,...,900. 400 примерно соответствует нормальной жирности начертания. font-size указывает размер шрифта. Цвет элемента и фона. color определяет цвет элемента. Цвет может указываться одним из стандартных способов - по имени или в виде RGB (см. п. 7). A { color: green } /* определили цвет ссылок как зеленый */ background-color устанавливает цвет фона элемента. Цвета указываются также, как у совйства color. Браузеры могут интерпретировать данное свойство по-разному: Internet Explorer отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator - лишь ширину, занимаемую этим элементом. Свойства текста. text-decoration указывается для наложения текстовых эффектов: overline Линия над строкой line-through Зачеркивание underline Подчеркивание blink Мерцание text-indent используется для отступа в первой строке текста элемента.
|
||||
|
|
Последнее изменение этой страницы: 2016-04-07; просмотров: 188; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.23.92.135 (0.008 с.) |
