CSS для @дневников: основные методы работы

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

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

Предыдущие части:


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

Содержание

[править] Единицы измерения

Значения ширины, высоты, толщины и прочие, связанные с измерениями, измеряются в пикселях, и после каждого значения нужно писать px, например

#side {width: 300px; border: 2px solid black;}

Если нужно указать величины в процентном соотношении, то пишем %.

[править] Расположение

  • Top – верх
  • Bottom – низ
  • Left – лево
  • Right – право.
  • Center - центр.

[править] Отступы

Есть два вида свойств – margin и padding. Обязательно и подробно читаем здесь и здесь

  • Margin задает отступ между краем родительского элемента и текущего.
  • Padding – внутренний отступ между краем текущего элемента и его содержимого.

Большинство проблем с некорректным отображением совместного расположения элементов заключается в том, что у этих объектов проставлены отступы. Выставляйте margin:0 и padding:0, чтобы избежать таких проблем.


Для начала неплохо бы убрать все отступы в body, чтобы не было расстояния между краями экрана и элементами:

body {margin:0; padding:0;}

Это позволит избежать некоторых нестыковок в отображении в разных браузерах! Потом вы можете вернуть отступы, если они вам нужны.

[править] Важность

Тег !important показывает, что свойство имеет большую важность, и должно выполняться именно так, как прописано вами в CSS. Пишется только так, а не иначе:

