Основы CSS - Форум
Страница 1 из 11
Форум » Скрипты для ucoz » Вопрос - ответ (Скрипты для ucoz) » Основы CSS
Основы CSS
Администратор
Уровень 999
Сообщений: 2093
Дата: Воскресенье, 11.03.2012, 02:15:03 | Сообщение # 1
Offline
Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.

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

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

Другое преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML. Кроме того, стили могут храниться во внешнем файле, браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.

CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке веб-страниц. В научной среде, откуда пошла родом технология WWW, люди были больше заняты содержанием документов, чем их оформлением, однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания веб-страниц, таких как:

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

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

Стили решают эти проблемы, в то же время заменяя лишь ограниченную область механизмов представления HTML.
Подпись пользователя
Администратор
Уровень 999
Сообщений: 2093
Дата: Воскресенье, 11.03.2012, 02:19:49 | Сообщение # 2
Offline
Часто задаваемые вопросы (по настройке CSS на сайте uCoz):


Как настроить ссылки на сайте?
a:link {text-decoration:вид текста; color:#код цвета;}
a:active {text-decoration:вид текста; color:#код цвета;}
a:visited {text-decoration:вид текста; color:#код цвета;}
a:hover {text-decoration:вид текста; color:#код цвета;}

Виды текста: none (обычный, в HTML это также отмена любого эффекта), underline (подчёркивание снизу). Есть ещё много различных эффектов, это лишь основные. Также возможно сделать подчёркивание пунктиром и т.п. (все подробности Вы запросто найдёте при помощи поисковых систем).

* a:link - определяет стиль для обычной не посещенной ссылки.
* a:visited - устанавливает стиль для посещенной ссылки.
* a:active - устанавливает стиль для активной ссылки. Активной ссылка эта ссылка при нажатии, на которую принимает активный вид.
* a:hover - определяет стиль для ссылки при наведении на нее мышью.

Чаще всего link, active, visited настраивают одним и тем же цветом/эффектом, а hover делает другим.

Вот пример ссылки:
a:link {text-decoration:none; color:#808080;}
a:active {text-decoration:none; color:#808080;}
a:visited {text-decoration:none; color:#808080;}
a:hover {text-decoration:underline; color:#505050;}

Как настроить текст?
td, body {font-family:шрифт(ы); font-size:размер текста;color:#цвет;}

Вот пример текста:
td, body {font-family:verdana,arial,helvetica; font-size:8pt;color:#000000;}

Как настроить цвета групп в списке "онлайн"?
В стандартных шаблонах uCoz уже настроены цвета групп администраторов, модераторов и пользователей. Выгладит так:

/* User Group Marks */
a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:код цвета;}
a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:код цвета;}
a.groupUser:link,a.groupUser:visited,a.groupUser:hover {color:код цвета;}
/* ---------------- */

Если хотите, чтобы в списке также были и проверенные, то вставьте это:
/* User Group Marks */
a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:код цвета;}
a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:код цвета;}
a.groupUser:link,a.groupUser:visited,a.groupUser:hover {color:код цвета;}
a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:код цвета;}
/* ---------------- */

Если хотите также настроить группу "Друзья", то всё будет выглядеть так:
/* User Group Marks */
a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:код цвета;}
a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:код цвета;}
a.groupUser:link,a.groupUser:visited,a.groupUser:hover {color:код цвета;}
a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:код цвета;}
a.groupFriends:link,a.groupFriends:visited,a.groupFriends:hover {color:#код цвета;}
/* ---------------- */

У всех часто возникает вопрос, как настроить цвета групп, созданных Вами.
Это довольно просто:
/* User Group Marks */
a.groupModer:link,a.groupModer:visited,a.groupModer:hover {color:код цвета;}
a.groupAdmin:link,a.groupAdmin:visited,a.groupAdmin:hover {color:код цвета;}
a.groupUser:link,a.groupUser:visited,a.groupUser:hover {color:код цвета;}
a.groupVerify:link,a.groupVerify:visited,a.groupVerify:hover {color:код цвета;}
a.groupFriends:link,a.groupFriends:visited,a.groupFriends:hover {color:#код цвета;}
a.groupOther1:link,a.groupOther1:visited,a.groupOther1:hover {color:код цвета;}
a.groupOther2:link,a.groupOther2:visited,a.groupOther2:hover {color:#код цвета;}
и так далее...
/* ---------------- */

Цифра зависит от того, какой по счёту Вы создали ту или иную группу.
Подпись пользователя
Форум » Скрипты для ucoz » Вопрос - ответ (Скрипты для ucoz) » Основы CSS
Страница 1 из 11
Поиск: