Beautify HTML Paragraph text ⅰ_ experience Exchange

The previous article has said in the fifth will start to speak CSS, just start to talk can not speak complex, we are still simple, step-by-step. Or the sentence: first use, and then to study. That is, our first paragraph is about the passage, then we will also start with the beginning of the text of the beginning of the paragraph, let us first beautiful paragraph.

Before we talk about CSS, let's think about what kind of paragraph looks the most comfortable? If you do not have any ideas or do not know how to analyze the problem may wish to take a look at the "Web design skills of one of the series on text typesetting." No matter how at least our primary school teacher told us that the first line of each paragraph should be empty two words. This is probably the first method we've received about how to divide a paragraph. And perhaps more people have already created the mindset that the paragraph will require a first line of empty two lattices. And I think that it is the first line of the paragraph that distinguishes the primary element of the paragraph from the same paragraph. And the first line of processing is only indented two words? I personally think not, because we can also use the "first word sinking", "first line highlight two words" to show. Some people would say, "I've seen the drop of the word, like the author's blog, but it seems a little odd that the first line stands out in two words." "However, the fact that the first line stands out in two words is not invented by the author, this form is often used in ancient Chinese Suben, because they often need to write a chant at the beginning of the line, and to express such a chant needs to elevate its status, such as" June "," Emperor "and so on, so that will highlight two words, Long time form a special form of typesetting, this form is now used less, but we can learn a lot, convenient to express different styles can be useful.

While the distance is the first element of the paragraph distinction, then we first solve the problem of the style of the interval. That is, for a while, each of our segments is made up of a group of <p></p>, and our CSS can achieve the desired effect by simply describing the paragraph tag. So the basic form is:

p {Here is the style description content}

We noticed that in CSS this paragraph label doesn't need to be bracketed, just a "p" is OK. All the labels are handled like this. So we need to set a paragraph spacing for each paragraph, here we have two description attributes, one is padding, the other is margin, the effects of these two representations look a bit like, but there is an essential difference, if we express the paragraph as a box, there is something in the box, Padding is the distance between these things and the inside side of the box, while the margin is the distance between the box and the box. It's obvious here that we should be using margin. The writing is: Margin:1em 0; This is a shorthand method, if the whole should be: margin-top:1em; margin-right:0; Margin-bottom:1em;  margin-left:0; This is obviously too redundant, so generally we are written as: Margin:1em 0 1em 0; The order here is the upper right and lower left, because the upper and lower values are the same, the value is the same, then can be abbreviated as: Margin:1em 0; Here the EM refers to the relative length unit, relative to the font size of the text within the current object. Have knowledge about the unit please refer to Shensu rain prepared "CSS2.0 Chinese Handbook". So 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 text content, then if we use PX to set the segment distance then when the font magnification period is not changed, So when you zoom in to a certain value, the characteristic of the distance does not exist. So we use EM this unit, which means that when the font becomes larger, the time interval is correspondingly larger, which is easy to identify.

It is noteworthy here that when we use margin, the margin between the two paragraphs overlaps, so looking at the right side of the graph, we can see that the margin between the two segments is overlapping, the result of the two heights being added or a height, But the schematic in the middle of the diagram padding does not overlap their height is added, this is 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 that the distance will naturally speak of line spacing, have seen "one of the web design techniques of text typesetting" friends will understand the importance of spacing, then you have to set their own page spacing, how is set? There is a special attribute for setting line spacing: line-height, this should be called row height. Because we want to set the height of a row, not the distance between the line and the line. That's why we've always found that the data in Photoshop is not the same as the number of pages set. But the line spacing can still be generated by the row heights we set, so the method is different, but the goal is the same. Our line height must be more than the font height, otherwise the line and row will overlap, of course, we do not rule out the use of this type to do some special effects, but at least in the reading text we need to clear the line. Spacing should not be too big, too big reading efficiency is not high, if too small and easy to read wrong line. Therefore the general row height should not exceed two words height. The most commonly used is the 1.6em~1.8em between, if the width is large, we need to increase the line spacing or we can easily read the wrong row, if the width of a small space when the spacing is too large to lose the efficiency of reading. So let's add the CSS of the paragraph just now and mark our line spacing:

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

This is done for a basic paragraph setting, and if you need to add a first line indent to the paragraph, you can also set the font, word size, Word style, color, and so on for this paragraph:

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

The properties of the font are also abbreviated in the Order of: "Font:font-style | | Font-variant | | Font-weight | | Font-size | | Line-height | | Font-family ", these knowledge in Shensu Drizzle's CSS2.0 Chinese handbook all has the narration. I'm not going to repeat it here. Here the color is the colour of the text, #后面的数值应该是6位, you can directly copy the values in the Photoshop pickup board. But we also often abbreviate. The abbreviation is that the odd bit and the value of an even digit can be merged into a 3-bit color value. For example: #4488cc, can be abbreviated as #48c, if you need the first highlight, then not only need to set text-indent value to negative, you need to modify the padding value, Because the highlight is beyond the content area so if the padding area does not have space then these two prominent words can not be displayed. So we're going to give you 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; }

About beautifying Paragraph text first of all, here, the next chapter on the practice of the first word sinking and attention!