Информационный сайт для друзей!
Главная | RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
= Форум для Друзей = » DESIGNED » Инфо » CSS средство для создания лучших сайтов (Леха ББ aka Alexys (alex-sun@mtu.ru))
CSS средство для создания лучших сайтов
OhotnikoffДата: Пятница, 17.08.2007, 16:56 | Сообщение # 1
Администратор
Группа: Администраторы
Сообщений: 584
Награды: 0
Репутация: 8
Статус: Offline
Для создания хотя бы мало-мальски приличного сайта нужно подумать о виде страниц под разными броузерами. У каждого броузера стоят по дефолту какие-то шрифты и их размеры под различные тэги. Не будет приятно видеть всякие висящие или не умещающиеся в колонки таблиц строки при просмотре сайта. Тут понадобится средство для управления всякими font'ами - CSS.

Что есть CSS, или введение

CSS - аббревиатура Cascading Style Sheets. Только этот Sheets далеко не Shits, а даже наоборот. Переводится CSS как "Каскадные Таблицы Стилей". Только не надо думать, что на тебя рухнут всякие таблицы или еще какая нечисть - хотя это что-то типа маленькой базы данных. CSS создан для управления не только внешним и внутренним видами таблиц (как кажется из названия), а также туевой хучей других вещей, таких как шрифты, цвета, фоны.

Задачи CSS'а сходны с обычным html'ным кодом. Например, строка <font color="blue">CSS RULEZ</font> или <font style="color: blue;">CSS RULEZ</font> дадут в результате текст "CSS RULEZ" синего цвета. Спросишь, на хрена надо использовать какой-то CSS, раз все равно результат один? Не торопись с выводами, CSS имеет намного больше возможностей, да еще и помогает уменьшить объем html-страниц.

3 варианта записи CSS

Существует 3 вида использования CSS - внутренние, глобальные и связанные таблицы стилей. Каждый из видов имеет свои + и -, а выбор использования того или иного вида зависит от конкретных задач. Не жди, что добрый дядя будет советовать тебе каждый раз, когда надо будет использовать CSS. Это чем-то похоже на оптимизацию программы. Но чтобы знать, что из чего выбирать, ознакомься с тем, кто есть ху.

а) Глобальные таблицы

Допустим, надо тебе на странице сделать 20 подчеркнутых надписей красного цвета. Надо бы 20 раз писать <font color="red"><u>Текст 1<u></font> ... <font color="red">Текст 20</font>. Не до хрена ли писать? А размер странички как? Конечно, с появлением быстрого инета не так уж это и важно, но ведь не всем пока так хорошо живется. Лучше уж выигранное от кода место использовать под порнографику или чего там еще взбредет в голову. Но можно сделать проще, лучше и быстрее. Между тэгом <head> и </head> пишется следующее:

<style type="text/css">
<!--
font {color: red; text-decoration: underline;}
-->
</style>

В этих строчках был переопределен весь вид тэга <font>. На этой странице весь текст между тэгами <font></font> будет красным и подчеркнутым, причем будет выиграно в коде примерно 2 килобайта. Если потом захочется убрать подчеркивание и сделать наклонный шрифт, то надо будет лишь исправить одну строчку с описанием свойств font'а на font {color: red; font-style:Italic;}. Комментаторы (<!-- -->) нужны для того, чтобы какой-нибудь старенький броузер (ИЕ 3 или другой старичок) окончательно не двинул кони от невиданного ранее CSS'а. Если ты думаешь, что таких броузеров много, то ошибаешься. Примерно 99.9% броузеров нормально понимают CSS.
Если бы можно посредством CSS'а менять стиль одного тэга только один раз, то CSS умер бы в зародыше. Главное, что можно делать - это самому вводить классы и описывать их свойства. Самое трудное - это выбрать, как обозвать классы. Рекомендую обзывать их так, чтобы ты сам понимал, какой для заголовков, какой для текста и т.п. От вышеописанного примера отличается наличием точки перед названием класса:

.hdr1 {font-style: Arial; font-size: 16px; font-weight: bold; text-align: center;}

После описания класса надо бы его использовать в своих целях. Для вызова класса нужно указать его имя:

<div class="hdr1">Вот такой заголовок</div>

Броузер выдаст жирный текст шрифтом Arial, размером 16 пикселей и выровненный по центру. Для повторного использования на странице класса просто напиши опять <div class="hdr1">еще какой-то текст</div>. Старайся как можно реже использовать тэг <font></font>, а лучше вообще забыть про него. Юзай вместо него <div></div> - с CSS он намного лучше дружит, да и обрабатывается пошустрее.


 
OhotnikoffДата: Пятница, 17.08.2007, 16:57 | Сообщение # 2
Администратор
Группа: Администраторы
Сообщений: 584
Награды: 0
Репутация: 8
Статус: Offline
б) Связанные таблицы

