Каскадные таблицы стилей (Cascading Style Sheets - CSS) позволяют устанавливать стили за один раз для всего сайта, страницы, документа или для одного HTML-тега. Это отдельный код, который расширяет возможности HTML, позволяя переопределять уже существующие теги.
CSS очень просто использовать. Для них не требуются плагины или сложное ПО. Это всего лишь правила, которые определяют, как должен выглядеть HTML и как он должен реагировать на действия пользователя.
Все правила, независимо от их местоположения и типа, состоят из трех частей:
- селекторы - буквенные или численные символы, которые определяют правило.
- свойства - описывают вводимый элемент. Их существует несколько десятков, и каждое отвечает за некий аспект оформления и эффекты.
- значения - определяют природу свойства. Могут представлять собой ключевое слово (yes, no), число или проценты.
Синтаксис правила выглядит так:
selector {property:value;}
Правила можно установить:
- В HTML-теге внутри документа.
- В заголовке документа.
- Во внешнем документе, связанным с вашим.
Нам на Ли.ру подойдет первый пункт, потому что мы никак не можем повлиять на общий установленный стиль сайта, но можем придать свой неповторимый стиль сообщениям и комментариям.
Синтаксис наших правил, влияющих непосредственно на HTML-теги на страницах Ли.ру, будет выглядеть так:
<html-тег style="свойство:значение;">текст</html-тег>
Давайте попробуем рассмотреть пример изменения стиля заголовка.
Обычный заголовок третьего уровня выглядит так:
Это заголовок третьего уровня
<h3>Это заголовок третьего уровня</h3>Внесем небольшие дополнения в его стиль:
Это заголовок третьего уровня
Тег остался прежний - <h3>заголовок</h3>, но дополнения изменили его цвет, размер и положение на странице:
<h3 style="color:teal; font-size:x-large; text-align:center;"> , причем закрывающий тег мы вообще не тронули.
Здoрово, правда?
И так мы можем поступать со всеми тегами! Только учтите, что не каждое определение CSS подходит любому тегу. Это зависит от его природы. Вы же не станете применять выравнивание к тегу <b>? Полный список определений вы можете найти на любом сайте, посвященном CSS, но на Ли.ру вам понадобится не больше половины. И уже этого будет достаточно для создания вашего собственного стиля.
А теперь давайте разберемся с загадочным тегом DIV.
Что в нем такого загадочного? Название его происходит от слова division, то есть разделение. Это элемент группировки, он используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать – перемещать, включать/выключать, создавать слои, регулировать отступы и т.п. В любом HTML-справочнике вы найдете только один атрибут этого тега, отвечающий за выравнивание на странице (align), зато сколько свойств стиля можно к нему применить! Это и границы (borders), и фон (в том числе и картинка), и видимость, и прокрутка. Не говоря уж о свойствах текста, находящегося внутри...
Рассмотрим положение текста внутри нескольких контейнеров.
Внешний отвечает за фон, рамку и размер:
<div style="border:outset #E1E1FF 2px; background-color:#E1E1FF; background-image:url('адрес фоновой картинки'); width:650px; height:450px;">
- свойство border определяет вид границы - стиль, цвет и ширину;
- свойство background-color определяет цвет фона, который вы видите, пока подгружается фоновая картинка background-image (или в случае, если у вас отключена подкачка картинок);
- свойства width и height определяют соответственно ширину и высоту слоя, измеряются в пикселях. Можно также и в процентах (от размера окна).
Внутренний div отвечает за стиль шрифта и прокрутку. Даже если текста много, можно запихнуть его в маленькое окошко:
<div style="border:solid #E6ECE0 2px; padding:5pt; width:550px; height:350px; background-image:url('адрес фоновой картинки'); overflow:auto; position:relative; left:50px; top:50px; text-indent:10pt; font-size:medium; font-family:'Times New Roman';">
- свойство border определяет вид границы - стиль, цвет и ширину;
- свойство background-image определяет очередную фоновую картинку;
- свойство overflow регулирует реакцию браузера, если реальные размеры блока не соответствуют заданным и может возникнуть его переполнение.
По умолчанию браузер покажет все содержимое блока, но мы можем прописать:
* hidden – не влезающая часть просто не будет показана (скрыта);
* visible – весь блок будет отображен;
* scroll – браузер создаст полосу прокрутки (и горизонтальную и вертикальную);
* auto – будет создан только нужный лифт. Именно этот параметр я и прописала.
- свойство position отвечает за положение блока на странице.
CSS может с точностью до пикселя определить расположение любого блока. Причем возможно наложение одного блока на другой. Координаты блока могут отсчитываться как от левого верхнего угла окна (параметр absolute), так и от расположенного рядом блока (параметр relative).
В обоих случаях указываются две координаты: расстояние слева (left) и расстояние сверху (top). Я рассчитала размер внешнего и внутреннего блоков так, чтобы отступы сверху и слева помещали внутренний блок в центре внешнего.
- свойство text-indent обеспечит нам отступы в начале каждого абзаца;
- свойства font-size и font-family должны быть вам знакомы, они отвечают за размер шрифта и за его разновидность. Размеры лучше указывать в соответствии со стандартами:xx-small, x-small, small, medium, large, x-large, xx-large. Шрифт, если его название длиннее одного слова, нужно писать в одиночных кавычках.
Можно менять цвет прокрутки:
scrollbar-face-color - это цвет передней стороны панели прокрутки
scrollbar-track-color - это цвет полосы, по которой "ходит" панель прокрутки.
scrollbar-arrow-color - это цвет треугольника на верхнем и нижнем квадратах.
scrollbar-shadow-color - это цвет нижней и правой граней панели прокрутки.
scrollbar-darkshadow-color - это цвет тени от панели прокрутки.
scrollbar-highlight-color - это цвет верхней и левой граней панели прокрутки
scrollbar-3dlight-color - это цвет отсвета.
#FFFFFF - это коды цвета, которые можно менять.
Код для вставки цветной прокрутки на страничку (прописывается в начале документа, между тегами <HEAD> и </HEAD>) -
<STYLE TYPE="text/css"><!--
body{
scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #333333;
scrollbar-highlight-color: #CCCCCC;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #666666;
scrollbar-track-color: #FFFFCC;
scrollbar-arrow-color: #FF6600;
}
-->
</STYLE>
Примеры:
Знаешь, а я больше не буду писать стихов.
Ну кому нужны эти бредни, подумай сам?
Оборву паутину ненужных и жалких слов
И швырну на потеху холодныим сквозным ветрам.
Знаешь, а я больше не верю в мечты и сны,
В те, шальные - где мы с тобой навсегда вдвоем.
Затихает дрожащий звук последней струны,
На которой, играючи, души себе мы рвем.
Знаешь, а я никогда уж не буду любить.
Не буду смеяться и плакать - всегда невпопад.
Ведь глупо, скажи? - перекрашивать в сказку быль,
И писать старательно "рай" на воротах в ад.
Мне осталось всего немного - последний шаг! -
Чтоб убить надежду. Ну, или отдать взаймы.
И тогда, быть может, смогу я легко дышать.
И видеть проблески звезд средь кромешной тьмы.
Эль
Синтаксис:
<div style="border:outset #A21F0E 2px; background-image: url('URL'); width:500px; height:200px;"><div style="overflow:auto; position: relative; left: 30px; top: 0px; width:480px; height: 200px; scrollbar-face-color: #A21F0E; padding-bottom: 0px; margin: 0px; scrollbar-highlight-color: #DDCC12; scrollbar-shadow-color: #e5f2f8; scrollbar-3dlight-color: #B1F28D; scrollbar-arrow-color: #FEF610; padding-top: 0px; scrollbar-darkshadow-color: #09587D;">текст</div></div>
Поманю сиянием древних таинственных чар,
Оплету паутиной горячих и нежных слов.
Поцелуями выжгу на сердце твоем печать,
Увлекая в пучину волнующих грешных снов.
Брошу ночь колдовскую рабыней к твоим ногам,
Лунный свет заискрит на шёлке крутого бедра...
И сольемся в извечном танце на зависть богам,
Отдаваясь на волю соленым морским ветрам.
Отдаваясь на волю желаний и тайных грёз,
На секунду поверив в Вечность, где мы вдвоем.
И взорвется вселенная тысячью новых звёзд!...
Жаль........
Чего не придумаешь грустным осенним днем.
Синтаксис:
<div style="border:outset #E1E1FF 2px; background-color:#E1E1FF; background-image:url('URL'); width:520px; height:250px;"><div style="overflow:auto; position: relative; left: 30px; border:solid #E6ECE0 2px; padding:5pt; width:480px; height:200px; background-image:url('URL'); left:20px; top:20px; text-align:left; text-indent:30pt; font-size:medium; font-family:'Times New Roman';">текст</div></div>
Вот несколько ссылок на списки свойств CSS и их возможные значения:
Несколько внутренних тегов SPAN помогли мне оформить заглавные буквы, а для маркеров списка с помощью CSS я прописала свои картинки.
