[урок] Как выделить отдельную запись или её часть

[Bernadett-e]

Как средствами CSS выделить отдельный пост? Или его часть.
Мой способ.
Основываемся на DIV. Придумываем название класса (я выбрала "vazhno"). Пишем такую конструкцию:

<div class="vazhno">текст записи</div>

Идём в дизайн, и пишет в CSS
.vazhno { свойство1; свойство1; свойство2; свойство3; }

Теперь рассмотрим примеры. У меня получилось четыре селектора, для каждого примера свой.
А чтобы не писать каждый раз вручную, программируем кнопку. Вот так:

 <div class="vazhno1">[maRk]</div> [cuRs] 
<div class="vazhno1">[maRk]</div> [cuRs] 
<div class="vazhno2">[maRk]</div> [cuRs] 
<div class="vazhno3">[maRk]</div> [cuRs] 
<div class="vazhno4">[maRk]</div> [cuRs]

Код

<div class="vazhno1">проверка</div>

CSS .vazhno1 { background: #ffcccc; border: 2px dotted #ff0000; }
background: #ffcccc; - цвет фона выделенной записи
border: 2px dotted #ff0000; - рамка на 2 пикселя, тип линии "точки", цвет рамки



Код

<div class="vazhno2">проверка</div>

CSS .vazhno2 { background: #ffcccc; }
то же самое, что в первом примере, но без рамки.


Код

<div class="vazhno3">проверка
проверка
проверка
проверка
проверка
проверка
проверка</div>

CSS .vazhno3 { text-align:left; padding: 10px 10px 10px 50px; background: url('/userdir/5/8/5/2/585232/57909296.jpg') repeat-y; border: 2px solid #1894b5; }
background: #ffffff; - цвет фона выделенной записи. В данном случае он совпадает с общим фоном записей (иначе не получится градиента).
text-align:left; - выравнивание текста по левой стороне
padding: 10 10 10 50px; - отступ текста в px (сверху, снизу, справа 10, слева 50)
background: url('/userdir/5/8/5/2/585232/57909296.jpg') repeat-y; - фоновая картинка, размножена вертикально
border: 2px solid #1894b5; - рамка на 2 пикселя, тип линии "жирная", цвет рамки


Код

<div class="vazhno4">проверка
проверка
проверка
проверка
проверка
проверка
проверка</div>

CSS .vazhno4 { text-align:left; padding: 50px 10px 10px 50px; background: url('/userdir/5/8/5/2/585232/57909296.jpg') repeat-x; }
background: #ffffff; - цвет фона выделенной записи. В данном случае он совпадает с общим фоном записей (иначе не получится градиента).
text-align:left; - выравнивание текста по левой стороне
padding: 10 10 10 50px; - отступ текста в px (сверху 50, снизу, справа 10, слева 50)
background: url('/userdir/5/8/5/2/585232/57909296.jpg') repeat-y; - фоновая картинка, размножена вертикально
border: 2px solid #1894b5; - рамка на 2 пикселя, тип линии "жирная", цвет рамки.

Чужой способ. Автор  Roldo

Как можно изменить отдельный пост вашего дневника, не трогая все остальные. Например, выделить его фоном, сделать в нем особое оформление текста, картинок и т.п.
У каждой новой записи в коде страницы появляется отдельный айди, например #post4454436564. Узнать его просто - наведите на ссылку URL под постом, и увидите адрес типа blablabla.diary.ru/p55412885.htm#
Так вот, p55412885 - и есть id вашей записи, только в CSS он пишется немного иначе, а именно #post55412885, то есть #post + его номер.
Записываете номер поста, заходите в CSS и прописываете для него свойства:
#post55412885 {background: #eeeeee;}
И вуаля - ваша запись приобрела отличный от других вид.
Вот, например: roldotheundying.diary.ru/p55412885.htm# моя запись имеет серый фон, в то время как все остальные фона не имеют, проверьте, взглянув на мой дневник.
Урок окончен)

@темы: текст, отступы, фоновые картинки, рамки и полоски, Учеба

Comments

почему-то не сразу появилось
спасибо, интересный урок

[StarAnastasy]

а все "проверки" одинаковые, текстовые, и никаких эффектов на них нет. вот.
opera 10.60

[StarAnastasy]

видимо, мы прочли в процессе редактирования статьи с картинками гораздо нагляднее, да

[Bernadett-e]

Картинки я вставила минут через 10, браузер глючил.

[Roldo]

Спасибо что вспомнили)

[Bernadett-e]

Roldo вспомнила очём, картинках?