ホームページ > 記事 > ウェブフロントエンド > 共通の CSS プロパティと値_html/css_WEB-ITnose
共通の CSS プロパティと値_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:01:321428ブラウズ
高解像度の画像をダウンロード: 一般的な 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 つの境界線の上を移動すると、マウス ポインターがそれぞれ次のように変化します。 . 移動、待機、手が小さい状態になります。詳細については、