CSS для @дневников: вводная часть

Материал из Справка @diary.ru.

Перейти к: навигация, поиск
Авторы статьи: Roldo и Рёцке

Содержание

[править] Что такое CSS и зачем он нужен?

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

Для каждого элемента на странице есть свое собственное название или селектор: к примеру блок меню на diary носит название #side, так его прописали в коде страницы. Для элемента #side с помощью CSS можно задать свойства отображения, имеющиеся в активе, к примеру ширину - width. Если задать width равным 200 пикселей, то меню на экране отобразится именно с такой шириной. Однако о свойствах поговорим позже, сейчас рассмотрим другие обобщенные понятия.

[править] Diary CSS и как с ним работать?

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

CSS – это платная услуга, и доступна только тем, кто оплатил свой дневник любым возможным способом. Почитать о них можно тут. Тут тоже не все так просто – оплата дневника заключается в покупке обязательного пакета услуг, а к этому пакету уже можно добавить платные сервисы, к числу которых относится и CSS. Перечислив деньги на счет, вы можете прикупить нужный пакет, добавив в него CSS на определенный период, и пользоваться им, пока период оплаты не истечет. По вопросам оплаты обращайтесь к администрации и в Справку, я же подскажу лишь несколько связанных нюансов.

[править] Синтаксис CSS

Синтаксис – это правила написания кода. Ничего сложного тут нет, главное – знать название (селектор) нужного вам элемента (блока). Вот образец написания строк на языке CSS:

Селектор элемента1 {свойство: значение; свойство: значение; свойство: значение;} Селектор элемента2 {свойство: значение; свойство: значение;}

И так далее. В готовом виде это выглядит так:

#side {width: 200px; height: 700px; background: #333333;} 
#post0 {width: 100%; border: 2px solid black;}

Для каждого элемента страницы прописываем его свойства по правилам их описания. Свойств – множество, и выписывать их все нет смысла, для этого есть специализированные сайты, например: htmlbook.ru , где по каждому свойству дано подробное описание его возможностей, применения в браузерах, даны примеры кода и вида. Любое из этих свойств вы можете применить и к элементам страницы вашего дневника согласно правилам. Не обязательно читать сразу всё, для начала определитесь, чего бы вам хотелось сотворить с элементом, а потом ищите нужные вам результаты в описании свойств на сайте. Постепенно вы освоите их все, по некоторым наиболее распространенным я дам описание прямо здесь в учебнике.

Более сложная конструкция описания элементов страницы в CSS заключается в использовании классов. Класс – это идентификатор индивидуального стиля элемента страницы, для одного элемента может быть задано несколько классов со своими стилями, и применяя тот или иной, можно добиться различного отображения элемента. Имя класса начинается с точки, и в описании используется так: Тег.класс (напр div.bordered). Подробнее о классах здесь.

Прописываем код так:

.bordered {padding: 0; border: none;}

или

div.bordered {padding: 0; border: none;}

для элемента div с классом .bordered

[править] Проблемы с отображением в разных браузерах. Общие проблемы дизайна

Прежде чем приступить непосредственно к работе, нужно усвоить одну вещь – CSS – это стандарт, а браузеры написаны не на 100% в соответствии со стандартом, поэтому то, что смотрится «правильно» в одном, будем в другом смотреться совершенно иначе.

Запомните: Вы можете сделать всё под себя, так как вам нравится, но если вам нужны читатели, то хорошо было бы подумать и о них. Неудобный вид вашего дневника уж точно не привлечет к вам постоянного внимания пользователей, и дело тут не только в кроссбраузерности – нарушение правил дизайна или разность отображения при различных разрешениях монитора также накладывает свой отпечаток.

Правила дизайна просты: надо, чтоб было красиво. Лучше не использовать ярких кислотных цветов, ужасных контрастов вроде красного с зеленым или синим, сильно темнить или светлить. Еще один факт – пользователи могут смотреть ваши дневники, не включая картинки в браузере, чтобы снизить трафик, и если у вас в качестве фона картинка, то она видна не будет. Поэтому постарайтесь сделать так, чтобы без картинок ваш дизайн тоже смотрелся хорошо – не используйте цвет текста такой же, как цвет его фона, потому что цвет фона все равно используется (именно для таких случаев), даже если в качестве фона еще и картинка.