{background: #b5d23a !important; width: 200px !important;}

После свойства пробел и !important и ТОЛЬКО ПОТОМ точка с запятой.

Все про этот тег читаем здесь

[править] Вложенность

Записи типа #селектор ul или #селектор li означают, что свойства, прописанные для этих связок, действуют на подэлемент элемента, обозначенного #тегом. Чтобы разобраться, как это работает, нужно знать состав страницы:

  • Div – это блок с содержимым типа текста, ссылок и прочего. Для него задаются классы (.class) или селекторы (#selector). С помощью div задано множество элементов страницы дневника, к ним применены различные классы.
  • Ul – устанавливает маркированный список, например для списка постоянных читателей, отображаемого на вашей странице. Элементы такого списка обозначаются тегом li.
  • Li – сам элемент маркированного списка.
  • A – ссылка.

Таким образом вы можете видеть, для чего используется оформление в готовом коде.

[править] Два элемента с одним и тем же свойством

Если нужно прописать два элемента с одними и теми же свойствами, используйте запятые: #odin, #dva, .tri {свойства}. Такое написание немного уменьшает код страницы и увеличивает удобность его просмотра.

[править] Оформление ссылок

  • a – используется для описания ссылок.
  • :hover – показывает, что описывается момент, когда курсор мыши находится над элементом.

[править] Невидимость

Как сделать элемент невидимым? Поможет свойство «display: none» . Использование такой конструкции убирает элемент из документа, так что место под него не резервируется, помните об этом.

Свойство display также поддерживает другие значения, например block – часто используется в коде дневников. Почитайте об использовании здесь - и обратите внимание на поддерживающие браузеры.

[править] Фон

Фон можно применить для любого блока, вот как это делается:

Картинка для фона берется ТОЛЬКО из вашей библиотеки изображений. Загрузите картинку туда, но помните – ее «вес» в килобайтах – залог удобства использования вашего дневника. Чем меньше вес, тем лучше для читателя, поэтому постарайтесь доводить количество килобайтов ваших картинок до минимума.

Если у вас есть Фотошоп, значит должен быть и ImageReady – пакет как раз таки предназначенный для оптимизации изображений. Открыв в Фотошопе картинку, выберите вместо пункта «Сохранить как», пункт «Сохранить для сети» (“Save for web”), расположенный сразу после. Откроется окно, в котором вы можете выставить параметры оптимизированной картинки. Есть несколько стандартных установок (Preset), имеющих уже подобранные параметры оптимизации, например GIF с разным числом цветов или Jpeg в трех качествах.

Самое низкое качество означает наименьший размер, превью помогает увидеть оптимизированную картинку, согласно которой вы сами можете выставить ползунок качества так, как вам надо. А под картинкой находится ее размер в оптимизированном виде (в килобайтах), который меняется автоматически при изменении качества – следите за ним. Скажем так – картинка в jpeg размерами 1000х200 в среднем должна весить килобайт 50 – отталкивайтесь от этой цифры. Если в вашей картинке цветов мало и это не фото, то выставьте тип сжатия GIF с различной цветностью, это совсем уменьшит картинку. Совсем маленькие картинки тоже лучше делать в gif.


После загрузки картинки в вашу БИ, вы увидите ссылку на нее – URL. Скопируйте ссылку и используйте ее в следующем коде:

Элемент '''{background: url('/userdir/дальнейший_адрес_изображения.jpg');}'''

Например

#extratop {background: url('/userdir/1/117/3454565656.jpg');}

В кавычках находится адрес вашей картинки из библиотеки, все, что находится до /userdir/ надо удалить, остальное оставить.

Какие еще издевательства можно учинить над фоном, а также абсолютно все свойства бэкграунда расписал @пользователь bokonist вот здесь.

Запомните – сначала идет указание позиции фона по вертикали (top, center, bottom и т.п.), потом по горизонтали (left, center..).

[править] Шрифты

Они могут применяться для любого блока, который содержит текст. Свойств по теме много – font, font-family, font-size, font-style, читайте о них тут.

В сообществе есть материал, посвященный смене шрифта на «нестандартный». Также можно почитать разбор шрифтов от @пользователя Tex.

[править] Рамки вокруг блоков

Обвести блоки рамкой можно с помощью свойства border.

Если нужны рамки только с некоторых сторон объекта, то пользуйтесь свойствами border-left (слева), border-right (справа), border-top (сверху), border-bottom (снизу).


Примеры:

#page-c {border: 4px dotted #56400a} 
#extrabottom {border-top-width: 3px; border-bottom: 2px solid #5bff6c}


[править] Ширина и высота объектов

Вы можете менять эти параметры у объектов страницы, если вам это нужно, при этом их содержимое по-разному будет воспринимать изменение размеров. Корректно будет смотреться, если размеры внутреннего (дочернего) объекта равны, либо меньше размеров внешнего (материнского). Например, размеры page-t не должны быть больше, чем у page-c. Внимательнее читайте описание объектов, приведенные во 2 части данного руководства.

Ширина задается через width, высота через height.

Вы можете задать их значение пикселями (400px), либо в процентном соотношении (50%)

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

[править] Смена положения объектов

Все очень любят изменять положение элементов страницы, поэтому внимательно прочитайте данный абзац.

Дочерние элементы страницы позиционируются относительно своих родительских элементов! И если вы будете изменять именно их положение, то родительские свойства будут влиять них, и некоторые аспекты изменения местоположения связанных объектов не позволят вам получить именно то, чего хотелось бы. Сейчас подробнее.

Положение объекта определяется свойством position (позиция). Оно имеет четыре возможных значения:

static – значение по умолчанию. Оно показывает, что объект находится там, куда его определили кодом страницы.
absolute – определяет, что элемент с такой позицией имеет свои собственные параметры расположения, и не участвует в распределении других объектов по странице. Они выстраиваются уже как будто без него, а положение его определяется свойствами объекта – top, bottom, left и right, выражаемыми в пикселях. О них подробнее чуть позже.
relative – Позиция определяется относительно исходного расположения объекта. Использование left, right, top, bottom, смещает объект относительно его расположения.
fixed – Положение определяется как и у absolute, но оно не меняется при прокручивании страницы и изменении разрешения экрана и размера страницы. (И не работает в IE6)

Теперь о свойствах положения.

left в пикселях показывает смещение объекта относительно левого края (родительского объекта либо экрана), top – смещение относительно верхнего края и так далее. МОЖНО использовать МИНУСЫ, то есть выражать позиции отрицательными значениями (-100px). Особенно это касается дочерних объектов – они будут смещаться относительно родительских, если те находятся не с краю, то логично было бы поставить отрицательное значение, если надо вынести дочерний объект за край.

Другое важное замечание – если положение родительских объектов не определено в точности, то положение дочерних объектов может меняться при изменении страницы, разрешения экрана и даже в разных браузерах при абсолютном позиционировании! Поэтому, если вы определили позицию какой-нибудь ссылки меню, а она показывается по-разному в разных случаях, то проверьте позиционирование самого меню, лучше всего ставить absolute или fixed для обоих объектов и начинать с главного. Когда он будет всегда отображаться так, как вам надо, приступайте к оформлению внутренних элементов. Этот прием хорош в любом случае – всегда лучше начать оформление с глобальных вещей.

Позиционирование по процентам также возможно.

Если нужно разместить элемент в точке, расположенной на 1/5 расстояния от левого края экрана, то указывайте позицию как left: 20%. Помните о связях объектов – они будут позиционироваться от тех точек, на которых расположены их «родители».


[править] Дизайн фиксированной ширины по центру, слева и справа

Это – стандартная схема оформления дневника, которую многие используют, и которая удобна и хороша. Вот тут @пользователь Tex все подробно описал.

Не забывайте о разном разрешении экрана у пользователей – если вы сделаете блоки очень узкими, то у людей с широким экраном они будут занимать 30% страницы и смотреться не очень хорошо.

[править] Картинки вверху и внизу экрана

Этот прием характерен и удобен для дизайна фиксированной ширины, описанного в прошлом абзаце. Делается все просто – нужно задать ширину и высоту для #extratop и #extrabottom и поместить туда картинки в качестве фона. Для фиксированного дизайна ширина объектов задается такой же, как ширина блока wrapper, не больше. Высота равна высоте картинки, при этом саму картинку нужно подогнать по ширине к основному блоку.

Вот пример:

#extratop {width: 700px; height: 200px; background: url('/userdir/…4545.jpg') no-repeat top left;} 
#extrabottom {width: 700px; height: 100px; background: url('/userdir/…34468.jpg') no-repeat center center;}

Если #extrabottom отображается некорректно. Существует две главных проблемы с его отображением: между ним и блоком записей пробел, и он отображается сразу после меню, либо после #extratop.

Первая проблема связана со свойствами классов блока записей. А именно – с отступами в них. Убирайте отступы с помощью margin и padding:

div.bordered {margin-bottom:0 !important; }

– убираем нижний отступ для класса описания поля постов и меню.

То же самое можно прописать для #page-c.

Вторая проблема связана с позиционированием. Если вы что-то меняли в блоках, то вполне возможно нарушили «общую картину» кода страницы. Но выход есть.

Свойство float: left; для #extrabottom показывает, что элемент выровнен по левому краю, а другие элементы должны обтекать его по правой стороне. В некоторых случаях это работает, попробуйте добавить в свойства блока.

Свойство clear: both, для #extrabottom наоборот, запрещает обтекание элемента с обеих сторон. Работает для других случаев. В общем, если появились проблемы подобного рода, пробуйте одно из этих решений, а если не получается, то пишите в сообщество @CSS — стилизация дневников.

[править] Динамически изменяющийся размер блоков, динамический дизайн

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

Тут поможет процентирование, а именно – указание ширины блока (width) в процентах. При таком описании ширина объекта будет задаваться относительно других элементов страницы, и если они будут менять свои свойства, то вслед за ними изменится и текущий объект. Например, #wrapper {width: 80%;} заставит основной блок всегда занимать 80% экрана, а #page-t {width: 90%;} покажет, что поле с постами будет занимать 90% от ширины блока page-c (родительского). Конечно, подобного эффекта можно добиться и отступами, но ширину родительского элемента все равно лучше задать процентами.

Основной способ организации динамического дизайна заключается в следующем:

  • Выставляем ширину #wrapper в процентах, проще всего 100% (от ширины экрана).
  • Ширину блока #page-c делаем в процентном соотношении так как удобнее, и она, завися от ширины wrappera, будет изменяться также относительно ширины экрана.

При этом всегда нужно следить, чтобы меню #side (зависит от #wrapper) занимало при этом не больше оставшегося пространства, иначе оно будет отображаться не там, где нужно. Проверить это можно, выставив разрешение монитора поменьше, например 1024*768 и посмотрев на свою страницу. Такое разрешение имеет множество пользователей, поэтому ориентируйтесь в первую очередь на них.

  • Установите фиксированную ширину для #side. Чтобы меню не «уезжало», надо чтобы #page-c занимал, допустим (1024 минус ширина_меню) пикселей. Больше – можно.

Для меню #side в таком случае еще хорошо помогают строки position:absolute; clear: left; - они абсолютно позиционируют меню «вне кода» и показывают, что другие элементы должны обтекать меню по правому краю.

Кроме того, позиция #page-c не должна перекрывать позицию меню. Следите, чтобы граница #side находилась на том же уровне, что и граница блока записей, или имелось расстояние между ними (см. позиционирование и отступы).

В своем коде я решил проблему так:

#side { width:150px !important; margin:0 !important; position:absolute; clear: left; top: 450px;} 
#page-c {width:73% !important; margin:0 !important; padding-left: 150px !important; }

Отступ в 150px помогает содержимому #page-c всегда быть вне действия зоны меню, кроме того само меню показывает, что его нужно обтекать справа.

Также помогает свойство min-width. Это свойство показывает ширину, меньше которой элемент быть не может, и прописываем его так:

#page-c {min-width: 500px; width: 70%;}

Тогда при уменьшении страницы по ширине элемент уже не будет меньше заданного значения, вместо этого появится скроллбар. Есть еще max-width, где прочитать о нем, вы уже должны запомнить.

[править] Более сложные и заковыристые приемы оформления

[править] Прозрачность элементов. Добавление к ссылкам иконок

У прозрачности есть одно незыблемое свойство – она тормозит, и злоупотреблять ею не стоит. Все остальное читайте здесь.

[править] Один элемент поверх другого

Можно сделать так, чтобы один элемент находился как бы ближе к пользователю, чем остальные, и если элементы накладываются один на другой по позиции, то этот элемент будет как бы «выше». Используется свойство z-index. Все очень подробно описано тут.

[править] Изменить стиль горизонтальных полос между постами

Обсуждение тут

[править] Проблемы с кнопками редактора сообщений

Читать тут.

[править] Другие виды рамок вокруг элементов

Читать тут.

[править] Изменение оформления ссылок при наведении курсора мыши

[править] Фиксированй размер элемента

Если нужно задать фиксированный размер элемента, но его содержимое «не влазит» в этот размер, можно воспользоваться скроллбаром

[править] Overflow

Читаем про overflow тут.

[править] Как убрать элементы

Если вы еще не поняли, как убрать некоторые элементы (а я писал), то читайте здесь.

[править] Меню как у @пользователя Tex

Если вам нравится такое меню, скрывающее до поры до времени ненужные ссылки, то обсуждали его здесь.

[править] Оформление аватаров

[править] Изменение курсора

[править] Буквица

Как сделать буквицу (заглавные буквы в каждом начале поста) и скругленные края блоков - читайте тут.

[править] Фотография в крупном виде

Читать

[править] Изменение названия ссылок

Читать

[править] Ссылки в одну строку

Если ссылки нужно разместить в одну строку, а они упорно отображаются в две или более, то задавайте для них свойство width! Это сделает их ширину не зависящей от ширины родительского объекта.

[править] Проверка CSS

Если есть желание проверить код не на дневнике, а где-то еще, то воспользуйтесь предложением от @пользователя Рёцке.


Я искренне надеюсь, что вы прочитали это руководство и получили хоть какую-то полезную для себя информацию. Спасибо за внимание.

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


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

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