Basics of HTML

  1. Terms and Definitions
  2. Principles of WEB 2.0
  3. The structure of the HTML-document
  4. Main metatags
  5. Formatting Text HTML
  6. Lists html-page
  7. Text fixed format
  8. Selected text html-page
  9. Change font options
  10. Graphics html-page
  11. Tables html-page
  12. Hyperlinks
  13. IMAGEMAP
  14. Frames

CSS-based

  1. What is CSS
  2. CSS syntax
  3. Style classes
  4. Combined styles
  5. CSS table
  6. CSS cascading rules
  7. Recommendations applying styles
  8. Font options
  9. Line breaks, vertical alignment
  10. Background settings
  11. Parameters of the paragraph
  12. List options
  13. The parameters of the cursor
  14. Options indentation
  15. Parameters frame
  16. Parameters selection
  17. Display options
  18. Containers


   

Font options

Consider the basic style attributes that specify different font options.

font-family - the name of the font

The font name is specified by the style font-family

font-family: <font 1, font 2, ..., font n>|inherit

Font names are specified as standard font names. If the font name consists of several words, it is taken in quotes. If multiple fonts at once given, they are separated by commas. If the font name is defined in the embedded style, instead of using quotes apostrophes (if the font name consists of several words).

EXAMPLE:

P {font-family: Verdana}
H2 {font-family: Arial, "Times New Roman", Tahoma}
<H3 STYLE="font-family: 'Courier New'">

The browser tries to display the text font (if there are multiple), which is listed first. If this font is not on the user's computer, the browser tries to display the text to read font, and so on down the list. If your computer does not have any of these fonts, the browser displays the text font, which is installed by default on your computer. If the computer system is running Windows, it must have the most popular fonts that are used on most websites - Arial, Times New Roman, Verdana, Tahoma, Courier.

Many webmasters, in order to avoid various kinds of surprises when displaying html-pages, the list of fonts is set not only the font names, but one of the five font families, which usually indicate the end of the list:

Of particular importance inherit tells the browser that the elements of Web pages to which tie style inherits the value of the parent element. This is the default, so it is usually not indicated.

With respect to the attribute font-family special value inherit indicates that text element html-pages will be displayed in the same font as the text of the parent element.

font-size

The font size can be set in two ways: a numeric value; symbol value. In turn, the numerical value of the font size can be specified in absolute or relative terms.

EXAMPLE:

P {font-size: 12px}
H1 {font-size: 120%}
EM {font-size: small}

Units font size:

Simvolnye attribute values font-size:

The values of xx-small to xx-large set of seven predefined font sizes from the smallest to the largest.

color

The text color can be set or predetermined name or RGB-code.

EXAMPLE:

P {color: Red}
H1 {color: #FF00FF}

RGB-code begins with a pound symbol # and the number in hexadecimal format, which determines the intensity of the red, green, and blue color. Meaning # 000000 corresponds to black; #FFFFFF - White.

Basic colors:

white       #FFFFFF
aqua        #00FFFF
black       #000000
blue        #0000FF
fuchsia     #FF00FF
gray        #808080
green       #008000
lime        #00FF00
maroon      #800000
navy        #000080
olive       #808000
purple      #800080
red         #FF0000
silver      #C0C0C0
teal        #008080
white       #FFFFFF
yellow      #FFFF00
black       #000000

A more complete list of color names and their RGB-values are presented on the page https://msdn.microsoft.com/en-us/library/aa358802(v=VS.85).aspx

Opacity

The style attribute opacity indicates the degree of transparency of the text (or other element html-pages):

opacity: <0..1>

The degree of transparency is given by a numeric value between 0 and 1: 0 - completely transparent text; 1 - corresponds to the full visibility of the text.

EXAMPLE:

EM {opacity: 0.4}

Note that the decimal separator in the number that specifies the level of transparency, the point should be used.

Opacity attribute has a very limited application and is not used in plain text, not to enter the site visitor in astonishment. Transparency is recommended for creating special effects.

font-weight

Possible attribute values font-weight:

EXAMPLE:

EM {font-weight: bold}

font-style

There are three possible values font-style:

font-decoration

There are five values font-decoration:

font-variant - defines the type of lowercase letters

Two attribute values font-variant:

text-transform - changes the character text

Possible values text-transform:

line-height - the height of a line of text

The height of a line of text can be defined absolutely or relatively.

EXAMPLE:

P {line-height: 5px}
EM {line-height: 2}
STRONG {line-height: normal}

The first example is given by the height of a line of text 5 pixels; Second example - the current height of the text line is multiplied by 2; In the third example - the attribute returns the height of a line of text to the browser.

letter-spacing - the distance between text characters

The distance specified in the letter-spacing, is added to the currently installed browser. The value may be positive (font characters are arranged next to each other) or negative (font characters are arranged closer to each other and may even run into each other). The value of normal sets zero extra distance.

EXAMPLE:

P {letter-spacing: 5px}
EM {letter-spacing: -2pt}
STRONG {letter-spacing: normal}

The style attribute letter-spacing does not support the value of the inherit

word-spacing - extra space between words

Possible values and behavior attribute word-spacing similar to letter-spacing.

font - simultaneous determination of several parameters of the font

A mandatory parameter attribute style font is the font name, the other parameters may not be available. The parameters are separated by spaces.

EXAMPLE:

P {font: italic 14px "Courier New"}

TOP ↑