.

Управление элементами дизайна с помощью CSS

Каскадные таблицы стилей обладают огромным набором настроек дизайна текстовых и графических элементов. В частности, с помошью CSS задают определенный стиль и размер шрифта, цвет, выравнивание абзаца любого текстового HTML-элемента (например, заголовка или какого-то другого).

Существует три разновидности CSS-стилей.

Встроенные (internal). Встроенные таблицы стилей задаются в теге <head> и влияют на стиль только в пределах одной Web-страницы.

 Внешние (external). Внешние таблицы стилей задаются в отдельном документе (отдельно от Web-страницы), который содержит описание всех CSS- стилей. Таким образом, множество Web-страниц обращаются к одному и тому же CSS-документу. Если ьы захотите что-то глобально изменить, достаточно поменять только один CSS-файл. Все страницы, которые ссылаются на этот файл, будут обновлены автоматически.

Внутренние (inline). CSS-стиль можно определить на Web-странице внутри одного HTML-тега. Ниже приведен пример внутренней таблицы стилей.

<р style="color: а60433; font-weight: bold; font-size:

4>xx-large; text-align: left;">3TO пример внутренней таблицы стилей</р>

В каскадных таблицах стилей “каскадность” заключается в возможности комбинировать все три вида стилей на странице. Последовательность или “каскадность” определяет, какой именно стиль будет применен к объекту, если для него задано несколько стилей. Наиболее высокий приоритет — у внутренних таблиц стилей, затем следуют встроенные, а за ними — внешние. Если по какой-либо причине браузер не распознает стили, подключаются настройки по умолчанию, у них приоритет наименьший.

Настройка отступов на Web-странице

По умолчанию сверху и слева на HTML-странице остается отступ в 10 пикселей (это не относится к мозаичным узорам, фоновым рисункам и сплошному фону страницы!. Вы можете задать отступ для любого элемента. К примеру, сделать так, чтобы содержимое страницы располагалось в крайнем левом верхнем углу с координатами 0,0 (X.Y). Или наоборот — оставить большой отступ, как 14.4. В этом примере я использовала эффектный фоновый рисунок, а отступ сделала таким, чтобы все содержимое находилось на цветной области изображения.

Для установки отступов на странице лучше всего использовать CSS. Добавьте следующий HTML-код в раздел <head> (между открывающим и закрывающим тегами <head>).

<style type="text/cssn> body {

margin-left: 50px; margin-right: 50px; margin-bottom: 50px;

}

</style>

Лучше всего определить отступ во внешней таблице стилей. Так вы сможете применить настройки отступа ко всему сайту. Если на какой-то странице нужно задать другой отступ, определите его во встроенной таблице стилей. Благодаря каскадному принципу таблиц стилей заданный вами отступ будет иметь больший приоритет, чем настройки во внешней таб лице стилей.

Для достижения совместимости с браузерами убедитесь, что вы не поставили пробел между 50 (или любым другим числовым значением) и рх (обозначением пикселей). В браузерах Firefox и Netscape возникают проблемы при использовании пробела перед рх.

Мозаичные узоры и фоновые рисунки

В главе 13 обсуждались стандартные возможности HTML для работы с мозаичным узором. Узор начинался в левом верхнем углу страницы и повторялся от края до края и сверху донизу. Используйте CSS во избежание повторения фонового рисунка и для большего контроля над фоновыми изображениями.

Узоры с повторением и без

Если вы вставите следующую часть CSS-кода в раздел <head> вашей HTML-страницы, вы получите центрированное фоновое изображение, которое не будет повторяться.

<style type="text/css"> body {

background-image: url(tile.gif) background-repeat: no-repeat; background-position: center;

}

</style>

В данном примере атрибуту background-repeat присвоено значение no-repeat, т.е. узор не будет повторяться. Если вы хотите, чтобы он повторялся, просто задайте значение repeat. Данный атрибут также позволяет определить порядок заполнения страницы узором; он может повторяться только по оси X или только по оси Y. Для этих целей используется следующий синтаксис: background-repeat: repeat-у;

Зафиксированный фон, который не прокручивается вместе со страницей

Если вы хотите, чтобы ваш фоновый рисунок оставался в фиксированном положении, когда прокручивается остальное содержимое страницы, к перечню атрибутов добавьте следующий атрибут (добавьте его сразу после атрибута background-repeat), background-attachment: fixed;

Расположение мозаичного узора

И наконец, вы можете решить, в каком месте на странице будет начинаться фоновый рисунок. Готовый пример — первая строка кода, представленного ниже. Далее следует перечень других значений, которые можно использовать вместо значения top left. Background-position: top left;

В последних двух строках значения могут быть заданы любыми числами. Числа 40 и 60%, а также 50 пикселей я взяла лишь в качестве примера. Как видите, CSS-стили предоставляют огромные возможности по размещению элементов дизайна в нужном месте на странице.

Выделение текста цветом

CSS-стили позволяют не только задать цвет фона Web-страницы (это также можно сделать при помощи стандартных HTML-тегов), но и выделить каким-нибудь цветом отдельные фрагменты текста. Когда вы определяете цвет выделения текста, получается эффект маркера.

В разделе <head> задайте имя для цвета выделения текста, например highlighter или любое другое, которое вам нравится.

<head>

<style type="text/css"> span.highlighter {

background-color:yellow

}

</style>

</head>

Затем в разделе <body>, где непосредственно размещен сам текст, отформатируйте отдельный его фрагмент CSS-стилем highlighter.

Dont forget to<span class="highlighter"> bring your own 4>lunch</span> on Tuesday when you come.

Форматирование текста

CSS-стили предоставляют огромное количество возможностей для работы с текстом. Цвет текста может быть любым; текст можно взять в рамку; выделить цветом, чтобы получить эффект маркера, — перечень возможностей можно продолжать очень долго. На тему CSS-стилей написано множество книг. Чтобы вы получили хоть небольшое представление, ниже я привожу несколько наиболее часто используемых вариантов с примерами кода.

Установка шрифта, цвета, размера и стиля текста

Как и в HTML, CSS-стили позволяют задать основные свойства текста Стиль определяется в разделе <head>.

<style type="text/css">

. styleA {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12pt;

font-style: italic;

line-height: 2 Opt;

color: #3366CC;

}

</style>

В разделе <body> вы применяете этот стиль к фрагменту текста.

<р class="styleA">This paragraph uses "style A," a collection 4>of font settings. Notice the font is set to b Verdana, the size is 12 points, its blue, italic,

•band has a "line-height" (space between each line *bof text) set at 20 points.</p>

This text uses "style A " a collection of font settings. Notice tl le font is set to Verdana, the size is 12 points, it s btue, italic arid has a “line-height (space between each line of text) set at 20 points.



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×