Если на твоем сайте есть (или будет) хотя бы 20-30 страниц, а CGI и SSI не дает юзать хостер, то тут только связанные таблицы облегчат твое бедовое положение. Вдруг тебе захочется немного поменять внешний вид сайта. Править даже 20 страниц будет очень утомительно (знакомо по своему первому опыту еще года 4 назад, когда я захотел поменять цвет заголовков на сайте). Используются связанные таблицы почти так же, как и внутренние, только описание всех классов заносится в отдельный файл some_name.css, а на странице указывается путь к нему:

<link rel="stylesheet" href="some_name.css">

Синтаксис файла в точности такой же, как и при использовании глобальных таблиц - начинается с <!-- и заканчивается -->, а между ними идет описание всех придуманных тобой классов. Причем не будет каждый раз грузиться css-ник, ибо он после загрузки первой страницы сайта закэшируется броузером и дальше будет таскаться из кэша (правда, если кэш не отключен заранее заботливыми ручками).

в) Внутренние таблицы

Внутренние таблицы вставляются в html-странице в месте непосредственного их применения. Как правило, такой стиль используется 1-2 раза на странице, и не хочется наваливать в CSS-ник еще один стиль. Для использования внутренних таблиц ничего специального описывать не нужно. Единственное, что нужно, - это записать стиль для нужного тэга в том месте, куда ты его решил засунуть:

<div style="font-family: Verdana; font-size: 12px; color: #000066;">попробуем внутренние таблицы</div>

Еще один резон использовать внутренние таблицы есть в том случае, если нужный в каком-то месте стиль отличается немного от уже описанного. Например, описано у тебя выравнивание по центру для класса "hdr2" (.hdr2 {font-family: Verdana; font-size: 16px; font-weight: bold; color: red; text-align: center;}), а тебе надо то же самое, но сдвинутое влево. Тогда нужно только во внутренней таблице указать новое выравнивание:
<div class="hdr2" style="text-align: left;"> Хочу налево :)</div>

Оживление страниц с помощью CSS

Выше описаны 3 формы использования CSS'а. Какую когда и куда совать - решать тебе. Но с помощью CSS'а можно не только управлять шрифтами. CSS может частично заменить Java Script, но намного более интересных вещей можно добиться при совместном использовании CSS с Java Script'ом, SSI и др.
Не стоит раскатывать губы по поводу того, что CSS может полностью заменить JS или Flash. Не для того он предназначен. Да и не было бы тогда ничего кроме CSS'а. Но вот изменение вида ссылки при наведении и нажатии на нее мыши - очень даже легко. Для этого нужно описать стили для линков (тэг <a>, если еще не забыл) в нескольких состояниях: новые ссылки - куда не ступал броузер человека, посещенные ссылки - куда уже ступал раз или больше, ссылки при наведении мыши. Начни описывать стили ссылок с общего описания (фактически все новенькие линки):

a {font-family: Tahoma; color: black; font-size: 11px; font-weight: normal; text-decoration: none; font-style: normal; text-align: left;}

Дальше пойдет описание ссылок туда, где юзер уже успел побывать. Обычно новые и посещенные линки внешне отличаются только цветом.

a:visited {font-family: Tahoma; color: magenta; font-size: 11px; font-weight: normal; text-decoration: none; font-style: normal; text-align: left;}

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

a:hover {color: blue; text-decoration: underline;}

При наведении ссылка будет становиться синей и подчеркнутой. Можно также сделать и изменение цвета фона под ссылкой, смещение ссылки в сторону и т.п. (a:hover {color: blue; text-decoration: underline; margin-left: 20px; background-color: yellow;}), только по ходу экспериментов следи, чтобы у тебя ничего не уезжало.


 
OhotnikoffДата: Пятница, 17.08.2007, 16:58 | Сообщение # 3
Администратор
Группа: Администраторы
Сообщений: 584
Награды: 0
Репутация: 8
Статус: Offline
Обычно при создании сайта выбирают, под какое разрешение его клепать. Но можно ведь сделать его и резиновым, а размеры шрифтов сделать так, что они под разными разрешениями будут смотреться примерно одинаково. Для этого надо сделать css-ники под разные разрешения и как-нибудь определить разрешение. Можно, конечно, сделать по-ламерски: повесить для выбора разрешения на странице 2 кнопочки - на одной написать "800х600 и менее", на другой - "1024х768 и более", и ожидать правильного ответа от зашедшего. А вдруг у него знаний о разрешении еще меньше, чем у тебя будет :)? Как бы там ни было, не стоит уподобляться ламероподобным. Маленькая помощь от Java Script'а, и нет никаких проблем с определением разрешения. А заодно можно и CSS-ник сразу нужный загрузить.

<script language="JavaScript" type="text/javascript">
<!-- //
if ((screen.width <= 800) && (screen.height <= 600))
var resol = 800
else if ((screen.width >= 1024) && (screen.height >= 768))
var resol = 1024
document.write ('<link rel="stylesheet" href="/' + resol + '.css">')
// -->
</script>

Для пользования скриптиком обзови один css-ник - "800.css", а 2-ой - "1024.css", которые должны лежать в корневой директории html-страниц (на разных серваках по-разному - WWW, html и т.п.). Пусть броузер сам определяет разрешение каждого пришедшего, а ты займись более важными делами - распитием пива, встречами с девушками... сам придумаешь, чем, не все же меня слушать :).

