Разработка CSS-документов
Вводное словоФорматирование (оформление) веб-страниц может осуществляться посредством использования специальных атрибутов width и height, расположив их внутри тега <IMG>. И конструкция вида
Предположим, на сайте представлены несколько десятков схожих фотоиллюстраций с одинаковыми шириной и высотой. Далее представим, что потребовалось изменить размеры всей этой группы. Если общее количество фотографий не превысит 20, данную процедуру можно будет провести за несколько минут. Но что делать, если таких фото окажется 320 или 500? Причём, все они будут использоваться ещё и разными
В том же случае, если новая концепция сайта будет подразумевать более масштабные изменения, может потребоваться применить другой способ отображения и для текстовых абзацев. И если, к примеру, изначально для вывода содержимого абзаца на экран применялось выравнивание текста по левому краю при помощи атрибута align, процесс перехода к новому способу форматирования текста с выравниванием по ширине
Процесс вёрстки (объединения элементов) веб-страниц можно значительно облегчить, воспользовавшись специальными стилями форматирования. При таком способе организации контента можно достаточно легко и быстро вносить изменения в существующие img-hd, указав упоминание об этом, используя специальный атрибут class в теге <IMG>. И при помощи конструкции вида img-hd. Причём, чтобы в дальнейшем изменить ширину и высоту или добавить иные параметры изображений, достаточно будет внести изменение лишь в описание CSS-селекторов такого стиля.
Для более полного представления о веб-разработке ознакомьтесь с лайфхаками нашего информационного партнёра Мазаяки! |
||
В рамках форматирования веб-страниц выделяют несколько методов определения стилей. Наиболее распространено ведение отдельного внешнего .css вместо .txt или .htm. А чтобы браузер узнал о существовании подобного файла, в зоне заголовка
<!-- Листинг #1 -->
<HTML>
<HEAD>
<TITLE>Название веб-страницы</TITLE>
<LINK rel="stylesheet" type="text/css" href="/css/style.css">
</HEAD>
<BODY>
<P class="p-main">Основной текст…</P>
</BODY>
</HTML>
Таким образом, при форматировании контента можно использовать внешние стилевые файлы. При этом может потребоваться внедрение дополнительного указания соответствующего стиля того или иного элемента. Так, например, для оформления абзацев можно применять конструкцию вида class.
Наряду со стилевыми классами можно выделить и ещё одну схожую методику оформления содержимого id. К примеру, конструкция вида p-1, который также, как и классы, может быть описан в стилевом
На сегодняшний день в рамках форматирования веб-документов применяются как классы, так и идентификаторы. Так в чем же разница, и какой способ представляется лучшим? Дело в том, что главное отличие идентификаторов заключается в их уникальности. И если одни и те же классы могут быть присвоены разным элементам, то в случае с идентификаторами все обстоит несколько сложнее. Собственно, как и следует из названия, идентификатор призван именно идентифицировать элементы как уникальные. Следовательно, каждому новому элементу надлежит назначать новый идентификатор. Другими словами, при желании форматировать текст, разбитый на 25 абзацев, пришлось бы создавать 25 идентификаторов, но всего лишь один общий класс. Подробности…
<!-- Листинг #2 -->
<HTML>
<HEAD>
<TITLE>Название веб-страницы</TITLE>
<LINK rel="stylesheet" type="text/css" href="/css/style.css">
</HEAD>
<BODY>
<P class="p-main" id="p-1">1-ый абзац…</P>
<P class="p-main" id="p-2">2-ой абзац…</P>
…
<P class="p-main" id="p-25">25-ый абзац…</P>
</BODY>
</HTML>
Тем не менее, идентификаторы могут сыграть важную роль при разработке <input type="radio"…>, можно воспользоваться тегом <label> для объединения самого элемента ввода с текстовой записью, представленной по соседству (см. <label for="r01"><input type="radio" позволила бы пользователю сделать желаемый выбор, не только нажав на сам элемент ввода, но и на соседствующий текст с подсказкой. Подробности…
<!-- Листинг #3 -->
<HTML>
<HEAD>
<TITLE>Название веб-страницы</TITLE>
</HEAD>
<BODY>
…
<label for="r01"><input
type="radio" value="1" id="r01"
name="inp_sx" checked>Муж.</label>
<label for="r02"><input
type="radio" value="2" id="r02"
name="inp_sx">Жен.</label>
…
</BODY>
</HTML>
Кроме того, при помощи идентификаторов можно создавать динамические getElementById("p-1") для абзаца с присвоенным идентификатором p-1. Хотя, безусловно, такой способ представления данных подразумевает поддержку JavaScript в браузере пользователей. И настроив высокий уровень безопасности браузера, некоторые посетители будут лишены возможности насладиться всеми доступными опциями сайта (но об этом чуть позже)…
Также следует отметить и ещё одно отличие между классами и идентификаторами. Если при определении стилей через идентификаторы используется само наименование идентификатора со специальным символом # в начале, то варианты для определения классов более разнообразны.
Так, например, конструкция вида .img-logo {width:600px; height:60px;} задает размеры элементу, в котором указывается ссылка на данный класс. А схожая конструкция img.img-logo {width:600px; height:60px;} будет применена браузером лишь для элемента <img>. Поскольку перед определением класса .img-logo указывается название конкретного тега <img>. Кроме того, при описании стилей можно определить параметры конкретного тега, без использования классов или идентификаторов. Для этого достаточно указать лишь название тега и соответствующие значения параметров. А конструкцией вида img {width:600px; height:60px;} можно задать ширину и высоту для всех изображений, которые явно не используют других значений. Подробности…
<!-- Листинг #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;}
#p-1 {font-size: 16pt;}
#p-1, #p-2 {color: #00ea00;}
IMG {border: none;}
IMG.img-128 {width: 128px; height: 128px;}
.el-cnt, .txt-red {text-align: center;}
.txt-red {color: #ea0000;}
</STYLE>
</HEAD>
<BODY>
<P class="p-l" id="p-1">1-ый абзац…</P>
<P id="p-2">2-ой абзац…</P>
<IMG class="img-128" src="/i/image1.gif">
<P>3-ий абзац…</P>
…
<DIV class="txt-red">Примечание…</DIV>
<P class="p-r">Подпись.</P>
</BODY>
</HTML>
В предыдущем Листинге демонстрируется альтернативный способ регистрации стилей. Как видно из примера, определение стилей возможно не только во внешнем
Если же рассматривать комфортабельность определения стилей внутри самой
Существует и ещё один, не менее сомнительный способ (пере)определения стилей форматирования контента. Данный метод предусматривает размещение style. При таком способе оформления содержимого
<!-- Листинг #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>
Несмотря на некоторые недостатки, каждый метод определения стилей может найти своё применение. К примеру, для
Обратная связь