Markup Language -- specify CSS styles for text _ HTML/Xhtml _ webpage Creation

Click here to return to the webpage tutorial HTML section. Click here to view the CSS tutorial. Above: The markup language-CSS layout. Chapter13 specifies a style for text. I 'd like to take a chapter to discuss how to set a style with CSS. generally, most CSS applications are used to process text content, even if I didn't fully follow the standard Chapter 13 to specify a style for the text, I would like to take a Chapter to discuss how to set the text style with CSS is a good idea. generally, the most common CSS application is to process text content. Even if you do not fully comply with the standard, click here to return to the script home HTML tutorial section. click here to view the CSS tutorial.
Above: Markup Language-CSS layout. Chapter 13 specifies a style for text
I would like to take a chapter to discuss how to set text styles with CSS. generally, most CSS applications are used to process text content, even for websites that do not fully comply with the standards. removing the repeated labels on the Web page once attracted the designers very much, and it is not difficult to see the huge advantage of controlling text layout with CSS, that is, further separating content and display methods.
We have learned from many previous examples that CSS can handle many situations, and setting text styles is the easiest way to add design elements to the most basic web pages. at the same time, adding styles to CSS text also avoids unnecessary images on the page.
In this chapter, we will see how CSS brings a boring plain text to another height (with new colors, sizes, and fonts). How to Make hypertext look cool?
Specifying text styles is one of CSS's best practices. It is the same for browsers that do not fully support advanced CSS functions. in the past, designers and developers may want to design text in a way that is not large or bold, create a webpage that is intolerable and hard to use by today's standards (have you ever seen a webpage with most of the text shown in images? But you happen to be using a text browser ...)
To provide you with some alternative methods to use images and answer the above question at the same time, in this chapter, we will start with a text that has not been set as a style, and gradually add various CSS rules for it, make it a compelling design. changing Times
Start by reading the text to be processed in the preset font of the browser. in my case, the default font is 16-pixel Times. the Safari browser is used on Mac OS X. As a result, the text displayed will be deprecated in the form of anti-aliasing. If Windows XP is used and ClearType is enabled, you can also see similar results.
Times (or variant Times New Roman) is the default font of many browsers. However, it is easy for users to change the font they like, So you certainly cannot rely on this default value.
301 show the text that we have not used in this chapter with style added: A simple title marked with style, followed by the tips for three sections of home decoration.
3-1 the browser displays the title, and the preset text effect changes the Row Height.
One of the simplest and most effective text style effects is the line-height attribute. Adding additional space between each line of text makes text paragraphs easier to read and more attractive, it can also bring amazing results to your page.
As longAdding the following CSS rules to a tag can accomplish this skill. Of course, you can also add this rule to other tags, for example, you just want to change

The Row Height.

Body {
Line-height: 1.5em;
}

The significance 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.
3-2 shows the effect after line-height is added.
# P # All in the Family
Of course, we can also change the font, but it should be noted that it may be restricted by the fonts installed on the user's system.
Add a group of fonts to the instance based on the font-family attribute. the concept here is: specify a set of font lists separated by commas and arranged in the desired order. if the user does not have the first font in the installation list, the browser selects the second font, and so on.

Body {
Font-family: Georgia, Times, serif;
Line-height: 1.5em;
}

In the preceding example, it is required to "modify all text in Georgia text. If Georgia is not installed, use Times. If Times is not installed, is to use the preset serif font ".
3-3 shows the effect after the example is added with font-family.
3-3 sample effect displayed in Georgia font. font with spaces in the name
If the specified name contains a blank font (such as Lucida Grande), the entire font name must be enclosed in quotation marks.
In the following example, Lucida Grande (the famous Macintosh font) will be selected as the font you want to use, and the Trebuchet MS (the famous Windows Font) will be specified as the second alternate, add a common sans-serif. if neither of the preceding fonts is installed, use the preset sans-serif font.

Body {
Font-family: "Lucida Grande", "Trebuchet MS", sans-serif;
Line-height: 1.5em;
}

Padding adjustment (also known as letter interval)
The padding adjustment is a term used to describe the text interval in the print field. the CSS attribute is synonymous with letter-spacing. next, let's use the letter-spacing attribute for the label and add materials for the example title.
After applying letter-spacing to a tag, the title will become more appealing without opening the image editor to create image text.
First, let's add a negative value to the letter-spacing attribute to compress the text of the title:

