Каскадные таблицы стилей — CSS
Когда я освоил все вышеперечисленное (а осваивать пришлось, кстати, полностью самостоятельно — увы, на тот момент я не набрел на многочисленные сайты с обучалками и сурседами) то задумался: а нельзя ли как-то уменьшить те многоэтажные конструкции, какими были мои первые сайты.
В пору раннего чайничества я бывало рожал странички в 200-250 кб (Страшно вспомнить :0)) и мои знакомые приходя на такое «творчество народов севера» долго матерились: почему все так туго грузится.
Как оказалось, некоторое время спустя, кем-то умным была придумана специальная фича, названная «Каскадные таблицы стилей», в народе CSS, или просто «стили».
По сути своей стили — это присвоение группе элементов, промаркированных по типу или присвоенному обозначению («имени»), каких либо сложных параметров, описание которых для каждого из этих элементов утяжеляет страничку донельзя… Да и муторно оно..
В общем, прописав какому-либо элементу СТИЛЬ, мы можем впоследствии, имея хоть сто таких элементов, поменять вид каждого в течение буквально пары минут, изменив их СТИЛЬ в одном единственном файле.
Примерное содержание такого выносного файла стиля:
A:link {COLOR: #666666; TEXT-DECORATION: none}
A:visited {COLOR: #666666; TEXT-DECORATION: none}
A:active {COLOR: #666666; TEXT-DECORATION: none}
A:hover {COLOR: #666666; TEXT-DECORATION: underline}
BODY {margin=»5″; SCROLLBAR-FACE-COLOR: #FFFFFF; FONT-WEIGHT: normal; BACKGROUND: #FBFBFB; SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; SCROLLBAR-SHADOW-COLOR: #FFFFFF; COLOR: #666666; SCROLLBAR-3DLIGHT-COLOR: #AAAAAA; SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-TRACK-COLOR: #EEEEEE; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; SCROLLBAR-DARKSHADOW-COLOR: #555555;}
TD {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
DIV {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
P {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.small {FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.large {FONT-WEIGHT: bold; FONT-SIZE: 11pt; FONT-FAMILY: Arial, Helvetica, sans-serif}
.navigation {BACKGROUND: #FFFFFF}
.navigationcell {BACKGROUND: #FFFFFF}
.micro {FONT-SIZE: 7pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
.z1 {FONT-SIZE: 8pt; COLOR=#999999; FONT-WEIGHT: bold; text-align: center}
.t3 {FONT-SIZE: 8pt; }
.link {FONT-SIZE: 12; FONT-STYLE: italic}
.txt {text-indent: 8pt; text-align: justify}
.com {text-indent: 10pt; FONT-STYLE: italic; text-align: justify; FONT-SIZE: 10}
.t: link {COLOR: #777777;FONT-WEIGHT: bold;}
.t: visited {COLOR: #777777; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: active {COLOR: gray; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: hover {COLOR: black; FONT-WEIGHT: bold; TEXT-DECORATION: none;
FILTER: dropShadow(Color=white,OffX=1,OffY=1,Positive=2 ); HEIGHT: 10
Вот такая фича примерно обеспечивает сайту тот вид, в коем вы его наблюдаете :0)
Разложим по кирпичикам… И начнем со ссылок:
A:link {COLOR: #666666; TEXT-DECORATION: none}
A:visited {COLOR: #666666; TEXT-DECORATION: none}
A:active {COLOR: #666666; TEXT-DECORATION: none}
A:hover {COLOR: #666666; TEXT-DECORATION: underline}
А: здесь означает класс элементов, в HTML называемых «ссылки», то есть теги вида «<a href…»
link — обозначение линка в покое, так сказать, исходный вид, в котором он предстаёт, когда мы видим пагу только-только после ее загрузки.
{} а вот промеж таких скобок в CSS прописывается присваиваемый элементу стиль, то есть праметры, какие будут автоматически присвоены выбранному элементу.
Так же у нас тут имеется цвет линка — color:#666666 — то есть темно-серый.
И еще один момент: если в коде самой странички пишется font color=»», в то время как в CSS — «color: имя цвета;», точка с запятой ставится после каждого свойства в списке, если после него идет другое свойство. После последнего ставить не обязательно, но в принципе можно.
И оформление текста — TEXT-DECORATION. Писать это заглавными, с большой буквы или строчными — совершенно равнозначно. Здесь написано заглавными исключительно для выразительности и заметности :0)
Итак, в параметре сём у нас значится «none» — это означает, что нам бродилка покажет линк в виде простого текста — не синего, как по умолчанию, и без дурацкого этого подчеркивания :0)
Определение «visited» — оформить ссылку точно так же как и посещенные уже ссылки. Если вы замечали раньше — то они, посещенные, по умолчанию бродилками обозначаюЦЦа как потемневшие. А у нас будет равнообразно. Ибо — нефиг…
Итак: первые две строки определили вид, в котором линки находятся по изначальному состоянию.
Но как выделить их, обозначить, что это не просто текст, а все же ссылки?
Для сего у меня прописаны следующие две строчки:
A:active {COLOR: #666666; TEXT-DECORATION: none}
«актив» — это есть линк, выделенный мышкой, но с убранным с него курсором. Если присматривался иногда, вследствие кривых рук, мог видеть этакие повисшие вокруг линков или картинок «рамочки» выделения — вот это оно и есть :0)
По здешнему оформлению оно, опять же, ничем не отличается от предыдущих параметров, поэтому в самом тексте я его выделяю, как правило, жирным (<b>вот так</b>).
а вот третье…
A:hover {COLOR: #666666; TEXT-DECORATION: underline}
hover — если мне не изменяет склероз, «ховер» переводится как «парение» (не мозгов, а в воздухе!) :0)
Этот параметр указывает бродилке, как оформить эту ссылку при зависании на ней курсора. Здесь я оставил ей первоначальный цвет, а выделять решил подчеркиванием. Следует также обратить внимание на то, что тут уже вместо «none» стоит «underline» — что, собсно и есть это самое «подчеркивание» при наведении курсора.
этими четырьмя строками мы разом назначили ВСЕМ ссылкам на страничке, в которую будет включен этот стиль, особый внешний вид. Эта настройка касается ВСЕХ ссылок как таковых.
а представьте теперь, что было бы, если бы на каждую ссылку писать вот такое? а ссылок — 30, 40? экономия в 40 раз! :0)_)
Смотрим дальше:
BODY
{
margin=»5″;
SCROLLBAR-FACE-COLOR: #FFFFFF;
FONT-WEIGHT: normal;
BACKGROUND: #FBFBFB;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
COLOR: #666666;
SCROLLBAR-3DLIGHT-COLOR: #AAAAAA;
SCROLLBAR-ARROW-COLOR: #999999;
SCROLLBAR-TRACK-COLOR: #EEEEEE;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; SCROLLBAR-DARKSHADOW-COLOR: #555555;
}
BODY — это «тушка странички».
В ней можно поиздеваЦЦа над скроллбаром (для тех, кто в танке: такая фича справа по вертикали, за котороую можно тягать вверх-вниз, проматывая не умещающееся на экране :0))
В данном варианте у меня написано:
margin=»5″; — это отступ в 5 пихелей от края бродилки (по умолчанию гораздо больше). Если отступ вообще не нужен — ставим значение «ноль»:0)
SCROLLBAR-FACE-COLOR: #FFFFFF;
морда лица скроллбара. То есть раскрашивает самую большую поверхность заданным цветом. У меня это — в тон странице
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
это блик на ползунке и кубиках со стрелками
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
это «тень» — продолжение «блика», (то же самое, только нижняя грань и правая)
COLOR: #666666;
это цвет вообще…
SCROLLBAR-3DLIGHT-COLOR: #AAAAAA;
это тонюсенькая каемочка вокруг каждой детальки
SCROLLBAR-ARROW-COLOR: #999999;
цвет треугольных стрелок вверху и внизу линейки
SCROLLBAR-DARKSHADOW-COLOR: #555555;}
глубокая черная тень-контур
SCROLLBAR-TRACK-COLOR: #EEEEEE;
цвет дорожки..
Более наглядно все это видно на рисунке:
Вот собственно и все. Таким вот нехитрым извратом и красят в разные цвета скроллы страничек :0) Правда, работает это только в эксплорере.
Смотрим далее:
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
это обозначает последовательность шрифтов, коими отображается контент сайта. Если нету первого, то бродилка использует второй. Если нет второго — то третий. Ну а если и четвертого нету, то это линуксоид без кириллических шрифтов приперся, ну его лесом.. ;0)
теперь ячейки таблиц:
TD {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
что такое ТД, я надеюсь, вы уже запомнили, а если нет — придется перечитать все про таблицы с самого начала.
Итак… здесь прописано — FONT-WEIGHT: normal; — шрифт нормальной толщины.
FONT-SIZE: 11pt; — размер шрифта. Обратить внимание на «pt» — это не в пихелах! это в ПУНКТАХ. Хотя особо критичных разниц тут нет, просто другие единицы измерения..
Тут можно ставить и просто цифру без приписки в каких оно единицах. Тогда цифра сработает как размер относительный и позволит юзверю небрежным движением мышки по масштабируемости бродилки испортить наш великий дизигн нафиг. А это не есть гут… Посему ни процентов (да, можно и процентами!), ни свободных разрядов от -7 до просто 7 ставить не рекомендую. Или, если ты уж настолько крутой извращенец, ставить надо везде, а потом долго и муторно двигать масштабность, наслаждаясь, как твою страничку морщит и плющит по всем абзацам %0)
Ну и, наконец, это:
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
это у нас означает тоже, что в самой паге «Имя шрифта».
Только тут перечислено, на всякий пожарный случай, аж четыре шрифта, более или менее способных заменяться, не сильно портя дизигн. Зачем это надо? На случай, если на вашсайт забредет какое-нибудь интеллектуальное убожество, умудрившееся угробить у себя на компе Вердану и Ариал. Хотя эти два шрифта вовсю обычно используются Виндой и Вёрдом, да и многими другими прогами. Они самые удобные и легкочитаемые, посему — практически незаменимые. Так вот, если все же у какого-нибудь мудака не окажется этих шрифтов, то пага покажет ему то, что прописано дальше — Хельветику или Сан-Сериф :0) Если и этого у него нет, то бродилка покажет ему, что там у него стоит и пусть он этим поперхнеЦЦа.. :0)
Этим абзацем мы прописали, что ВЕСЬ текст на паге отражаеЦЦа 11-м размером шрифтом, одним из указанных там, выше.
Едем дальше:
DIV {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
это обрезаный тег слоя, который можно использовать для обозначения выделения определенного участка таблицы или текста. Ну — вот, положим, не надо мне весь текст на страничке однообразным — хочу кусок какого-нить извратного цвета и вида… заключаем его в тег DIV и назначаем определенные параметры. Получаем выделение абзаца :0)
На данный момент он совершенно идентичен основному тексту.
А вот так пишется параграф. Он и обозначается просто буквой P.
P {FONT-WEIGHT: normal; FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
В нем у нас опять же совершенно идентичные параметры. Но если задать иные, то все параграфы станут выглядеть не так как текст основной странички. Следует помнить, что все параграфы, как правило, выделены некоторым отступом сверху и снизу от остального текста. Это легко поправимо, но об этом позже.
Итак, мы задали параметры отображения всем основным элементам:
Тексту,
Ссылкам,
Таблицам,
Блокам и
Параграфам .
Но что делать, если надо какой-то махонький абзац сделать не таким, как остальные абзацы? Что делать если один или два или больше элементов должно иметь отдельный от большинства вид? Возиться с параграфом тут неуместно :0)
Тут можно выкрутиться таким образом:
начало нового стиля обозначаем точкой: .
а за ней сразу вписываем имя нашего особого стиля. Вложенного, так сказать, каскада:
.small {FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
это обозначает, что теги, в которые включено «class=»small»»
, будут показывать нам свое текстовое содержимое именно в том виде, который прописан в этом абзаце. То есть, на 1pt меньшего в данном контексте размера :0)
типичный пример:
<b><a href=»бла-бла-бла» class=small>текст</a></b>
или <p class=small>текст</p>
или <div class=small>текст</div>
или
<td class=small…
<table class=small..
ну и т.п.
Точно так же внутрь тегов можно одновременно и по нескольку запихивать теги равнения… типа align=center (left, right, justify)
Вот еще один класс:
.large {FONT-WEIGHT: bold; FONT-SIZE: 11pt; FONT-FAMILY: Arial, Helvetica, sans-serif}
и еще:
.navigation {BACKGROUND: #FFFFFF}
и еще:
.navigationcell {BACKGROUND: #FFFFFF}
и еще:
.micro {FONT-SIZE: 7pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}
а зачем, собсна, нам каждый раз писать тег выравнивания в самой паге по сто раз? Мы же можем впендюрить его прямо в стиль!
Вот таким образом примерно:
.z1 {FONT-SIZE: 8pt; COLOR=#999999; FONT-WEIGHT: bold; text-align: center}
только тут он прописывается не просто как align=, а как именно как text-align:
АХТУНГ!!! — обратить внимание, что не через «равно», а именно через двоеточие!!!
.t3 {FONT-SIZE: 8pt; }
а в этом случае мне нужно было просто изменить лишь размер и остальное я не прописал..
что у нас получилось в этом случае?
Рассмотрим пример взаимодействия и взаимовлияния стилей:
(еще это называеЦЦа «наследованием»):
имеем:
<div class=»micro»>
текст, текст, текст, текст, текст, текст, текст, текст, текст
<p class=»large»>текст, текст, текст, текст…:0)</p>текст, текст, текст, текст, текст, текст, текст, текст,
</div>
Принцип ясен?
(Для тех, кто в танке: — действие стиля распространяеЦЦа на все, что внутри обозначенного объекта, ЕСЛИ внутренние, вложенные теги, не снабжены СОБСТВЕННЫМИ стилями, противоречащими или дополняющими стиль объекта. Стиль перестает действовать сразу по закрытии тега, его содержащего, и в действие вступает стиль объекта более «высокого уровня» — того, что вокруг вложенного, или следующего)
Чем-то это все похоже на матрешку… Это вам отвлеченный образ — для лучшего понимания проблемы :0)
.link {FONT-SIZE: 12; FONT-STYLE: italic}
а вот тут у меня стоит «италик» — это означает, что текст будет подвержен модификации в стиле <i></i> — то есть станет наклонным :0)
.txt {text-indent: 8pt; text-align: justify}
.com {text-indent: 10pt; FONT-STYLE: italic; text-align: justify; FONT-SIZE: 10}
а вот этим я решил выделить линки другого типа — те, которые в менюшках типа календарей по датам:
.t: link {COLOR: #777777;FONT-WEIGHT: bold;}
.t: visited {COLOR: #777777; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
.t: active {COLOR: gray; FONT-WEIGHT: bold; TEXT-DECORATION: none;}
но в них уже будет меняться и цвет и толщина букв :0))
.t: hover {COLOR: black; FONT-WEIGHT: bold; TEXT-DECORATION: none;
а вот эта приписка есть фича чисто плорерная — то есть в других броузерах даже не отобразится.
FILTER: dropShadow(Color=white,OffX=1,OffY=1,Positive=2 ); HEIGHT: 10}
Это называется «фильтр», встроенная в бродилку фича, отражающая такие спецэффекты, как «тень», «свечение», «переливание» и многое другое :0)
Рассмотрим егонные параметры: (Color=цвет отбрасываемой тени — белый!, OffX и OffY — это на сколько пихелов тень будет отстоять от букв — у нас это на пихель вправо и на пихель влево. Можно к цифири припользовать знак «минус» — это даст вывернутую влево и вверх от цифири тень :0)
«Поситиве» я, честно сказать, не помню — по-моему, плотность — поэкспериментируйте :0)
АХТУНГ!! — обратить внимание, что субпараметры взяты в ( ) и опосля них идет — «;» — точка с запятой. Закрывает каскад все тот же }
параметры внутри {} разделяются опять же «;» но опосля последнего параметра перед самой «}» точка с запятой вовсе не обязательны.
ну, вот собсно и все самое основное про CSS. На фильтрах я более подробно останавливаться не буду, поскольку они пригодны в основном только для плорера, а следовательно, серьезному вебоделу нафиг не сдались — при всей приятности нет смысла возиться с тем, что видно далеко не всем посетителям.
Осталось только пояснить, что вместо того, чтобы лепить вот такие «многотомники» в каждую опять же пагу, можно хранить на сайте всего ОДИН единственный файл, вызывать который из каждой потребной паги. Или — хранить таких стилей несколько — для удобства или дизигна: на одной паге так, на другой — этак.
Подключается оно так: пишем эту галиматью в текстовый файл, прямо в блокноте — это проще! и сохраняем на сайте как «имярек.css»
Опосля сего открываем пагу и в сааамом начале под тегом </head>
вставляем вот такое:
<LINK href=»/путь/имярек.css» type=text/css rel=stylesheet>
менять в этой строке можно только путь к файлу стиля и наименование самого файла.
Тем, кто в танке: ВСЕ, совершенно все имена файлА на вашем сайте должны быть набраны исключительно латиницей, то есть ЛАТИНИЦЕЙ.
При помощи стилей можно делать и кучу украшательств: например, таблицы не сплошной линией, а пунктиром или точками:
| | |
В первом случае у нас применен вставленный в начало таблицы тег
style=»border: dotted 1pt; border-color: gray;
Во втором случае вместо dotted значится dashed
После этих тегов ставим размер наших точек или тире — и проверяем как смотрится.
Этими же стилями можно преобразить и кнопки, и тег HR —
Благодаря стилям можно даже ссылки подчеркивать пунктиром, как сейчас входит в моду.
А еще, некоторые бродилки позволяют переключать стили, что при грамотном их написании может служить своеобразными «скинами» сайту. Сменил стиль — поменялось все — раскраска, рамки, шрифт и т.п. Очень удобно и приятно.
Да, чуть не забыл… тег <H1></H1>, про который я обещал рассказать подробнее, так вот: многие поисковики положительно воспринимают заголовки, прописанные в этом теге. Причем, чем меньше цифра тега, тем выше «приоритет» этого заголовка. Всего их 6, с H1 по H6. H6 самый мелкий и более или менее вписывается в дизайн, а вот H1 норовит растянуться в черт-те какие величины
— вот такими буквами. Но что же делать? Ведь для увеличения находимости нам нужен этот тег! При всей его неудобоваримости и нежелании вписываться в дизайн он приносит неплохое количество «очков» пользы перед поисковиками. И тут нам помогут стили. Прописываем в CSS вот такой каскад:
H1{FONT-SIZE:10pt; COLOR:#666666; font-style: normal; line-height: 16px; font-weight: bold; margin: 0px; padding: 0px;}
заголовок
второй заголовок
— как видите можно и H1 укротить так, чтобы он отображался не крупнее обычного текста и даже отступов, обычных для него, сверху и снизу не будет :0) За этот параметр отвечает сразу группа настроек:
line-height: 16px; — это у нас высота того пространства, в котором располагается строка. Не шрифта, а всей строки! То есть поставим его, например, 10 — получим наползание текста:
| line-height: 30px; | line-height: 8px; |
заголовок | заголовок |
font-weight: bold; — этот тег делает заголовки выделенными жирным
margin: 0px; — отступ от верхнего левого угла ячейки
padding: 0px; — отступ внутри ячейки от всех краев, производит почти тот же самый эффект, что и margin
| margin: 0px; | margin: 30px; |
заголовок | заголовок |
Теперь о том, как это все прицепляется к сайту. Хранится CSS обычно в отдельном файле, который броузер и считывает при отображении страничек вашего сайта. Чтобы CSS оказывал воздействие на содержимое странички, в начале ее вставляем вот такой вызов:
<link href=»/путь/имя файла.css» rel=»stylesheet» type=»text/css»>
прописать его надо между тегом <html> и тегом <body>. Если же большой нужды в мощной и сложной таблице стилей нет и нужно лишь единоразово подправить какой-то элемент, достаточно вставить в соответствующий тег «style=«параметры» — например вот:
<table width=»100%» height=»410″ border=»0″ cellpadding=»14″ cellspacing=»0″ class=»txt» style=»border: dashed 1pt; border-color: gray; border-top: none; border-bottom: none;»>
Эта строка заголовка таблицы. Встроенный стиль в ней «убирает» верхнюю и правую границы, оставляя только левую и правую.
Спонсоры статьи: