css| Tips <! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html;charset=iso-8859-1 "/><style type=" Text/css "><!--p {font:11px Verdana, Geneva, Arial, Helvetica, sans-serif;line-height:2.0; Transform {text-transform:capitalize;} --></style></pead><body><p>lorem ipsum dolor sit amet, consectetuer adipiscing. Crasest Magna, Pretium sit amet, rhoncus nec, Tristique Molestie, Leo. Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid Velit. Vestibulum ante ipsum primis in Faucibus orci luctus-etultrices posuere Cubilia; CRAs ullamcorper. Donec nunc.</p><p class= "transform" >lorem ipsum sit dolor, Amet consectetueradipiscing. CRAs est magna, pretium sit amet, Rhoncus nec,tristique Molestie, Leo. Aenean TortOr SEM, luctus at, Luctus Vel,consequat et, lectus. Proin ID velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere; Crasullamcorper. Donec nunc.</p></body></ptml>
program code text-transform:capitalize; This style only uses when we use in English website, other foreign English website likes to use the font is Arial 11px, row height is 1.8em
2. Horizontal Center Technique (center)
HTML code <! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html;charset=iso-8859-1 "/><style type=" Text/css "><!--p {font:11px Verdana, Geneva, Arial, Helvetica, sans-serif;line-height:2.0; centered {text-align:center;} --></style></pead><body><p>lorem ipsum dolor sit amet, consectetuer adipiscing. Crasest Magna, Pretium sit amet, rhoncus nec, Tristique Molestie, Leo. Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid Velit. Vestibulum ante ipsum primis in Faucibus orci luctus-etultrices posuere Cubilia; CRAs ullamcorper. Donec nunc.</p><p class= "centered" >lorem ipsum sit dolor, Amet consectetueradipiscing. CRAs est magna, pretium sit amet, Rhoncus nec,tristique Molestie, Leo. Aenean tortor SEM, LuCTUs at, Luctus Vel,consequat et, lectus. Proin ID velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere; Crasullamcorper. Donec nunc.</p></body></ptml>
Program Code Center is also what we often use in the definition style: text-align:center, not only can inline element Center also can block-level elements, such as we in the page layout, the use of the body definition in the center and then define the wrap left is the use of this knowledge point, Because IE5 is not supported by Margin:auto, you will see this compatible IE5 method in the page.
3. Title with background color (headingcolor)
HTML code <textarea id="temp43235" rows="8"><! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html;charset=iso-8859-1 "/><style type=" text/css "><!--body {font:12px Verdana, Geneva, Arial, Helvetica, Sans-serif; H1 {background-color: #ADD8E6; color: #256579; font:18px Verdana,geneva, Arial, Helvetica, Sans-serif; padding:2px;} --></style></pead><body><p>this is a level one heading</p><p>these stuffed Peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also</textarea> go down the as part of a buffet andeven children seem to like them.</p></body></ptml>
Program code
We all know that H1~h6 is used for the title, so in the production of web pages must be more use of semantic elements, a few days ago to see as if opera its description page footer of the department is used < address> this label, and we usually define style is this: <div class = "Address" >text</div>, we rarely want to use <address> such a semantic label! Let's talk about the topic, in order to beautify the title we added a background color and the color of the word, so that looks much more beautiful! For the title on the internet there are related articles tutorials please search online, not here to repeat.
4. Title Spacing (headingnospace)
HTML code <textarea id="temp24672" rows="8"><! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html;charset=iso-8859-1 "/><style type=" text/css "><!--body {font:12px Verdana, Geneva, Arial, Helvetica, Sans-serif; H1 {font:18px Verdana, Geneva, Arial, Helvetica, Sans-serif;margin-bottom: -12px;} --></style></pead><body><p>this is a level one heading</p><p>these stuffed Peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also</textarea> go down the as part of a buffet andeven children seem to like them.</p></body></ptml>
Program code
Margin-bottom: -12px; note here used a negative, usually do not think of the Web page with negative values, did not see this method was previously set a H1 top margin or filler, the bottom of the P-boundary filler set to 0 so P is very close to H1, a recall that this method is really bad, It seems to be the way to change the negative boundary in the future!
5 underline in the title (Headingunderline)
HTML code <textarea id="temp6918" rows="8"><! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html;charset=iso-8859-1 "/><style type=" text/css "><!--body {font:12px Verdana, Geneva, Arial, Helvetica, Sans-serif; H1 {font:18px Verdana, Geneva, Arial, Helvetica, Sans-serif;text-decoration:underline;} --></style></pead><body><p>this is a level one heading</p><p>these stuffed Peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also</textarea> go down the as part of a buffet andeven children seem to like them.</p></body></ptml>
Program code when you see an effect chart, we usually think of adding <span> tags in <H1> and defining the bottom border of span, but the author does not follow this thinking, it defines the text decoration, the same effect in the simplest way, This is the final requirement that we write the code person! In addition, we define H1 as inline elements in the definition of the border can also achieve the effect, but still not as simple as the author's code!
6. Underline 2 (Headingunderline2) in the title
HTML code <textarea id="temp33622" rows="8"><! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html;charset=iso-8859-1 "/><style type=" text/css "><!--body {font:12px Verdana, Geneva, Arial, Helvetica, Sans-serif; H1 {font:18px Verdana, Geneva, Arial, Helvetica, Sans-serif; padding:2px; border-bottom:1px solid #aaaaaa;} --></style></pead><body><p>this is a level one heading</p><p>these stuffed Peppers are lovely as a starter, or as a sidedish for a Chinese meal. They also</textarea> go down the as part of a buffet andeven children seem to like them.</p></body></ptml>
Program code
The code is very simple, do not say more. In writing code, the most complex code is composed of the simplest code, so must master the most basic things!
7. Eye-catching writing (Hilite)
HTML code <textarea id="temp53512" rows="8"><! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html;charset=iso-8859-1 "/><style type=" text/css "><!--body {font:12px Verdana, Geneva, Arial, Helvetica, Sans-serif; Hilite {background-color: #FFFFCC; color: #B22222;} --></style></pead><body><p>these <span class= "Hilite" >stuffed Peppers</span >are Lovely as a starter, or as a side dish for a Chinese meal. Theyalso</textarea> go down the as part of a buffet and even children seem to likethem.</p></body></ptml>
Program code
"Eye-catching is to arouse the attention of visitors, the use of the background color, text color differences in the way, everywhere, but in the domestic more in the font bold, color highlighting for the mainstream." ”
8. Whole text indent
HTML code <! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html;charset=iso-8859-1 "/><style type=" Text/css "><!--p {font:11px Verdana, Geneva, Arial, Helvetica, sans-serif;line-height:2.0; indent {padding-left:30px;} --></style></pead><body><p>lorem ipsum dolor sit amet, consectetuer adipiscing. Crasest Magna, Pretium sit amet, rhoncus nec, Tristique Molestie, Leo. Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid Velit. Vestibulum ante ipsum primis in Faucibus orci luctus-etultrices posuere Cubilia; CRAs ullamcorper. Donec nunc.</p><p class= "indent" >lorem ipsum sit dolor, Amet consectetueradipiscing. CRAs est magna, pretium sit amet, Rhoncus nec,tristique Molestie, Leo. Aenean tortor sem, luctus At, Luctus Vel,consequat et, lectus. Proin ID velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere; Crasullamcorper. Donec nunc.</p></body></ptml>
The program code uses a style text-indent:2em in a single line indent on a Chinese web page; that is, 2 fonts are high, then the Chinese writing habit is empty two, and English is rarely used. When using the whole indent we use padding-left:30px, which is left padding 30 pixels, Although this style is very simple, but very useful, for example: We in the layout of many people like to use Huck technology, for this technology I study very little, so also use less, because in the future after the upgrade they may be ineffective. So I use the workaround, in the HTML, we all know IE5 and IE6 very different is the width of the understanding of different, some people like to use voice-family: ""}\ ""; Voice-family:inherit; or some other way, here's a few examples, the method that I use, that is, the method that should be advocated is to write a width of the parent element without adding filler, and add these attributes to the child elements, such as p in the child element, we add the padding in p to be a numeric value. This will close the IE5 and IE6 between the width of the problem!
9. Text justified (justify)
HTML code <textarea id="temp19736" rows="8"><! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html;charset=iso-8859-1 "/><style type=" Text/css "><!--p {text-align: Justify; font:11px Verdana, Geneva, Arial, Helvetica,sans-serif; line-height:2.0;} --></style></pead><body><p>lorem ipsum dolor sit amet, consectetuer adipiscing. Crasest Magna, Pretium sit amet, rhoncus nec, Tristique Molestie, Leo. Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid Velit. Vestibulum ante ipsum primis in Faucibus orci luctus-etultrices posuere Cubilia; CRAs ullamcorper. Donec nunc.</p></body></ptml></textarea>
Program code
The two-aligned style works only in English, and the customer says that there is a lot of blank space on the right side of the page for the customer, (because an English word is not a line in the bank.) You might think of a forced-wrap problem, but a word might break into two words, which would make the user's readability drop, and the other is that IE has a newline style, and FF can only use JavaScript to achieve it. ), it is very beautiful, so add this style after the visual on the much more beautiful!
10. The style in the link (linktypes)
HTML code <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html; Charset=iso-8859-1 "/><style type=" text/css "><!--a:link, a:visited {text-decoration:underline;color: # 6a5acd;background-color:transparent;} A:hover, a:active {text-decoration:underline overline;color: #191970; Background-color: #C9C3ED;}. boxout {color: #FFFFFF; Background-color: #6A5ACD;}. Boxout a:link,. Boxout a:visited {text-decoration:underline;color: #E4E2F6; background-color:transparent;}. Boxout a:hover,. Boxout a:active {background-color: #C9C3ED; color: #191970;} --></style></pead><body><div class= "Boxout" ><p>visit out <a href= "store.html" >online Store</a>, for all yourwidget needs.</p></div><ul><li><a href= "#" > This is a link</A></li><li><a href= "#" >link two</a></li><li><a href= "#" >Link Three </a></li><li><a href= "#" >link four</a></li></ul></body></ptml >
Program code
Read this title, you will certainly say a link has what good discussion? In fact, learn CSS on the one hand to learn knowledge, on the other hand to organize their previous wrong ideas. Let's go on to the theme! Linked styles A total of four kinds of a:link, a:visited, a:hover, a:active they should be in order in the write application, so in order to facilitate the memory of someone wrote LVHA this "word", but I remember in which the book seems to have seen only a:hover in a: The active is to be used before. So all I can remember is the word "HA". We set the total link style as the page has different links, we apply the characteristics of the style sheet: "Overlap" in the text added a class. The style can be defined. Boxout A, in my words, is the Class A, and then we can define the style according to our request. Here Text-decoration:underline overline; This is the first time I have seen, should pay attention to this usage.
11. List picture (ListImage)
HTML code <textarea id="temp68870" rows="8"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html; Charset=iso-8859-1 "/><link rel=" stylesheet "type=" Text/css "href=" listimage.css "/><style type=" text/ CSS "><!--ul {list-style-image:url (/attachments/month_0611/t20061114134250.gif);} --></style></pead><body><ul><li>list Item One</li><li>list Item Two </li><li>list Item three</li></ul></body></ptml></textarea>
Program code List-style-image This method is rarely used, mainly because its flexibility is not very easy to control the location of the picture, so in the actual more than the background image replaced.
12. List in line (Listinline)
HTML code <textarea id="temp21209" rows="8"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html; Charset=iso-8859-1 "/><style type=" text/css "><!--ul.horiz li {display:inline;} --></style></pead><body><ul class= "Horiz" ><li>list item one</li><li> List item Two</li><li>list Item three</li></ul></body></ptml></textarea>
Program code Display:inline, it is very useful, you can make an element inline elements, in the removal of IE margin doubling problem We also use this style. We are doing the menu of commonly used list elements, to define one of Li is to use float, the other is now used display:inline; about the list there are a lot of content, later in the supplement!
13. List of no list symbols (Listnomargin)
HTML code <textarea id="temp64193" rows="8"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html; Charset=iso-8859-1 "/><style type=" Text/css "><!--ul {list-style-type:none;padding-left:0;margin-left: 0;} --></style></pead><body><ul><li>list Item One</li><li>list Item Two </li><li>list Item three</li></ul></body></ptml></textarea>
Program code
Do you know why the padding-left:0;margin-left:0 is used here? Because the default style in Ie,ff is different, a default has a boundary, a default has filler, so in order to display the same, we define a unified style, in many page styles you can also see the *{padding:0;margin:0;} This is mainly to avoid unnecessary trouble to first define a style! List-style-type: There are other attributes such as square; however, the actual application, the size of the table symbol is not easy to control, it is related to the font, size, so many cases using a point of the symbol, NetEase first page on the use of this method, there is the use of background pictures. Background picture can be controlled strongly.
14. Letter Capitalization question (Listnomargin)
HTML code <! doctypehtml Public "-//w3c//dtd XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><title>chapter 2</title><meta http-equiv= " Content-type "content=" text/html;charset=iso-8859-1 "/><style type=" Text/css "><!--p {font:11px Verdana, Geneva, Arial, Helvetica, sans-serif;line-height:2.0; Transform {text-transform:uppercase;} --></style></pead><body><p>lorem ipsum dolor sit amet, consectetuer adipiscing. Crasest Magna, Pretium sit amet, rhoncus nec, Tristique Molestie, Leo. Aenean tortor sem, luctus at, luctus vel, consequat et, lectus. Proinid Velit. Vestibulum ante ipsum primis in Faucibus orci luctus-etultrices posuere Cubilia; CRAs ullamcorper. Donec nunc.</p><p class= "transform" >lorem ipsum sit dolor, Amet consectetueradipiscing. CRAs est magna, pretium sit amet, Rhoncus nec,tristique Molestie, Leo. Aenean TortoR SEM, luctus at, Luctus Vel,consequat et, lectus. Proin ID velit. Vestibulum ante ipsum primis infaucibus orci luctus et ultrices posuere; Crasullamcorper. Donec nunc.</p></body></ptml>
Program code
Text-transform:uppercase This approach allows us to convert lowercase letters to uppercase letters without having to write uppercase in HTML and using styles.
