Красная строка в css – Красная строка | CSS самоучитель — Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Содержание

Выравнивание текста и создание красной строки через CSS.

В этом уроке затронем еще два свойства, которые относятся к оформлению текста. И сегодня поговорим о таких свойствах как выравнивание текста и создание красной строки для текста.

Выравнивание текста

И первое свойство — это выравнивание. Вы уже, наверное, обратили внимание, что браузер по умолчанию выравнивает все текстовые элементы по левому краю это и есть его базовое значение по выравниванию.

Естественно появляются такие ситуации, когда нужно что-то выровнять по центру, по правому краю или по всей ширине страницы. В CSS, естественно, есть такое свойство, отвечающее за выравнивание.

Свойство align мы уже знаем из HTML. Там оно использовалась для выравнивания текста. В CSS наблюдается подобие, только добавляется спереди слово text. А значения свойства остаются те же самые.

text-align:left ; — Выравнивание по левому краю.
text-align:center; — Выравнивание по центру.
text-align:right; — Выравнивание по правому краю.
text-align:justify; Выравнивание по ширине.

И, для примера, мы будем работать с заголовком <h3> </h3>, который для начала выровняем по центру.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>
 Заголовок Выровнен по центру: text-align: center 
</body>
</html>

Для заголовка h3 задаем выравнивание по центру.

CSS

h3{
    text-align: center;
}

И если хотите по правому краю, то естественно используется следующий вид.

CSS

h3{
    text-align: right;
}

После чего заголовок прижмется к правому краю.

Ну, и последний вариант это выравнивание текста по всей ширине страницы. Что это значит? То что текст будет, выравнивается одновременно и по левому краю и по правому краю за счет увеличения числа пробелов (расстояния) между словами. Для этого используем параграф, которому задаем данное свойство.

CSS

p{
    text-align: justify;
}

При форматировании текста с таким условием, текст будет растягивается по обеим сторонам.

А мы переходим ко второму свойству это создание красной строки.

Создание красной строки CSS

Данное свойство достаточно популярно в использовании, так как оно облегчает чтение больших текстов. Для создания красной строки у каждого параграфа используется следующее свойство text-indent: ;. Отступ можно задать в различных единицах, мы же зададим в пикселях px.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML страница</title> <link href="css/fonts.css" type="text/css" rel="stylesheet"> </head> <body>

Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка. Абзац, для которого будет создана Красная строка.

</body> </html>

И для всех абзацев зададим отступ в 30px.

CSS

p{
    text-indent:30px;
}

Теперь, если сохранить и обновить браузер то увидим, что у всех абзацев появился отступ в 30px.

Вот мы рассмотрели еще два свойства. Они применяются достаточно часто, поэтому стоит их запомнить. Ну а на этом урок закончим, в Демо смотрите пример работы данных свойств.

webteoretik.ru

Отступ абзаца через CSS

Вы здесь: Главная — CSS — CSS Основы — Отступ абзаца через CSS

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

Безусловно, любое количество пробелов можно вставить с помощью

 , тем самым, подобрав необходимый отступ, но, наверняка, Вы понимаете, что данный способ, мягко говоря, неудобный. А решение этой задачи очень простое.

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

p {

  text-indent: 10px;

}

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

Вот таким простым способом Вы можете задать отступ у первых строк любого абзаца в тексте на сайте.

Создано 10.10.2011 12:42:01
Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,

то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru//images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

myrusakov.ru

CSS: абзацы с отступом

Абзацы с отступом

Вот простой приём: выделение отступом первой строки каждого абзаца. Многим людям проще читать текст, когда его абзацы выделены отступом, а не разделены между собой пустыми строками. Это особенно заметно с большими текстами, но также позволяет зарезервировать пустые строки для более важных разрывов текста.

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

p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }

Здесь мы выделяем отступом первую строку только того абзаца, который следует за другим абзацем. С помощью этих правил мы также убираем пустую строку под всеми абзацами и над абзацами с отступом. На практике вы обнаружите, что вам всё же нужны исключения.

На этой странице, например, есть элементы P, которые используются в качестве подписи к изображениям (см. пример “Иллюстрации & подписи”). Мы уже выровняли их по центру, поэтому выделять дополнительно отступом не надо. Простое правило ‘

p.caption {text-indent: 0}‘ позаботится об этом. Вы можете видеть, что мы действительно использовали это правило в нашем примере.

Теперь мы можем использовать произвольное число пробелов между абзацами для обозначения важных разрывов в тексте. Давайте определим три разных класса: stb (малый тематический разрыв), mtb (средний тематический разрыв) и ltb (большой тематический разрыв). Мы присвоили данному абзацу класс

stb, чтобы вы могли увидеть эффект.

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }

www.w3.org

text-indent | CSS справочник

Поддержка браузерами


12.0+	3.0+	1.0+	1.0+	3.5+	1.0+

Описание

Печатные издания используют общий стиль при оформлении абзацев — красную строку (отступ первой строки в абзаце). Абзацы на веб-страницах не имееют красной строки, так как браузеры, по умолчанию, разделяют их только вертикальными отступами без какого-либо дополнительного форматирования.

