Элементы Ресурсы
:
x
0
 

Интернет-проекты

ПРАНДИТ
Инфонетекс
Автоспорт
Кулинарния
Эзотерика
Урлинки
Все проекты
Обратная связь Игры Настройки
  Партнёры Каталог
 

Партнёры

Золотой Гуру   Мазаяки Проджект   Регистратор доменов Webnames.ru
 

Содержание

Реклама и PR
IT-системы
Веб-дизайн
Домены
Хостинг
HTML
HTML-теги
Спецсимволы
CSS
CSS-параметры
Термины
Приёмная
Регламент
Настройки
Онлайн-игры
Вебмастерская
Партнёры Карта сайта
Все проекты
 

Каскадные таблицы стилей

Разработка CSS-документов

Форматирование (оформление) веб-страниц может осуществляться посредством использования специальных атрибутов HTML-тегов, для которых могут быть указаны соответствующие значения. Так, например, для определения ширины и высоты изображения можно задействовать атрибуты width и height, расположив их внутри тега <IMG>. И конструкция вида <IMG width="600" height="800" src="/img/image.jpeg"> задавала бы значения в 600px по ширине и 800px по высоте для текущего рисунка. Выглядит достаточно просто, если бы не одно "НО"...

Предположим, на сайте представлены несколько десятков схожих фотоиллюстраций с одинаковыми шириной и высотой. Далее представим, что потребовалось изменить размеры всей этой группы. Если общее количество фотографий не превысит 20, данную процедуру можно будет провести за несколько минут. Но что делать, если таких фото окажется 320 или 500? Причём, все они будут использоваться ещё и разными веб-страницами... В таком случае процесс обновления данных на сайте может затянуться на долгие часы, а то и на несколько дней!

В том же случае, если новая концепция сайта будет подразумевать более масштабные изменения, может потребоваться применить другой способ отображения и для текстовых абзацев. И если, к примеру, изначально для вывода содержимого абзаца на экран применялось выравнивание текста по левому краю при помощи атрибута align, процесс перехода к новому способу форматирования текста с выравниванием по ширине опять-таки может затянуться. Поскольку для обновления записей вида <P align="left">...</P> на <P align="justify">...</P> потребуется некоторое время. И чем больше веб-страниц будет находиться на сайте, тем дольше и труднее будет обстоять обслуживание и редактирование контента (содержимого) такого сайта.

x

Процесс вёрстки (создания) веб-страниц можно значительно облегчить, воспользовавшись специальными Стилями форматирования. При таком способе организации контента можно достаточно легко и быстро вносить изменения в существующие веб-документы. Дело в том, что данная концепция предполагает создание общих стилей форматирования для схожих элементов. Например, для изображений одинакового размера можно задать единый стиль img_image, указав упоминание об этом, используя специальный атрибут class в теге <IMG>. И при помощи конструкции вида <IMG class="img_image" src="/img/image.jpeg"> можно "сообщить" браузеру о том, что для каждого из таких изображений следует применять одинаковый способ форматирования, заявленный в стиле img_image. Причём, в случае необходимости изменить ширину изображений, высоту или иные параметры, достаточно внести изменение лишь в описание самого стиля.

В рамках форматирования веб-страниц выделяют несколько методов определения стилей. Наиболее распространено ведение отдельного внешнего CSS-документа, в котором можно было бы хранить параметры всех стилей, используемых на страницах сайта. Как и сама веб-страница, CSS-файл по сути является текстовым документом. И для его создания можно использовать простой текстовый редактор (например, Блокнот). Но при сохранении файла следует указывать расширение .css вместо .txt или .htm. А чтобы браузер "узнал" о существовании подобного файла, в зоне заголовка веб-страницы необходимо указать ссылку на этот внешний источник. Подробности... -/+

x<!-- Листинг #1 -->

<HTML>
<HEAD>
<TITLE>Название веб-страницы</TITLE>
<LINK rel="stylesheet" type="text/css" href="/css/style.css">
</HEAD>
<BODY>
<P class="p_main">Основной текст...</P>
</BODY>
</HTML>

Таким образом, при форматировании контента можно использовать внешние стилевые файлы. При этом может потребоваться внедрение дополнительного указания соответствующего стиля того или иного элемента. Так, например, для оформления абзацев можно применять конструкцию вида <P class="p_main">...</P>. Такой способ управления содержимым подразумевает создание определённых Классов стилей оформления, о чем упоминается в соответствующих тегах при помощи одноимённого атрибута "class".

Наряду со стилевыми классами можно выделить и ещё одну схожую методику оформления содержимого веб-страниц. Речь идет о присвоении тегам уникальных Идентификаторов, объявление которых происходит аналогично классам, но с применением альтернативного атрибута "id". К примеру, конструкция вида <P id="id_p_1">...</P> задает для текущего абзаца уникальный идентификатор id_p_1, который также, как и классы, может быть описан в стилевом CSS-файле.

На сегодняшний день в рамках форматирования веб-документов применяются как классы, так и идентификаторы. Так в чем же разница, и какой способ представляется лучшим? Дело в том, что главное отличие идентификаторов заключается в их уникальности. И если одни и те же классы могут быть присвоены разным элементам, то в случае с идентификаторами все обстоит несколько сложнее. Собственно, как и следует из названия, идентификатор призван именно идентифицировать элементы как уникальные. Следовательно, каждому новому элементу надлежит назначать новый идентификатор. Другими словами, при желании форматировать текст, разбитый на 25 абзацев, пришлось бы создавать 25 идентификаторов, но всего лишь один общий класс. Подробности... -/+

x<!-- Листинг #2 -->

<HTML>
<HEAD>
<TITLE>Название веб-страницы</TITLE>
<LINK rel="stylesheet" type="text/css" href="/css/style.css">
</HEAD>
<BODY>
<P class="p_main" id="id_p_1">1-ый абзац...</P>
<P class="p_main" id="id_p_2">2-ой абзац...</P>
...
<P class="p_main" id="id_p_25">25-ый абзац...</P>
</BODY>
</HTML>

Тем не менее, идентификаторы могут сыграть важную роль при разработке веб-страниц. В случае использования некоторых элементов ввода, идентификаторы могут помочь посетителям в управлении содержимым формы при заполнении. К примеру, указав идентификатор для "радио-кнопки" <input type="radio"...>, можно воспользоваться тегом <label> для объединения самого элемента ввода с текстовой записью, представленной по соседству (см. Элементы формы). И конструкция вида <label for="id_r01"><input type="radio" id="id_r01">Вариант-1</label> позволила бы пользователю сделать желаемый выбор, не только нажав на сам элемент ввода, но и на соседствующий текст с "подсказкой". Подробности... -/+

x<!-- Листинг #3 -->

<HTML>
<HEAD>
<TITLE>Название веб-страницы</TITLE>
</HEAD>
<BODY>
...
<label for="id_r01"><input type="radio" value="1" id="id_r01" name="inp_sx" checked>Муж.</label>
<label for="id_r02"><input type="radio" value="2" id="id_r02" name="inp_sx">Жен.</label>
...
</BODY>
</HTML>

Кроме того, при помощи идентификаторов можно создавать динамические веб-страницы. И если на проектируемом сайте предусмотрено интерактивное изменение содержимого веб-страниц в зависимости от действий пользователя, для реализации данной опции можно применить идентификаторы в совокупности со специально составленными JavaScript-сценариями. Например, воспользовавшись методом getElementById("id_p_1") для абзаца с присвоенным идентификатором id_p_1. Хотя, безусловно, такой способ представления данных подразумевает поддержку JavaScript в браузере пользователей. И настроив высокий уровень безопасности браузера, некоторые посетители будут лишены возможности насладиться всеми доступными опциями сайта (но об этом чуть позже)...

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