Кастомайзинг таблиц и надписей

Забавные фишки можно сотворить с таблицами при помощи CSS, например, быстро, качественно и недорого сделать рамку для таблицы. Для этого надо вспомнить про существование border'ов, только не табличных, а CSS'ных. Синтаксис описания бордера таков:
border (-right, -left, -bottom, -top): width color style
width - ширина border'а, color - цвет, style - способ окрашивания.

Создавая таблицу, нужно просто описать свойства, такие как ширина, цвет и способ окрашивания border'а. Насчет ширины и цвета решать уже тебе самому, а сейчас речь пойдет о способах окрашивания бордеров. Насколько мне известно, существует 8 стилей border'а: Groove, Dotted, Inset, Outset, Dashed, Solid, Double и Ridge. Стили Groove, Inset, Outset и Ridge придают border'у объемный эффект, а остальные закрашивают border пунктирными или сплошными линиями.
ания обрамления как на рисунке воспользуйся следующим:

<table border=1 style="border: #000000 3px dotted;">
...
</table>

Кроме создания рамок, с помощью CSS'а можно создавать эффект свечения надписей, находящихся в ячейке таблицы (типа как на рисунке). Для создания такого эффекта нужно в свойствах тэга <td> использовать filter:glow(color=some_color strength=X).

<table>
<tr>
<td style="filter:glow(color=#0000ff strength=5); font-weight:bold; font-size:24px; font-family:Tahoma; color:FFFFFF">
<div>CSS RULEZ!</div>
</td>
</tr>
</table>

В результате использования вышеизложенного кода получилась надпись, внешне очень схожая с применением стиля Outer Glow в Photoshop'е:
Еще вариант необычных надписей - надписи с отбрасываемой тенью. Опять же применять надо к таблице или ячейке таблицы, но смотрится рулезно.

<table bgcolor="#999999" style="border: coral 3px groove;"><tr>
<td style="filter:shadow(color=blue)">
<div class="color: yellow;">CSS снова Rulez!</div>
</td>
</tr></table>
Один есть недостаток от использования таких надписей - работают они только в ИЕ (4.0 и выше). Так что, если ты еще считаешь ОПЕРу лучшим броузером, то подумай, чего ты можешь лишиться.

Совместимость шрифтов


 
OhotnikoffДата: Пятница, 17.08.2007, 16:58 | Сообщение # 4
Администратор
Группа: Администраторы
Сообщений: 584
Награды: 0
Репутация: 8
Статус: Offline
Все-таки главным назначением CSS'а модно назвать управление свойствами шрифтов, причем выбор шрифта является наиболее важным достоинством. А вдруг ты после установки очередной тысячи новых шрифтов решишь один из них использовать? Не самая лучшая картина предстанет перед тем, кто увидит сайт с совершенно не теми шрифтами, под которые все делалось. Поэтому актуален вопрос о выборе универсальных шрифтов.
Многие вебмастеры используют шрифты, входящие в MS Office. Простите пожалуйста, а кто сказал, что каждый просто обязан ставить Офис? А почему вообще только про винды в первую очередь думают? Линуха еще пока никто не отменял, они жили и живут. Так что не стоит выбирать Verdana, Tahoma, Arial и т.п. Хотя, бесспорно, эти шрифты очень хорошо вписываются почти в любой сайт. Намного лучше будет указать в семействе шрифтов (font-family) одно из следующих:
serif - шрифты с закорючками;
sans-serif - шрифты без закорючек;
cursive - курсивы;
fantasy - видеть надо!
monospace - с одинаковой шириной символов (типа Courier'а).

Использование только указанных выше семейств сделает общедоступным нормальный внешний вид страницы. А если уж так хочется использовать ту же Verdana, то укажи несколько семейств шрифтов через запятую (если не найдется нужного, то найдется что-то подобное).

.id {font-family: Verdana, Tahoma, Sans-serif;}

Если на чьем-то компе не будут стоять 2 первых шрифта, то тогда будет задействовано семейство Sans-Serif. Только если уж будешь указывать подобным образом несколько шрифтов, то посмотри, какую картину даст каждый из них, оставив его одного. В смысле в одиночестве :).

Время действовать

Вот то немногое, что я смог поведать о CSS в объеме статьи. Рекомендую позаимствовать CSS-ники на каких-нибудь сайтах для практического ознакомления или скачать документацию по CSS, если не придумаешь, как их свистнуть. Быстрей разбирайся со всем хозяйством и поймешь, как CSS поможет тебе сделать самый крутой сайт в сети!


 
= Форум для Друзей = » DESIGNED » Инфо » CSS средство для создания лучших сайтов (Леха ББ aka Alexys (alex-sun@mtu.ru))
  • Страница 1 из 1
  • 1
Поиск:


Спонсор проекта: Регистратор доменных имен ODLINE.RU



Информационный сайт для друзей - форум, статьи, фотографии
© 2007-2010 | Создатель сего чуда Охотников Дмитрий
Прикинули кости здесь: Хостинг от uCoz