Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > "Красная строка"


Автор: Urod 8.4.2005, 12:18
Вопрос, думаю, простенький: как в начале предложения поставить отступ ("Красную строку")?
Какой тег дя этого нужен?

Автор: sergejzr 8.4.2005, 12:19
Можешь попробовать <blockquote></blockquote>

Автор: z-END 8.4.2005, 12:20
или перед текстом добавить &nbsp; пару раз-)

Автор: Mal Hack 8.4.2005, 12:31
В CSS свойство есть text-indent, наиболее часто используют значение 2em.

Автор: Urod 8.4.2005, 12:46
Хе smile , спасибо, сейчас попробую.

Автор: dm9 9.4.2005, 16:55
Цитата(Mal @ 8.4.2005, 13:31)
В CSS свойство есть text-indent, наиболее часто используют значение 2em.


Да, это самое правильное. Только это работает для блочных элементов.

Код

<style>
p {text-indent: 2em}
</style>


То есть каждый абзац надо заключать в <p>...</p>.

Сделать это автоматически можно при помощи этой утилитки:
http://www.artlebedev.ru/tools/typograf/
(зайди в настройки, разберёшься). Только там каждый абзац должен быть отделён пустой строкой, чтобы он в <p></p> облачился. Иначе просто <br> ставится - а с ним text-indent работать не будет.

Так что самый рулезный вариант - вставляешь пустые строки между абзацами, настраиваешь Типограф, преобразуешь им текст. Он там ещё кое-какие хорошие преобразования с текстом сделает - можешь почитать тут:
http://www.artlebedev.ru/kovodstvo2/sections/62/

Ещё.

Настроить расстояние между абзацами (между <p></p>) можно так:
Код

<style>
p {
margin-top: 0px;
margin-bottom: 0px;
}
</style>


Здесь margin-top и margin-bottom - отступы сверху и снизу для каждого абзаца.

Автор: Urod 11.4.2005, 12:37
dm9 О как все круто! И все только для отступов в абзацах smile Но, зато потом больше ничего править не надо, т.к. все автоматически будет настраиваться. Вот только разобраться с этим осталось (самая малость smile smile )

Код

<style>
p {text-indent: 2em}
</style>
- вот это в начало кода надо вставлять, где стили описываются? smile

Автор: dm9 11.4.2005, 12:41
p {text-indent: 2em} - это вставлять туда, где описываются стили smile

Вообще, они описываются либо в подключаемом .css файле, либо между <head></head> вставляешь
Код

<style type="text/css">
/* Так обозначаются комментарии в CSS */
/* Тут твои стили. Например: */
p {
    text-indent: 2em;
    margin-top: 0px;    
    margin-bottom: 0px;
}
</style>

Автор: Aliance 11.4.2005, 18:58
Вообще-то это в 99% случаев делается так:
Код

.class:first-line {
   margin-left: 20px;
}

Автор: dm9 11.4.2005, 19:24
Правда? smile

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

Автор: Urod 15.4.2005, 17:06
dm9 Привет! Твой вариант мне кажется самым верным, а он по все браузеры подходит (ну хотя бы в Мозилле прокатит)?

Автор: dm9 15.4.2005, 17:13
Ну... ваабче-та я стараюсь давать примеры, которые работают как минимум под наиболее популярные виндовые браузеры smile

Под Firefox 1.0.2 работает, однако работать будет и на более ранних версиях... Под Оперу работает, начиная с версии 6.0 точно. Вообще, это всё в спецификации пропиано, так что работать обязано везде. Может, на старых браузерах проглючит где, конечно...

Автор: Guest 15.4.2005, 22:56
dm9
Код
 
<span color="#FFFFF"> <p class="style9">Мы рады приветствовать Вас на нашем сайте...</p></span> 
<span color="#FFFFF"> <p class="style9">Если Вам необходимо...&nbsp;</p></span>

Это код моего текста. Модно ли как-то сделать и последующие строки ("на нашем сайте") сделать с некоторым отступом, меньшим, чем отступ красной сроки?

