Beautify HTML Paragraph text ⅰ_ experience Exchange

The last article has already said in the fifth chapter will start to speak CSS, just beginning to speak can not speak complex, we still are simple, step by step. Or that sentence: use it first and then study it. That is, the first part of our story is the paragraph, then we are beginning to talk about CSS is also to start from the paragraph, let our paragraph first beautiful.

Before we speak CSS, let's think about what kind of paragraph is the most comfortable? If you don't have any ideas or how to analyze the problem, you might want to take a look at the text layout of one of the Web Design tips series. No matter how at least our elementary school teacher told us that the first line of each paragraph should be empty two words. This is probably the first way we've been able to divide a paragraph. And perhaps more people have created a mindset, that the paragraph must be the first line empty two. I think that the first line of the paragraph can be processed by distinguishing between the primary and the same paragraph spacing. And the first line of processing is only indented two words? I personally think not, because we can also use the "Drop cap", "first line prominent two words" and so on to express. Someone would say, "I've seen the first drop, like the author's blog, but it seems a bit odd to highlight the first line." In fact, however, the first line highlighting two words will not be invented by the author, in ancient Chinese Suben often used this format, different because they often need to write some words at the beginning of the song, and to express this kind of chant need to elevate their status, such as "June" "Emperor" and other words, so it will highlight the two words, Long time form a special form of typesetting, this form of style is now used less, but we can learn a lot, convenient to express different styles can be useful.

That is, the paragraph spacing is the first element of the division, then we will first solve the problem of the style of the interval. Which is a paragraph, then each of us is made up of a group of

, and our CSS can achieve the effect we need by simply describing the paragraph tag. Then the basic form is:

p {This is the description of the style}

We have noticed that the paragraph tag in the CSS does not need the angle brackets, just need a "p" is OK. All labels are treated as such. Then we need to set a paragraph spacing for each paragraph, here we have two description attributes, one is padding, the other is margin, the effect of the two performance looks a bit like, but there is an essential difference, if we show the paragraph as a box, in this box containing something, Padding is the distance between these things and the inner edge of the box, while margin is the distance between the box and the box. It is clear here that we should use margin. The notation is: margin:1em 0; This is a shorthand method, if the whole is written should be: margin-top:1em; margin-right:0; Margin-bottom:1em; margin-left:0; This is obviously too redundant, so generally we write: Margin:1em 0 1em 0; Here is the order of the upper and lower left, because the upper and lower values are the same, the left and right values are the same, then can be abbreviated to: MARGIN:1EM 0; The EM here refers to the relative length units, relative to the font size of the text within the current object. For more information about the Unit, please refer to the CSS2.0 Chinese handbook prepared by Su Xiaoyu. Then why use EM instead of PX or PT, this is because most of our current browser has the function of font amplification, which is also convenient for readers to see more clearly the text content, then if we use PX to set the pitch then when the font magnification time is not changed, Then, when zoomed in to a certain value, the feature of this span will not exist. So we use this unit of EM, that is, when the font becomes larger, the time interval is correspondingly larger and easier to identify.

It is worth noting here that when we use margin there will be a margin between the two paragraphs overlap, then the right side of the figure we can find that the margin between the two paragraphs is overlapping is supposed to be two height of the result of the addition or a height, But the middle of the signal padding but not overlapping their height is added, it is important to note that this is not a bug, but a feature. So let's write a CSS to set our paragraph:

p {margin:1em 0;}

said the distance nature will talk about line spacing, have read "One of the Web design skills series of text typesetting" friends will understand the importance of the spacing, then you have to set their own page spacing, how is it set? Set leading has a special attribute: Line-height, this should be called line height. Because we are going to set the height of a row, not the distance between the line and the line. That's why we always find that the data in Photoshop that sets the line spacing is not the same as the number set on the page. But the line spacing can still be produced by the lines we set, so the method is different, but the goal is the same. In general, we must be higher than the height of the font, otherwise the line and the line will overlap, of course, we do not rule out the use of this style to do some special effect, but at least in the reading of the text we need to clear the line. Line spacing should not be too big, too big reading efficiency is not high, if too small and easy to read the wrong row. Therefore, the general row height should not exceed two words height. The most commonly used is between 1.6em~1.8em, if the width is very large, we need to increase the line spacing or we can easily read the wrong row, if the width is small when the spacing is too large to lose the efficiency of reading. Then we add the CSS of the paragraph just now, and mark our line spacing:

p {margin:1em 0; line-height:1.6em;}

So for a basic paragraph set is completed, if you need to add a first line indentation, you can also set the paragraph font, word size, Word style, color and so on:

p {margin:1em 0; text-indent:2em; font:normal normal 12px/1.6em "song body"; color: #000;}

The attributes of the font are also abbreviated, in order: "Font:font-style | | Font-variant | | Font-weight | | Font-size | | Line-height | | Font-family ", this knowledge in the CSS2.0 Chinese manual of Su Drizzle is narrated. I'm not going to repeat it here. The color here is the colour of the text, #后面的数值应该是6位, you can directly copy the values in the Photoshop color swatch. But we also often abbreviate. The abbreviation is that the odd digit and the value of the even digit can be combined into a 3-bit color value at the same time. For example: #4488cc, can be abbreviated to #48c, if need to highlight, then not only need to set the value of text-indent to negative, but also need to modify padding values, Because the protruding is beyond the content area then if there is no space in the padding area then the two highlighted words cannot be displayed. So let's give a first line of CSS that highlights two words.

p {margin:1em 0; padding:0 0 0 2em; Text-indent:-2em; Font:normal normal 12px/1.6em "song body"; Color: #000; }

To beautify the content of paragraph text first here, the next article on the first word sinking practice and precautions!

