Task
Make a horizontal line on the page.
Solution
Horizontal lines are good for separating one block of text from another. Small text with horizontal lines at the top and bottom draws more attention to the reader than ordinary text.
Using the tag
you can draw a horizontal line, the appearance of which depends on the attributes used, as well as the browser. The tag refers to block elements, so the line always starts with new line, and after it all elements are displayed on next line... Thanks to the many attributes of the tag
the line created through this tag is easy to manipulate. Combined with the power of styles, adding a line to your document becomes a breeze.
Default line
displayed gray and with the effect of volume. This type of line does not always suit the design of the site, so the desire of developers to change the color and other parameters of the line through styles is understandable. However, browsers are ambiguous about this issue, which is why you will have to use several style properties at once. In particular, older versions of the browser Internet Explorer for the line color, use the color property, and other browsers use the background-color property. But that's not all, in this case, be sure to specify a line thickness (height property) other than zero and remove the border around the line by setting the border property to none. Putting all the properties together for the hr selector, we get a universal solution for popular browsers(example 1).
Example 1. Horizontal line
HTML5 CSS 2.1 IE Cr Op Sa Fx
Text string
The result of this example is shown in Fig. 1.
Rice. 1. Colored horizontal line
From the author: I greet you. The need to present several blocks on a web page in one line is a very frequent task that arises for layout designers. It occurs during the layout of almost every template, so in any case, we all need to know and apply the basic methods of changing the behavior of blocks.
Before we look at the most common tricks, I would like to recall a little theory. Web page elements are divided into block and inline. And the difference between them is very simple - lowercase ones can be located on one line, but block ones cannot. Of course, the differences do not end there, but this is the main difference. Already, blocks can have top and bottom indents (lowercase ones do not), and more properties can be applied to them.
The main ways to line up blocks in a row in css
We will not complicate anything, there are 3 main ways:
Convert blocks to inline elements. At the same time, block properties are lost, so this option is almost never used.
Make the desired elements block-inline. This is a special type in which the element retains its properties, but at the same time allows other blocks to be positioned side by side.
Float elements using the float property.
Let us dwell on these options. Flexbox, tabular display and other points will not be considered. So, let's say we have 3 subheadings.
Heading 1
Heading 2
Heading 3
Naturally, all css properties need to be written in separate file(style.css), which needs to be connected to the html document. In this file I will write a minimal style so that our subheadings can be easily seen.
h3 (background: #EEDDCD;)
h3 ( background: #EEDDCD; |
Here they are on the page:
There they behave like blocks. Each one is located on its own line, there are indents between them. If you want, you can also set any internal indents you want and in general do whatever you want.
Convert to lines and immediately add padding. To do this, add the following properties to the h3 selector:
display: inline; padding: 30px;
There are 2 main problems with this technique. The first is the minimum padding. It is formed due to the fact that there is one space between the blocks in the code, which forms this indentation. If this problem needs a solution, there are 2 main options:
In html, arrange the code of the necessary blocks in one line without spaces
Put down negative outer padding on the right -4 pixels. That is how much one space takes.
The second problem is that display problems can occur with different heights of elements. In general, floating blocks are the best option. Instead of display: inline-block, we write this:
Blocks in line using a framework
I must say right away that if you are going to use any normal css framework (for example, Bootstrap), then it is still much easier there. All the css-code responsible for the arrangement of the elements has already been written and you will only have to set the correct classes. All you need to do is learn the grid system and you can create responsive multi-column templates without too much difficulty. At least it will be much easier than writing css from scratch.
Another challenge of writing code from scratch comes up just when you need responsive design. Of course, you can implement it yourself by owning media queries, but it will be much more difficult if you have a complex template.
For example, when you have large screens there should be 4 columns, on the middle - 3, and on mobile phones- 2. With the help of such frameworks as Bootstrap, or rather with the help of its grid, it takes just a few minutes to implement such a thing.
Smoothly translating the topic into Bootstrap framework, once again I note that if you are faced with the task of making up a complex adaptive template, then it is simply a sin not to use the grid. To do this, you don't even need to connect full version framework - you can customize it and stop there only what you really need.
You can learn how to work with the framework with. It also explains the theory, but the most important thing is that there is practice. You are imposing 3 responsive template and get an excellent experience that will allow you to make up websites to order or for yourself. And if you want to take a look at the benefits and features of the framework for free, I suggest you browse our series of articles on Bootstrap and simple layout. I wish you success in layout and site building in general.
Hello everyone! Today I will tell you how to make a horizontal line using html.
In fact, the need to make a horizontal line arises quite often, for example, when you need to separate one part of the text from another.
Horizontal and vertical lines with css
This can be done with using css... To do this, I enclose the necessary section of text in a block using the div tag, and then in the style.css file or directly in the html code, we write properties for this block for the top or bottom border using border-top and border-bottom. Here's an example:
In this case, I set the styling with css directly from the html code, and made the top border a solid, and the bottom dotted line.
This is how it will look on the page:
Horizontal line using css.
This method has its advantages:
- A wide range of settings that allow you to set almost any view for the line;
- You can create both horizontal and vertical lines... In order to make vertical lines, you need to change border-top to border-left, and border-bottom to border-right.
The disadvantages include the relative cumbersomeness of the code.
However, as it turned out, you can also insert a horizontal line into the text using html. At the same time, it is not even necessary to go into css. To do this, use the tag
.
Horizontal line using html tag
The first feature of this tag is that it does not have a matching end tag. It can be used anywhere in the html code between tags
and.
This tag has the following attributes:
- Width- determines the length of our horizontal line in pixels or percent;
- Color- defines the color of the line;
- Align- sets the alignment of the line to the right - right, left - left, center - center;
- Size- line width in pixels.
Here html example- code.
Basically, horizontal lines are used to decorate the HTML pages of the site, giving them a more attractive look. But they can also visually delimit the information of neighboring sections, adding convenience to readers when studying it. In general, draw horizontal lines where you need to, that's all.
How do I draw a horizontal line?
There is a special tag for drawing horizontal lines in HTML
... Moreover, he is block tag, that is, it creates line breaks before and after itself, so the line is always obtained on a separate line. Accordingly, it can only be specified inside tags that can contain block elements, for example or
... But myself
cannot have content, since it simply does not have an end tag, that is, it is empty.An example of drawing horizontal lines in HTML
Draw horizontal lines
Paragraph.
Paragraph.
Paragraph.
Result in the browser
Paragraph.
Paragraph.
Paragraph.
As you can see, the lines are very thin, nondescript and drawn to the full available width, so now we will learn how to change them to make them look more attractive.
How do I change the color, thickness and width of horizontal lines?
In older versions of HTML, the tag
there were special attributes with which it was possible to change the color, thickness and width of horizontal lines. These are color, size and width, respectively. But in newer versions they have been ditched in favor of Cascading Style Sheets (CSS), so, you guessed it, we'll be using our favorite style attribute again. The general syntax is:
style = "background: color">- line color (or rather its background).
style = "height: size">- line thickness.
style = "width: size">- line width.
style = "background: color; height: size; width: size"> - but you can specify all the parameters at once, just do not forget about the semicolon (;).A color can be specified by its name in English or by the HEX-code of the color, preceded by a hash (#). Well, you already know about this from the lesson on changing the color of the text and background.
But we will talk about resizing in more detail. Do you remember from tutorial on changing fonts, there are about ten units in CSS, but line width can be specified only in pixels (px) and percentages (%), and thickness generally only in pixels. If you supply other units, then this will not be an error, but browsers will simply ignore them.
If you specify dimensions in pixels, then the thickness and width of the line will depend on the resolution of the monitor on which your site is viewed (the higher the screen resolution, the thinner and narrower the line).
As I said, only the line width can be specified as a percentage. Percentage sizes always depend on and are calculated based on the size of the parent container element, inside which the tag is located
... In this case, the size of the parent is taken as 100%. For example, if we place the tag
style = "width: 50%"> inside element, then no matter how we resize the browser window or the monitor resolution - the line width will always be half the width of the block.An example of changing the color, thickness and width of horizontal lines.
Change the color, thickness and width of the horizontal lines.
Result in the browser
Changing the position of horizontal lines
When you change the width of a horizontal line, it becomes clearly visible that browsers always place it in the center. If you want to change its position, then just use inside
align attribute with the following values:
- center- the line is centered (default value).
- left- pressed against the left edge.
- right- pressed against the right edge.
An example of aligning horizontal lines.
Change the position of the horizontal lines.
Result in the browser
How do I remove the border around the line?
Take a look at the very first example of this tutorial. What color do you think these lines have? And here it is wrong. They are transparent, like any page elements that have not been specified. background color! Don't believe me? Then take a look at an example where we changed the color of the lines. For the very first one, we did not set the color, but only increased its size and isn't this line transparent? So that!
I’ll explain now. By default, browsers draw frames around lines, which create a three-dimensional effect. So, when we do not increase the thickness of the horizontal lines, browsers show us only these frames, since the thickness of the line itself is 0px.
To remove the border around the line, which often only spoils appearance, we will reapply the style attribute. And it is written like this:
Homework.
- Create article, section and subsection headings. Center them all.
- Set the entire page to Arial and Courier for headers.
- Let the font size for the entire page be 85% of the default browser size. And titles have 145%, 125% and 110%, respectively, of the font size on the page.
- Write a paragraph under the first heading, a long quote under the second, and a poem under the third. And let the poem be centered on the page.
- Highlight in bold three words in a quote.
- Under the heading of the article, draw a three-pixel red horizontal line across the full width of the page.
- At the top and bottom of the poem, draw one pixel black lines. Let the width of the top line be approximately equal to the width of the verse, and the bottom line half as much.
- Remove unnecessary frames from the lines.