Так, например, конструкция вида .img_logo{width:250px;height:100px;} задает размеры элементу, в котором указывается ссылка на данный класс. А схожая конструкция img.img_logo{width:250px;height:100px;} может быть применима лишь для элемента <img>. Поскольку перед определением класса .img_logo указывается название конкретного тега <img>. Кроме того, при описании стилей можно определить параметры конкретного тега, без использования классов или идентификаторов. Для этого достаточно указать лишь название тега и соответствующие значения параметров. А конструкция вида img{width:250px;height:100px;} может задать ширину и высоту для всех изображений, которые явно не используют других значений. Подробности... -/+

x<!-- Листинг #4 -->

<HTML>
<HEAD>
<TITLE>Название веб-страницы</TITLE>
<STYLE type="text/css">
BODY {background-color: #fff;}
P {padding: 5px; text-indent: 25px; text-align: justify;}
P.p_l {text-align: left;}
P.p_r {text-align: right;}
#id_p_1 {font-size: 16pt;}
#id_p_1, #id_p_2 {color: #00ea00;}
IMG {border: none;}
IMG.img_250 {width: 250px; height: 100px;}
.el_cnt, .txt_red {text-align: center;}
.txt_red {color: #ea0000;}
</STYLE>
</HEAD>
<BODY>
<P class="p_l" id="id_p_1">1-ый абзац...</P>
<P id="id_p_2">2-ой абзац...</P>
<IMG class="img_250" src="/i/image1.gif">
<P>3-ий абзац...</P>
...
<DIV class="txt_red">Примечание...</DIV>
<P class="p_r">Подпись.</P>
</BODY>
</HTML>

В данном Листинге демонстрируется альтернативный способ регистрации стилей. Как видно из примера, определение стилей возможно не только во внешнем CSS-файле, но и непосредственно внутри самого веб-документа. При этом описание стилей в точности повторяет процедуру определения стилей в CSS-документе. Фактически, можно сказать, что содержимое такого внешнего источника попросту было скопировано в исходный код веб-страницы и размещено внутри контейнера <STYLE>...</STYLE>.

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

Существует и ещё один, не менее сомнительный способ (пере)определения стилей форматирования контента. Данный метод предусматривает размещение css-кода непосредственно внутри текущего тега, используя атрибут "style". При таком способе оформления содержимого веб-страниц процесс обновления значений параметров опять же занял бы слишком много времени. Соответственно, применение подобного метода видится не самым рациональным. Но если необходимо именно переопределить стиль для конкретного тега, для которого не потребуется изменять параметры в дальнейшем, можно использовать и подобный метод. Подробности... -/+

x<!-- Листинг #5 -->

<HTML>
<HEAD>
<TITLE>Название веб-страницы</TITLE>
</HEAD>
<BODY>
<P style="text-align:left; font-size:15pt;">Для 1-ого абзаца установлено выравнивание содержимого по левому краю; а также применен размер шрифта в 15pt...</P>
<P style="text-align:justify;">2-ой абзац выровнен по ширине...</P>
...
</BODY>
</HTML>

Не смотря на некоторые недостатки, каждый метод определения стилей может найти своё применение. К примеру, для сайта-визитки, содержащим лишь одну страницу, можно использовать и регистрацию стилей внутри контейнера <STYLE>...</STYLE>, расположенного в заголовке. Поскольку в данном конкретном случае ведение отдельного файла со стилями вряд ли поможет сократить время редактирования данных. Но в других случаях наиболее рациональным представляется именно способ с внешним CSS-файлом. Хотя... как известно, «сколько людей, столько и мнений...» Так что решение о выборе того или иного метода каждый разработчик вынужден принимать самостоятельно!

x
A
 

Социальные Медиа

Мы в соцсетях:
Поделиться с друзьями: