entranceHow to make a beautiful font in HTML: sizes, colors, HTML font tags. How to write down in HTML text under the pictures why rgba is used
In HTML font size plays an important role. It allows you to draw the attention of the user on important informationposted on the site page. Although not only the size of the letters is important, but also their color, thickness and even a family.
Tags and attributes with robot with HTML fonts
The language of the hypertext has a large set of funds to work with fonts. After all, the formatting of the text is the main task of HTML.
The reason for creating the HTML language has become the problem of displaying text formatting rules browsers.
Consider tags that are used to work with fonts in HTML and their attributes. The main one is the tag . Using the values \u200b\u200bof its attributes, you can set several font characteristics:
- color - sets the color of the text;
- size - font size in conditional units.
The positive attribute value is supported from 1 to 7.
- fACE - Used to install the text font families to be used inside the tag . A few values \u200b\u200blisted through the comma are supported immediately.
Only the text that is located between the part of the Font pair tag is formatted. The remaining text is displayed by standard font installed by default.
Also in HTML there are a number of pair tags that specify only one formatting rule. These include:
- - Specifies bold font to HTML. Tag by action similar to the previous one;
- - the size is greater than the default set;
- - smaller font size;
- - Inclined text (italics). A similar tag ;
- - text with underscore;
- stressed;- - display text only in lower case;
- - in the upper case.
Normal text
Thumbnail
Thumbnail
More ordinary
Less usual
Italics
Italics
With emphasis
Crushed
The features of the style attribute
In addition to the tags described, there are still several ways to change the font in HTML. One of them is the use of the Style universal attribute. Using the values \u200b\u200bof its properties, you can set the font display style:
1) Font-Family - the property sets the font family. You can enumerate several values.
Changing the font in HTML to the next value will occur if the previous family is not installed in operating system User.
Syntax of writing:
font-Family: Font name [, font name [, ...]]
2) Font-Size - the size is set from 1 to 7. This is one of the main ways to how in HTML you can increase the font.
Syntax of writing:
font-Size: Absolute Size | Relative size | Value | interest | inherit.
Font size can also be set:
- In pixels;
- In absolute value ( xX-SMALL, X-Small, Small, Medium, Large);
- In percents;
- Points (PT).
Font-Size: 7
Font-Size: 24px
Font-Size: X-LARGE
Font-Size: 200%
Font-Size: 24pt
3) Font-Style - Sets the style of writing the font. Syntax:
font-Style: Normal | Italic | Oblique | inherit.
Values:
- normal -Normal writing;
- italic - italics;
- oblique - font with a slope to the right;
- inherit - inherits the writing of the parent element.
An example of how to change the font in HTML using this property:
font-style: inherit
font-style: italic
font-Style: Normal
font-style: oblique
4) Font-Variant - translates all capital letters to the title. Syntax:
font-Variant: Normal | Small Caps | inherit.
An example of how to change the font in HTML by this property:
font-Variant: Inherit
font-Variant: Normal
font-Variant: Small-Caps
5) Font-Weight - allows you to set the thickness of the writing of the text (saturation). Syntax:
font-Weight: Bold | Bolder | Lighter | Normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Values:
- bold - installs a bold HTML font;
- bolder - greasy relative to Normal;
- lighter is a saturated relative to Normal;
- normal - normal writing;
- 100-900 - The font thickness is set in the numerical equivalent.
font-Weight: Bold
font-Weight: Bolder
font-Weight: Lighter
font-Weight: Normal
font-weight: 900
font-weight: 100
Font property and HTML font color
Font is another container property. Inside itself, it combined the values \u200b\u200bof several properties designed to change fonts. Syntax font:
font: Font-Size Font-Family | inherit.
Also, the fonts used by the system in inscriptions on various controls can be specified as a value.
- cAPTION - for buttons;
- icon - for icons;
- mENU - menu;
- message-Box - dialog boxes;
- small-Caption - for small controls;
- status-Bar - status string font.
font: icon
font: Caption.
font: Menu.
font: Message-Box
small-Caption.
font: Status-Bar
font: Italic 50px Bold "Times New Roman", Times, Serif
In order to set the color of the font in HTML, you can use the Color property. It allows you to set color as using keywordsand RGB format. As well as in the form of hexadecimal code.
HTML tags defining text alignment, indent
Width text used in printing house
In the example below, it is shown how to align text in width pages:
| Align \u003d "Left" | Align \u003d "Right" |
|---|---|
Every day the number of employees employed in the service sector and dissemination of information is growing. If the symbols of past centuries were a farm and a factory, then the symbol of the current XXI century is an office equipped with computers that have access to the information flow. |
|
| Align \u003d "Justify" | ALIGN \u003d "CENTER" |
Every day the number of employees employed in the service sector and dissemination of information is growing. If the symbols of past centuries were a farm and a factory, then the symbol of the current XXI century is an office equipped with computers that have access to the information flow. |
Every day the number of employees employed in the service sector and dissemination of information is growing. If the symbols of past centuries were a farm and a factory, then the symbol of the current XXI century is an office equipped with computers that have access to the information flow. |
Justify value provides uniform leveling text on the right and left, i.e by width. This method is widely used in print.
Leveling text in HTML in the center and width
Leveling text in HTML centered, text on the right:
Result:
Attributes and values
- align \u003d "left" - determines leveling text left (default).
- align \u003d "CENTER" - levels text in the center.
- align \u003d "Right" - lines text on the right.
Alignment | HTML penent text
HTML text and his retreat on the left of the page
Produce indent text left in two ways:
Result:
View in a new window.
It happens that you need to withdraw the picture and attribute the name (short phrase). For this there are parameters:
Align \u003d "Top" - Lines the text at the top of the image.
Align \u003d "Bottom" - Lines text on the bottom.
Align \u003d "Middle" - aligns text in the center.
Below is a code that demonstrates the operation above the described parameters.
Beautiful bee
Very pretty bee
Nothing too.
Now let's see how you need to display a picture with a large number of text.
There are two parameters:
Align \u003d "Left" - the image "streams the text" on the left.
Align \u003d "Right" - the image "streams the text" to the right.
For clarity, write this code:
<hTML\u003e <head\u003e <title\u003eHTML image on the left - text on the righttitle\u003e head\u003e <body\u003e <img src \u003d "images / htmlsun.jpg" align \u003d. "LEFT" width \u003d. "140" Height \u003d. "124" /> <big\u003eThe sunbig\u003e <br\u003e <p\u003e \u003e There may be text containing information about the sun.p\u003e <br\u003e<br\u003e <img src \u003d "images / htmlmoon.jpg" align \u003d. "RIGHT" width \u003d. "140" Height \u003d. "124" /> <big\u003eMoonbig\u003e <br\u003e <p\u003e Here you can insert a scientific article about the moon.p\u003e body\u003e hTML\u003e
The sun The form of the Sun is close to the perfect sphere with a diameter of 1392000 km. It accommodates the orbit of the moon, and there is still a lot of space. In fact, more than a million such planets as the earth would fit freely inside the sun. In addition, if you were able to drive a car on its surface at a speed of 88 km / h, you would have left 5 and a half years to drive around the sun once (without stopping). But the size of the sun is not constant. Modern studies show that the diameter of the Sun decreases approximately 1 meter per hour. If this phenomenon was held in the past century, then the sun, which we see now 800 km less than what our ancestors saw. Perhaps this solar compression is part of a long-term oscillation that helps stabilize a huge emission of energy.
Moon
This is the only natural satellite of the Earth. The mass of the moon is 0.0123 masses of the Earth (approximately 1/81) or 7.6.1022 kg. The diameter of the moon is a little more than a quarter of the earth (0.273) or 3 476 km. The moon illuminates the land of 500,000 times weaker than the sun). There are no atmospheres familiar to us on the moon, there are no rivers and lakes, vegetation and living organisms. Gravity strength on the moon is six times less than on Earth. Day and night with temperature drops up to 300 degrees last two weeks.
But As you see may be so that the text and the picture is too close to each other. To correct it, you just need to set some of the desired size of the frame thickness and the color, like the rear background.
<hTML\u003e <head\u003e <title\u003eImage output by HTML Page title\u003e head\u003e <body\u003e <img src \u003d "images // HTMLECLIPSE.JPG" alt \u003d align \u003d "LEFT" width \u003d. "160" Height \u003d. "130" STYLE \u003d "BORDER: 8PX SOLID #FFFFFFF;"/> <big\u003ebig\u003e <br\u003e <p\u003e An article about the sunny eclipse.p\u003e body\u003e hTML\u003e
Astronomical phenomenon that lies in the fact that the moon closes (eclipses) completely or partially the Sun from the observer on Earth. Solar eclipse is possible only in the new moon, when the side of the moon facing the ground is not covered, and the moon itself is not visible. Eclipses are possible only if the new moon occurs near one of the two moon nodes (the intersection points of the visible orbits of the Moon and the Sun), not more than about 12 degrees from one of them.
In general, the question itself is easy. There is nothing cunning to arrange one block, on top of another. But still, there are several moments worthy of discussion in this matter. I think there will be people who will be interested.
The idea is to simply apply some text to the image. The text is presented in the form of blocks of variable length, it is assumed that it will be located on the left side, with a smooth fill around the text. For example, as in this image:
Document scheme
HTML markup
A MOVIE IN THE PARK:
Kung Fu Panda.
Of course, it would be easier to use the Div element to output the image as a background pattern, but in this case I assume that the image is the content of the document, and, therefore, it belongs to HTML. The DIV element will be used as a container for the absolute positioning of the text in it.
CSS.
.image (position: relative; width: 100%; / * for IE 6 * /) H2 (Position: absolute; top: 200px; left: 0; width: 100%;)Thus, we placed the text directly over the image. Next Our task make background for text. Since element
It is a block element, we cannot use it for these purposes. We use inline element . Wrap in it text inside the title.
A MOVIE IN THE PARK:
Kung Fu Panda.
We will use this span for text design and background:
H2 SPAN (Color: White; Font: Bold 24px / 45px Helvetica, Sans-Serif; Letter-Spaction: -1PX; Background: RGB (0, 0, 0); / * In case the next line does not work * / backgroundGround : RGBA (0, 0, 0, 0.7); padding: 10px;)
Problems
As can be seen from the figure, at the end of the line, the text block ends immediately after the last symbol in the string, and starts immediately at the left edge on next line. Property Padding for Span-A, in this case, will not help us.
To solve the problem, you need to use additional spans on both sides of the tag
In this case, we can easily use the Padding.
A MOVIE IN THE PARK:
Kung Fu Panda.
This new SPAN-AM will task the Padding property:
H2 Span.Spacer (Padding: 0 5px;)
What is the semantics?
On the this stage The design is completed, but one problem remained. Namely, great amount Additional HTML elements added for design only. I mean span-s. To solve this problem, we use jQuery. To do this, delete all spans in the markup, and dynamically add them:
A MOVIE IN THE PARK:
Kung Fu Panda.
$ (Function () ($ ("H2"). Wrapinner (" "); $ (" H2 BR "). Before (" ") .After (" ");
});
Kung Fu Panda.
In this case, we can easily use the Padding.
Kung Fu Panda.
Kung Fu Panda.