CS 02デフォルト属性


1.色


cssでは,色の表現方法はhtmlに色を表示する方法のように3種類ある.
違いは次のとおりです.
<h1 style="color:teal">색상 이름으로 표현된 청록색</h1>
このように要素から属性をロードすると、cssは
<head>
	<meta charset="UTF-8">
	<title>CSS Colors</title>
	<style>
		.blue { color: blue; }
		.green { color: green; }
		.silver { color: silver; }
		.teal { color: teal; }
		.red { color: red; }
	</style>
</head>

<body>

	<h1 class="blue">색상 이름으로 표현된 파란색</h1>
	<h1 class="green">색상 이름으로 표현된 녹색</h1>
	<h1 class="silver">색상 이름으로 표현된 은색</h1>
	<h1 class="teal">색상 이름으로 표현된 청록색</h1>
	<h1 class="red">색상 이름으로 표현된 빨간색</h1>

</body>
これにより、要素に選択者を宣言し、headラベルのstyleラベルに選択者を読み込み、属性を書き込みます.

2.背景属性


background-color

  • HTML要素の背景色(背景色)
  • を設定する.

    background-image

  • HTML要素の背景となる背景画像を設定します.設定背景画像はデフォルト設定であり、HTML要素全体で
  • を繰り返す.

    background-repeat

  • の背景画像を水平方向または垂直方向にのみ繰り返すように設定します.
  • background-repeat: repeat-x; => 水平反復(y=>垂直)*
  • background-position

  • 非重複背景画像の相対位置(相対位置)
  • を設定.
  • %(%)またはピクセル(px)を使用して直接相対位置を指定できます.標準は左上角(左上角)
  • です.
  • 背景-場所で使用可能なキーワードの組合せ
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
  • background-attachment

  • に設定背景画像をこの位置
  • に固定する.
  • 背景にスクロール
  • の上の属性を1行
  • に適用することもできる.
    <style>
    
        body { background: #FFCCCC url("/examples/images/img_man.png") 
        no-repeat left bottom fixed; }
    
    </style>

    3.テキスト


    color

  • テキストの色設定(フォントなし)
  • タグで指定した色属性値は、Webページのすべてのテキスト要素に適用されます.ただし、各要素に別々に指定されたcolor属性値がある場合、その属性値はタグで指定された属性値
  • を上書きします.

    direction

  • テキストの書き込み方向
  • を設定する.
  • デフォルトは左から右へ
  • です.
  • 頃(ltr):左->右
  • 頃(rtl):おお->左
  • letter-spacing

  • テキストの文字間隔
  • を設定します.

    word-spacing

  • テキストの単語間の間隔
  • を設定します.

    text-indent

  • 段落の最初の行をインデントするかどうかを設定します.デフォルトでは
  • はインデントされません.

    text-align

  • テキストの水平位置合わせを設定
  • left, right, center
  • text-decoration

  • テキストで複数の効果
  • を設定または削除する.
  • overline, underline, line-through, none
  • text-装飾属性値がnoneに設定され、リンクが設定されたテキストの下線を削除するために使用されます.

    text-transform

  • テキストの英字の大文字と小文字の設定
  • すべての英字を大文字または小文字に変更
  • 頭文字を大文字
  • に変更できます.
  • uppercase, lowercase, capitalize
  • ハングル
  • には影響しません

    line-height

  • テキストの行間
  • を設定する.

    text-shadow

  • テキストの単純シャドウ効果
  • <head>
    	<meta charset="UTF-8">
    	<title>CSS Text</title>
    	<style>
    		p { text-shadow: 2px 2px lightgray; }
    	</style>
    </head>
    
    <body>
    
    	<h1>text-shadow 속성을 이용한 그림자 효과 설정</h1>
    	<p>텍스트에 간단히 그림자 효과를 줄 수 있습니다!</p>
    
    </body>

    4.フォント


    5.リンク


    6.リスト


    7.テーブル


    8.イメージストライプ