Затем, у всех пользователей разное разрешение экрана. Это значит, что ваш дневник будет смотреться на разных разрешениях по-разному, и это надо также учитывать ради читателя. Не мельчите и не гигантоманьте с текстом и другими элементами, смотрите за шириной и высотой элементов. Самое простое, что можно предложить для решения проблем – переключайте разрешение своего монитора повыше и пониже и смотрите, как будет отображаться. Если ваш монитор не поддерживает высоких разрешений, то попросите друзей проверить дизайн на своем компьютере, устройте тестирование.

Вернемся к браузерам. Всегда неплохо иметь под рукой хотя бы два – Internet Explorer и еще какой-нибудь, особенно Opera или Firefox. Еще лучше – все три, и смотреть на свой дизайн в них. Обращайте внимание на стандарт написания кода, если есть какие-то проблемы с отображением. Бывает так, что не совсем корректный код имеет правильное отображение в одном браузере и неправильное в другом. Приводите в корректный вид.

Наконец, для всех проблем существует одно решение – сайт browsershots.org. Вводите адрес своего дневника, выставляете галочки для тех браузеров, в которых вы бы хотели проверить отображение дневника, выставляете параметры размера (разрешения) экрана и прочие параметры и нажимайте «Отправить». В течении получаса на сайте будут отображаться скриншоты вашего дневника в разных браузерах, смотрите на них и делайте выводы.

[править] Как посмотреть код чужого дизайна и страницы

Очень полезная штука – просмотр кода страницы, так сказать «не отходя от кассы». Ваш пользовательский код CSS «вшит» в тело страницы, поэтому вы можете посмотреть ее код и увидеть там ваш КСС и стиль по умолчанию, прописанный дизайнером @дневников. Для этого в IE войдите в меню Вид и выберите «просмотр html-кода». В Opera меню Вид и «Исходный текст» (ctrl+f3), в FireFox – Вид/Посмотреть исходный код (View source).

Ваш код CSS находится в разделе «Пользовательские стили» ближе к началу, но сначала идет код дизайна по умолчанию, откуда вы можете взять названия элементов страницы. Синтаксис кода по умолчанию – обычный для CSS. Помните, что копировать личные коды без разрешения автора - нельзя.

[править] Дополнения и рекомендации

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

[править] Цветность

Чтобы сделать дизайн красивым, нужно грамотно использовать цвета. Цвет в CSS, кроме стандартных 16ти, задается шестнадцатеричным кодом (#f56d2b), узнать который можно, например, через Фотошоп (просто выбрав цвет в палитре). Если фотошопа нет, то поможет программа Color Cop. Она может показать код для любого цвета, даже выбранного пипеткой с вашего экрана.

Другую хорошую вещь предлагает @пользователь TexColor Scheme Generator. Он позволяет выбрать сразу хорошее сочетание цветов для оформления, ведь цвета лучше подходят друг другу по оттеночному принципу. Можно брать контрастные оттенки, можно тоновые, коды цветов там указаны. Рекомендовано к использованию.

Третью хорошую вещь предлагает вам @пользователь Рёцке.

А если уж совсем туго, то берите стандартные веб-цвета. Ну и конечно же подгоняйте цвета к картинкам и фонам.

[править] Если есть еще вопросы

Прежде чем их задавать, сделайте вот что:

  • Воспользуйтесь поиском по текстам этого руководства (ctrl+F), наберите слово, которое вас интересует, и посмотрите всю информацию, которую удается найти. Прочитайте внимательно.
  • Воспользуйтесь поиском по сообществу Diary CSS.Наберите пару интересующих слов, и ВСЁ, что вы хотели бы знать, отобразится в найденных постах. Также можно щелкнуть на нужную тему записей в сообществе, чтобы посмотреть все посты по заданной теме. Так можно найти абсолютно все и сразу, а не ждать, пока вам ответят «идите по этой ссылке». Вы сами можете прекрасно эту ссылку найти.


Если же все равно ничего не помогло, и проблема имеет место быть, то задавайте вопрос в сообщество Diary CSS, при этом:

  • держите свой дневник открытым
  • выпишите ваш код
  • объясните толком, чего бы вам хотелось видеть.

[править] Готовые дизайны

Ходите по чужим дневникам – в их дизайнах вы найдете много полезных для себя приобретений. Особенно советую заглянуть сюда.

Вот предложенный дизайн от @пользователя Tex с кодом. Характерное меню, фиксированная ширина, солидный вид. Вот дизайн от @пользователя Roldo с кодом. Тут реализована динамическая ширина, а также фон вокруг постов и совмещение фонов различных элементов в единый коллаж.

[править] Продолжение

[править] См. также


Адрес этой страницы:

http://info.diary.ru/index.php?title=CSS_для_@дневников:_вводная_часть
Личные инструменты