In the previous article, we have already elaborated on the basic syntax of CSS, which is very basic. In fact, learning anything must begin with the basics. If you don't have a good foundation and want to study it very hard, you still have a lot of questions in the end. In fact, in our school, the teacher is also very basic, so it is very boring, so many students do not listen to the class, and then unconsciously, the teacher talked about some examples, I want to study it myself, but I have to look back at the basics. So when I read this article, I can't help but look back at the first article and master CSS. Div webpage style and layout (I ).
Next we will talk about the CSS text effect.
CSS text style: First, let's talk about Font: in CSS, we use font-family to control the font of text. Let's look at a piece of code:
<HTML>In this Code, Let's first look at H2, which contains "font-family:, ;", which means: Inside the H2 mark, if there is a, use, the child circle is used without a black body. The P labels below are the same. The final author is similar. We can see the following results:
The effect is still very optimistic. H2 is in the black box, and the author uses the ghost body. Continue to see the text size.
Let's look at the code first:
<HTML>A total of five lines are used for comparison. The first line is 0.5 in, and the second line is ....... CSS controls the text size through font-size.
Effect:
Let's continue to look at the text color: Let's first look at the Code:
<HTML>We can see that
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. We can see the following results:Very interesting expression method; dark blue, blue, black effect .. You can choose one based on your preferences.
Let's continue to look at another effect of text: width effect: to show the width of the text one by one, we use a lot of lines for comparison: Look at the code
<HTML>Let's look at the effect:
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. So font-weight has made great contributions in this regard.Let's continue to look at italics: in CSS, italics are controlled by font-style. If italic is used, italic is used, and normal is used. Let's look at the code and results:
<HTML>The effect is as follows (let's look at the figure ):
The effects of H1 and H1 span show that in italic text, this "oblique" is not skewed.
Let's continue to look at the underline, top line, and strikethrough: We also start from the code:
<HTML>We can clearly see that the text-decoration attributes include underline, overline, line-through, and blink to display the results:
Of course, we didn't see the flickering effect. You can do it yourself.
Let's continue to read the English letter case: start with the code
<HTML>Let's take a look at the effect:
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:
Check the Code:
<HTML>What about:
You can learn more about the specific code analysis. The main idea is to use span for separation.
In the next blog, we will continue to talk about how CSS controls paragraph and text. Please stay tuned. Thank you.
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