H1 {
Letter-spacing:-2px;
}

The Modification result is displayed in 3-4.
# P # uppercase letters
It is very common to write the first word in the printing industry. This can add a gorgeous and elegant effect to the paragraph, and it can be achieved without using a piece of film. Only CSS is enough.
First, you must add a "style anchor" to the source code to allow us to call the first letter of the first paragraph. we pack "I" with a group of tags and specify class = drop for it. If we can reuse the first letter in uppercase on the page or the entire website.

IF you're painting with latex paints, and the job...

In some modern browsers that fully support CSS2 specifications, we can use the: first-letter pseudo class to set the first-character effect of a paragraph without adding additional labels. Although the semantics is great, unfortunately, many browsers do not support this effect.
Now we have full control over the "I" letter in the first section. Let's add the CSS declaration to enlarge the font and float it to the left side (this way, other text will not be surrounded by it), we will also add the decorative background, border.

. Drop {
Float: left;
Font-size: 400%;
Line-height: 1em;
Margin: 4px 10px 10px 0;
Padding: 4px 10px;
Border: 2px solid # ccc;
Background: # eee;
}

In combination with all the styles we have added for the sample content, 3-6 is the effect of displaying the first letter in upper case in the browser. It does not use a piece at all, and only relies on simple CSS and markup syntax.
3-6 Use CSS to make the first letter in uppercase. Text alignment
Inspired by the print industry, we can use the text-align attribute as the text application's left-right alignment effect. the text after the left and right alignment will open the distance between words, so that the width of each line becomes the same length, creating a close, well-defined column splitting effect.

Body {
Font-family: Georgia, Times, serif;
Line-height: 1.5em;
Text-align: justify;
}

3-7 is the text of the example, and it is now aligned left and right!
# P # convert text
There is a text-transform attribute that converts the case of text content regardless of the case of the marked content. For example, the title is marked in the following section:

A Painting Tip

As long as the text-transform attribute is used in CSS, the entire title can be converted to uppercase (lowercase if needed) without modifying the content marked as source code, in addition to the style previously added to the tag, the CSS rule that converts all titles to uppercase is as simple as this:

H1 {
Letter-spacing: 4px;
Font-style: italic;
Text-align: center;
Text-transform: uppercase;
}

The result is like 13-9. You don't have to compete with the source code. You only need to modify the CSS to change the case sensitivity usage of certain tags on the page (or even the entire website.
3-9 use CSS to change the title to uppercase and lowercase letters
Most browsers support the font-variant attribute, so we can modify the content with small uppercase letters (that is, the content is displayed in different sizes of uppercase text ).
Let's add the font-variant attribute to the title of the example:

H1 {
Letter-spacing: 4px;
Text-align: center;
Font-variant: small-caps;
}

3-10 shows the effect of replacing the title with a small uppercase letter: This is another way to mimic the print industry with markup syntax and CSS.
# P # indent of the first line of a paragraph
Look at the print field again (Oh, do you see the trend here ?), We can use the text-indent attribute to indent the content of the first line of the paragraph. If a positive value is added, the text will be indented to the specified amount.
By indent each section in the example to 3em or the maximum width that can be occupied by 3 characters, I will remove the first letter in uppercase so that it will not fight with the indent effect of the first line of the first paragraph.
Indent all

The first line of CSS is like this:

P {
Text-indent: 3em;
}

3-11 shows the modification effect. You can see that the first line of each text is indented to the value we set. The em unit is used because, in this way, the indent length is proportional to the font size. When the user decides to enlarge or contract the font, this method can demonstrate its advantages.
3-11 use the text-indent attribute to indent the first line of a paragraph.
After discussing several CSS attributes that specify a style for a text, I hope you can understand that most of the time, you do not need to rely on the drawing tool to create good results. generally, you only need to add a style to the source code, and sometimes it can achieve great results.
Of course, in some situations, text may need to be made into pictures, such as company logos, or special fonts used when some page elements are made. The key to everything is balancing, try to specify the style with CSS first, so that your source code will be cleaner and easier to use.
CSS provides the ability to modify text, add style control methods, and the results are surprising. This is a good design tool that allows you to continue to maintain short and flexible marking of source code.