Работа с текстом css – CSS — Работа с текстом - Блог сумасшедшего сисадмина

Содержание

CSS — Работа с текстом

На этом уроке мы познакомимся с основными приёмами для работы с текстом с помощью средств CSS.

Задавать стили CSS к тексту можно на уровне элемента body (для всей веб-страницы), элемента p (для абзаца), элемента span (для выделенного фрагмента текста) или любого другого элемента HTML.

Свойство font-size изменяет размер шрифта. Оно задаётся с помощью значения и единицы измерения (em, px, pt, %). Единицы измерения em и % являются относительными и зависят от размера шрифта установленного в документе. Единицы измерения px и pt являются абсолютными и их размер зависит от разрешения экрана. Также у данного свойства есть предопределенные значения small и larger, которые соответственно уменьшают или увеличивают текст по отношению к базовому.


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>  
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство font-weight изменяет жирность шрифта. Свойство font-weight имеет 2 часто используемых значения: normal (обычное) и bold (жирное). Остальные значения используются очень редко, перечислим их: числовые от 100 до 900 с шагом 100 (100 – самое тонкое начертание, 900 – самое жирное начертание),

bolder и lighter.


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>  
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство

font-style устанавливает тексту курсивное начертание. Оно принимает следующие значения: normal (обычное начертание шрифта), italic (курсивное начертание).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство font-family изменяет шрифт или список шрифтов с помощью которых отображается текст. В качестве значений свойство font-family принимает названия шрифтов (например: font-family: «Tahoma», «Arial») или предопределенные названия группы шрифтов (serif, sans-serif, monospace, fantasy, cursive).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство color изменяет цвет шрифта. Установить цвет можно несколькими способами: #ff0000 (шестнадцатеричное значение цвета),

orange (зарезервированное название цвета), rgb(120,17,90) (RGB значение).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство background-color можно использовать для выделения текста цветом, т.е. текст делается похожим на текст выделенный маркером. Установить цвет можно такими же способами, как и для свойства color.


<p>Lorem ipsum <span>dolor sit</span> amet</p>
<p>Lorem ipsum dolor <span>sit amet</span></p>
<p><span>Lorem</span> ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство text-decoration можно использовать для декоративного оформления текста. В качестве значений свойства text-decoration можно использовать следующие: none (без декоративного оформления), underline (подчёркивание), overline (линия над текстом), line-through (зачёркивание), blink (эффект мигания).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Подчёркивание также можно создать с помощью свойства CSS border.


<p>Lorem ipsum <span>dolor sit</span> amet</p>
<p><span>Lorem </span>ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство text-transform управляет регистром символов. В качестве значений свойства text-transform

можно использовать следующие: none (по умолчанию), lowercase (переводит все символы в строчные), uppercase (переводит все символы в прописные), capitalize (каждое слово начинается с прописного символа).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

При обработке текста браузер не отображает больше одного пробела между словами, а также игнорирует переносы строк, которые вы выполнили в HTML коде. При помощи свойства

white-space вы можете настроить поведение браузера с помощью следующих значений: normal (по умолчанию), nowrap (не переносит текст, пока не встретит тег br), pre (отображает текст как в коде на HTML), pre-wrap (отображает все пробелы между словами и переносит текст, если он не помещается в контейнер).


<p>Lorem    ipsum 

dolor sit amet</p>
<hr>
<p>Lorem    ipsum 

dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство text-align предназначено для выравнивания текста в горизонтальном направлении. Значения свойства text-align указывают, что текст будет выровнен: left (по левому краю), center (по центру), right (по правому краю), justify (по ширине, т.е. одновременно по левому и правому краям).


<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

Свойство vertical-align может использоваться для строчных элементов (в том числе для элементов со свойством display:inline-block), ячеек таблицы, и предназначено для выравнивания текста по вертикали. Значения свойства vertical-align указывают, что текст будет выровнен: top (по верхнему краю строки), middle (по середине), bottom (по нижнему краю строки), baseline (значение по умолчанию, выравнивание по базовой линии), sub (текст отображается в виде нижнего индекса, как подстрочный), super (текст отображается в виде верхнего индекса, как надстрочный).


<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem <span>ipsum</span> dolor <span>sit amet</span>.</p>

Lorem ipsum dolor sit amet.

