Description
Specifies the typeface - regular, italic, or italic. When text is set to italic or italic, the browser consults the system to find a suitable font. If the specified font is not found, the browser uses a special algorithm to simulate the desired type of text. The result and quality may not be satisfactory, especially when printing a document.
Syntax
font-style: normal | italic | oblique | inherit
The values
normal Normal text style. italic Italic style. oblique Italic style. Italic and italic, though similar, are not the same thing. Italic is a special typeface that imitates handwriting, while oblique is formed by tilting ordinary characters to the right. inherit Inherits the parent's value.HTML5 CSS2.1 IE Cr Op Sa Fx
Duis te feugifacilisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
The result of this example is shown in Fig. 1.
Figure: 1. Applying the font-style property
Object Model
document.getElementById ("elementID") .style.fontStyle
Browsers
Internet Explorer 7.0 or later does not support the inherit value.
Browsers always render text with the value oblique as italic.
Saturation is the increase in the thickness of the lines of the font and, accordingly, the contrast. There are usually four types of saturation: light, normal, bold, and bold. However, you can set only normal and bold style using HTML. Two tags are used to set bold text: and .
Bold typeface Strong text selection
Italic style
Cursive is not just a slant of individual characters; for some fonts, it is a complete overhaul to a new style that mimics handwriting. Two tags define italics for text: and .
Italic font style Text selection
It should be noted that the tags and , as well as and although they are similar in their action, they are not entirely equivalent and replaceable. First tag - is a physical markup tag and sets the text to bold and the tag - with a logical markup tag and highlights the marked text. This separation of tags into logical and physical formatting was originally intended to make HTML universal, including not depending on the output device. Theoretically, if you use, for example, a speech browser, then the text formatted using tags and , will be marked differently. However, it turned out that in popular browsers the result of using these tags is equivalent.
Example 7.5 shows the use of tags and for the design of texts.
Example 7.5. Tags and
And where are the cookies and moonshine ?! - exclaimed the bad boy.
The result of this example is shown in Fig. 7.5.
or exploring tags that format HTML text
Your attention is presented to one of the key and simplest lessons of the tutorial.
- HTML text is the main component of most Internet pages.
- By key phrases in the body of the HTML page users can find your site.
- HTML text can be of any size and color at your discretion. You can also define the type of font and its volume.
- HTML font size is usually set in pixels.
- HTML text formatting widespread, formatting tags are used.
See below tags that format HTML text:
- Tags → bold HTML text (bold font).
- Tags → bold HTML text (bold font).
- Tags → monospaced HTML text (monospaced font).
- Tags
- Tags → monospaced HTML text (monospaced font).
- Tags → HTML text, the size is larger than usual (large print).
- Tags → HTML text, the size is smaller than usual (small print).
- Tags → oblique HTML text (italic font).
- Tags → oblique HTML text (italic font).
- Tags → oblique HTML text (italic font).
- Tags → underlined HTML text (underlined font).
- Tags
- Tags → HTML text (font) in subscript.
- Tags → HTML text (font) superscript.
HTML text formatting: strikethrough, underlined text
Result: ... monospaced font
Result: ... font size larger than normal
Result: ... italic font
Result: strikethrough text (strikethrough font)
Result: superscript
C The formatting above should only be applied to small sections of text. Use CSS if you want to set a specific font for the whole page, or for several lines, for example.
The weight of the font is defined using the CSS attribute font-weight, which can take the following values:
- lighter - lighter
- normal - usual
- bold - bold
- bolder - more fat
- 100..900 - 100 corresponds to the thinnest font; 900 - the thickest
Attribute font-style (font style) is used for writing in italics and can take on the following meanings:
- italic - italic, the edges of the text are rounded
- normal - usual
- oblique - italic
Attribute font-variant (type of font) is used for writing in small capital letters and can take the following meanings:
- normal - usual
- smaoo-caps - small capital letters
In addition to bold, italic, and small caps, there are several other popular types of style: underlining and marking.
Attribute text-decoration (text decoration) serves to underline the text and can take the following values:
- blink - flickering text (not supported by IE)
- line-through - strikethrough text
- none - without changes
- overline - line above the text
- underline - underlined text
Attribute text-transform (text transformation) is used to work with small capital letters and can take the following values:
- capitalize - all words start with a capital letter
- lowercase - all text is written in lowercase letters
- none - without changes
- uppercase - all text is written in capital letters
Usage example font-weight, font-style, text-decoration, text-transform: Example # 9
HTML code of the page:
Untitled
"Gold ring of Russia" (in antiquity Zalesye), a tourist route that includes a network of ancient Russian cities: Sergiev Posad, Pereslavl-Zalessky, Rostov the Great, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy, Uglich. The name Zalesye is primarily geographic, it meant everything that was “beyond the forest” in relation to Kievan Rus.
The tourist route (in operation since the beginning of 1970), laid through historical cities, passes through the territory of five regions - Moscow, Yaroslavl, Kostroma, Ivanovskaya, Vladimirskaya. The ancient cities of these lands have their own destiny, their past. They have traveled a difficult path in their historical development from their first days of birth to the present day. Much has been irretrievably lost on this long journey. Indifference and negligence lead to partial or complete destruction of unique buildings, such as the cities of Kalyazin, Mologa, Uglich. During the construction of the Uglich hydroelectric power station, the ancient Pokrovsky monastery with unique monuments of the 15-17th centuries was blown up and went under water. Half of the churches in Uglich were demolished, the fences of the monasteries were dismantled, which destroyed their ensemble integrity. Through the efforts of the restorers, dozens of objects of ancient architecture, seemingly irreparably lost, were rescued from the emergency state and saved from destruction. Restored to life in its original form: the architectural ensemble of the Resurrection Monastery (1674-77) of Uglich, the Church of the Intercession on the Nerl (12th century), Dmitrievsky Cathedral (12th century) and Vladimir's "Golden Gate", St. George's Cathedral (12th century) Yuryev-Polsky, monuments of ancient Suzdal, where comprehensive work was carried out to restore the historical buildings within the entire city, the city-museum. Entire architectural complexes of the Wooden Architecture Museums in Kostroma and Suzdal were re-created. All these are the creations of human hands that have touched the protected territories of the Russian Land.
In HTML, bold text can be done in several ways. These include:
- Tag b;
- Tag strong;
- CSS property font-weight.
Let's talk about each of the options for selecting text in order.
Bold text: tag
Tag b HTML is applied like this:
Website builder "Nubex"
For tag there must be a closing, and universal attributes (such as class, id, title etc.)
Although the validity of the tag b and is not deprecated by the HTML specification, more relevant to use is the tag strong, let's see why.
Bold text: tag
According to the HTML spec, the tag b serves to highlight text in bold. In contrast, the tag strong HTML is for highlighting important frames, words that are key for this page.
This tag plays a significant role in the ranking of pages in search results, therefore it is widely used in website promotion and SEO optimization. Search engines consider text enclosed in tags , and mark it as important.
Tag used strong the same way:
Website builder "Nubex"
You may notice that externally using tags and is not different at all (since all modern browsers interpret them almost the same), but semantic differences in the code for search engines do exist. Therefore, most SEOs recommend using the tag strong.
Bold text with CSS
We have already noted the importance of the tag strong in search engine optimization, but what to do if you need to make a large amount of text bold (but the text does not need to be marked as important for search engines), or you need to control the degree of "boldness" of the font? In such cases, the CSS property is used font-weight... It is applied as follows:
Our sites are, indeed, huge step in web development.
We do for real quality sites.
Trust us and we will you we won't let you down.
The values bolder and lighter you can set the degree of fatness more (or less) than that of the parent. A numerical value (100-900) can set the degree of fat content.
