Рамки html

Здравствуйте уважаемые начинающие веб мастера.

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

Более продвинутым советую сразу перейти в Рамки средствами CSS.

При помощи CSS их можно сделать гораздо красивее. Ну, а с начинающими продолжим.

Рамку можно создать для любого html элемента, будь то <p>, <h1>, <img>, <span>, <blockquote>, <marquee> и так далее.

Разница между рамками блочных и встраиваемых элементов состоит в том, что у блочных рамка образуется на всю ширину блока, и её нужно ограничивать, задавая ширину.

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

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

Применять их рекомендуется только для отладки внешнего вида,поэтому, после отладки, все значения атрибута style, лучше будет перенести в файл style.css шаблона.

Хотя встроенные стили прекрасно работают и проходят валидацию.

Так как руководство это практическое, то перейдём непосредственно к примерам. Для примера возьмём тег <p> и создадим ему простую рамку.

<p style="border:3px #00B344  solid; width:160px;">
 текст текст текст текст</p>


можно изменить внешний вид рамки, для этого меняется значение «solid»

рамки бывают следующих видов:

dotted — точечная

dashed — пунктирная

solid — сплошная 36

double — двойная

ridge —  рельефная

ширина рамки меняется изменением цифр в свойстве «width», а текст внутри можно подравнять добавив свойство «padding»

<p style="border:3px #00B344  ridge; width: 160px;
 padding: 5px 0 5px 15px;" > текст текст текст текст</p>

можно задать отступ от предметов находящихся снаружи рамки, для этого добавим свойство «margin»

<p style="border:3px #00B344  ridge; width: 160px; padding: 5px 0 5px 15px;
 margin:20px 0 0 20px;" > текст текст текст текст</p>

где первая цифра — отступ сверху, вторая — отступ справа, третья — отступ снизу, четвёртая — отступ слева.

можно внутри рамки сделать фоновый цвет

<p style="background-color: #F4FC03; border:3px #00B344  ridge; width: 140px; 
padding: 5px 0 5px 15px;  margin:20px 0 0 20px;" > текст текст текст текст</p>

Можно вместе с текстом  в рамку вставить картинку.

<p style="background-color: #F4FC03; border:3px #00B344 ridge;
 width: 240px; height:100px; padding: 5px 0 5px 15px; margin:20px 0 0 20px;">
<img src="images/i6.jpg"><br>Текст текст текст текст текст</p>

РамкиТекст текст текст

 
А если задать ширину рамки ridge пикселей в 15-20, то получится багет.

РамкиТекст текст текст

 

О способах создания рамок средствами CSS, можно прочитать в статьях Как сделать тень для блока, да-да, используя тени, можно создавать очень красивые рамки, и Рамки CSS

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Короткий отдых
Перекур

\
Вовочка папе: — Папа, а тебя била когда нибудь твоя мама ?
— Нет, только твоя…

Прямая линия HTML < < < В раздел > > > Кнопка HTML.

Запись опубликована в рубрике HTML основы. Добавьте в закладки постоянную ссылку.

19 комментариев на «Рамки html»

  1. stariс говорит:

    Вот тут и код и описание https://starper55plys.ru/css/position-absolute/

  2. Николай говорит:

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

  3. Валерий говорит:

    Хорошая статья, спасибо! Долго искал и вот нашел наконец-то, сделал рамку за 2 минуты!

  4. stariс говорит:

    Привет! Про рамочку — эт к тому, кто эту мобильную версию делал. А так, если перебирать все возможные причины, так их больше чем блох на барбоске.

  5. Я говорит:

    Здравствуйте! В мобильной версии сайта рамочка с текстом вообще не отображается. Как быть? Спасибо за статью.

  6. Юля говорит:

    Спасибо большое за подробную полезную статью! Супер!

  7. stariс говорит:

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

  8. Оксана говорит:

    Все понятно и работает. Но хочется закруглить углы рамки? Это возможно сделать?

  9. stariс говорит:

    А что вы не поняли и что вам сделать

  10. Екатерина говорит:

    Я все равно не поняла как мне сделать

  11. stariс говорит:

    Этот блок показан в статье Как сделать блок с полосой прокрутки. Если у Вас сайт на CMS WordPres, или типа того, в общем если Вы вводите текст в текстовом редакторе CMS, то можно использовать атрибут style, прописать стили в него, и вставить код прямо в редакторе. Только цвет в border поставьте такой какой Вам нужен.
    <p style=»border: 2px solid #ffff00; padding: 10px; width: 400px; height:150px; overflow: auto;»>Текст</p>

  12. Александр говорит:

    Здравствуйте, а не подскажите, как вот такую рамку сделать. Чтобы там текст внутри был. Спасибо.

  13. stariс говорит:

    Пожалуйста. Заходите ещё.

  14. Баяс говорит:

    Хотелось взять текст содержания в рамочку. Полдня искал в сети внятное объяснение по этой проблеме, нашел только у вас. По вашим подсказкам все оформил за 5 минут. Спасибо большое.

  15. starik говорит:

    Здравствуйте. Для увеличения размера текста, в атрибут style вводится свойство font-size: 16px;. Увеличивая или уменьшая базовый размер 16px, Вы измените размер шрифта.
    Пример:
    <p style=" font-size:16px; background-color: #F4FC03; border:3px #00B344 ridge; width: 140px; padding: 5px 0 5px 15px; margin:20px 0 0 20px;"> текст текст текст текст<p>
    Вообще то, все свойства вписанные в атрибут style — это уже свойства CSS. Так что Вы уже начали изучать эту технологию. Продолжайте, будет ещё интереснее.

  16. Сергей говорит:

    Добрый вечер
    учусь по вашим урокам, прочитал всю теорию «Сайт на чистом HTML» теперь практикую полученные знания. И вот у меня вопрос: как увеличить размер текста в рамке с фоном, например в коде что у вас описан как пример
    текст текст текст текст

  17. starik говорит:

    Спасибо. И Вам того же. А про скважины меня интересует абсолютно всё. Как говориться: «от а до я».

  18. Александр говорит:

    Мне понравилась Ваша речь. В СССР занимался, в частности, численным моделированием, 17 лет бурю скважины на воду в Подмосковье. Последний год работы мало, и решил помочь товарищам искать заказчиков в Сети. Барахтаюсь месяц. Сделаю — покажу. Расплачусь. Здоровья!

  19. starik говорит:

    I wish you success.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *