Это задаётся левым паддингом (можно margin-ом).
Смотри пример.
Также в этом примере я показываю, как можно воспользоваться дочерними стилями вместо того, чтобы для каждого <p> прописывать class="style9".

И ещё, почитай, пожалуйста, про паддинги, маржины, бордеры. Иногда спецификацию почитать полезно
http://loc.stack.ru/projects/CSS2/box.html#box-dimensions
Вот как-то видел картинку, на которой это всё очень просто показано, но что-то найти не могу. Но в приведённой ссылке тоже неплохо описано.

В двух словах:
Padding служит для задания отступа от границы элемента до контента это элемента.
Margin задаёт отступ самого элемента от границы родительского элемента или от соседних элементов.

Код

<style> div.qwe p {  /* Стиль для всех дочерних элементов p, родителем которых является div со стилем qwe */     text-indent: 2em;    /* Отступ красной строки */             margin-top: 0px;     /* Пустое место сверху от p */     margin-bottom: 10px; /* Пустое место снизу от p */     background: orange;  /* Цвет p, просто, чтобы было видно его границу */     padding-left: 20px;  /* Отступ текста в p от левой его границы */     padding-right: 20px; /* Отступ текста в p от правой его границы */ } </style> <div class="qwe"> <p>Header1<br />Line1<br />Line2</p> <p>Header2<br />Line1<br />Line2</p> <p>Header3<br />Line1<br />Line2</p> </div>

Это сообщение отредактировал(а) dm9 - 16.4.2005, 00:39

Цитата(dm9 @ 11.4.2005, 20:24)

А под какой это браузер?

Под все. Станлдартный псевдокласс. Читай на w3.org

Aliance, давай так.

Спецификацию я читал.

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

Далее, пробуем на практике.

Код

<style> div.qwe p:first-line {     margin-left: 20px;     color: red; } </style> <div class="qwe"> <p>Header1<br />Line1<br />Line2</p> <p>Header2<br />Line1<br />Line2</p> <p>Header3<br />Line1<br />Line2</p> </div>

Не работает. Какой вывод делаем? Вывод такой. Этот метод не годится.
Или я как-то неправильно применяю :first-line? Расскажи, пожалуйста.

dm9
Вот мой код с вставленными твоими рекоммендациями:

Код