Свойство line-height предназначено для задания высоты строки, которая влияет на расстояние между строчками текста. В качестве значений свойства line-height можно использовать следующие: число (множитель по отношению к значению высоты строки по умолчанию), проценты (например: 120% от высоты строки по умолчанию), px (например: 16px), em (например: 3em), зарезервированное слово normal (автоматический расчёт высоты).


<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

itchief.ru

CSS cвойства текста — справочник по тегам HTML и свойствам CSS

Свойство text-indent определяет величину отступа первой строки абзаца.

Значения:

num — число, на которое нужно сделать отступ.

Пример:

.p { text-indent : 20px; }

Свойство text-align определяет стиль шрифта.

Значения:

left — по левому краю.

right — по правому краю.

center — по центру.

justify — по всей ширине.

Пример:

.p { text-align : justify; }

Свойство text-decoration определяет оформление текста.

Значения:

none — без оформления.

underline — подчеркиванутый текст.

overline — черта сверху.

line-through — перечеркивание.

blink — мигающий текст.

Пример:

.p { text-decoration : overline; }

Свойство text-shadow служит создания тени для букв.

Значения:

значения представляют собой величины отступов тени и ее цвет.

Пример:

.p { text-shadow : 2px 2px #666666; }

Свойство letter-spacing определяет значения межбуквенного интервала.

Значения:

normal — определяется браузером.

auto — интервал изменяется так, чтобы текст уместился в одну строку.

num — числовое значение.

Пример:

.p { letter-spacing : 5px; }

Свойство line-height определяет межстрочный интервал.

Значения:

normal — определяется браузером.

num — число с единицами измерения.

num — число.

Пример:

.p { line-height : 1.5; }

Свойство word-spacing служит для задания расстояния между словами.

Значения:

normal — определяется браузером.

num — число с единицами измерения.

Пример:

.p { word-spacing : 10px; }

Свойство text-transform определяет вид букв.

Значения:

none — без изменения.

capitalize — первая буква каждого слова прописная.

uppercase — все буквы прописные.

lowercase — все буквы строчные.

Пример:

.p { text-transform : capitalize; }

Свойство white-space определяет вид пробелов.

Значения:

normal — определяется браузером.

pre — сохраняется количество пробелов идущих друг за другом.

nowrap — запрет на автоматический разрыв строк.

Пример:

.p { white-space : nowrap; }

Свойство direction для задания направления текста.

Значения:

ltr — слева направо.

rtl — справа налево.

Пример:

Свойство color для задания цвета текста.

Значения:

value — цвет текста.

Пример:

html-css-tegs.ru

Свойства CSS для работы с текстом

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

Семьдесят процентов успеха в web-дизайне при создании сайта — это умение управлять текстом и шрифтами. Пользователей интересует текстовое наполнение сайта и то, с какой легкостью читается контент, влияет на длительность пребывания пользователя на сайте. И вернется ли он еще?

Для этого необходимо уметь правильно выбирать шрифты, грамотно их совмещать, а так же правильно управлять самим текстом.

text-indent — абзац с «красной строки», назначить любому абзацу отступ

letter-spacing — регулируем расстояние между буквами в слове (можно увеличить или уменьшить)

word-spacing — регулируем расстояние между словами в предложении

text-decoration — подчеркивание, зачеркивание, надчеркивание текста

text-align — выравнивание текста

line-height — расстояние между строками в тексте (но не меньше величины текста)

text-transform — различные изменения в тексте

Самое используемое свойство css, связанное с текстом, это выравнивание текста. Например, текст страницы, которую вы сейчас читаете, выровнен по левому краю.

В html для выравнивания текста применяли атрибут align.

В CSS тоже есть свойство, которое отвечает за выравнивание текста — text-align. Это свойство может принимать четыре значения:

left — выравнивание текста по левому краю (по умолчанию)

right — выравнивание текста по правому краю

center — выравнивание текста по центру

justify — выравнивание текста по левому и правому краю (растягивание текста)

Давайте в нашем CSS-файле пропишем новый стиль для работы с текстом. Пусть это будет стиль text.

Пример:

.text {

text-align:right;

}

Если в html-коде страницы прописать какому-нибудь абзацу этот стиль, то текст этого абзаца будет выровнен по правому краю.

Пример:

<p>Текст абзаца</p>

Следующее свойство CSS — отступ, так называемая «красная строка».

text-indent — свойство, отвечающее за написание абзаца с «красной строки». В значении этого свойства прописываем величину отступа в пикселях или других единицах измерения.

Пример:

.text {

text-align:left;

text-indent:30px;

}

Далее рассмотрим свойство css

text-decoration:line-through; — зачеркивание текста

Это свойство применяется, например, при написании цен. При изменении цены старое значение зачеркиваем и прописываем новое.

Но как же нам прописать это свойство одному слову из текста, а не всему абзацу. Для этого будем использовать тег <span>. Сам по себе этот тег никаких изменений в тексте не производит, но если ему прописать какой-либо стиль… Вот для этого и необходим этот тег — для придания какого-либо стиля отдельному объекту.

Давайте создадим новый стиль (например — cherta) и пропишем ему это свойство:

Пример:

.cherta {

text-decoration:line-through;

}

Теперь в абзаце зачеркнем любое слово:

Изучим следующее свойство css — text-transform. Это свойство позволяет проделывать абзацам некоторые трансформации.

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

Значения свойства text-transform:

capitalize — первая буква каждого слова абзаца будет заглавной

uppercase — весь текст будет написан заглавными буквами

lowercase — весь текст будет написан прописными буквами

Создадим новый стиль со свойством text-transform

Пример:

.tr {

text-transform: capitalize;

}

Пропишем абзацу этот стиль:

<p>Первая Буква Каждого Слова Абзаца — Заглавная</p>

Можно изменять расстояние между словами в тексте. Для этого применяем свойство css:

word-spacing — величина расстояния между словами в тексте

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

}

Можно изменять расстояние между буквами в словах применяя свойство:

letter-spacing — величина расстояния между буквами в словах

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

letter-spacing: 4px;

}

И последнее свойство css, которое мы изучим, свойство применяемое для изменения расстояния между строк в тексте. Это свойство:

line-height — величина расстояния между строками в тексте

Расстояние между строками — это не расстояние от нижнего края верхней строки до верхнего края нижней строки. Здесь учитывается и высота букв, так что это расстояние между верхними (или нижними) краями строк. Имейте это ввиду.

Пример:

.tr {

text-transform: capitalize;

word-spacing: 10px;

letter-spacing: 4px;

line-height: 25px;

}

bookhtml.ru

Работа с текстом в HTML – PROG-TIME

HTML- текст представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения.

Теги заголовков

Тег <h2>

Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег <h2> должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.

<h2>Заголовок 1 уровня</h2>

1.2. Тег <h3>

Им обозначаются подзаголовки тега <h2>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

<h3>Заголовок 2 уровня</h3>

Заголовок 2 уровня

1.3. Тег <h4>

Показывает подзаголовки тега <h3>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

<h4>Заголовок 3 уровня</h4>

Заголовок 3 уровня

1.4. Теги <h4>, <h5>, <h6>

Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em/ 2.33em соответственно.

<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>

Заголовок 4 уровня

Заголовок 5 уровня

Заголовок 6 уровня

Для всех тегов доступны ‎глобальные атрибуты.

Теги для форматирования текста

Тег <b>

Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.

<b>Полужирный текст</b>

Полужирный текст

Тег <em>

Отображает шрифт курсивом, придавая тексту значимость.

<em>Пример текста</em>

Пример текста

Тег <i>

Отображает текст курсивом.

<i>Отображает текст курсивом</i>

Отображает текст курсивом

Тег <small>

Уменьшает размер шрифта на единицу по отношению к обычному тексту.

<small>Уменьшенный текст</small>

Уменьшенный текст

Тег <strong>

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

<strong>Полужирный текст</strong>

Полужирный текст

Тег <sub>

Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.

<sub>Нижний индекс</sub>

_{Нижний индекс}

Тег <sup>

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

<sup>Степень</sup>

^{Степень}

Тег <ins>

Выделяет текст в новой версии документа, подчёркивая его.
Для тега доступны следующие атрибуты: cite, datetime.

<ins>Подчеркнутый текст</ins>

Подчеркнутый текст

Тег <del>

Перечёркивает текст. Используется для выделения текста, удаленного из документа.
Для тега доступны следующие атрибуты: cite, datetime.

<del>Перечеркнутый текст</del>

~~Полужирный текст~~

Теги для ввода «компьютерного» текста

Тег <code>

Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.

<code>Программный код</code>

