Wiki-учебник по веб-технологиям: CSS .
Преподаватели и наставники, ведущие обучение CSS, могут предлагать свои варианты организации последовательности изучения CSS в комментариях к данному разделу учебника. Также свои замечания по организации учебника могут высказывать читатели, ведущие самостоятельное изучение CSS. Чтобы самостоятельное изчение CSS было эффективным, необходимо привлекать методический опыт, который дает обучение CSS. Учебник для начинающих должен способствовать быстрому старту разработчика.
CSS. Каскадные таблицы стилей
CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения и других аспектов представления документа.
Основной целью разработки CSS являлось разделение содержимого (написанного на HTML или другом языке разметки) и представления документа (написанного на CSS).
Это разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печать, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе
устройствами, использующими Шрифт Брайля.
Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно.
Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми.
Технология CSS: общий взгляд
Название «Каскадные таблицы стилей» происходит от английского Cascading Style Sheets, аббревиатурой которого является CSS. Впервые стили появляются в HTML 4.0 для определения представления элементов HTML и решения проблем представления документов. Стили обычно хранятся в таблицах стилей: могут быть определены как внутри HTML-документа, так и в специальном файле с расширением css. Используя отдельные файлы для хранения таблиц стилей, можно существенно сократить объем работы. Также можно определить несколько стилей, которые, подчиняясь существующим правилам, будут каскадно задавать один определенный стиль.
Пример использования CSS
С помощью CSS документы HTML можно выводить, используя различные стили вывода.
Введение в CSS
- Версии CSS
- Подключение CSS
- Поддержка браузерами
- Стили
- Комментарии CSS
- Параметры текста в CSS
- Параметры фона в CSS
- Кроссбраузерность CSS и CSS хаки
- Загрузка соответствующих CSS для разных устройств
- Литература
CSS3 — возможности, доступные прямо сейчас
Тут мы будем описывать с примерами возможности CSS3, поддерживаемые большинством современных браузеров и хаки позволяющие добиться единообразного отображения оформления также и в других браузерах, не поддерживающих CSS3.
Где хранятся и для чего используются названия каскадных стилей (CSS)?
Где хранятся и для чего используются названия каскадных стилей (CSS)?
Для того, чтобы, увидеть ответ, необходимо приобрести одну из следующих подписок:
Купить подписку можно на главной странице сайта
О проекте
Мы публикуем ответы на тесты, необходимые для получения сертификатов по 1С — Битрикс. Данные сертификаты требуются для получения компетенции и партнерства.
Разделы
Ответы
- Контент — менеджер
- Администратор.Базовый
- Администратор.Модули
- Bitrix Framework
- Пользователь Сервиса Битрикс24
Инфофиз
С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб-страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML-кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя.
CSS действует более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами.
Более того, вы можете сохранить описание стиля не в тексте вашей странички, а в отдельном файле – это позволит использовать описание стиля на любом количестве Web-страниц, а также изменить оформление любого количества страниц, исправив лишь описание стиля в одном (отдельном) файле.
Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.
Существует три вида таблиц стилей:
Внутренние таблицы стилей — (Inline Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги.
Глобальные таблицы стилей — (Global Style Sheets) определяют стиль элементов во всем документе.
Связанные таблицы стилей — (Linked Style Sheets) могут быть использованы для нескольких документов сразу и хранятся во внешнем файле.
Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы.
Практическое освоение CSS
Существует четыре способа связывания документа и таблицы стилей:
- Связывание — позволяет использовать одну таблицу стилей для форматирования многих страниц HTML
- Внедрение — позволяет задавать все правила таблицы стилей непосредственно в самом документе
- Встраивание в теги документа — позволяет изменять форматирование конкретных элементов страницы
- Импортирование — позволяет встраивать в документ таблицу стилей, расположенную на сервере
Остановимся на каждом из этих способов более подробно.
1. Связывание
Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега LINK, располагающегося внутри тега HEAD ваших страниц:
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой страничке будет использоваться CSS.
Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://. ») в случае, если файл стилей находится на другом сервере.
2. Внедрение
Второй вариант, при котором описание стилей располагается в коде Web-странички, внутри тега HEAD, в теге STYLE type=»text/css»>. . В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type=»text/css» является обязательным и служит для указания браузеру использовать CSS.
3. Встраивание в теги документа
Третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
4. Импортирование
В теге можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.css);
Его следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значение свойства @import является URL файла таблицы стилей.
Структура и правила.
Правила каскадных таблиц состоят из селектора и определения.
Синтаксисис: селектор
Любой элемент HTML — это возможный CSS селектор. Свойства селектора определяют стиль элемента, для которого он определен.
ПРИМЕР: H1
Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt, point).
Правила каскадных таблиц стилей, в которых в качестве селектора используются теги HTML, влияют на отображение всех элементов заданного типа в документе.
Следующее правило отображает без подчёркивания все ссылки в документе.
Классы. Классовые селекторы.
А что делать, если нужно некоторые ссылки отобразить по-другому? CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр или идентификатор элемента», присваивающиеся любому элементу страницы. Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой.
Синтаксис: селектор.класс
CLASS — атрибут элемента в HTML, определяющий его класс. В CSS можно описать собственные стили для различных классов одних и тех же элементов.
ПРИМЕР: H1.blue
Все элементы H1 с атрибутом станут синими.
Можно определить несколько правил форматирования для одного элемента и с помощью параметра CLASS соответствующего тега применять разные правила форматирования.
Например, можно определить два класса для отображения заголовка первого уровня:
H1.blue (color:red; background-color: blue>
В тексте документа ссылка на соответствующий класс задаётся в параметре CLASS:
Красный шрифт
Красный шрифт на синем фоне
В приведённом примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента, т.е. классы могут быть описаны без явного привязывания их к определенным элементам.
Синтаксис: .класс (перед именем класса ставится точка)
ПРИМЕР: .green
В данном случае все элементы с атрибутом станут зелеными.
ПРИМЕР:
.blue (color:red; background-color: blue>
Теперь два класса red и blue можно применять к любым элементам документа:
Красный шрифт на синем фоне
Первый абзац отразится красным шрифтом, а второй — красным шрифтом на синем фоне.
Идентификаторы. ID селекторы.
Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.
Параметр ID, как и параметр CLASS, не влияет на отображение браузером элемента HTML, но задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа.
Cинтакс: #id
ID — индивидуально именованный стиль. C его помощью можно создавать стилистические исключения cреди элементов одного класса.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:
H1#form3 (color:red; background-color: blue>
В этом примере абзац идентифицирован именем myID в параметре ID, поэтому к нему применимо правило с селектором #myID. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.
Индификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем, Вы создали класс blue — синий курсив. Но Вам понадобился жирный подчеркнутый текст синим курсивом. Конечно, можно создать новый класс, но зачем? Проще описать ID. Например «boldunderline». И все элементы класса blue с значением ID «boldunderline» станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств класса blue и идентификатора boldunderline.
ПРИМЕР:
Здравствуйте, это моя домашняя страница.
Пока еще в стадии разработки .
. Но скоро откроется
Как видно из примера, атрибут ID может быть использован без указания класса (последний параграф примера. Тогда параграф будет обладать только свойствами ID «boldunderline» (в примере — жирный, подчеркнутый текст).
Контекстуальные селекторы.
Контекстные селекторы — это сочетания нескольких обыкновенных селекторов. Стиль задается только элеметнам в заданной последовательности в зависимости от каскадного порядка.
ПРИМЕР: P EM
В данном примере все элементы EM внутри элементов P будут иметь заданный стиль.
Свойства элементов, управляемых с помощью CSS
Рассмотрим механизм, с помощью которого стили присваиваются элементам Web-страниц. Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:
Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML-тега (H1, P, TD, A и т. д.),
а параметры в фигурных скобках – список свойств элемента и присвоенных им значений.
Пример:
В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.
В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять.
- СВОЙСТВА ШРИФТА
- ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА
- СВОЙСТВА ТЕКСТА
- РАЗМЕРЫ ЭЛЕМЕНТА
- СВОЙСТВА ТАБЛИЦЫ
- ЕДИНИЦЫ ИЗМЕРЕНИЯ
Описание свойств элементов в CSS состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием.
Группирование
Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделённых запятыми, если для них задаётся одно правило. А также если нужно придать нескольким элементам веб-страницы одинаковые свойства, то при определении селекторы перечисляются через запятую перед блоком свойств.
Например, следующие правила
H2
можно сгруппировать и задать в виде одного правила со списком селекторов
Аналогично группируются определения, только в списке они разделяются точками с запятой. Следующие правила форматирования заголовка первого уровня
H2
можно сгруппировать в виде одного правила, сгруппировав определения:
H2 (font-weight: bold; font-size: 14pt; font-family: Verdana;>
Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так:
При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения её размеров.
Наследование
В HTML некоторые элементы могут содержать другие. Как будет отображаться элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет?
Например, пусть цвет шрифта абзаца определён как синий(P ). Как будет отображаться выделенный элемент текста, задаваемый тэгом , если для него не определено правило форматирования?
В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя. В нашем примере выделенный элемент будет также отображаться синим цветом.
Некоторые свойства не наследуются вложенными элементами от своих родителей, например свойство background, но по умолчанию вложенные элементы будут отображаться с фоном родительского элемента.
Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тегом BODY:
font-family: «Times New Roman»;
background: url(picture.gif) white;
Приведённые правила задают форматирование документа по умолчанию: чёрным шрифтом гарнитуры Times New Roman с фоном, задаваемым графическим файлом picture.gif, или на белом фоне, если файл недоступен.
Существует способ скрыть от устаревших браузеров описания стилей, располагающихся в теге , и выдаст все описания стилей на страничку, как обычный текст. Для того чтобы предотвратить это, необходимо заключить описания стилей в тег комментариев. Делается это очень просто.
описания стилей
—> – закрывающий.
Устаревшие браузеры посчитают все заключенное между тегами комментариев информацией неотображенной, а новые и сообразительные браузеры определят, что это описание стилей, и задействуют их.
Каскадные таблицы стилей
Каскадные (многоуровневые) таблицы стилей — cascading style sheets (CSS) — это мощный стандарт на основе текстового формата, определяющий представление данных в броузере.
Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают как он должен выглядеть. Таким образом каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления.
Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.
CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики.
Каскадные таблицы стилей обеспечивают должный уровень единства оформления, организации и контроля во время разработки узла, который является недостижимым с помощью одного только HTML.
CSS предполагает 3 типа таблиц стилей — встроенные, внедренные (внутренние) и связанные (внешние).
Впервые идея форматирования HTML-документов с помощью CSS была рекомендована Консорциумом W3C в 1996 году. Эта рекомендация, которая была обновлена в 1998 году, используется Web-разработчиками и по сей день.
Что значит слово «каскадный»?
Термин «каскадный» означает, что в одной странице HTML могут использоваться разные стили. Броузер, поддерживающий таблицы стилей, будет следовать их порядку (как по каскаду), интерпретируя информацию стилей.
Это означает, что вы можете использовать все три типа стилей, и броузер будет интерпретировать сначала связанные, затем внедренные и, наконец, встроенные стили. Даже если ко всему узлу будут применены образцы стилей, можно будет управлять отдельными аспектами страниц с помощью внедренных стилей, а отдельными областями внутри этих страниц — с помощью встроенных стилей.
Другой аспект каскадирования — наследование (inheritance). Наследование означает, что если не указано иное, то конкретный стиль будет унаследован другими элементами страницы HTML. Например, если вы примените определенный цвет текста в теге , то все теги внутри этого абзаца наследуют этот цвет, если не оговорено иное.
Методы и синтаксис
Существует ряд методов, с помощью которых таблицы стилей могут применяться к документу HTML. Синтаксис соответствует реальной структуре информации, содержащейся внутри таблицы стиля.
Методы
Существует три метода для применения таблицы стилей к документу HTML:
- Встроенный (Inline). Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами Web-страницы. Предположим, вы хотите задать внешний вид отдельного абзаца. Вы можете просто добавить атрибут style к тегу абзаца, и броузер отобразит этот абзац с помощью параметров стиля, добавленного в код.
- Внедренный (Embedded). Внедрение позволяет контролировать всю страницу HTML. При использовании тега , помещенного внутри раздела страницы HTML, в код вставляются детализированные атрибуты стиля, которые будут применяться ко всей странице.
- Связанный (Linked или External). Связанная таблица стилей — мощный инструмент, который позволяет создавать образцы стилей (master styles), которые можно затем применять ко всему узлу. Основной документ таблицы стилей (расширение .css) создается Web-дизайнером. Этот документ содержит стили, которые будут едиными для всего Web-узла (неважно, содержит одну страницу или тысячи страниц). Любая страница, связанная с этим документом, будет использовать указанные стили.
Синтаксис таблицы стилей
- Указатель (Selector). Указатель является элементом, к которому будут применяться назначаемые вами атрибуты. Это может быть просто тег типа заголовка (H1) или абзаца (Р). Таблицы стилей позволяют использовать различные объекты, включая классы, которые будут кратко обсуждаться далее.
- Свойство (Property). Свойство определяет указатель. Например, если в качестве указателя выбран абзац, вы можете включить свойства, определяющие этот указатель. В свойства входят такие элементы, как поля, шрифты и фоновые изображения. В таблицах стилей существует много свойств, которые можно использовать для того, чтобы определить указатель.
- Значение (Value). Значения определяют свойства. Предположим, что у вас есть заголовок первого уровня H1(указатель) и вы включаете свойство type family (семейство шрифта). Шрифт, который на самом деле будет применен к указанному фрагменту, задается значением этого свойства.
- Описание (Declaration). Свойства и значения объединяются, образуя описание.
- Строка (Rule). Указатель и описание образуют строку
Определение правил CSS
Итак, какскадная таблица стилей — это набор правил форматирования тегов HTML. Например, для того, чтобы цвет фона Web-страницы сделать черным, необходимо объявить следующее правило форматирования:
body
Будьте внимательны! По умолчанию цвет шрифта — черный! Не следует претендовать на лавры Малевича! Ваш «Черный квадрат» Эрмитаж не купит!
В данном случае объявлено правило форматирования тега body, а именно — свойству стиля background присвоено значение black (черный). В результате применения этого правилацвет фона всего документа изменится на черный.
Обратите внимание: в таблице стилей теги HTML не заключаются в круглые скобки.
Свойства CSS должны находиться в фигурных скобках.
Для каждого тега HTML можно указать не одно, а несколько свойств стиля.
Изменим с помощью CSS не только цвет фона Web-страницы, но и цвет шрифта (на белый).
body
Формат самого правила не имеет значения, главное — правило должно читаться удобно и легко. Например, вышеприведенное правило можно записать и так:
body
Одно и то же правило сстиля можно применить сразу к нескольким различным тегам HTML-страницы. Например:
body,td,h1
Встроенный стиль
Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:
The text in this line will display as 12 point text using the Courier New font.
The text in this line will display as 18 point text using the Arial font.
Посмотрим на результат:
The text in this line will display as 12 point text using the Courier New font.
The text in this line will display as 18 point text using the Arial font.
Mожно добавлять встроенный стиль в любой тег HTML, в котором эта операция будет иметь смысл. Среди таких тегов можно назвать абзацы, заголовки, горизонтальные линии, якоря и ячейки таблиц. Ко всем этим элементам логично применять встроенные стили.
Существуют два тега, которые помогают применять встроенные стили к разделам страницы. Это теги (division — раздел) и (промежуток).
Эти теги определяют диапазон текста, так что все, находящееся между ними, будет оформлено с помощью нужного стиля. Единственное различие между и состоит в том, что создает принудительный разрыв строки, a — нет.
Следовательно, нужно использовать для изменения стиля любой части текста, меньшей абзаца.
Вот пример работы тега :
AII of the text within this section is 18 point Garamond.
This text appears in the color red, with no line break after the closing span tag and the rest of the text.This text appears in the color red, with no line break after the closing span tag and the rest of the text.
Хотя встроенные стили довольно полезны — гораздо лучше разрабатывать стандартные стили для всего Web-узла и затем применять их, используя внедренные или связанные таблицы стилей.
Возврат в начало страницы Возврат на главную страницу сайтаВнедренный стиль
Внедренные стили используют тег
Рассмотрим пример внедренного стиля:
Embedded Style Sheet Example BODY < background: #FFFFFF; color: #000000; >H1 < font: 14pt verdana; color: #CCCCCC;>P AКак видно из примера, приведенного выше, таблица стилей теперь отличается от кода стандартной страницы HTML, но все же логику проследить нетрудно. В нашем случае для основной части страницы (body) указаны цвет фона, цвет текста и верхнее, левое и правое поля в дюймах.
Для заголовка первого уровня (HI) указывается шрифт (название шрифта и размер в пунктах). В этом и состоит удобство каскадных таблиц стилей — вы можете задавать размеры не только в пунктах, но и пикселях (рх), процентах (75%) и сантиметрах (cm).Существует и несколько новых единиц измерения, самой примечательной из которых является m.
В отличие от пунктов или пикселов, представляющих абсолютные размеры различных объектов, 1m — ширина строчной буквы m в том шрифте о котором идет речь. Правда, большинство броузеров об этом не догадываются и поэтому определяют 1m просто как размер, заданный по умолчанию. Например, в Internet Explorer 4.0 и выше для гарнитуры Verdana размер 1m соответствует 12 пунктам. Точнее сказать «соответсвует значению, которое пользователь установил в качестве размера шрифта по умолчанию. Таким образом, если установить в броузере размер шрифта по умолчанию 16 пунктам, то и 1m тоже станет равна 16 пунктам, и все остальные размеры будут соответственно увеличены.Но! Не все броузеры способны понимать эти новые единицы измерения. Я попробовала применить новую единицу измерения m во внедренной таблице стиля страницы «Дизайн на основе правил» (webrules.htm). Броузер Internet Explorer 5.0 показал эту страницу таким образом, как она задумывалась. Когда же просмотр страницы осуществлялся броузером Internet Explorer 3.0, результат был плачевным — несколько черных штрихов и никакого текста.
Однако, вернемся к нашему примеру.
Другой интересный момент этой таблицы стилей — различие стилей шрифтов заголовка и абзаца. Они отличаются цветом, отступом и гарнитурой.
В теге якоря (А) можно увидеть еще один очень удобный элемент синтаксиса. Строка text-decoration: none удаляет подчеркивание ссылок, так что результат выглядит чисто и привлекательно.А теперь посмотрим как этот пример внедренного стиля будет выглядеть на экране. Щелкните здесь!
Связанные таблицы стилей
Связанные (linked), или внешние (external), таблицы стилей являются расширением понятия внедренных стилей.Используется тот же самый код, что и для внедренной таблицы стилей, но он помещается в отдельный документ (файл с расширением .css). После этого с этим документом (файлом) связываются все страницы, к которым необходимо применить данный стиль.
Вот как выглядит пример связанной таблицы стилей:
BODY < background: #ffffcc; color: #000000; >P < font-family : sans-serif; font-style : italic; font-size : 16pt; color: #006633; >H1Теперь сохраним этот документ как отдельный файл. Назовем его style-l.css и поместим в папку таблиц стилей с именем style.
С этим документом любое количество страниц HTML. Для этого нужно использовать между тегами и следующую конструкцию:Любая страница, содержащая такую связь, будет оформлена в соответствии со стилями, указанными в файле style_1.css. Результаты применения стилей показаны здесь.
Код этой страницы выглядит следующим образом:
Пример использования связанной таблицы стилей Старинная студенческая песня
Поднявши меч на наш союз
достоин будет худшей кары,
и я за жизнь его тогда
не дам и ломанной гитары.
Как вожделенно жаждет век
нащупать брешь у нас в цепочке.
Возьмемся за руки друзья,
чтоб не пропасть поодиночке.Среди совсем чужих пиров
и слишком ненадежных истин,
не дожидаясь похвалы,
мы перья белые почистим.
Пока безумный наш султан
сулит дорогу нам к острогу,
возьмемся за руки друзья,
возьмемся за руки, ей-богу.Когда ж придет дележки час,
не нас калач ржаной поманит,
и рай настанет не для нас,
зато Офелия помянет.Пока ж не грянула пора
нам отправляться понемногу,
возьмемся за руки друзья,
возьмемся за руки, ей-богу. Это стихотворение Булата Окуджавы, ставшее уже классикой.
Вернемся?Здесь важно помнить о смысле концепции каскадирования. Если вам нужны 10 страниц HTML, на которые глобально воздействует эта таблица стилей, вы можете ее применить. Затем, если нужно внести небольшие корректировки в отдельные страницы, можно либо внедрить в эти страницы дополнительные стили, либо использовать встроенный стиль.
Далее к коду был добавлен внедренный стиль, и вот что получилось. — встроенный стиль применяется поверх связанного стиля
Обязательно просматривайте страницы с таблицами стилей в соответствующем броузере — Internet Explorer 3.0 и выше и Netscape 4.0 и выше. В противном случае все ваши стили могут исчезнуть! Следует всегда тестировать такие страницы без таблицы стиля (используйте более старый броузер или просто временно измените название таблицы стилей, чтобы броузер не мог ее найти) и проверять, чтобы они выглядели приемлемо.
Возврат в начало страницы Возврат на главную страницу сайтаПоддержка шрифтов в таблицах стилей
Один из наиболее привлекательных аспектов таблиц стиля — это возможность применения различных шрифтов к определенной странице без необходимости использовать многочисленные теги . Таблицы стилей позволяют выбирать ряд шрифтов и применять их к конкретным разделам страницы типа номера заголовка, абзаца или другого фрагмента. Однако вместо стандартного тега HTML используется атрибут таблицы стилей font-family. Вы можете добавлять в этот тег многие атрибуты либо использовать классы и группировку, чтобы реализовать всю мощь средств работы со шрифтами с помощью таблиц стилей.
Практическая реализация поддержки шрифтов в таблицах стилей аналогична проблемам, с которыми пользователи сталкиваются при использовании тегов и соответствующих атрибутов. Конкретный шрифт д олжен быть установлен на том компьютере, где происходит просмотр страницы. Как и тег , таблицы стилей позволяют указывать любое число шрифтов, чтобы увеличить вероятность того, что броузер клиента подберет нужный шрифт из списка. Например, если у них не будет шрифта Century Schoolbook, то, возможно, найдется Garamond и т. д. Хотя сами эти шрифты различаются довольно значительно, их семейства достаточно похожи, чтобы считать, что они выполняют сходные дизайнерские задачи.
Таблицы стилей распознают пять семейств шрифтов:Serif (С засечками) , Sans Serif (Рубленые),Script (Рукописные), Monospace (Моноширинные), Decorative (Декоративные).
Более подробно о шрифтах вы можете прочесть здесь.
Вы можете указывать несколько названий шрифтов в любом теге HTML, используя встроенные, внедренные и связанные таблицы стилей.
Напрмер, на этой странице используется внедренная таблица стилей, и для заголовка первого уровня задан:Если броузер не сможет найти на компьютере клиента первые три шрифта, он поставит вместо них первый из доступных рубленных шрифтов семейства sans-serif и будет его использовать.
Увы! На практике, когда в качестве первого шрифта был указан шрифт Verdana, а отображение на экран осуществлялось броузером Internet Explorer 3.0 вместо заголовка «Каскадные таблицы стилей» я получила абракадабру.
Задание свойств и значений шрифта
У шрифтов есть очень много свойств, которые можно изменять, и очень много значений, которые могут принимать эти свойства.
Как и для стандартных шрифтов HTML, можно задавать свойства для управления размером и цветом. Однако для шрифтов HTML нельзя изменять насыщенность и тип шрифта, а также высоту строки или интерлиньяж (расстояние между отдельными строками текста). Кроме того, доступные в таблицах стилей методы управления размером шрифта намного превосходят уровень, предлагаемый стандартами HTML.
Цвет
Таблицы стилей используют стандартные методы работы с цветами броузера. Другими словами, для получения оптимальных результатов используйте шестнадцатиричный (и лучше всего, поддерживаемый броузерами) цвет. Вы можете добавлять цвет, как и другие свойства стиля, в любой подходящий тег HTML для встроенных, внедренных и связанных стилей.
Например, при описании цвета заголовка первого уровня указоно значения color:#333399;, в результате мы видим заголовок «Каскадные таблицы стилей» темно-синего цвета.
Насыщенность
Насыщенность (weight) показывает толщину шрифта. Например, для гарнитуры Arial существуют такие разновидности: жирный (black), полужирный (bold), светлый (light) и т. д.Для шрифтов существуют различные начертания. Если вы не уверены на сто процентов, что на компьютере клиента установлен определенный шрифт, разумнее будет применять начертание, доступное для всех шрифтов. Существует только одна (не считая нормальной) стандартная насыщенность, которая доступна для большинства шрифтов. Это — полужирное начертание!
Вот пример применения встроенного начертания:
We are an intelligent species and the use of our intelligence quite properly gives us pleasure. In this respect the brain is like a muscle. When it is in use we feel very good. Understanding is joyous.Полужирное начертание применяется к абзацу.
We are an intelligent species and the use of our intelligence quite properly gives us pleasure. In this respect the brain is like a muscle. When it is in use we feel very good. Understanding is joyous.
Курсивное и полужирное начертания должны использоваться экономно. Их функция — выделение. Обычно не следует использовать полужирный или курсив для длинных фрагментов основного текста.
Размер
Размер шрифта в таблицах стилей можно определять, используя пункты ( points), пиксели (pixels), дюймы (inches), сантиметры (centimeters), миллиметры (millimeters) и пики (picas), а также используя новые единицы измерения. Для Web-дизайнеров естественно выбирать пункты или пиксели, хотя все будет зависеть от ваших вкусов.Использование единиц, отличных от пунктов, может вызывать серьезные проблемы. Если вместо пунктов используются пиксели, то хотя текст, размер которого задан в пикселях, будет виден в броузерах с поддержкой таблиц стилей (типа Internet Explorer 3.0 и выше или Netscape 4.0 и выше), он может не выводиться на печать!
- Text-decoration. Этот параметр полезен для отключения подчеркивания ссылок. Для этого нужно просто задать для параметра text-decoration значение none (отсутствует). Другие возможные значения — underline (подчеркивание), italic (курсив) и strikethrough (перечеркивание).
- Line-height. Это то же самое, что интерлиньяж (leading). Данный параметр определяет высоту каждой строки текста — по существу, расстояние между строками.
- Background. Этот параметр помещает текст на цвет или изображение. Здесь используются атрибуты color или url (адрес), где адрес указывает расположение файла изображения. Внимание! Этот параметр может быть назначен не только тегу , но и любому тегу или фрагменту текста, чтобы выделить нужную область на странице.
Классы и группировка
Два других интересных аспекта таблиц стилей — это классы и группировка.
Классы (class) определяют способ разбиения стилей на очень точные части. Всякий раз, когда вы хотите, чтобы определенный фрагмент текста как-то отличался от остальных, вы можете создать собственный тег HTML. Каждый тип форматирования текста, который вы определяете, называется стилевым классом (style class).За стилевым классом в таблице стилей закрепляется имя. Это имя задается как обычное имя, но с точкой в качестве первого символа.
Предположим, что в документе вам нужны два различных вида заголовков H1. Можно создать стилевой класс для каждого из них, помещая следующий код в таблицу стилей:
Н1.serif < font: 34pt "Times New Roman", Times, serif; color: #DC143C;>H1.sansДля выбора между двумя стилями класса в теге (аналогичные правила действуют и для других тегов, имеющих описание а таблице стилей) используется атрибут class=имя_стиля.
Обратите внимание — здесь имя стиля употребляется без точки.
Например:Wisdom
«Do not fear your enemies. The worst they can do is kill you. Do not fear friends. At worst, they may betray you. Fear those who do not care; they neither kill nor betray, but betrayal and murder exists because of their silent consent.» — Bruno Jasienski.
More Wisdom
«Young love is a flame; very pretty, often very hot and fierce, but still only light and flickering. The love of the older and disciplined heart is as coals, deep burning, unquenchable.» — Henry Ward Beecher.
Слово Wisdom отображается шрифтом Times New Roman, 34 пункта темно-красного цвета (на тех компьютерах, где есть поддержка таблиц стилей броузерами), а слова More Wisdom отображаются шрифтом Arial, 18 пунктов темно-оранжевого цвета (при этом задано выравнивание заголовка посередине страницы). Для текста в промежутках между этими заголовками по умолчанию используетcя шрифт Times, поскольку явно не указал шрифт для этих фрагментов. Поэтому броузер выбирает собственный заданный по умолчанию основной шрифт.
Мудрые мысли написаны на хорошем английском языке, и принадлежат действительно мудрым людям. В качестве упражнения попробуйте сделать перевод.В HTML-коде запись этих «Мудростей» выглядит так:
"Do not fear your enemies. The worst they can do is kill you. Do not fear friends. At worst, they may betray you. Fear those who do not care; they neither kill nor betray, but betrayal and murder exists because of their silent consent." - Bruno Jasienski."Young love is a flame; very pretty, often very hot and fierce, but still only light and flickering. The love of the older and disciplined heart is as coals, deep burning, unquenchable." - Henry Ward Beecher.
Группировка (grouping) состоит в объединении нескольких свойств и значений стилей. При этом возникают более жесткие правила для форматирования. Ниже приведен пример обычного класса:
Это означает, что все абзацы класса g будут отображаться шрифтом Arial, 22 пункта, с интерлиньяжем 14 пунктов. Если применить к этому классу группировку, то получится следующее определение:
Страница будет отображаться одинаково в обоих случаях. Обратите внимание на то, что сначала указываются значение для размера шрифта, высота строки после наклонной черты, а затем идет название шрифта. При группировке всегда требуется правильный синтаксис выражения. Попробуем воспользоваться пределением абзаца класса g.
ПРИМЕР абзаца класса g, к которому применена группировка.
Краткий обзор способов размещения элементов страницы
Таблицы стилей могут помогать в создании макета страницы, предоставляя широкие возможности выравнивания элементов страницы и управления полями. Выравнивание текста выполняется с помощью свойства text-align. Возможные значения left, right, center и justify.
Посмотрим, как это выглядит.
Итак, в данном примере используется встроенный стиль для выравнивания текста и его воздействия на отдельные абзацы.
Для управления полями Web-страницы используются четыре свойства: margin-top, margin-bottom, margin-left и margin-right.
Как и все свойства CSS, они могут применяться к любому логическому объекту. Обычно для управления полями используются объекты BODY и Р (paragraph — абзац). Для указания значений полей можно использовать разные единицы измерения: пиксели, пункты, сантиметры, дюймы и проценты.
Для справки — стандартные макеты страниц HTML обычно измеряются в пикселях.CSS разрешают использовать отрицательные значения для полей. Это дает возмоожность дизайнеру создавать перекрывающиеся области страницы, добиваясь интересного эффекта.
На странице Пример создания 3-D эффекта приводится пример, в котором использовалось отрицательное значение полей margin-topдля создания графического эффекта без употребления графических средств.
Пример создания 3-D эффекта
Рассмотрим пример, создающий эффект, который без задания стиля можно было бы достичь только с помощью графики. В процессе создания Web-страницы наложим один текст на другой.
Эта возможность частичного перекрытия текста часто используется в дизайне реальных страниц.
Сначала посмотрим на результат, а затем обсудим как он получен.Пример создания 3-D эффект с помощью CSS BODY .тень < color: #DBDBDB; text-align : right; font : lighter "Times New Roman", Times, serif; margin-top : 30px; font-size : 270px; line-height : 270px; >.основа < color: red; font : 900 220px "Times New Roman", Times, serif; margin-top : -230px; line-height : 250px; >.слой1 < color: black; margin-top : -130px; font-weight : normal; font-size : 65px; line-height : 65px; font-family : Arial, Helvetica, sans-serif; >.слой2Пример наложения текстов друг на друга, реализованный с помощью тега
и CSS. В результате получаем 3-D эффект.
Возврат к рассмотрению вопроса о каскадных таблицах стилейВ данном примере тег применяется для выделения фрагмента HTML-документа. Он ничего не форматирует, а лишь помечает фрагмент текста, который рассматривается как единый объект.
Атрибут class этого тега позволяет сослаться на таблицу стилей, и таким образом задать стиль представления текста, расположеного между тегами и .Обратите внимание на то, как в таблице стилей определяется стиль — набору свойств в фигурных скобках присваивается имя, перед которым ставится точка.
В этом примере тексты определяются как бы в слоях, которые накладываются друг на друга.
Сначала выводится слой тень, на него накладывается слой основа, а затем слой1 и слой2.
Порядок, в котором слои накладываются друг на друга, задается порядком следования фрагментов текста, помеченных тегом .
Перекрытие слоев обеспечивается применением отрицательных значений свойста margin-top (отступ сверху).В рассмотренном нами примере были использованы следующие свойства:
margin-top отступ сверху color цвет font-size размер шрифта font-family семейство шрифтов font-weight степень «жирности» шрифтов line-height высота строки Запомните — используя отрицательные значения свойста margin-top, можно наложить один текст на другой.
Позиционирование элементов
Рассмотрим вопрос позиционирования элементов на странице.
На этом сайте разбирался вопрос о расположении элементов на странице путем использования фреймов и таблиц.
Для перекрытия элементов приходилось применять особые ухищрения, как в примере создания 3-D эффекта.Существуют специальные свойства для позиционирования, применяя которые можно легко установить элементы в нужные места страницы. При этом элементы могут накладываться друг на друга.
- left — для задания расстояния в пикселах от левого края окна (х-координата);
- top — для задания расстояния в пикселах от верхнего края окна (у-координата);
- z-index — для указания порядка, в котором элементы будут перекрывать друг друга; это новое измерение, элементы с большим z-индексом будут появляться над элементами с меньшим z-индексом.
Конечно, при использовании этих трех свойств не создается эффект трехмерного пространства, но это уже нечто большее, чем двухмерная плоскость.
Кроме свойств-координат, для позиционирования элементов понадобится свойство position. Это свойство в сочетании со свойствами left и top позволяет устанавливать элементы в определенные позиции окна.
Свойство position может принимать три значения:
- absolute — заданные свойства left и top поставят элемент в место с координатами х и у относительно верхнего левого угла контейнера (объекта, содержащего данный элемент).
Если они определены для элемента вне контейнера, то началом отсчета координат будет верхний левый угол страницы. Заметим, что положение элемента не зависит от положения его тэга внутри HTML-документа.- relative — элемент будет установлен в соответствии с тем, в каком месте исходного текста он находится; это значение установлено по умолчанию.
Например, если элемент находится в трех строках от начала его выделения в тексте документа, то по умолчанию считается, что свойство позиционирования имеет значение relative, а свойства координат left и top — нулевые значения.
Ненулевые значения свойств left и top осуществляют сдвиг элемента относительно исходного положения.- static — элемент будет поставлен в некоторое положение относительно фона и не будет перемещаться при прокручивании страницы.
Посмотрим пример помещение текста на определенное место на странице и назначение ему красного цвета.
Пример позиционирования текста Это - позиционированный текст
Текст, созданный без свойства позиционирования
Возврат к рассмотрению вопроса о каскадных таблицах стилей
Стиль текста был задан в теге заголовка первого уровня с помощью атрибута STYLE. В дальнейшем тег применен еще раз, но стиль, указанный в атрибуте STYLE, уже не применяется.
Второй текст появляется там, где он и должен появиться, как если бы первого тега не было совсем.Верхний текст не позиционирован, а нижний — позиционирован.
Дело в том, что в первом случае использования тега элемент позиционировался индивидуально с помощью атрибута STYLE, а во втором случае специального позиционирования не осуществлялось и броузер расположил элемент так, как он это должен был сделать по умолчанию.Статические фильтры
Фильтры — это эффекты изменения внешнего вида текста и графики на странице.
Иначе, фильтр — это трансформация исходного изображения по определенным правилам.Существуют статические и динамические фильтры.
Статические фильтры просто изменяют внешний вид элемента. Динамические фильтры позволяют изменить графический элемент со скоростью, задаваемой пользователем. Работа динамических фильтров основана на сценариях.Статический фильтр задается как свойство в таблице стилей.
filter: название_фильтра (параметр1,параметр2. параметр№)Параметры не обязательны.
В версии 4 языка HTML имеется 14 статических фильтра.
- Blur — эффект размытости
- Fliph — горизонтальное отражение картинки или текста
- Flipv — вертикальное отражение картинки или текста
- Wave «волнистое» искажение картинки или текста
- Xray — изображение только контура объекта
- графика и текст без фильтра;
- графика и текст с фильтром Flipv;
- графика и текст с фильтром Fliph;
- графика и текст с фильтром Blur.
Обратите внимание: фильтр Blur, примененый к тексту создает эффект трехмерности — создается впечатление отбраываемой тени.
Посмотрим еще один пример использования статических фильтров. . В данном случае применение фильтра Xray создает эффект негатива «картинки», а также изменяет цвет шрифта текста. Фильтр Wave создает не просто «волнистое» искажение картинки — ее просто не видно за этими полосками! Зато текст, обработанный спомощью этого фильтра стал пестреньким (по цвету) и очень миленьким. Не правда ли?
Инструментальные средства для работы c CSS
Основную информацию о каскадных таблицах стилей можно найти на следующих web-сайтах:
Учебник Малдера (Mulder) по каскадным таблицам стилей http://webmonkey.com/authoring/stylesheets Справочник по совместимости каскадных (многоуровневых) таблиц в журнале Webreview. http://style.webreview.com Спецификация каскадных (многоуровневых) таблиц стилей http://www.w3.org/Style/CSS Возврат в начало страницы Возврат на главную страницу сайта