<STYLE>  BODY {   scrollbar-arrow-color:FFDEAD;   scrollbar-shadow-color:B5C2D5;   scrollbar-face-color:B5C2D5;   scrollbar-highlight-color:FFDEAD;   scrollbar-darkshadow-color:FFDEAD; .style1 {font-family: Geneva, Arial, Helvetica, sans-serif} .style3 {color: #260} .style5 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #663366; } .style7 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #663399; font-size: 20px; } .style9 {color: #FFFFFF} div.qwe p {  /* Стиль для всех дочерних элементов p, родителем которых является div со стилем qwe */     text-indent: 2em;    /* Отступ красной строки */             margin-top: 0px;     /* Пустое место сверху от p */     margin-bottom: 10px; /* Пустое место снизу от p */     background: orange;  /* Цвет p, просто, чтобы было видно его границу */     padding-left: 20px;  /* Отступ текста в p от левой его границы */     padding-right: 20px; /* Отступ текста в p от правой его границы */ } <div class="qwe"> <p>Header1<br />Line1<br />Line2</p> <p>Header2<br />Line1<br />Line2</p> <p>Header3<br />Line1<br />Line2</p> </div> </STYLE>

Похохе,я ничего не понимаю, т.к. ни цвета больше нет, ни отступов!

Ты забыла закрывающуюся фигурную скобку у BODY.

Добавлено @ 16:36
И ещё ты вставила тэги <div>...</div> внутри тэга style

А ещё цвета начинаются с #, просто FFDEAD работать не будет...

Во, я вот так сделала:

Код

<STYLE>  BODY {   scrollbar-arrow-color:FFDEAD;   scrollbar-shadow-color:B5C2D5;   scrollbar-face-color:B5C2D5;   scrollbar-highlight-color:FFDEAD;   scrollbar-darkshadow-color:FFDEAD; .style1 {font-family: Geneva, Arial, Helvetica, sans-serif} .style3 {color: #260} .style5 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #663366; } .style7 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #663399; font-size: 20px; } .style9 {color: #FFFFFF} </STYLE> <style type="text/css"> p {     text-indent: 2em;     margin-top: 0px;         margin-bottom: 0px;     padding-left: 20px;  /* Отступ текста в p от левой его границы */     padding-right: 20px; /* Отступ текста в p от правой его границы */ } } .style20 {color: #663399} </style>

Так работает.
style9 {color: #FFFFFF} решила вставлять перед конкретным <р>, т.к. не везде текст белым будет.

Добавлено @ 16:47

Код

margin-top: 0px;

Причем о-ой отступ сверху стоит, а текст все равно где-то по середине (по вертикали) получился. Aling=justify.

Теперь показываю, как сделать грамотно.

Находи отличия между моим и своим вариантом.

Код

<style type="text/css">     BODY {     scrollbar-arrow-color: #FFDEAD;     scrollbar-shadow-color: #B5C2D5;     scrollbar-face-color: #B5C2D5;     scrollbar-highlight-color: #FFDEAD;     scrollbar-darkshadow-color: #FFDEAD;     background: green;                          /* Удали это */ } .style1, .style5, .style7 { font-family: Geneva, Arial, Helvetica, sans-serif; } .style3 { color: #260; } .style5 { color: #663366; } .style7 { color: #663399; font-size: 20px; } .style9 { color: #FFFFFF } p {     text-indent: 2em;         margin-top: 0px;     margin-bottom: 0px;         padding-left: 20px;     padding-right: 20px; }     .style20 { color: #663399 } </style> <div class="qwe">     <p>Header1<br />Line1<br />Line2</p>     <p class="style9">Тут цвет белый!<br />Line1<br />Line2</p> <p>Header3<br />Line1<br />Line2</p>     </div>

Добавлено @ 16:50

Цитата(Urod @ 16.4.2005, 17:41)

Причем о-ой отступ сверху стоит, а текст все равно где-то по середине (по вертикали) получился. Aling=justify.

Не понял, о чём ты. Попробуй задать тому блоку, в котором текст, такой стиль:

Код

vertical-align: top;

Честно говоря, так и не поняла, зачем это:

Код

<div class="qwe">     <p>Header1<br />Line1<br />Line2</p>     <p class="style9">Тут цвет белый!<br />Line1<br />Line2</p> <p>Header3<br />Line1<br />Line2</p>     </div>

И без этого все правильно работает
Добавлено @ 17:38
Догадываюсь, что это надо, чтобы не писать каждый раз <p class="style9">, но, блин, все равно пока надо это все писать
Добавлено @ 17:44
Вот эта строчка

Код

<p class="style9">Тут цвет белый!<br />Line1<br />Line2</p>

явно посвящна тому, чтобы все <р> класса="style9" были белым цветом.
НО! если я все же с каждым <р> не буду писать class="style9", то цвет текста будет не белым

Ты знаешь, если у тебя идёт случайное чередование цветов ("белый" - "не белый"), то самым верным способом будет, пожалуй, прописывание стиля каждому <p>.


Это сообщение отредактировал(а) dm9 - 16.4.2005, 18:16

dm9 Угу. СПАСИБО за разъяснения!

А как можно в списке поставить справа отступ?
Вот код списка:

Код

<ul>                       <li class="style9">                         <div align="justify">Работа на любых трудно доступных участках</div>                       </li>                       <li class="style9">                         <div align="justify">Оперативность органзации работы, т.к. не требуется установка дополнительного оборудования (строительные леса, автовышка, люльки и т.п.)</div>                       </li>                       <li class="style9">                         <div align="justify"> Аккуратность выполнения работ (кровельные покрытия и фасады зданий остаются неповрежденными</div>                       </li>                     </ul>

Паддинги, как я понимаю, тут уже не помогут, т.к. это не является описание CSS.

Значит, так. По порядку )

Извини, не могу спокойно смотреть на этот код, поэтому буду говорить в том числе о том, о чём ты не спрашивала.

1. Если тебе надо задать class="style9" ВСЕМ элементам li данного ul, делается это гораздо проще:

Код

<style type="text/css"> ul.myul li { /* Тут описание css, повторяющее твой style9 */ } </style> <ul class="myul"> <li>...</li> <li>...</li> <li>...</li> </ul>

Так записанный стиль означает "все дочерние элементы li, предком которых является ul с прописанным классом myul".

2. ДИВ внутри li не имеет никакого смысла. Сделай так. Пропиши просто каждому li стиль css

Код

text-align: justify;

Сделать это можно многими способами.
Например, если у всех li одинаковый стиль, модифицируем немного предыдущий код:

Код

<style type="text/css"> ul.myul li { /* Тут описание css, повторяющее твой style9 */ text-align: justify; } </style> <ul class="myul"> <li>...</li> <li>...</li> <li>...</li> </ul>

Если же каждый li имеет свой стиль, то есть если каждому из них ты вынуждена прописывать

Код

<li class="style9">...</li> <li class="style10">...</li> <li class="style11">...</li>

- то в этом случае проще дообъявить стиль с выравниванием:

Код

.myalign { text-align: justify; }

и затем написать так:

Код

<li class="style9 myalign">...</li> <li class="style10 myalign">...</li> <li class="style11 myalign">...</li>

Написанные через пробел стили применяются вместе, то есть первому li будут назначены свойства, прописанные и в стиле style9, и в стиле myalign.

Также можно просто включить этот text-align: justify; в классы style9, 10, 11...

3. Теперь по сути вопроса - как изменить отступ справа.
Делается это очень просто. Прописываешь стиль для ul: <ul class="myul"> и затем добавляешь свойство css:

Код

ul.myul { padding-right: 20px; }

ИТОГО, получаем два варианта кода, в зависимости от того, что тебе надо.

1. (Если style9 применяется ко всем li)

Код

<style type="text/css"> ul.myul { padding-right: 20px; } ul.myul li { /* Тут описание css, повторяющее твой style9 */ text-align: justify; } </style> <ul class="myul"> <li>...</li> <li>...</li> <li>...</li> </ul>

2. Если каждый li имеет свой стиль.

Код

<style type="text/css"> .style9 {...} .style10 {...} .style11 {...} ul.myul { padding-right: 20px; } .myalign { text-align: justify; } </style> <ul class="myul"> <li class="style9 myalign">...</li> <li class="style10 myalign">...</li> <li class="style11 myalign">...</li> </ul>

Это сообщение отредактировал(а) dm9 - 20.4.2005, 22:01

dm9 Круто!!!!!!!!!! Столько примеров! Я, в принципе, догадываюсь, что в этом коде много чего можно упрастить, но не знала как, поэтому все приведенные тобой примеры осень для меня полезны!

Цитата(dm9 @ 20.4.2005, 22:58)

Написанные через пробел стили применяются вместе, то есть первому li будут назначены свойства, прописанные и в стиле style9, и в стиле myalign.

не знал этого, спасибо за справку

Вот этот код. Ничего не получилось: отступы справа не везде, появился какой-то желтый значок и если class="style9" не прописывать в каждом <li>, то текст списка будет не белым

Код

<style type="text/css">                      ul.myul {padding-right: 20px;}                      ul.myul li {color: #FFFFFF; text-align: justify;}                     </style>                  <ul class="myul">                  <li class="style9">Работа на любых трудно доступных участках</li>                  <li class="style9">Оперативность органзации работы, т.к. не требуется установка дополнительного оборудования (строительные леса, автовышка, люльки и т.п.)</li>                  <li class="style9">Аккуратность выполнения работ (кровельные покрытия и фасады зданий остаются неповрежденными</li>                     </ul>

Это сообщение отредактировал(а) Urod - 20.4.2005, 22:59