Автор: dm9 15.4.2005, 23:03
Не понял вопроса. Объясни подробее.

PS Конструкия
Код

<span color="#FFFFF"> <p class="style9">Мы рады приветствовать Вас на нашем сайте...</p></span> 

меня просто убила... включи этот цвет в style9. Тем более что цвета #FFFFF (состоит из пяти знаков) не бывает.

Автор: Urod 15.4.2005, 23:40
dm9
smile А я еще думаю, отчего же текст в Мозилле не белый? Спасибо!
А про остальное я вот про что: ширина строки текста ограничена => текст переносится на следующую строку (назовем ее строка 2). Хотелось бы, чтобы у строки 2 тоже был небольшой отступ (но меньший, чем отступ красной строки). Вот.

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

И ещё, почитай, пожалуйста, про паддинги, маржины, бордеры. Иногда спецификацию почитать полезно smile
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>

Автор: Aliance 16.4.2005, 15:01
Цитата(dm9 @ 11.4.2005, 20:24)
А под какой это браузер?

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

Автор: dm9 16.4.2005, 16:05
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? Расскажи, пожалуйста.

Автор: Urod 16.4.2005, 16:31
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>

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

Автор: dm9 16.4.2005, 16:34
Ты забыла закрывающуюся фигурную скобку у BODY.

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

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

Автор: Urod 16.4.2005, 16:41
Во, я вот так сделала:
Код

<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.

Автор: dm9 16.4.2005, 16:49
Теперь показываю, как сделать грамотно.

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

Код

<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;

Автор: Urod 16.4.2005, 17:35
Честно говоря, так и не поняла, зачем это:
Код

<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>

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

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

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

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

Автор: Urod 16.4.2005, 19:52
dm9 Угу. СПАСИБО за разъяснения!

Автор: Urod 20.4.2005, 20:41
А как можно в списке поставить справа отступ?
Вот код списка:
Код

<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.

Автор: dm9 20.4.2005, 21:58
Значит, так. По порядку smile)

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

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>

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

Автор: Aliance 20.4.2005, 22:31
Цитата(dm9 @ 20.4.2005, 22:58)
Написанные через пробел стили применяются вместе, то есть первому li будут назначены свойства, прописанные и в стиле style9, и в стиле myalign.

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

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

<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>  

Автор: dm9 20.4.2005, 22:49
Второй код твой работает на ура. Объясняй тогда, что ты понимаешь под "отступами справа".

Добавлено @ 22:55
Мне кажется, мы в понятиях разошлись smile Для меня "отступ с правой стороны" это по умолчанию "padding-right" smile

Автор: Urod 20.4.2005, 23:02
Ой, все - все, разобралась! smile
Я совсем нетуда описание CSS вставляла smile
Добавлено @ 23:06
Просто из твоего примера я описание CSS вставила к сам код, а не в описание CSS, потому что посмотрела, ты когда про CSS писал, то так и называл код "CSS", а когда про код HTML, то так и называл код "HTML". А в последнем варианте не стал разбивать пример на "код в CSS" и "код HTML" - вот я немного и запуталась. Но теперь мне понятно smile

Автор: dm9 20.4.2005, 23:08
Это хорошо.

Тебе, а также Альянсу рекомендую посмотреть вот эту табличку (навеяно тем, что такая конструкция оказалась незнакомой: class="style1 style2"):
http://loc.stack.ru/projects/CSS2/selector.html#q1

Такие вещи, как задавание нескольких стилей одному элементу (class="style1 style2"), а также использование стилей для дочерних элементов очень сильно могут порой сократить код.
Можно сказать, основополагающая такая табличка smile

Автор: Aliance 21.4.2005, 20:32
Цитата(dm9 @ 21.4.2005, 00:08)
Такие вещи, как задавание нескольких стилей одному элементу (class="style1 style2"), а также использование стилей для дочерних элементов очень сильно могут порой сократить код.

Это везде поддерживается?

Автор: dm9 21.4.2005, 21:00
Цитата(dm9 @ 21.4.2005, 00:08)
class="style1 style2"


