Home > Developer > Web Develop
Proficient in CSS + DIV webpage style and layout-CSS text effects, div-css
In the previous article, I briefly introduced some basic CSS syntaxes. The learning content is not very complex. It is all about getting started with CSS. However, it is easy to build a foundation in the high-rise buildings, to learn any course, you must start from the basics, step by step, and proceed steadily. In today's blog, I will briefly summarize the text effects of CSS. First of all, let's look at a figure:
Next, the editor will give a one-to-one explanation along with the context shown above. It is a simple piece of knowledge. If you are interested, you can work with the editor to implement the following code example.
Text font
In CSS, we use font-family to control the text font. Next, let's look at an example and the running effect:
<Html> The effect is as follows:After analyzing the above Code, Let's first look at h2, which contains "font-family:, ;", which means inside the h2 mark. If there is a, use, the circle is used without a black body. The P label below is the same as that of the author. The effect is shown in.
Text Size
After learning the text font, let's take a look at the text size. The sample code and running effect are as follows:
<Span style = "font-size: 18px;"> The effect is as follows:In the small example above, there is a total of No rows for comparison, the first line. 05in, the second line is 0.5, the third line is 4mm, the fourth line is 12pt, and the fifth line is 2 pc. From the code above, we can see that CSS controls the text size through font-size.
Text color
The sample code and running effect are as follows:
<Span style = "font-size: 18px;"> The running effect is as follows:There are many ways to express the color of text. We can see that the color in h2 is rgb (0%, 0%, 80%), and the percentage is used for display. The P sign is represented in hexadecimal notation, the span flag is blue.
Text width
Let's continue to look at another effect of the text: the width effect. To show the width of the text one by one, we use a lot of lines for comparison. The example code and running effect are as follows:
<Span style = "font-size: 18px;"> The running effect is as follows:There is no big difference between 100, 200, 300, and 400. Until 500, their display effect is the same as that of bold, while 100 ~ 400 intuitively, it is the same as normal.
Italic text
The italic of the text is controlled by font-style in CSS. If italic is used, italic is used and normal is used. Let's take a look at the sample code and running effect:
<Span style = "font-size: 18px;">
The running effect is as follows:
Underline, top line, strikethrough lineThe sample code and effects are as follows:
<Span style = "font-size: 18px;">
The running effect is as follows:
From the code above, we can clearly see that in the text-decoration attributes, the effects are displayed through underline, overline, line-through, and blink.Uppercase/lowercase letters
The sample code and running effect are as follows:
<Span style = "font-size: 18px;">
The running effect is as follows:
In the text-transform attribute, capitalize (uppercase), uppercase (all uppercase), and lowerca (all lowercase ). We made a good comparison. We use a simple example to simulate google's logo. The sample code and running effect are as follows:<Span style = "font-size: 18px;">The running effect is as follows:
Note:In this blog, the editor mainly introduces the text effects of CSS, including the font, size, color, width, italic, underline, top line, and strikethrough, and the case sensitivity of English letters, these knowledge are some basic knowledge of CSS settings, it is not difficult, the key lies in more hands-on, more practices, CSS makes our interface alive, starting, BS learning, not finished, To be continued ......
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