Программный код

Тег <kbd>

Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом.

<kbd>Вводимый текст</kbd>

Вводимый текст

Тег <samp>

Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом.

<samp>Пример текста</samp>

Пример текста

Тег <var>

Выделяет имена переменных, отображая курсивом.

<var>Пример текста</var>

Пример текста

Тег <pre>

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

<pre>Пример текста</pre>

Пример текста

Теги для оформления цитат и определений

Тег <abbr>

Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.

<abbr>Аббревиатура</abbr>

Тег <blockquote>

Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для тега доступен атрибут cite.

<blockquote>Пример текста</blockquote>

Пример текста

Тег <q>

Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для тега доступен атрибут cite.

<q>Пример текста</q>

Пример текста

Тег <cite>

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

<city>Пример текста</city>

Пример текста

Тег <dfn>

Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.
Для тега доступен атрибут title.

<dfn>Пример текста</dfn>

Пример текста

Абзацы, средства переноса текста

Тег <p>

Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».

<p>Пример текста</p>

Пример текста

Тег <br>

Переносит текст на следующую строку, создавая разрыв строки.

<p>Пример <br>текста</p>

Пример
текста

Тег <hr>

Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.

<p>Пример текста</p>
<hr>
<p>Текст за чертой</p>

Пример текста
<hr/ style=”border:1px solid #000;”> Текст за чертой

После ознакомления, вам нужно закрепить полученную информацию. Для этого:

Создайте новый документ. Назовите его index.html
Во внутрь документа пропишите базовый шаблон HTML. Его вы можете найти в этой записи http://prog-time.ru/bazovyj-kod-html/
Внутри тега body пропишите теги которые были показаны в данном уроке.

prog-time.ru

HTML-теги для работы с текстом

<h2>, <h3>, <h4>, <h5>, <H5>, <H6>.

Всего 6 видов заголовков — от h2 до H6. Тегу h2 соответствует самый большой заголовок, тегу H6 — самый маленький. Закрывающий тег обязателен.

Атрибуты:

align — Выравнивает заголовок в соответствии со следующими значениями:

center — По центру.

left — По левому краю.

right — По правому краю.

title — Всплывающая подсказка.

Пример:

Тег <h3> и вид текста в нем.

……..

А это уже заголовок в теге <H6>

Тег <p> создает новый параграф.

Атрибуты:

align — Выравнивает параграф относительно одной из сторон документа.

left — выравнивание по правому краю (По умолчанию ).

right — выравнивание по правому краю.

center — выравнивание по центру.

justify — выравнивание по ширине.

title — Всплывающая подсказка.

Пример:

Первый параграф.

Второй параграф.

Контейнер <b> </b> выделяет текст жирным шрифтом.

Аналогичный тег — <strong> </strong>, он тоже выделяет текст жирным. Но его не рекомендуется использовать больше 1-2 раз на странице — при большом количестве тегов <strong> на странице поисковые системы могут воспринять это как спам.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Это текст выделенный жирным шрифтом..

Контейнер <strong> </strong> выделяет текст жирным шрифтом.

Рекомендуется использовать этот тег для выделения наиболее значимого ключевого слова (или словосочетания) для акцентирования на нем внимая посковых систем.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Эта страница посвящена HTML-тегам для работы с текстом. Главная мысль страницы выделена тегом <strong>.

Тег <hr> добавляет в документ горизонтальную линию.

Закрывающий тег не обязателен.

Атрибуты:

size — Устанавливает толщину линии.

width — Устанавливает ширину линии в пикселах или процентах.

noshade — Создает линию без тени.

color — Задает линии определенный цвет.

Пример:

<hr noshade=»noshade» color=»#00FF33″ />.

Тег <br /> переводит текст на новую строку.

Закрывающий тег не обязателен.

Пример:

Очень длинный текст, который нужно разбить на две строки.

Очень длинный текст,
но уже разбитый на две строки вставкой тега <br /> после слова «текст,».

Контейнер <nobr> </nobr> запрещает перевод строки.

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

Пример:

Очень длинный текст, который не переносится на две строки и заключен в контейнер <nobr> </nobr>.

Контейнер <sub> </sub> делает подиндекс.

Набираем формулу H<sub>2</sub>0. Результат в примере.

Пример:

Контейнер <sup> </sup> делает надиндекс.