Поддерживается Операми начиная с 6-й версии точно (возможно, и более ранними версиями).
Знаю, что поддерживается Firefox >= 1.0, IE 6.0.
С остальными браузерами не работал.

В спецификацц найти этого, к сожалению не смог. Найдёшь - покажи...

Автор: Urod 23.4.2005, 15:37
Вот, что мне хотелось бы получить: все тексты стиля 10 выравнить по центру (для чего я в CSS описала это под буквой "m", предполагаю, что это неправильно. А все тексты стиля 13 с параметрами буквы "p".
КАК показать в коде, что описания типа, text-align: center;vertical-align: center;, относятся к конкретному стилю 10, а не какому-либо другому, а описания стиля 13 - только к стилю 13! Я предположила, что надо эти описания располагать сразу под самим стилем. Правильно?
Ну вот, что у меня получилось, и, конечно же, не работает smile
}

Код

<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;
}
.style9,  .style10, .style13  {font-family: Arial, Helvetica, sans-serif}
.style9,  .style10 {font-weight: bold; color: #7C93B3}
m {
text-align: center;
vertical-align: center;
}
.style13 {font-size: 20px}
p {
    text-indent: 2em; /* otstup krasnoy stroki  */
    margin-left: 10;
    margin-right: 10;
    margin-top: 20px; /* pustoe mesto sverxu ot p */
    margin-bottom: 10px; /*  pustoe mesto snizu ot p  */
    padding-left: 20px;  /*  otstup texta v p ot levoy ego granitsi */
    padding-right: 20px; /* otstup texta v p ot pravoy ego granitsi */
    vertical-align: top;
    text-align: justify;
}
.style17 {color: #7C93B3}
.style19 {font-family: Arial, Helvetica, sans-serif}
</STYLE>

Автор: dm9 23.4.2005, 18:23
First of all, пойми, наконец, что цвета XXXXXX не существует! Существует цвет #XXXXXX.

Затем, vertical-align: center; - такого не бывает. То, что ты хочешь сделать, выглядит так: vertical-align: middle;

Теперь.
Рассказываю основы CSS smile

1.
Стили бывают разные. Некоторые задаются через свойство class. Такие стили начинаются с точки.
Код

<style type="text/css">
.qwe { color: orange }
</style>
<p class="qwe">К этому p стиль применяется</p>
<p>К этому - нет</p>
<div class="qwe">К этому div стиль применяется</div>
<div>К этому - нет</div>


Некоторые относятся к конкретному тагу. Тут без точки, просто пишем таг.
Код

<style type="text/css">
p { color: orange }
</style>
<p class="qwe">К этому p стиль применяется</p>
<p>К этому - ТОЖЕ ПРИМЕНЯТЕСЯ</p>
<div class="qwe">К этому div НЕ применяется</div>
<div>К этому - тоже НЕ применяется</div>


А некоторые сочетают оба эти метода, то есть сопоставляются только тем тагам, у которых прописан определённый class. Тут сначала указывается таг, а через точку - class
Код

<style type="text/css">
p.qwe { color: orange }
</style>
<p class="qwe">К этому p стиль применяется</p>
<p>Сюда - не применяется</p>
<div class="qwe">Сюда - не применяется</div>
<div>Сюда - не применяется</div>


2.
Стиль можно задавать в несколько приёмов. Рассмотрим это на примере оптимизации кода.
Код

.style1 { font-weight: bold; text-decoration: underline; color: red; }
.style2 { font-weight: bold; text-decoration: underline; color: green; }
.style3 { font-weight: bold; text-decoration: underline; color: blue; }


Видно, что тут много раз задаётся один и тот же font-weight: bold и text-decoration: underline. Оптимизируем это дело.

Код

.style1, .style2, .style3 { font-weight: bold; text-decoration: underline; }
.style1 { color: red; }
.style2 { color: green; }
.style3 { color: blue; }


На этом примере мы научились двум важным вещам.
ПЕРВОЕ. Один и тот же набор атрибутов (в данном случае, font-weight: bold; text-decoration: underline;) можно присвоить сразу нескольким стилям, задавая эти стили через запятую (.style1, .style2, .style3 {...}).
ВТОРОЕ. Одному стилю может соответствовать несколько описаний. В этом случае браузер обязан соединить все эти описания и сопоставить данному стилю все те атрибуты, которые задавались в разных местах. Например, здесь элемент со стилем style1 станет обладать шрифтом как жирным (font-weight: bold), подчёркнытым (text-decoration: underline), так и красным (color: red).

3.
Важное свойство, о нём я уже говорил. Применение нескольких стилей одному элементу. Можно задать в class два или более стилей через пробел, и применятся они все сразу.
Код

<style type="text/css">
.qwe { color: orange }
.asd { font-weight: bold }
</style>
<p class="qwe asd">Этот шрифт будет как оранжевым, так и жирным</p>


Этими тремя пунктами всё не оканчивается, разумеется...

Попробуй на основе рассказанного сама разрешить свою задачу - это полезно...

Автор: Urod 24.4.2005, 00:26
Как можно указать текст в стиле teletype, т.е. он как на печатной машинке? Пробывала text-decoration: teletype; - не помогло smile

P.S. А про #XXXXXX и middle; - я знала, просто невнимательно посмотрела, да и сгоняли меня из-за компа smile

Автор: Urod 24.4.2005, 01:21
Я вообще все в классы свела, т.к. у меня 4 типа текста. Т.о. ничего похожего на
Код
.style1, .style2, .style3 { font-weight: bold; text-decoration: underline; }
.style1 { color: red; }
.style2 { color: green; }
.style3 { color: blue; }
у меня нет.
А есть только 4 класса:
Код

<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;
}
.asd {
text-align: center;
vertical-align: middle;
font-weight: bold;
color: #7C93B3
}
.qwe {
    text-indent: 2em; /* otstup krasnoy stroki  */
    margin-left: 10;
    margin-right: 10;
    margin-top: 20px; /* pustoe mesto sverxu ot qwe */
    margin-bottom: 10px; /*  pustoe mesto snizu ot qwe  */
    padding-left: 20px;  /*  otstup texta v qwe ot levoy ego granitsi */
    padding-right: 20px; /* otstup texta v qwe ot pravoy ego granitsi */
    vertical-align: top;
    text-align: justify;
    font-size: 21px; /* по этому пункту я после кода вопрос задаю */
    text-decoration: teletype; /* Не работает! Не знаю, как этот тип щрифта называется (это телетайп). Не подскажешь? */
}
.zxc {
text-indent: 2em;
margin-left: 10;
margin-right: 10;
font-size: 20px;
}
.rty {
text-align: center;
font-size: 20px;
}
</STYLE>
- это нормально?
И вот еще с такой ерундой столкнулась: Когда меняю размер шрифта в font-size: 21px; (это в классе qwe) на 25px, например, в HTML-редакторе размер меняется, а при просмотре в браузерах (ИЕ и Мозилла) - НЕ меняется smile Почему? smile

Автор: dm9 24.4.2005, 03:27
Со стилями разобралась? smile

Насчёт шрифта:
Код

Попробуй так:
<p style="font-family: 'Courier'">Лалала</p>
Или так:
<p style="font-family: 'Courier New'">Лалала</p>
Или даже просто так:
<p style="font-family: monospace">Лалала</p>
Не совсем понимаю, что тебе надо.


И ещё раз - задавай каждый вопрос в новом топике. Преимущества очевидны как для тебя, так и не только: больше людей посмотрит на вопрос, и проще будет искать нужную информацию потом по поиску. Даже если это, казалось бы, мелкий вопрос, он может вылиться в очень длинное обсуждение smile

Автор: dm9 24.4.2005, 18:40
Ой, пока вчера писал предыдущее сообщение, ты своё запостила, а я и не заметил.

Цитата(Urod @ 24.4.2005, 02:21)
text-decoration: teletype;

Смотри описание text-decoration:
http://loc.stack.ru/projects/CSS2/text.html#lining-striking-props
Там такого нет smile Попробуй то, что я написал в предыдущем посте.

Цитата(Urod @ 24.4.2005, 02:21)
А есть только 4 класса - это нормально?

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

Цитата(Urod @ 24.4.2005, 02:21)
И вот еще с такой ерундой столкнулась: Когда меняю размер шрифта в font-size: 21px; (это в классе qwe) на 25px, например, в HTML-редакторе размер меняется, а при просмотре в браузерах (ИЕ и Мозилла) - НЕ меняется

По CSS не скажу, давай исходник полностью (с html вместе).


Цитата(Urod @ 24.4.2005, 02:21)
    margin-left: 10;
    margin-right: 10;
    margin-top: 20px; /* pustoe mesto sverxu ot qwe */
    margin-bottom: 10px; /*  pustoe mesto snizu ot qwe  */

Во-первых, 10 ЧЕГО? Просто 10 не бывает. Бывает 10px, 10pt, 10% итд.
Во-сторых, это записывается проще. Все эти маржины объединяются в один:
margin: <top> <right> <bottom> <left>.
В твоём случае это выглядит так:
Код

    margin: 20px 10px 10px 10px;

Автор: Urod 24.4.2005, 20:17
dm9
Так, это мой CSS:
Код

<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;
}
.asd {
text-align: center;
vertical-align: middle;
font-weight: bold;
font-style:italic;
color: #7C93B3;
font-size: 20px;
}
p.qwe {
    text-indent: 2em; /* otstup krasnoy stroki  */
    margin: 20px 10px 10px 10px;    
    padding-left: 20px;  /*  otstup texta v qwe ot levoy ego granitsi */
    padding-right: 20px; /* otstup texta v qwe ot pravoy ego granitsi */
    vertical-align: top;
    text-align: justify;
    font-family: "Courier New", Courier, mono;
    font-size: 16px;
}
.zxc {
text-indent: 2em;
margin-left: 10;
margin-right: 10;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
}
.rty {
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
}
</STYLE>


А это HTML:
Код

<tr>
                <td width="791" height="281" colspan="2"><p class="qwe"> С каждым годом число зданий с элементами из стекла, неуклонно растет. Архитекторские идеи становятся все более  авангардными. Нетрудно себе представить, как безинтересно сморелись бы эти здания, если бы их стекла были грязными. </p>
                  <p class="qwe">Пристижные офисы, элитные дома - их необходимо поддерживать в безусловной чистоте. А если это - магазин, кафе, автосалон или торговый комплекс? Понятно, что грязные, невымытые стекла ветрин, окон  оттолкнут клиента и спровоцируют его обратиться к услугам Вашего конкурента, у которого стекла здания в чистоте.</p>
                  <p class="qwe">Чистое, ухоженное здание - это &quot;визитная карточка&quot; Вашего предприятия, а для клиента - приглашение зайти к Вам! </p></td>
              </tr>
            </table>
            <div align="center">
              <table width="744" bordercolor="#7C93B3" border="2">
                <tr>
                  <td height="60"><p class="asd">Услуга</p></td>
                  <td width="183"><p class="asd">Единица<br />измерения</p></td>
                  <td width="219"><p class="asd">Цена/ ед. измерения<br>(руб.)</p></td>
                </tr>
                <tr>
                  <td><p class="zxc">Мойка стекол</p></td>
                  <td><p class="rty">1 кв. м</p></td>
                  <td><p class="rty">30</p></td>
                </tr>


