Перевод строки, перенос строки, перенос на новую строку – это все об одном. В языке HTML перенос на новую строку применяется часто. Есть несколько путей: использовать тег
для перевода на новую строку, а можно использовать свойства CSS для переноса строки. Рассмотрим пример использования тега переноса строки:
В CSS перенос строки можно осуществить по-разному, например вот так:
Br {
float: left;
width: 100%;
margin: 0 0 20px 0; /* отступ после строки 20 пикселей */
}
Разделительная линия при помощи HTML или CSS
В HTML создать разделительную линию очень просто. Используется тоже непарный тег
- это и есть разделительная линия. Разделительная линия начинается с новой строки и после нее есть отступ. Вы можете управлять стилем горизонтальной линии, а так же можно сделать альтернативу ей. Далее пример разделительной линии при помощи тега:
А теперь давайте стилизуем (изменим стили, изменим внешний вид) нашу разделительную линию:
hr {
width: 80%; /* ширина линии */
height: 4px; /* высота / толщина линии */
background: #333; /* фон / цвет линии */
border: 0; /* рамка вокруг разделительной линии (уберем ее) */
margin: 5px 0 5px 0; /* отступ над и под линией 5 пикселей */
}
И создадим альтернативу нашей разделительной линии при помощи тега
Если я правильно поняла, то
имеют разные типы.
больше похож на строчный, так? Хотя
вообще не похож на контейнер, и это сбивает меня с толку. Вопрос такой: если абзац определяется и форматируется с помощью тега
а после абзаца мне захотелось добавить пустую строку, то куда вставить
: внуть контейнера
или после закрывающего дескриптора
Результат у меня в броузере, вроде бы, один и тот же, но как правильно?
Мне тут, конечно, пришло в голову, что можно не выпендриваться и отформатировать абзац с помощью тега
Результат будет как раз такой, как я хочу, но мне все-таки интересно узнать, куда же по правилам надо вставлять этот проклятый "бээр" и можно ли про него сказать, что он - контейнер строчного типа, а потому должен быть расположен внутри контейнера блочного типа, то есть
Перенесено в Стандарты.
По-моему без разницы...
Если внутри
Если после, то значит перевод строки после
Но я бы поставила после. Внутри имеет смысл ставить, если после написанного предложения следует еще одно с новой строки...
Берём источники, смотрим:
http://html.manual.ru/book/html/body/textblocks/br.php и
http://www.w3.org/TR/html4/struct/text.html#edef-BR
— не контейнер. Это элемент, который обеспечивает перевод текстовой строки и по большому счёту заменяет „родной“ перевод строки в тексте (ведь просто перевод строки, как известно, броузерами игнорируется и заменяется пробелом). Поэтому
для броузера является как бы обычным символом, и ничем иным, разве что за счёт атрибута clear ему даются некоторые дополнительные возможности.
Исходя из сказанного, думаю, понятно, что конструкция:
Он купил якитори на вертелах и две высокие вощеные картонки пива.
Бросив взгляд вверх, на голограммы, он обнаружил, что грудь одной из фигур уже заливает кровь. Густой коричневый соус стекал с вертелов и капал у Кейса с пальцев.
совершенно правильна и очень жизнеспособна.
Замечание: не стоит использовать
.
http://www.w3.org/TR/html4/struct/global.html#edef-DIV
Алексей совершенно прав, но я позволю себе добавить ещё немножко теории. Теория, конечно, не всегда идёт в ногу с практикой, но ведь Вас интересует именно теоретическая сторона вопроса? Так вот, элемент строчного типа
- это всего лишь указание браузеру: "разорви или закончи здесь строку". Не больше. Используя конструкцию
, Вы пытаетесь применить этот тег с совсем другой целью, с целью, для которой он не предназначен. А именно, Вы пытаетесь использовать
для создания пустой строки, или даже нет, не пустой строки, а увеличенного промежутка между строками . Этот эффект, однако, является побочным, а потому полагаться на него - плохой стиль вёрстки. Таким образом, обе конструкции по сути своей ошибочны! Теоретически, браузер должен проигнорировать тег
в обоих позициях: в первой - потому, что закрывающий тег
А межстрочные расстояния регулируйте с помощью CSS . Но конечно, практически следовать этой рекомендации трудно, а порой невозможно; но это уже другая тема.
Мама... Это что же такое получилось??? Господи, откуда все эти пустые строки??? :))
Попробую еще раз... "Блокнот"пошаливает, извините, пожалуйста...
Кстати,мой броузер-таки на комбинацию...
Но все-таки, как же добиться такой конструкции:
Прежде чем Кейсу удалось найти палатку, где торговали едой, пришлось сделать вокруг здания почти полный круг.
Если средний абзац форматировать с помощью контейнера
То перед ним будет пустая строка, которая мне не нужна. Для моего броузера кострукция
работает, но она неправильна:(Все, что я хочу - окружить средний абзац тегами
. (Это, естественно, претензии не к вам, уважаемые эксперты, день и ночь отвечающие на наши безумные вопросы:), а к HTML -ю и ко всем прочим... броузерам) Я, собственно, всю свою недолгую жизнь среди HTML не могла понять, чем отличаются
И
Так значит, окружать, средний абзац , а потом как-то за счет межстрочного расстояния убирать лишнюю пустую строку, которая появляется в таком случае перед ним? Но как? Можно тогда поподробнее, на примере?
Я все-равно не понял, где этот "средний" абзац...
Не пойму, в чем сложность вставить
в нужном месте? Между теми же или
В таком состоянии он, казалось, мог бы проглотить слона.
Он купил якитори на вертелах и две высокие вощеные картонки пива.
Бросив взгляд вверх, на голограммы, он обнаружил, что грудь одной из фигур уже заливает кровь. Густой коричневый соус стекал с вертелов и капал у Кейса с пальцев.
Но это зрелище оставило его безучастным.
Он съел все до последнего кусочка и с удовольствием запил якитори пивом."
Первый абзац:
Кейс был очень, очень голоден.
В таком состоянии он, казалось, мог бы проглотить слона.
Второй абзац, он же средний:
Прежде чем Кейсу удалось найти палатку, где торговали едой, пришлось сделать вокруг здания почти полный круг.
Он купил якитори на вертелах и две высокие вощеные картонки пива.
Бросив взгляд вверх, на голограммы, он обнаружил, что грудь одной из фигур уже заливает кровь. Густой коричневый соус стекал с вертелов и капал у Кейса с пальцев.
Третий:
Но это зрелище оставило его безучастным.
Он съел все до последнего кусочка и с удовольствием запил якитори пивом.
Дмитрий, Вы мне мою пустую строку обеспечиваете за счет того, что третий абзац в контейнер
Заключаете, ну а если это не удобно? Если абзацев в тексте много, а это проклятая пустая строка должна встретиться только один раз в указанном месте? (то есть, если третий абзац так оформлять, то когда он закончится, будет разрыв и пустая строка, а мне этого не нужно) К тому же вот граждане пишут, что вообще лучше
С точки зрения теории (а в этом разделе мы говорим о теории, а о практике лишь постольку поскольку), так вот, с точки зрения теории в HTML пустых строк не бывает. Вообще! Строка - это комбинация линейно расположенных символов; нет символов - и строки не может быть. Поэтому-то аргумент
> Несколько странно, что после
> определена:(Раз
> то весьма логично решить: одна строка закончилась,
> началась другая. И тут же разорвать ее с помощью
.
неприемлем: нельзя разорвать несуществующую "пустую строку", нельзя разорвать то, чего нет. Чтобы строка всё-таки обрела существование, нужно вставить в неё хоть какой-нибудь символ. Если вставить, появится ощущение "пустой строки" и всё будет законно (хотя и нелогично). Алина, теоретически Вам нужна не пустая строка - Вам нужно увеличенное расстояние между строками (интерлиньяж). Тег
В большинстве броузеров по умолчанию создаёт перед собой удвоенный относительно базового интерлиньяж. Если Вы хотите строго придерживаться теории и принципов логической разметки, абзацы следует создавать с помощью тега
С соответствующими стилями (margin-top для верхнего отступа, line-height для высоты строк внутри абзаца).
Но это теория. Большинство практиков используют фактическое
поведение браузеров, не вдаваясь в теоретические тонкости. Т. е. устанавливают удвоенный интерлиньяж с помощью комбинации
(хотя по закону второй
должен игнорироваться), мешают
И
Так... Вмешаюсь.
Алина, если вы хотите, чтобы у вас всё выглядело так, как вам нужно — это одно. Если вам нужно, чтобы вёрстка следовала правилам и высокой логике HTML — это совсем другое. Более того, часто одно с другим не совпадает.
Теперь по делу. Если вам нужно, чтобы абзацев было много, а пробел был только в одном месте, вы вполне можете сложить весь текст в один [абзац
Слой
Так абзац будет у вас только один (реально), но выглядеть вы можете его заставить по-всякому, за счёт
. В том месте, где вам нужен будет пустая строка,
будет стоять два раза подряд.
Но это, как вы понимаете, нарушает логику HTML.
Идём дальше. У нас есть такая прекрасная вещь, как стилевое оформление документов, и определив для нашего абзаца margin:0px, мы получим именно то, что нужно — нулевой отступ между абзацами. (сразу прошу прощения за избыточный объём, но для наглядности мне пришлось использовать несколько абзацев. Скопируйте пример в html-страницу и просмотрите)
Прежде чем Кейсу удалось найти палатку, где торговали едой, пришлось сделать вокруг здания почти полный круг. Он купил якитори на вертелах и две высокие вощеные картонки пива. Бросив взгляд вверх, на голограммы, он обнаружил, что грудь одной из фигур уже заливает кровь. Густой коричневый соус стекал с вертелов и капал у Кейса с пальцев.
Башни ее и поля, разбросанные в бесцветном псевдопространстве
симуляционной матрицы - всего лишь электронная видимость, облегчающая
процесс управления и обмен огромными объемами данных. Законным
программистам дела нет до тех стен из льда, позади которых они работают,
стен тьмы, которые скрывают их операции от других - артистов
индустриального шпионажа и деловых ребят вроде Бобби Квинна.
Бобби был ковбоем. Он был хакером, вором-взломщиком, потрошившим
разветвленную электронную нервную систему человечества. Он присваивал
информацию и кредиты в переполненной матрице, монохромном
псевдопространстве, где, как редкие звезды во тьме, светились плотные
сгустки данных, мерцали галактики корпораций и отсвечивали холодным
блеском спирали военных систем.
Бобби был одним из тех потерявшихся во времени лиц, которых всегда
застанешь за выпивкой в "Джентльмене-Неудачнике", популярном в городе
баре, пристанище для электронных ковбоев, дельцов и прочих ребят, хоть
каким-то боком связанных с кибернетикой.
Мы были партнерами.
Замечание в тему: если использовать предыдущий, „неверный“ вариант, то отступ между строками иногда хочется сделать меньше или больше одного
. В этом случае используется распорка, которая и обеспечит иллюзию половинного или полуторного интервала.
Раз уж зашла речь о "теории", то замечу, что в подобная конструкция противоречит правилам русского языка (и не только русского). Поэтому, уподобляясь остальным “теоретикам” предложу: "Прежде чем думать о верстке, убедитесь, что это не протеворечит правилам "человеческого" языка". :)
Гениальная мысль - текст представить в виде графики.
И все те проблемы будут решены.
Другая мысль - попробовать в SVG.
Третья - какого..... до сих пор никто не проработал управление переносами в словах?
В CSS2 какое-то подобие заложили, да что толку....
Управление переносами крайне проблематично. Для автоматической расстановки переносов браузер должен знать правила грамматики соответствующего языка, что в функции браузера не входит и в принципе входить не должно. Остаются "мягкие" переносы, "зашитые" в сам текст. Для этого уже есть символ - , который, правда, пока не всеми браузерами понимается. О расстановке "мягких" переносов должен заботиться автор/редактор текста, или его можно поручить серверу, "знающему" правила расстановки переносов.
Часто возникает потребность добавить новый абзац, но без пустой строки, которую вставляет тег абзаца
Для некоторых фрагментов текста принятые для абзацев стандартные интервалы просто неуместны. Это могут быть надписи под картинками и в таблицах, стихи, цитаты, сноски и примечания.
Для принудительного переноса строк предусмотрен специальный тег, функция которого заложена в его названии br (break row - "разорвать ряд, строку"). Тег
языка гипертекстовой разметки html означает, что все следующее за ним содержимое должно начинаться с новой строки. Если нужно, можно проставить несколько тегов подряд, чтобы добиться необходимого интервала.
Тег
не чувствителен к регистру и не требует закрывающего тега, потому что это пустой элемент, но лучше привыкать закрывать все теги. В XHTML тег разрыва должен быть "наглухо закрыт" на обратный слэш.
Пример использования тега разрыва
Пример
Великая теорема Ферма
X n + Y n = Z n
где n - целое число > 2