5.1 CSS Text styles

Text and images are the basis for conveying information, is always an indispensable element of web design, a variety of text and image effects throughout the internet everywhere. This chapter starts with the basic text setting and explains in detail how CSS sets various text effects, and then further explains several important areas of application of the image. Users who have used any word processing software are not unfamiliar with the text layout. For example, in Word software, you can set various properties such as font, size, and color of text. CSS can also be used to fully set the text in an HTML page. First, prepare the Web page For ease of interpretation and practice, first prepare a very simple page, the HTML code is as follows. <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   < HTML xmlns="http://www.w3.org/1999/xhtml"> < Head >   < Meta http-equiv="Content-type" Content= "text/html; Charset=utf-8 " /> < title > Web Learning Network-head Line </ title >   < style type="text/css"> /* Fill in the CSS code here */ </ style >   </ Head >   < Body >   < H1 > Head Line </ H1 >   < P class="p1"> He Internet Society mission is to achieve a world in which Everyone everywhere is connected to an open and universally accessible Internet. </ P >   < P class="P2"> T He Internet Society ' s mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Omit other text here </ P >   </ Body >   </ HTML >   This very simple Web page consists of a H1 title and two P-paragraphs. In order to set up two paragraphs of text separately, they each set a category selector, p1 and P2. When no style is set, the effect is shown in 1. This file please refer to the "5th chapter \ Text \basic.htm" in CSS teaching resources of Web learning net. Lodidance.com Figure 1 ready-to-base page effects Second, set the font In the HTML language, the font of the text is set by <font face= "font name" >, while the font in CSS is controlled by the Font-fanuly property. For example, for a page that is prepared above, add the following style settings to the P tag in the Styles section. < style type="text/css"> p{ Font-family:arial, "Times New Roman"; } </ style >   The above statement declares the font name of the P tag in the HTML page, and also declares two font names. Arial and Times New Roman fonts, respectively, meaning that the browser is told to first look for Arial fonts on the visitor's computer. If there is no Arial font on the visitor's computer, look for times New Roman, or if neither of these fonts are present, use the browser's default font. The Font-family property can declare multiple fonts at the same time, separating the fonts with commas. In addition, there are spaces in the middle of some fonts, such as the Times New Roman above, which need to be enclosed in double quotation marks to let the browser know that this is the name of a font. Note: Do not enter Chinese (full-width) double quotes, but use the English (half-width) double quotation marks. This is shown in the browser in effect 2. You can see that the fonts in the two body paragraphs have changed. This file please refer to the "5th Chapter/Text/font-family.htm" in the CSS Tutorial resource of Web Learning net. Figure 2 Setting the body font Note: Many designers like to use a variety of fonts to make the page colorful, but these fonts are not installed on most users ' machines, so be sure to set up multiple alternative fonts, to avoid the browser directly replace the default font. The most straightforward solution is to use the parts of the unfamiliar font, using graphics software to make small pictures, and then loaded into the page. Three, text size In the Web page by the size of the text to highlight the theme is a very common method, CSS is through the Font-size property to control the size of the text, the value of the property can be used in a number of length units, here are described separately. 1. Length Unit px Still take the above page as an example, increase the setting of the Font-size property, set it to 12 pixels, the code is as follows. < style type="text/css"> p{ font-family:arial; font-size:12px; } </ style >   This is shown in the browser in effect 3. As you can see, the text in the two body paragraphs is now smaller. This file please refer to the "5th Chapter/Text/font-size.htm" in the CSS Tutorial resource of Web Learning net. Figure 3 Sets the size of the body text to 12 pixels The PX in the code is a unit of length that represents the size of 1 pixels on a browser. Because different visitors ' displays have different resolutions and the actual size of each pixel is not the same, PX is called a relative unit, which is the ratio of 1 pixels. In CSS, in addition to using PX as the unit of length, you can also use the following 5 units to set the size (including text, div height and width, etc.), these 5 units are called absolute length units, they do not change with the display. The meanings of each unit are shown in the following table. Length Units Description Inch inch, inches Cm Ccnlimcler, CM Mm Millimeter, MM Pt Point, Printed dot, 1pt equivalent to 1/72inch in a typical display Pc pica,1pc=12pt 2. Length Unit em and EX In addition, there are two more special length units: Em and ex. They are similar to PX and are also units of relative length. The length of Lem represents the standard width of the letter m in its parent element, and 1ex represents the standard height of the letter x. When the text size of the parent element changes, the size of the child elements that use the two units change proportionally. For example, in text typesetting, the first letter is sometimes required to be much larger than the other letters. and sink the display, you can use this unit. The method is to first in the above HTML, the 2nd paragraph of the 1th letter "T" into a pair of <span></span> tags, and set it a CSS category, ". Firstliter". < P class="P2"><span class ="firstletter">T</Span> He ... Then set its style, set the font-size to 2em, and float it to the left, the code is as follows: . firstletter{ font-size:3em; float:left; } This is shown in the browser in effect 4. At this point the first letter of the 2nd paragraph becomes 3 times times the standard size, and the sink is displayed by setting the left float. This file please refer to the "5th Chapter/Text/first-letter.htm" in the CSS Tutorial resource of Web Learning net. Figure 4 Setting the letter of the first paragraph to enlarge and sink the display 3. Length Unit% The last unit is used as a percentage, such as "font-size:200%", which indicates that the text is twice times the size of the original. Lodidance.com Four, Row high In CSS, you can also set the height of each line of text in a paragraph, which is set by the Line-height property. The Line-height value in CSS represents the distance between two lines of text, that is, the height of each line of text. If you underline the text, the underline position is the baseline of the text. The value of the Line-height property can be set to a relative value or to an absolute value, just like any property in the CSS that sets a specific value. In static pages, when the text size is fixed, absolute values are often used to achieve a uniform effect. and for forums and blogs these pages, which can be customized by the user's font size, are usually set to relative values and can change the line spacing as the user customizes the font size. For example, the P tag for the above example sets the following CSS rule: Line-height : 18px ;  This is shown in the browser in effect 5. The height of each row is larger than the original. This file please refer to the "5th Chapter/Text/line-height-1.htm" in the CSS Tutorial resource of Web Learning net. Figure 5 Setting the line height of the body In addition to being able to use pixels such as line height units, you can also do not add any units, the line height should be written to the ratio of font size. For example, the font size is 12 pixels and has the following line of code: Line-height : 1.5 ;  It produces a high effect on the line. The line height effect is the same as the following code. Line-height : 18px  ; Below please carefully compare 14 and Figure 5, you can find that after setting the "line-height:18px", the drop in Figure 4 shows the first letter "T", no longer appear in the way of sinking. If the row height is changed from an absolute height of 18 pixels to a relative height of 1.5. You will find that the letter "T" also sinks most, as shown in 6. This file please refer to the "5th Chapter/Text/line-height-2.htm" in the CSS Tutorial resource of Web Learning net. Figure 6 effect after use of relative height Analysis: 1.5 times times 12 pixels is 18 pixels, row height does not change, why does it affect the position of the previous letter "T"? The reader can think about the problem a little bit. The test here is whether the reader has fully understood the basic nature of CSS. The answer is this, in the 1th chapter of this tutorial has focused on CSS style has the nature of inheritance. When Line-height is set to 18 pixels in the style of P, the span of the letter "T" is the child of the P element, so it inherits this style, and its row height is also 18 pixels. In this way, although its text height is larger, but its box height is still limited to 18 pixels, the text next to it when the layout is a box-bound, so the effect of 5 is shown. (At this point, the letter "T" is beyond the scope of the box.) Ask the reader to experiment with different ways of handling in IE and Firefox. ） When the line-hright of P is set to 1.5, this style is also inherited by the span element where the letter "T" is located. So when its text becomes 3 times times larger, the row height becomes larger, resulting in 6 of the effects shown. From this small example can be seen, in the course of learning and practical work sometimes encounter some very small place, which contains a deep truth, it is worth to explore it clearly. There are also two points to note below. (1) The above describes the 3 most basic properties of the text, that is, font, size, and line height. In CSS, you can also combine them in a CSS rule. For example: Font : 12px / 18px Arial; This line of code means that the Arial font is used, with a size of 12 pixels and a row height of 18 pixels. Note that the font and line height should be separated by a slash. You can also use a relative scale as a value for the row height, for example: Font : 12px / 1.5 Arial; (2) The Line-height property can be set in a text element, such as the example above, which sets the row height on the P element to determine the heights of each row in the paragraph. The Line-height property can also be set in a container element, such as setting the Line-height property on a Div, and the text inside it will use this row height value.

Editor: Web Learning Network

This address: http://www.lodidance.com/css/jc/680.html