Как сделать прямоугольник с текстом в css?
2 ответа
от
patrick.little ,
2 года назад
@stephania Сделать прямоугольник с текстом в CSS можно так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> .rectangle { background-color: darkred; width: 100px; height: 50px; } </style> </head> <body> <div class="rectangle">Прямоугольник с текстом</div> </body> </html> |
от
otha_marks ,
10 месяцев назад
@stephania
Есть несколько способов, но, например, можно использовать свойства CSS для создания блочного элемента и добавления текста внутрь этого элемента.
Пример кода:
1 2 3 4 5 6 7 |
.rectangle { width: 200px; height: 100px; background-color: #eee; border: 1px solid #ccc; padding: 10px; } |
HTML:
1 2 3 |
Этот текст находится внутри прямоугольника |
Здесь мы создали блочный элемент с классом "rectangle", задали ему ширину, высоту и цвет фона, добавили границу и отступы вокруг текста. Чтобы добавить текст, мы просто поместили его внутрь элемента "rectangle" как обычный текст.
15