Возможно, еще где-то можно оптимизировать, но больших ошибок я, вроде, уже не вижу smile
И, самое главное, я со своими вопросами разобралась - ВСЕ РАБОТАЕТ! smile

Автор: dm9 24.4.2005, 23:59
Цитата(Urod @ 24.4.2005, 21:17)
ВСЕ РАБОТАЕТ!


Я счастлив smile
Несколько замечаний smile

width="791" - это очень неправильно. Лучше делать "резиновый" дизайн, то есть подстраивающийся по ширине под окно браузера. Но это субъективно. Если уж делаешь фиксированную ширину и стараешься подогнаться под 800х600, максимальная ширина должна быть 780 пикселей (можно чуть больше, кажется, но на пару пикселей максимум). И 780 - это ширина всей таблицы, а не ячейки. Чтобы делать "резиновый" дизайн, надо всё задавать в процентах.

Непонятно, зачем ты поставила высоту height="281" - всё равно ячейка раздвигается...

p внутрь td вставлять тоже не стоит smile

У класса .zxc лучше прописать text-align: left; Никогда не знаешь, какие умолчания стоят на каких-нибудь линуксоидных браузерах. Я так недавно сам попался...

И ещё. Лебедев тебя за дефисы выгнал бы из своей конторы smile Я там давал как-то сслку на "Типограф", который дефисы расставляет как положено. Дефис и тире - разные вещи smile