Набираем формулу X<sup>2</sup> = 4. Результат в примере.

Пример:

Контейнер <big> </big> выводит более крупный, чем окружающий текст.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Это более крупный текст.

Контейнер <small> </small> выводит более мелкий, чем окружающий текст.

Атрибуты:

title — Всплывающая подсказка.

Пример:

Это простой текст.

Это более мелкий текст.

Контейнер <i> </i> выделяет текст курсивом.

Вместо него рекомендован Контейнер <em> </em>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <i> </i>.

Контейнер <em> </em> выделяет текст курсивом.

Рекомендован вместо контейнера <i> </i>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <em> </em>.

Тег <s> делает текст зачеркнутым.

Закрывающий тэг </s> обязателен. Не ркомендован для использования.

Пример:

~~Это текст заключенный в контейнер <s> </s>~~.

Тег <tt> выделяет текст моноширинным шрифтом.

Закрывающий тэг </tt> обязателен.

Вместо него рекомендован контейнер <kbd> </kbd>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <tt> </tt>.

Тег <kbd> выделяет текст моноширинным шрифтом.

Закрывающий тэг </kbd> обязателен.

Рекомендован вместо контейнера <tt> </tt>.

Пример:

Это простой текст.

Это текст заключенный в контейнер <kbd> </kbd>.

Контейнер <u> </u> делает текст подчеркнутым.

Не рекомендован для использования.

Пример:

Это простой текст.

Это текст заключенный в контейнер <u> </u>.

Тег <font> определяет цвет, размер и выводимый шрифт.

Закрывающий тег </font> обязателен.

color — определяет цвет текста.

face — определяет гарнитуру шрифта.

size — определяет размер текста в пределах от 1 до 7, где 1 — самый мелкий шрифт. По умолчанию равен 3.

Пример:

<font color=»#0000CC» face=»Verdana» size=»5″></font>.

<font color=»#CA0000″ face=»Times New Roman» size=»2″></font>.

Тег <pre> предварительно отформатированный текст.

Преформатированный текст отображается моношириным шрифтом.

<pre>предварительно отформатированный текст, 
с сохранением последовательно поставленных пробелов.</pre>

Тег <marquee> заставляет текст перемещаться из стороны в сторону.

Закрывающий тег </marquee> обязателен.

Атрибуты:

behavior — Определяет вид движения.

alternate — Колебательные движения налево и направо.

scroll — Перемещение текста в направлении, указанном в direction. Достигнув края экрана, надпись появляется снова с противоположной стороны.

slide — Схоже с scroll, но текст перемещается только один раз и останавливается.

direction — Определяет направление движения.

down — Движение вниз.

left — Движение справа налево (по умолчанию).

right — Движение слева направо.

up — Движение вверх.

Пример:

Тег <q> предназначен для включения в документ короткой цитаты.

Закрывающий тег </q> обязателен.

<q>Цитата</q>.

Цитата.

Тег <blockquote> предназначен для включения в документ длинной цитаты.

Закрывающий тег </blockquote> обязателен. Тег <blockquote> создает отступы с обеих сторон и отделяется от остального текста пустыми строками.

Какой-то текст,

здесь цитата

и текст продолжается.

Контейнер <address> </address> применяют для указания сведений об авторе.

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

Пример:

Информация об авторе!

Тег <cite> используется для цитат.

Закрывающий тег </cite> обязателен. Обычно отображается курсивом.

Пример:

Какой-то текст, (здесь цитата) и текст продолжается.

Контейнер <code> </code> применяют для выделения программного кода, отображаемого на странице.

Oтображается моноширинным шрифтом.

Пример:

Таким образом отобразится текст в контейнере <code> </code>.

html-css-tegs.ru

Работа с текстом в css

Давайте поговорим о свойствах, которые отвечают за внешний вид текста: выравнивание текста, подчеркивание, отступы. Одно из самых использованных свойств текста, это его выравнивание. В css есть свойство, которое отвечает за выравнивание текста. Давайте в каскадной таблице стилей создадим совершенно новый стиль и назовем его text. За выравнивание текста отвечает свойство text-align, и оно может принимать четыре значения: слева (по умолчанию), справа, по центру, по обоим краям.

.text{
text-align:right;
}

Далее сохраняем таблицу стилей, открываем нашу страницу, и прописываем
какому-нибудь абзацу, выравнивание по правому краю:

<p class=”text”>работа с текстом в css</p>.

Вот таким образом работает это свойство. Если нам необходимо выровнять текст по центру, то мы прописываем соответственно center вместо right.
Следующее свойство, которое я хочу с Вами рассмотреть, это отступы, или другими словами, красная строка. Для этого мы должны прописать новое свойство, отвечающее за красную строку. Пишется оно следующим образом: text-indent:30px. 30px, соответственно, значение красной строки. Также значение красной строки мы можем задавать не только в пикселях, но и в сантиметрах, и в em. Если с сантиметрами все понятно, то давайте рассмотрим, что же такое em. Это ширина буквы m. Например: text-indent:4em;. Это значит, что отступ будет равен четырем буквам m (для данного шрифта).

Следующее свойство, которое я хочу рассмотреть – это зачеркивание текста. Применяется зачеркивание текста, например, при указании цен, если идет акция, и необходимо указать другую цену. И для этого нам необходимо рассмотреть тег <span>. Для чего он нужен. Например, нам необходимо зачеркнуть одно из слов в определенном абзаце. Соответственно для этого нам нужен специальный тег, которому мы пропишем класс, зачеркивающий текст. Давайте создадим этот новый стиль, который будет зачеркивать текст. Прописываем в таблице стилей следующее:

.cherta{
text-decoration:line-through;
}

Далее в исходном коде находим нужное слово и пишем следующее:
<span class=”cherta“>Текст который необходимо зачеркнуть</span>. Сам по себе он ничего не меняет, и служит для придания стиля.
Давайте рассмотрим следующее свойство, которое позволяет делать над абзацами некие трансформации. Допустим, нам необходимо сделать так, чтобы каждое слово определенного абзаца начиналось с большой буквы. Например, создадим новый стиль:

.tr{
text-transform:capitalize;
}

Далее придадим данный класс необходимому абзацу:

<p class=”tr”>Каждое Слово С Большой Буквы</p>.

Если мы хотим, чтобы все буквы были заглавными, тогда нам необходимо прописать вместо capitalize, uppercase. Если мы хотим, все буквы сделать маленькими, прописываем lowercase.
На странице между словами одинаковый отступ. Допустим, мы хотим сделать этот отступ в каком-нибудь абзаце больше. Делается это с помощью свойства word-spacing:10px. В пикселях указывается, какой будет отступ.
Если нам нужно изменить расстояние между буквами: letter-spacing:4px;.
И напоследок, давайте рассмотрим, как менять расстояние между строками. Для этого необходимо использовать такое свойство: line-height:10px;.

Поможем создать сайт быстро и качественно.

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

Ежедневно c 10:00ч до 20:00ч.

goinweb.ru

выравнивание, отступ, обтекание и другое форматирование

Свойства CSS для форматирования текста позволяют оформить содержимое страницы, не затрагивая HTML-код. Какие же параметры можно задать тексту через таблицы стилей?

Выравнивание по горизонтали

Для него используется свойство text-align. Выровнять с его помощью можно только блочный текст (теги <div>, <p>). Свойству может быть задано одно из четырех значений:

left — выравнивание по левому краю.
right — по правому краю.
center — по центру.
justify — по ширине.

Вот код HTML-страницы, текст которой выровнен по правому краю:

<!DOCTYPE html>
<html>
<head>
    <title>Выравнивание по правому краю</title>
    <style type="text/css">
    p { text-align: right; }
    </style>
</head>
<body>
<p>Текст, который вы сейчас читаете, выровнен по правому краю.</p>
</body>
</html>

Выглядеть страница будет так:

Если текст выровнен по ширине (text-align: justify), то можно использовать свойство text-align-last, чтобы задать отличное от основного содержимого выравнивание последней строчки текста элемента.

Выравнивание по вертикали

Может задаваться только для строчных элементов (картинок, форм), определяется свойством vertical-align. С его помощью выравнивается не содержимое, а сами элементы, кроме случая с ячейкой – использование vertical-align выравнивает не её саму, а только расположенный в ней текст. Значения могут быть следующими:

