今日学んだいくつかのフォントcss属性

1791 ワード

html css テストクラス border

1、font-variant、オブジェクトのテキストが小さな大文字であるかどうかを設定または取得します.
デフォルトのプロパティ値はnormalで、通常のフォントです.
属性値はsmall-capsで、小型の大文字フォントです.
次のテスト例を示します.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title> New Document </title>
</head>
<style type="text/css">
	.dv{
		font-variant:small-caps;
	}
</style>
<body>
<div class='dv'>
	My Name is John!
</div>
</body>
</html>

2、text-decoration属性、文字の装飾を設定するため、
デフォルトのプロパティ値はnoneで、装飾がないことを示します.
属性値がunderlineの場合、文字の下に下線があります.
属性値がoverlineの場合、文字の上面に上線が引かれます.
属性値がline-throughの場合、文字の間に貫通線があります.
次はtext-decorationの例です.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title> New Document </title>
</head>
<style type="text/css">
	.underlineDv{
		border:1px solid red;
		text-decoration:underline;
	}
	.overlineDv{
		border:1px solid red;
		text-decoration:overline;
	}
	.lineThroughDv{
		border:1px solid red;
		text-decoration:line-through;
	}
</style>
<body>
<div class='underlineDv'>
	   ,   ,   ,   ,   ,   
</div>
<br />
<div class="lineThroughDv">
	   ,   ,   ,   ,   ,   ,
</div>
<br />
<div class='overlineDv'>
	  ,  ,  ,  ,  ,  ,  ,  ,
</div>
</body>
</html>

cssのロードが完了すると、ページにcssまたはjsファイルが追加されているかどうかを自動的に判断します.

CSSでのbox-shaowの使い方のチュートリアル