Home >Web Front-end >HTML Tutorial >Common CSS properties and values_html/css_WEB-ITnose
Common CSS properties and values_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:01:321453browse
Download high-resolution images: css common attributes and values (mind map summary)
1. Font
<html> <head> <title>font</title> <style> h1{ font-family:times,courter; font-size:150% font-style:italic; font-variant:normal; font-weight:normal; } h2{ font-family:serif,times; font-size:1cm; font-style:normal; font-variant:small-caps; font-weight:900; } p{ font:oblique small-caps bold 1cm sans-serif; } </style> </head> <body> <h1>this is header one</h1> <h2>this is header two</h2> <p>this is a paragraph </p> </body></html> Running results:
2. Text
<html> <head> <title>text</title> <style> h1{ letter-spacing:-3px; text-align:right; text-decoration:overline; } h2{ letter-spacing:0.5cm; text-align:center; text-decoration:line-through; } p{ text-align:left; text-decoration:underline; text-indent:1cm; text-transform:lowercase; } a{ /*去掉链接下划线*/ text-decoration:none; text-indent:0.8cm; text-transform:uppercase; } </style> </head> <body> <h1>this is header one</h1> <h2>this is header two</h2> <p>this is a paragraph </p> <a href="http://www.baidu.com">baidu</a> </body></html> Running results:
3. Background
Because the blogger was too lazy to find the background material, after running it, it was ugly to the eye, but there is nothing wrong with the key points. Please pay attention to the code. The corresponding effect is just fine.
<html> <head> <title>background</title> <style> body{ background-color:yellow; background-image:url(a.png); background-repeat:repeat; background-attachment:fixed; } h1{ background-color:green; background-image:url(bb.png); background-repeat:repeat-x; background-position:bottom; } h2{ background-color:blue; } p{ background-image:url(bb.png); background-repeat:no-repeat; height:100px; background-position:center; } a{ background:red url(bb.png) no-repeat left center; padding:10px; }b </style> </head> <body> <h1>this is header one</h1> <h2>this is header two</h2> <p>this is a paragraph </p> <a href="http://www.baidu.com">aaaaaaaaaaaaaaaaa</a> </body></html> Running results:
This screenshot looks a bit messy, but according to the code The results are found very quickly. It is easy to understand the meaning of each code. The url is the path you add casually, so you don’t need to worry about it.
4. Border (PS: Add a few sentences about the mouse pointer code)
<html> <head> <title>border</title> <style> div{ width:80px; height:25px; border-style:solid dotted; cursor:move; } h1{ border-style:solid double dashed inset; border-top-style:solid; border-right-style:double; border-bottom-style:dashed; border-left-style:inset; border-width:1px 2px 3px 4px; /* 设置边框第二种方式： border-top-width:1px; border-right-width:2px; border-bottom-width:3px; border-left-width:4px; */ border-color:red yellow green blue; cursor:wait; } h2{ border:3px solid green; /*会覆盖上面的border设置*/ border:1px dashed red; cursor:pointer; } </style> </head> <body> <div> aaaaaa </div> <h1>this is header one</h1> <h2>this is header two</h2> </body></html> Running results:
When the mouse moves over the three borders, the mouse pointer will change accordingly: it will become moving, waiting, and small hand states respectively. Please refer to the code in the