Line css3. Horizontal lines. I Thin, thick, double, dotted line using keyboard

From the author: I salute you. The need to present several blocks on a web page in one line is a very common task that layout designers face. It occurs during the layout of almost every template, so in any case, we all need to know and apply the basic ways to change the behavior of blocks.

Before we look at the most common techniques, I would like to remember a little theory. Web page elements are divided into block and inline elements. And the difference between them is very simple - lowercase ones can be placed on one line, but block ones cannot. Of course, the differences don't end there, but this is the main difference. Blocks can already have padding at the top and bottom (lowercase ones do not), and more properties can be applied to them.

Basic ways to line up blocks in CSS

We won’t complicate anything, there are 3 main ways:

Convert blocks to inline elements. In this case, block properties are lost, so this option is almost never used

Make the necessary elements block-line. This is a special type in which the element retains its properties, but at the same time allows other blocks to be located nearby.

Make elements float using the float property.

Let's focus on these options. We will not consider Flexbox, table display and other aspects. 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 are simply visible.

h3( background: #EEDDCD; )

Here they are on the page:

They behave like blocks. Each one is located on its own line, there are indents between them. If you wish, you can also set any internal padding and do whatever you want.

Let's convert it to lines and immediately add indents. To do this, the h3 selector needs to add the following properties:

display: inline; padding: 30px;

There are 2 main problems that arise when using this technique. The first is the minimum indentation. It is formed due to the fact that in the code there is one space between the blocks, which forms this indentation. If this problem needs solving, there are 2 main options:

In html, place the code of the required blocks in one line without spaces

Enter negative margin right -4 pixels. That's how much one space takes.

The second problem is that if the elements have different heights, display problems may arise. All in all, best option- floating blocks. Instead of display: inline-block we write this:

Blocks in a line using the framework

I’ll say right away that if you are going to use any normal CSS framework (for example, Bootstrap), then everything is still much simpler. All the CSS code responsible for arranging the elements has already been written and all you have to do is set the correct classes. To do this, just learn the grid system, and you will be able to make multi-column responsive templates without much difficulty. At least it will be much easier than writing css from scratch.

Another challenge of writing code from scratch comes 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 should have 4 columns on large screens, 3 on medium screens, and mobile phones— 2. With the help of frameworks such as Bootstrap, or rather with the help of its grid, implementing something like this is a matter of just a few minutes.

Smoothly translating the topic to the Bootstrap framework, I will once again note that if you are faced with the task of laying out a complex adaptive template, then it is simply a sin not to use the grid. You don't even need to connect to do this. full version framework - you can customize it and stop there only what you really need.

You can learn how to work with the framework using . The theory is explained there, but most importantly, there is practice. You are making up 3 adaptive template and get great experience that will allow you to design websites to order or for yourself. And if you want to get acquainted with the advantages and capabilities of the framework for free, I suggest you look through our series of articles on Bootstrap, as well as on simple layout design. I wish you success in layout and website building in general.

When creating HTML pages design plays a significant role. Especially when we are talking about various symbols and decorative design: these little things help make the “language” of your page more accessible and clear, and also significantly change its perception and appearance generally. One of the most important elements for design is the horizontal line, and then we will learn in more detail how to work with it and how to make a horizontal line in html.

What is a horizontal line and what is it for?

A horizontal line in html is a page design element that performs a number of functions:

1. Decorative. Helps add attractiveness to the page.
2. Dividing. Promotes the effective separation of information of different meanings.
3. Highlighting or emphasizing. Draws the attention of page guests to the necessary and most important information.

It is the horizontal line that is considered the most in an accessible way to implement a range of functions. It is very simple to create, and from the outside it looks very advantageous. By simple changes to the html code you can adjust:

• length;
• width;
• color characteristics;
• alignment along one edge or the other.

It is worth noting that the horizontal line refers to block elements. This means that it occupies a new line on the page, and the text that follows it will go below.

Creating a Horizontal Line in HTML

You can set a line using a simple tag – hr in triangular brackets. It is short for “Horizontal Rule” and sets classic external parameters. It differs from many others in that it does not need a closing tag and is able to exist independently. Change external characteristics element using additional values ​​in the tag:

1. Length. If you do not want the length of the line to extend over the entire page, then you can set the desired size in pixels or percentages. This is done using the additional word “width” in the tag and the numerical length indicated after the “=” sign in quotation marks.

It looks like this. For example, if we need a length of 100 pixels, we set the following tag: hr width=”100″

1. Alignment. Alignment is possible to the left or right edges, and also to the center. This feature only applies if you have already specified width parameter, since a line that spans the entire page cannot be aligned. For alignment, we set an additional attribute in the “align” tag and add a direction to it: center – for central, left – for left and right – for right alignment.

The finished tag in this case will look like this. For example, if we need to set the center alignment for a horizontal line 150 pixels long, then the finished tag will look like this: hr align=”center” width=”150″.

Note that "align", the alignment indicator, is placed in 1st place, despite the fact that the attribute is dependent on the width indicator.

1. Width. You can also choose to specify the width, creating a bold or thin underline. This criterion does not depend on anything and can be used as an independent criterion without specifying length or alignment. For it, we use the size attribute in the tag and a numeric value equal to the desired width in pixels. The number is indicated in quotation marks after the size attribute and the “=” symbol.

Thus, if we need to create a line with a width of 15 pixels, we need to create the following tag: hr size=”15″.

1. Color. It is also specified as an independent indicator. To change it, use the color attribute in combination with the name of the color in the form of a code or English. The color is indicated in quotation marks after the “=” symbol.

Thus, the tag for a standard white line can be written in two ways: hr color=”#FFFFFF” or hr color=”white”

Black can be created using the code #000000.

1. Put away shadow. If you need an element that does not contain a shadow, then you should use the noshade attribute in the tag. It can be used alone or in combination with other elements. A tag for a standard line using it will look like this: hr noshade

Creating a Horizontal Line Using Video

And if you want to receive information in a more visual format, then refer to the following video, which describes in detail the possibilities of working with a horizontal line.

Having determined the required dimensions of the horizontal line, you can design the website pages in such a way that the information is structured and visually competent. This helps visitors more easily perceive the information presented and makes your site stand out from others.

Task

Make a horizontal line on the page.

Solution

Horizontal lines good to use for separating one block of text from another. Small text with horizontal lines at the top and bottom attracts more reader attention than regular text.

Using a tag

Default line

Example 1: Horizontal line

HTML5 CSS 2.1 IE Cr Op Sa Fx

Text string

Result this example shown in Fig. 1.

Rice. 1. Colored horizontal line

It would seem, why might four methods be needed? After all, almost every person uses one method to which he is accustomed. For example, I pressed Shift and the dash key several times, and so I got a horizontal line.

But what if this results in a dotted line, but you need a solid one?
- Most likely, the Shift key on the keyboard is faulty. Other methods will come to the rescue here.

3.
4.
5.

Perhaps the most common way to make a line in Word is to use a couple of keys on the keyboard.

I Thin, thick, double, dotted line using keyboard

Below is a picture of a keyboard with an English layout, but without a Russian layout, but this does not matter, because we are only interested in three keys: Shift, dash and Enter.

Rice. 1. Three keys on the keyboard: Shift, dash and Enter for a continuous horizontal line in Word

With these three keys you can draw a continuous horizontal line in Word: dotted or solid, thin or thick, long or short.

1) When you press the “-” (dash) key several times in Word editor we get a dotted line of any length.

To do thin a long line across the entire width of the page:

• We find the “dash” key on the keyboard (to the right of the “zero” key, in the green frame in Fig. 1).
• From a new (!) line in Word, press this key several times: -
• And then press the “Enter” () key. A few printed dashes will suddenly turn into a continuous horizontal thin line across the entire width of the page.

2) When you simultaneously press Shift and “-” (dash), NOT a dash is printed, but an underscore _________. This way you can make a continuous line of arbitrary length anywhere in the document.

Rice. 2. Thin and thick horizontal line in Word

Now let's print fat horizontal line across the entire width of the page:

• Again we find the same “dash” key, as well as the Shift key (on the left or on the right, as you like). Press Shift, hold and don't let go.
• And now, from a new (!) line, click on the dash several times (for example, 3-4 times) (while not releasing Shift): ___. Release Shift.
• Now press the Enter key. You will see a thick horizontal solid line.

Let's summarize some results in the form of a table:

(Click to enlarge) Lines in Word using the keyboard

­­­­­­­­­­­­­­­­­­­­­

II Line in Word using a table

A horizontal line can be obtained by using a table of one cell (1x1), in which only the top or bottom border is colored (will be visible), and the other three sides of the table have uncolored borders (they will be invisible).

Place the cursor in the place where the line should be. In the top menu of Word, click:

• Insert (1 in Fig. 3),
• Table (2 in Fig. 3),
• One cell (3 in Fig. 3).

Rice. 3. How to insert a 1x1 table (from one cell) in Word

The result will be a table of one large cell (1x1):

All that remains is to remove the borders from three sides in the 1x1 table. For this

• go to the “Home” tab (1 in Fig. 4),
• then next to “Font” we find “Paragraph” and borders (2 in Fig. 4),
• remove all borders by clicking “No border” (3 in Fig. 4),
• select “Upper border” or “Lower border” (4 in Fig. 4).

Rice. 4. How to remove border selection from a Word table (make borders invisible)

I show this clearly in the video (at the end of the article).

By the way, in Fig. 3 it is clear that there is an easier way. You can place the cursor at the beginning of the line in Word and click “Horizontal Line” (5 in Fig. 4):

III Line in Word using drawing

Insert (1 in Fig. 5) - Shapes (2 in Fig. 5) - this is another way to get a horizontal line in Word.

To keep the line strictly horizontal, hold down the Shift key and draw the line at the same time.

Rice. 5. How to draw a line in Word

IV Line in Word using the on-screen keyboard

To find the on-screen keyboard, enter the phrase “on-screen keyboard” in Search, more details for Windows 7, and for Windows 8.

For Windows 10, you can also find the on-screen keyboard by typing “on-screen keyboard” into the Search bar.

Rice. 6. On-screen keyboard

We will create a horizontal line in the same way as in the first option with regular keyboard. You will need three buttons on the on-screen keyboard: dash, Shift and Enter.

1 Dash and Enter

From a new line in Word, click on the dash (1 in Fig. 6) several times and press Enter. You will get a thin horizontal line.

2 Shift, dash and Enter

From a new line in Word, first click Shift (2 in Fig. 6), then Dash (1 in Fig. 6). You will get an underline. We will repeat this 2 more times, and then press Enter. As a result, we will see a thick horizontal line.

Basically, horizontal lines are used to decorate HTML pages of a website, giving them a more attractive look. But they can also visually differentiate information from adjacent sections, adding convenience to readers when studying it. Basically, draw horizontal lines where you need them, that's all.

How to draw a horizontal line?

There is a special tag for drawing horizontal lines in HTML

. But here I am

---

cannot have content because it simply does not have a closing tag, meaning it is empty.

Example of drawing horizontal lines in HTML

---

Paragraph.

Paragraph.

---

Paragraph.

Result in browser

Paragraph.

Paragraph.

Paragraph.

As you can see, the lines turn out to be very thin, unattractive and drawn to the full available width, so now we will learn how to change them to make them look more attractive.

How to change the color, thickness and width of horizontal lines?

In older versions of HTML, the tag

---

there were special attributes with which you could change the color, thickness and width of horizontal lines. These are color , size and width , respectively. But in new versions they were abandoned in favor of Cascading Style Sheets (CSS), so, as you may have guessed, we will again use our favorite style attribute. General syntax such:

---

style="background:color" >- the color of the line (or rather its background).

---

style="height:size" >- line thickness.

---

style="width:size" >- line width.

---

style= "background:color; height:size; width:size"> - or you can specify all the parameters at once, just don’t forget about the semicolon (;).

A color can be specified by its name in English or by the color's HEX code preceded by a hash (#). Well, you already know about this from the lesson on change text and background color.

But we’ll talk more about resizing. As you remember from lesson on changing fonts, there are about ten units of measurement in CSS, but line width can only be specified in pixels (px) and percentages (%), and thickness generally only in pixels. If you put other units of measurement, it 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 already said, only line width can be specified as a percentage. Percentage sizes always depend and are calculated based on the size of the parent container element within which the tag is located

---

. In this case, the dimensions of the parent are taken as 100%. For example, if we place the tag

---

style="width:50%" > inside element

, then no matter how we change the browser window size or 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.

---

---

---

---

Result in browser

Changing the position of horizontal lines

When you change the width of the horizontal line, you can clearly see 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 aligned to the center (default value).
• left- presses against the left edge.
• right- presses to the right edge.

Example of horizontal line alignment.

---

---

---

Result in browser

How to remove the frame around a line?

Look at the very first example of this lesson. What color do you think these lines are? But that’s not true. They are transparent, like any page elements that do not have a specified background color! Don't believe me? Then look at the example where we changed the color of the lines. For the very first one, we didn’t set the color, but only increased its size, and isn’t this line transparent? That's it!

Now I'll explain. 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 spoils the appearance, we will apply the style attribute again. And it is written like this:

---

Homework.

1. Create article, section, and subsection headings. Place them all in the center.
2. Set the font to Arial for the entire page and Courier for headings.
3. Let the font size on the entire page be 85% of the default browser size. And headings have 145%, 125% and 110%, respectively, of the font size on the page.
4. Write a paragraph under the first heading, a long quote under the second, and a poem under the third. And let the poem be located in the center of the page.
5. Bold three words in the quote.
6. Below the article title, draw a three-pixel red horizontal line across the full width of the page.
7. At the top and bottom of the poem, draw lines one pixel thick in black. Let the width of the top line be approximately equal to the width of the verse, and the bottom - half as much.
8. Remove unnecessary frames from the lines.