Здравствуйте уважаемые начинающие веб мастера.
The frame is one of the most popular options for content design, and in this article I will show everything you need to know about the frame html.
A frame can be created for any html element. <p>, <h1>, <img>, <span>, <blockquote>, <marquee> and so on.
To create a border, use the style property border which has three values: Thickness, Type, Color
Frame thickness and size
For example, take the <p> and create a simple 3px border for it.
<p style="border:3px #00B344 solid;">text text text text</p>Result
text text text text
As you can see — the frame took up all the space that the tag takes.
Thus, a frame created for block elements, such as <p> <div> and so on, it is necessary to limit the width, which can be set in any available in web unit sizes.
<p style="border:3px #00B344 solid; width:175px;">
text text text text</p>text text text text
If you set a smaller width, then the words in the frame will be placed in several lines, that is, the height will automatically increase.
<p style="border:3px #00B344 solid; width:100px;">
text text text text</p>text text text text
Frame for inline or inline elements such as <img>, <span>, <hr> and so on, is placed directly around the element.
Бла-бла-бла Бла-бла-бла <span style="border:3px #00B344 solid;">text text text text</span> Бла-бла-бла Бла-бла-бла Yada-yada-yada text text text text Yada-yada-yada
Frame type
You can change the type of frame, for this purpose its name changes in value.
The names:
solid
<p style="border:3px #00B344 solid; width:175px;">
text text text text</p>text text text text
dotted
<p style="border:3px #00B344 dotted; width:175px;">
text text text text</p>text text text text
dashed
<p style="border:3px #00B344 dashed; width:175px;">
text text text text</p>text text text text
double
<p style="border:3px #00B344 double; width:175px;">
text text text text</p>text text text text
ridge
<p style="border:5px #00B344 ridge; width:175px;">
text text text text</p>text text text text
not full
To create an incomplete frame in code instead of a property border properties are entered border-top, border-right, border-bottom, border-left, individually or in various combinations, depending on which border you need.
<p style="border-left:3px #00B344 double; border-bottom:3px #00B344 double; width: 200px; padding: 5px 0 5px 15px; margin:50px 0 50px 150px;" > text text text text</p>text text text text
This option allows you to make borders of different types, colors and thicknesses.
Alignment and indents
The text inside the frame can be aligned to the center or right edge by adding a property to the code text-align, which takes values
left — left alignment (default)
center — center alignment
right — right alignment
<p style="border:3px #00B344 ridge; width: 175px; text-align:center;" > text text text text</p>text text text text
Text indents.
To do this, the padding property is entered into the frame code, which accepts 4 numeric values:
the first digit is indent from the top;
the second digit is indent from the right;
the third digit is indent from the bottom;
the fourth digit is indent from the left.
Indents are set in any size units available in the web..
If you specify one value in the padding property, the indents will be the same on all sides.
If you specify two values, the first digit will indicate the indents at the top and bottom, and the second — on the right and left.
<p style="border:3px #00B344 solid; width: 200px; padding: 5px 0 5px 15px;" > text text text text</p>text text text text
Indent from elements outside the frame.
To do this, the margin property is added to the frame code, which, like the padding property, can take 4 numeric values.
Indent left, top and bottom
<p style="border:3px #00B344 ridge; width: 200px; padding: 5px 0 5px 15px; margin:50px 0 50px 150px;" > text text text text</p>text text text text
Frame design
Background color.
The background property is entered into the frame code, the value of which specifies the color
<p style="background: #F4FC03; border:3px #00B344 ridge; width: 200px; padding: 10px 0 10px 15px; margin:20px;" > text text text text</p>text text text text
You can insert a picture with the text in the frame.
<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>text text text text</p>
text text text text
And if you set a large width, you get a baguette.
text text text text
In the design of the frame, you can use the style properties border-radius — rounding and box-shadow
<p style="border:2px solid #555; border-radius:5px; width: 200px; text-align:center; margin:20px; padding:20px;" > text text text text</p>text text text text
<p style="border:2px solid #555; box-shadow:3px 3px 5px #999; width: 200px; text-align:center; margin:20px; padding:20px;" > text text text text</p>text text text text