baseline. задаётся свойству по умолчанию и выравнивает базовую линию элемента по базовой линии родителя. Если у родителя её нет, то выравнивание происходит по нижней границе.
top и bottom. Если задано первое значение, то верхний край элемента будет совпадать с верхним краем самого высокого элемента строки. Можно сказать, что top — это выравнивание по верхнему краю. Второе свойство выполняет противоположную функцию — совмещает нижний край оформляемого элемента с нижней частью элемента, расположенного в строке ниже всех, то есть происходит выравнивание по нижнему краю.
text-top и text-bottom. От предыдущих свойств отличаются тем, что выравнивание происходит по самым нижним и верхним текстовым элементам, а не любым.
sub и super. Аналоги HTML-тегов <sub> и <sup>. Первое свойство делает элемент подстрочным, второе — надстрочным. Шрифт текста при этом не меняется.
middle. Выравнивание по центру относительно элемента-родителя.

Также с помощью vertical-align можно переместить элемент вверх или вниз, указав значение в пикселях, единицах или процентах. Положительная цифра переместит его вверх, отрицательная — вниз.

Отступ первой строки

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

<p style=”text-indent: 3em;”>Текст</p>

Межстрочный интервал

Задаётся свойством line-height, в качестве значения которого может указываться:

Процент. Высчитывается от размера шрифта элемента.
Число. Определяется как множитель от размера шрифта, который принимается за единицу. Например line-height: 1.5; установит полуторный интервал.
Пиксели или пункты. Определяют не переменное, как предыдущие варианты, а постоянное расстояние.

Декорирование текста

Значение свойства text-decoration позволяет сделать текст зачёркнутым (line-through), подчёркнутым (underline) — линия появляется под текстом, надчёркнутым (overline) — линия появляется над текстом, или отменить эффекты (none).

Вот пример кода:

<!DOCTYPE html>
<html>
<head>
    <title>text-decoration</title>
</head>
<body>
<p>Это зачёркнутый текст.</p>
<p>Это подчёркнутый текст.</p>
<p>Это надчёркнутый текст.</p>
</body>
</html>

Результатом работы будет такая страница:

Интервал между символами и словами

Расстояние между словами можно изменить с помощью свойства word-spacing. Межсимвольное расстояние задаётся свойством letter-spacing. В качестве значений используются любые принятые в CSS единицы длины.

Смена регистра

Указав свойство text-transform, вы можете сделать так, чтобы все буквы текста были заглавными (значение uppercase), строчными (lovercase), или чтобы каждое слово начиналось с большой буквы (capitalize).

Код:

<!DOCTYPE html>
<html>
<head>
    <title>text-decoration</title>
</head>
<body>
<p>Здесь все буквы будут большими.</p>
<p>Все буквы этой строки будут строчными.</p>
<p>Здесь каждое слово будет начинаться с заглавной буквы.</p>
</body>
</html>

Результат:

Обратите внимание, что текст в коде набран как обычно: единственная заглавная буква стоит в начале предложения. Отображение на странице меняет CSS-стиль.

Полезные ссылки:

Работа с текстом css – CSS — Работа с текстом

CSS — Работа с текстом

CSS cвойства текста — справочник по тегам HTML и свойствам CSS

Свойства CSS для работы с текстом

Работа с текстом в HTML – PROG-TIME

Теги заголовков

Тег <h2>

1.2. Тег <h3>

Заголовок 2 уровня

1.3. Тег <h4>

Заголовок 3 уровня

1.4. Теги <h4>, <h5>, <h6>

Заголовок 4 уровня

Заголовок 5 уровня

Заголовок 6 уровня

Теги для форматирования текста

Тег <b>

Тег <em>

Тег <i>

Тег <small>

Тег <strong>

Тег <sub>

Тег <sup>

Тег <ins>

Тег <del>

Теги для ввода «компьютерного» текста

Тег <code>

Тег <kbd>

Тег <samp>

Тег <var>

Тег <pre>

Теги для оформления цитат и определений

Тег <abbr>

Тег <blockquote>

Тег <q>

Тег <cite>

Тег <dfn>

Абзацы, средства переноса текста

Тег <p>

Тег <br>

Тег <hr>

HTML-теги для работы с текстом

Тег <h3> и вид текста в нем.

А это уже заголовок в теге <H6>

Работа с текстом в css

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

выравнивание, отступ, обтекание и другое форматирование

Выравнивание по горизонтали

Выравнивание по вертикали

Отступ первой строки

Межстрочный интервал

Декорирование текста

Интервал между символами и словами

Смена регистра

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

Рубрики

Рубрики