И всё-таки, ты забыла поставить # перед кодами цветов smile)

В общем, я немного оптимизировал CSS и HTML. Попробуй разобраться. В общем, в чём не разберёшься - не страшно, для первого раза получилось хорошо smile

Код

<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;
}
tr.asd td {
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    font-style: italic;
    color: #7C93B3;
    font-size: 20px;
}
div.qwe {
    width: 780px;
}
div.qwe p {
    text-indent: 2em;
    margin: 20px 30px 10px 30px;
    vertical-align: top;
    text-align: justify;
    font-family: "Courier New", Courier, mono;
    font-size: 16px;
}
.zxc, .rty {
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
}
.zxc {
    text-align: left;
    text-indent: 2em;
    padding-left: 10px;
    padding-right: 10px;
}
.rty {
    text-align: center;
}
</STYLE>

<div align="center">
    <div class="qwe">
        <p>С каждым годом число зданий с элементами из стекла, неуклонно растет. Архитекторские идеи становятся все более авангардными. Нетрудно себе представить, как безинтересно сморелись бы эти здания, если бы их стекла были грязными.</p>
        <p>Пристижные офисы, элитные дома — их необходимо поддерживать в безусловной чистоте. А если это — магазин, кафе, автосалон или торговый комплекс? Понятно, что грязные, невымытые стекла ветрин, окон оттолкнут клиента и спровоцируют его обратиться к услугам Вашего конкурента, у которого стекла здания в чистоте.</p>
        <p>Чистое, ухоженное здание — это &quot;визитная карточка&quot; Вашего предприятия, а для клиента — приглашение зайти к Вам!</p>
    </div>
    <table width="744" bordercolor="#7C93B3" border="2">
        <tr class="asd">
            <td height="60">Услуга</td>
            <td width="183">Единица<br />измерения</td>
            <td width="219">Цена/ ед. измерения<br>(руб.)</td>
        </tr>
        <tr>
            <td class="zxc">Мойка стекол</td>
            <td class="rty">1 кв. м</td>
            <td class="rty">30</td>
        </tr>
    </table>
</div>


Добавлено @ 00:01
PS Разумеется, до состояния "идеально" я код не доводил, но сейчас работать должно нормально во всех более-менее приличных браузерах.

Добавлено @ 00:03
Ну и, конечно, надо понимать, что
scrollbar-arrow-color: #FFDEAD;
scrollbar-shadow-color: #B5C2D5;
scrollbar-face-color: #B5C2D5;
scrollbar-highlight-color: #FFDEAD;
scrollbar-darkshadow-color: #FFDEAD;
- всё это только под Internet Explorer.

Автор: Urod 30.5.2005, 21:03
Что-то у меня классы .zxc и .rty не работаю. Почему?
Вот ссылка на страничку: http://marinavladimirovna.nm.ru/Site/Pages/page_drygie_raboty1.htm
P.S. По каким-то непонятным мне причинам страничка по ссылке с зазором (что плохо), а у меня на компе без (что хорошо), хотя код один и тот же.

Автор: Urod 31.5.2005, 12:08
Вопрос снят: я скобку после названия класса ставила через пробел - так не правильно!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)