共通の CSS プロパティと値_html/css_WEB-ITnose

高解像度の画像をダウンロード: 一般的な CSS 属性と値 (マインド マップの概要)

1. フォント

						<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>								<h1>this is header one</h1>				<h2>this is header two</h2>				<p>this is a paragraph </p>		

実行結果:

2.

りー

ランニング結果:

3. 背景

ブロガーは背景素材を見つけるのが面倒だったので、実行した後、見た目には醜いものになりましたが、重要な点は、対応する効果に注意してください。コード。

						<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>								<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>		

実行結果:

このスクリーンショットは少し汚く見えますが、コードに基づいてエフェクトを見つけるのも非常に高速です。各コードの意味を理解するのは簡単です。 URLは何気なく追加したパスなので気にする必要はありません。

4. 境界線 (PS: マウス ポインターに関するコードを数行追加します)

						<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>								<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>					

実行結果:

マウスが 3 つの境界線の上を移動すると、マウス ポインターがそれぞれ次のように変化します。 . 移動、待機、手が小さい状態になります。詳細については、

5. リスト

						<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>								<div>						aaaaaa				</div>				<h1>this is header one</h1>				<h2>this is header two</h2>		

実行結果:

スクリーンショットに示されている 2 つのリストは、それぞれ順序なしリストと順序付きリストです。

ただし、将来の開発では、基本的にデフォルトの画像ではなく、カスタム リストの先頭にある画像を使用する予定です。 style="list-style-type:none。このコードはリストの前のシンボル スタイルを空に設定し、必要な画像を追加できます。

document.body.oncopy=function( ){

event .returnValue=false;

var t=document.selection.createRange().text;
l4ever =parent.document.location;
var s=”この記事の出典: 李朔のコラム”;
var y= "元のアドレス:" + http://blog.csdn.net/wzqnls + ";
ClipboardData.setData('Text',"+t+'rn'+s+'rn'+y+");
}