С помощью CSS свойства text-indent можно задать пустое горизонтальное пространство перед началом первой строки текста в элементе. Интервал будет отсчитываться от начала левого края (границы — border или внутреннего отступа — padding, если он задан) блочного родительского элемента.

Примечание: использование красной строки в html-документах значительно облегчает визуальное восприятие больших обьемов текста на веб-странице.

Значение по умолчанию:	0
Применяется:	к блочным элементам
Анимируется:	да
Наследуется:	да
Версия:	CSS1
Синтаксис JavaScript:	object.style.textIndent=»50px»

Синтаксис

text-indent: величина|inherit;

Значения свойства

Значение	Описание
величина	Определяет размер отступа в единицах измерения, используемых в CSS.
%	Определяет размер отступа в процентах от ширины родительского элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Пример

С помощью text-indent можно создать абзацный отступ или наоборот(при использовании отрицательных значений), создать выступ, то есть абзац с выступающей первой строкой в левую сторону.

div {
text-indent: 10px;
}

puzzleweb.ru

Курс CSS. Урок 11. Выравнивание текста, «красная» строка.

Курс CSS. Урок 11. Выравнивание текста, «красная» строка. Если не дано никаких указаний-свойства, то по умолчанию текст выравнивается по левому краю. Достигается требуемый способ выравнивания с помощью свойства (property) text-align: text-align:left; — по левому краю (по умолчанию), text-align:center; — по центру, text-align:right; — по правому краю, text-align:justify; — по ширине текста. Эффект «красной» строки, когда самая первая строка абзаца имеет определенный отступ от края достигается за счет свойства text-indent. Примеры: text-indent:32px; — отступ в первой строке равен 32 пикселям, text-indent:12%; — отступ в первой строке равен 12%. © Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru

11. Выравнивание текста, «красная» строка.

В этом уроке мы затронем еще 2 свойства по оформлению текста: его выравнивание и «красная» строка.

Также как есть определенные базовые значения по размеру шрифта и его насыщенности (жирности), также есть и базовое значение по выравниванию текста. Если не дано никаких указаний-свойства, то по умолчанию текст выравнивается по левому краю.

Но часто бывает необходимо применить иной способ выравнивания. Достигается требуемый способ выравнивания с помощью свойства (property) text-align:

Выравнивание текста:

text-align:left; — по левому краю (по умолчанию)

text-align:center; — по центру

text-align:right; — по правому краю

text-align:justify; — по ширине текста, т.е. по обоим краям (как в книгах и газетах). Эффект достигается за счет равномерного автоматического добавления пробелов между словами в абзаце.

Эффект «красной» строки, когда самая первая строка абзаца имеет определенный отступ от края достигается за счет свойства text-indent: «Красная» строка:

text-indent:32px; — отступ в первой строке равен 32 пикселям.

text-indent:12%; — отступ в первой строке равен 12%.

Для «красной» строки можно использовать и другие еденицы измерения, то разумнее всего использовать пиксели и проценты.

На базе данного теоретического материала попробуем создать соответствующие классы:

.text_align_left {
	text-align:left; 
	background-color:#F0F0F0;
	text-indent:5%;
}
.text_align_center {
	text-align:center; 
	background-color:#F0FFFF;
	text-indent:5%;
}
.text_align_right {
	text-align:right; 
	background-color:#F0F0FF;
	text-indent:5%;
}
.text_align_justify {
	text-align:justify; 
	background-color:#F0FFF0;
	text-indent:5%;
}

Теперь созданные классы в файле стилей CSS мы можем использовать в нашем учебном тестовом примере.
css_011_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте…
css_011_001.zip ← скачайте пример, чтобы установить на свой сайт…

***** Машина-Функционал для передвижения по страничкам курса CSS *****

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

Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.

Если вы планируете вернуться сюда позднее…
Пожалуйста, запомните эту страничку —
URL: http://kocby.ru/css/p011.html

Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!

kocby.ru

Оформление абзаца стилями CSS | БлогСтикер

Приступим к форматированию абзаца. Определим параметры полей, отступов и границ.

Для установки ширины полей используется свойство margin. Правило margin:50px установит для каждого поля ширину 50 пикселей.

Большинство случаев требует чтобы каждое поле имело свою ширину. Для задания ширины верхнего поля используйте margin-top, для правого — margin-right, для нижнего — margin-bottom, для левого — margin-left.

Для указания отступов следует пользоваться свойством padding. Оно работает аналогично свойству margin.

border — ещё одно полезное свойство. Оно предназначено для задания стиля границам (ширина, начертание). Свойство border-width определяет значение ширины границы блока Свойство border-color устанавливает цвет границы блока. Border-style задаёт стиль линии(сплошная, двойная, пунктирная и т.д.).Border-style может принимать следующие значения:

none — граница отсутствует;
hidden — граница не отображается;
dotted — пунктирная линия;
dashed — штрихпунктирная линия;
solid — сплошная линия;
double — две сплошные линии;
groove — вдавленная линия;
ridge — выпуклая линия;
inset — весь блок выглядит как бы вдавленным;
outset — весь блок выглядит как бы выпуклым.

Наиболее важные абзацы можно выделить цветом (color — цвет текста, background-color — цвет фона).

Приведём пример:

<style>
p
{
  margin:5px;
  padding:20px;
  background-color:#eee;
  border-style:solid;
  border-width:1px;
  text-align:justify;
}
</style>

Результат будет выглядеть так:

Получилось неплохо. Теперь для сделаем аккуратней: выровняем текст по правой и левой границам (text-align:justify;), зададим отступ для первой строки (text-indent:30px;).

Спецификация CSS2 предусматривает псевдоэлементы first-line и first-letter — первая строка и первая буква соответственно. Создадим стили и для них. В итоге получится что-то вроде:

<style>
p
{
  margin:5px;
  padding:20px;
  background-color:#eee;
  border-style:solid;
  border-width:1px;
  text-align:justify;
  text-indent:30px;
}
p:first-line
{
  font-family:arial;
}
p:first-letter
{
  font-size:30px;
}
</style>

Вот итог наших стараний:

Автора автора

myoversite.ru

Абзац и красная строка с помощью Css [Архив]

Просмотр полной версии : Абзац и красная строка с помощью Css

здравствуйте…
Вообще то я DREDD
но в HTML — я действительно Lamer
Мне бы хотелось один момент узнать(для начала): Как задавать абзац в тексте…
В ворде — просто отступ ставим, а в HTML???
И еще не нашел описания тега span — везде теги div описывают…
заранее благодарю…

Webmaster

24.09.2007, 09:12

но задать тэгом красную строку не удастся

div и span — это одно и тоже, т.е. все атрибуты у них одинаковые,
только span используется в контексте (внутри контента, текста) а div для выделения блоков

Спасибо…
но меня интересует именно красная строка…
ето её я неудачно обозвал абзацем..:)
без красной строки странички корявенько смотрятся…

Webmaster

24.09.2007, 12:36

Спасибо…
но меня интересует именно красная строка…
ето её я неудачно обозвал абзацем..:)
без красной строки странички корявенько смотрятся…
тогда можно использовать CSS указав text-indent

Благодарю…
Я css пока не изучал…
Спасибо помогло…:)
А ещё по ходу работы вопрос можно?
Как задать отступ от параграфа?
У меня проблема такая:

<img src=»../../IMAGES/Mobile_01.jpg» alt=»Установка MOBILE» hspace=»12″ border=»0″ align=»left»>
блаблабла

а потом таблица…
так вот в DW8 выглядит нормально…
а в браузерах (даже в опере) таблица уходит в сторону — между картинкой и краем страницы и перекашивается…
дополнительные пустые строки не помогают — особенно в IE7…
Что тут можно придумать???

В опере вроде получилось…
А Ie7 косячит…. 🙁

Webmaster

25.09.2007, 10:18

Lamer, не вижу в приведенном примере проблем, везде отображается одинаково
приведи более полный кусок исходной страницы
и приложи картинку как ты хочешь, чтобы выглядело

Спасибо, я придумал так:
 
между таблицей и верхом…:)

вставить несколько неразрывных пробелов (   ) (http://zhurnal.lib.ru/i/info/htmlisi.shtml)
вставить слово с цветом букв под цвет фона (http://zhurnal.lib.ru/i/info/htmlisi.shtml)
вставить прозрачный рисунок в формате gif (http://zhurnal.lib.ru/i/info/htmlisi.shtml)

А почему бы вам не использовать псевдокласс :first-letter?

А почему бы вам не использовать псевдокласс :first-letter?
там выще поправочка была, что возможностями html надо обойтись.

С помощью CSS оно как-то правильнее или это извращенный тест на эрудицию? :0024:

да нет.. обоснование, вроде, тоже тому есть)

Подождите, тема называется абзац и красная строка с помощью CSS.
Так задайте margin-left сколько вам там надо в псевдоклассе :first-letter и вся проблема :1130:

А если исключительно средствами html ?
Я например раньше прописывал пред каждой красной строкой <dd>, великолепно работает, но вЫЕ…
А недавно я узнал что это вообще не из той оперы…

не знаю может это и муторно, и неудобно или наоборот все так делают… но я красную строку и любые отступления ставлю таким образом:
…..
где #E0F3FC — цвет фона на котором пишется текст, а количество точек, это необходимое количество пробелов.
То емсть получается что те точки что ты пишешь их просто не видно так как они такого же цвета как и фон.
Простите если я совсем лох :0048::0048::0048:

A красную строку, для «резиновой» вёрстки делаю так: 
, а отступ от правого края так: Текст

Выравнивание текста и создание красной строки через CSS.

Выравнивание текста

Заголовок Выровнен по центру: text-align: center

Создание красной строки CSS

Отступ абзаца через CSS

CSS: абзацы с отступом

Абзацы с отступом

text-indent | CSS справочник

Поддержка браузерами

Описание

Синтаксис

Значения свойства

Пример

Курс CSS. Урок 11. Выравнивание текста, «красная» строка.

Оформление абзаца стилями CSS | БлогСтикер

Абзац и красная строка с помощью Css [Архив]

Добавить комментарий Отменить ответ