検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >共通の CSS プロパティと値_html/css_WEB-ITnose

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

WBOY
WBOYオリジナル
2016-06-24 12:01:321449ブラウズ

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

1. フォント 

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

実行結果:


2.

りー

ランニング結果:



3. 背景

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

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

実行結果:



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

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

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

実行結果:



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