简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

Common CSS properties and values_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 12:01:32
Original
1426 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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