Речь пойдет об оформлении текста опубликованного в Интернет. Для этого мы будем использовать теги HTML, применяемые при форматировании текста.
Если вам необходимо обрамить в рамку текст (абзац, строку или выборочную часть), можно воспользоваться несколькими способами.
Использование свойств
Нам необходимо заключить выбранный кусок текста в любой подходящий тег. Самый простой вариант - использовать тег абзаца:
<p>Абзац</p>
Теперь нужно назначить для него соответствующий стиль. Напоминаем, за рамку в HTML отвечает свойство "border". Для него необходимо указывать 3 параметра:
- Толщину рамку в пикселях
- Форму границы (сплошная, точечная и тд.)
- Цвет рамки
Допустим, нам нужно оформить наш абзац красной сплошной рамкой, толщиной в 1 пиксель. Вот такой код мы должны прописать в атрибуте "style" для тега "p".
<p style="border: 1px solid red;">Привет. Этот текст оформлен красной рамкой</p>
Вы получите вот такой результат.
В нашем примере текст в данном абзаце будет оформлен красной рамкой
Как правильно указывать параметры:
- Толщина указывается числом с дополнением "px"
- Доступны следующие варианты оформления рамки: dotted (точечная), dashed (прерывистая линия), solid (сплошная), double (двойная). Дополнительные варианты оформления делают рамку для текста с визуальными эффектами.
- Цвет рамки можно указывать английским словом, соответствующим выбранному цвету, или же указывая код цвета (например, синий #0000FF)
Такие же свойства вы можете применить к тегам "div" и "span", заключив в них нужный текст.
Использование класса
В том случае, если в вашем документе планируется много блоков текста, которые нужно оформить рамкой, нецелесообразно несколько раз указывать одни и те же стили для каждого из блоков. Это занимает лишнее время, и загромождает HTML код.
Проще всего использовать средства CSS. Достаточно один раз создать стиль оформления, и затем назначать его для нужного блока.
Давайте для примера создадим стиль, который будет оформлять текст синей толстой рамкой, выполненной в виде точек. Вот такой код мы должны прописать в файле стилей:
.class-primer { border: 3px dotted blue; }
После этого, для любого подходящего тега нам нужно назначить данный стиль оформления. Делается это с помощью атрибута "class":
<p class="class-primer">Пример оформления текста с помощью средств CSS</p>
Вот такой результат мы получим в итоге.
Пример оформления текста с помощью средств CSS
Скажите, а как вставить небольшую картинку слева, текст справа и в рамку всё это дело? Спасибо.
Можно сделать новый блок div для всего этого дела. Для него назначаем рамку, с помощью CSS свойств. В него вставляем текст и картинку. Картинке назначаем свойство Float, для обтекания ее текстом с выбранной стороны.