Proficient in Css+div page style and layout--css text effects

The previous article, small part of the simple introduction of some of the basic CSS grammar, learning content is not very complex, are some of the CSS's knowledge of getting started, but the lofty high-rise floor, a good foundation, tall buildings, learning any course, must start from the foundation, step by step, steadfast and determined to go down, Today this blog post, small series mainly summarize the text effect of CSS, first, we look at a picture:

Next, the small series will be illustrated in the context of the above, one by one, is a simple knowledge, interested in a small partner, you can do with the small part to achieve the following code examples.

font for text

In CSS, we used the font-family to control the font of the text, and then we looked at an example, as well as a running effect:

The effect is as follows:
Analysis of the above code, we first see H2 inside, there is "font-family: bold, Young Circle;" This means: The inside of the H2 mark, if there is a black body in bold, no black body with a young circle, the following p tag and the author is the same, the effect as shown.
 the size of the text
After learning the font of the text, let's look at the size of the text, example code and how it works:
<span style= "FONT-SIZE:18PX;" >
The effect is as follows:
The small example above, a total of no line to do the comparison, the first line. 05in, second row 0.5cm, third row 4mm, line fourth 12pt, fifth line 2pc, from the above code we can see that the CSS control text size is through the font-size to achieve.
 The color of the text
The code and run effect of the example is as follows:
< Span style= "FONT-SIZE:18PX;" >
the effect of the operation is as follows:
There are many ways to express the color of the text, see H2 inside the Color:rgb (0%,0%,80%), using a percentage to display, the P flag is hexadecimal to indicate that the span flag is directly blue.
 The thickness of the text
We continue to look at the other effect of the text: the thickness effect, we show the thickness of the text for one by one, using a lot of lines to compare, example code and run the effect is as follows:
<span style= "FONT-SIZE:18PX;" >The results are as follows:
100, 200, 300, 400 are not too big difference, until the beginning of 500, their display effect is the same as bold bold, and 100~400 in the intuitive view and normal is the same.
 Text Italic
Italic text, in the CSS control italic is controlled by Font-style, if it is italic is italic, normal is normal. Let's look at the example code and how it works:
<span style= "FONT-SIZE:18PX;" >

The results are as follows:

Underline  , underline, Strikethrough
The example code and effects are as follows:
<span style= "FONT-SIZE:18PX;" >

The results are as follows:

From the above code we can clearly see that the properties of text-decoration inside, through underline, overline, Line-through, blink. Perform the effect display.
 English Letter case
The example code and the run effect are as follows
<span style= "FONT-SIZE:18PX;" >

The results are as follows:

Inside the Text-transform attribute, capitalize (the first letter of the word), uppercase (all uppercase), Lowerca (all lowercase). We have a very good contrast. We use a simple example to simulate Google logo, the example code and the effect is as follows:
<span style= "FONT-SIZE:18PX;" >
The results are as follows:
 Small Series of words: This blog, small series mainly introduces the text effect of CSS, including text font, text size, text color, text thickness, text italic, underline, underline, strikethrough, as well as the case of English letters, These knowledge are basic CSS set up the text of some knowledge, not difficult, the key lies in more hands-on, multi-practice, CSS let our interface live up, moved up, BS study, not finished, to be continued ...
Proficient in Css+div page style and layout--css text effects