HTML Frames

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

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

This entry was posted in Html basics. Bookmark the permalink.
А так же:

Leave a Reply

Your email address will not be published. Required fields are marked *