Click here to return to the Wulin.com HTML tutorial column. If you want to browse the CSS tutorial, please click here.
Above: Markup Language-CSS Layout . Chapter 13 Specify a style for text
I think it is a good idea to discuss the practice of using CSS to set text styles in a chapter. Generally speaking, processing text content is probably the place where CSS is used the most, even for websites that do not fully comply with the standards. Remove the recurring tags on web pages were once (and now) very attractive to designers, and it is not difficult to see the huge advantage of using CSS to control text printing, that is, further separating the content and display methods.
From many previous examples, we know that CSS can handle many situations, and setting text styles is the easiest way to add design elements for the most basic web pages. At the same time, adding CSS to text can also prevent us from adding unnecessary pictures in the page.
In this chapter, we will see how CSS takes a boring and ordinary piece of text to another height (in new colors, sizes and fonts). How to make hypertext look cooler?
Specifying text styles is one of the best jobs CSS is good at, even when facing browsers that are slightly old and incompletely support CSS advanced functions. In the past, designers and developers might want to create web pages that are unbearable and difficult to use by today's standards when designing texts to achieve size and bold effects (have you ever seen web pages where texts are mostly represented by images? But you happen to be using text browsers...)
In order to provide you with some alternatives to using pictures and answer the above question, in this chapter, you will start with a paragraph of text that has not yet been styled, and gradually add various CSS rules to it, making it a compelling design. The ever-changing Times
Start by looking at a text that will be processed in the browser's preset font. In my case, the preset font is 16 pixels Times. Use Safari browser on Mac OS X. Because of this, the text you see will be depicted in an anti-aliasing manner. If you use Windows XP and start ClearType, you can see a similar effect.
Times (or variant Times New Roman) are preset fonts for many browsers, however, this is easily changed by users to their own favorite fonts, so you certainly can't rely on this preset value.
Figure 1301 shows the text content we used in this chapter that has not been added with style: a simple title marked with <h1>, and here are three tips for home decoration.
Figure 13-1 The browser displays the title, and the preset effect of the text changes the line height
One of the simplest and most effective text style effects is the line-height attribute. Adding some extra space between each line of text can make text paragraphs easier to read, more attractive, and also bring wonderful effects to your page.
You can complete this technique by adding the following CSS rules to the <body> tag. Of course, you can also add this rule to other tags, such as just wanting to change the line height of <p>.
body {
line-height: 1.5em;
}
The meaning of this code is: the line height of the text on the page should be 1.5 times the text height. I like to use em units when specifying line-height, because they will change with the font size.
Figure 13-2 shows the effect after adding line-height.
Figure 13-2 Effect after preset text plus line height
It looks great, and the results that a small line-height can achieve are amazing.
Previous page1 2 3 4 5 Next page Read the full text