CSSベース(2)

📝 テキストに関連するスタイル
📌 フォントスタイル

font-ファミリープロパティ

フォント

を指定

Webドキュメントで使用するフォントを指定します.

Webドキュメントでフォントを指定する場合は、フォントが指定されていないことを防ぐために、3番目のフォントを指定します.

で継承されているため、bodyラベルスタイルでドキュメント内のすべての要素に適用されるように定義されます.
:他のフォントを使用する場合は、タグスタイルまたはクラススタイルを使用して要素に他のフォントを定義します.

@font-faceプロパティ

ページフォント

を使用

ページフォントとは、ページドキュメントを作成する際に、フォント情報を一緒にページドキュメントに保存し、ユーザがページドキュメントにログインすると、フォントをユーザシステムにダウンロードする方式である.

ソースコピー

@import

コピーしたソースをWebドキュメントのスタイルラベル

に貼り付ける.
使用するエレメントにフォント名

を使用

<style>
    @import url('폰트 소스 붙여넣기');
    .폰트이름 {
        font-family: '폰트이름', 돋움;
    }
    p {
        font-size: 30px
    }
</style>

<p class="폰트이름">웹 폰트 사용법</p>

<style>
	@font-face {
    	font-family: 글꼴 이름;
        src: url(글꼴 파일 경로) format(파일유형);
    }
</style>
/* 속성 지정 시 사용자 시스템에서 먼저 찾고 없다면 eot,woff,ttf 파일 순으로 적용 */

- 직접 업로드한 웹 폰트 적용법

🌟 font-sizeプロパティ

文字サイズ

を調整

font-size: <절대 크기> | <상대 크기> | < 크기 > | < 백분율 >

プロパティ値の説明<絶対サイズ>ブラウザで指定したサイズのxx-小、x-小、小、中、大、x-大、xx-大を使用します.<相対サイズ>親要素のfont-sizeに対して、より大きい値またはより小さい値を使用します.<サイズ>ブラウザに関係なく、テキストのサイズを直接指定します.<パーセント>親要素の番号に基づいて、対応するパーセントを計算して表示します.(%記号付き記号)

- 사용하는 속성 값

表示単位説明emは、フォント大文字Mの幅に応じてサイズexx-heightを調整し、フォント小文字xの高さに応じてサイズpxディスプレイの相対サイズptを調整する通常のドキュメントで使用される単位

- 사용 표시 단위

px単位の使用フォントサイズは固定されているので、モバイルデバイスに表示されるフォントサイズは画面に表示されるフォントサイズと同じであり、モバイルデバイス接続を考慮するとem単位が望ましい.

🌟 font-weightプロパティ

文字太字

を指定

太字、軽量、太字:太字、元の太字より細い、元の太字より太い

100~900の間の数値も決められます.
(400は正常値、700はbold)

font-variantプロパティ

小大文字で

を表示

小大文字は、小文字の大きさに応じて大文字を小さくします.

にはnormal、short-caps属性値があります.

font-styleプロパティ

フォントスタイル

を指定

斜体、斜体:斜体表示

フォントのプロパティ

フォント属性パケット表示

📌 テキストスタイル

色のプロパティ

文字の色を指定

🌟 text-装飾プロパティ

テキストの行の表示/削除
属性値説明none下線X下線下線下線下線超出線領域上の線-通過領域(削除線)表示

.

🌟 text-transformプロパティ
変換

テキスト大文字と小文字
属性値説明none変換X大文字を大文字に変換すべての大文字を大文字に変換すべての小文字を小文字に変換全幅に変換可能なすべての文字を前角文字

に変換

text-shadowプロパティ

テキストにシャドウエフェクトを追加

none|<横距離><縦距離><広がり度><色>

ホワイトスペースのプロパティ

スペースの処理
属性値説明nowrapは複数のスペースを1つ、nowrapは複数のスペースを1つ、改行Xpreは複数のスペースを1つ、自動改行pre-wrapは複数のスペースを1つ、自動改行

アルファベット間隔/word-spacingプロパティ

テキスト間隔

を調整する.

アルファベットピッチは単語ピッチ、単語ピッチは単語ピッチ

である.

文字-スペース属性を使用して文字間隔を調整します.

📌 文壇の風格.

方向プロパティ

書く方向を指定する

.

ltr:左から右、デフォルト

rtl : right to left

🌟 text-alignプロパティ

テキストの整列
属性値は、startが現在のテキスト行の開始位置に整列する終了と、現在のテキスト行の終了位置に整列する左揃え右揃え中心が中央揃えで、両側がmatch-parent親要素に整列する

であることを示します.

text-dification/text-dinject/line-height/text-overflowプロパティ

テキスト-prevident:整列時のスペースの調整

テキスト-prevident:auto|none|inter-word(ワード間スペース調整)|distribute(隣接文字間のスペースは同じ)

text-インデント:テキストインデント

テキスト-インデント:<サイズ>(単位でサイズを指定)|<パーセンテージ>(親要素の幅に基づいて相対サイズを指定)

行-高さ:行間隔の調整

行-高さ:通常|<数値>|<サイズ>|<パーセンテージ>|継承

text-overflow:オーバーフローテキストのタグ付け

text-overflow:clip(オーバーフローテキストはカット)|省略記号(カットテキストをサムネイルで表示)

text-overflowプロパティは、要素にオーバーフロープロパティ値を非表示にする場合、またはスクロール、auto、スペース:nowrapプロパティを同時に使用する場合にのみ適用されます.

📌 リストスタイル

List-style-typeプロパティ

リストの箇条書きと番号付けスタイル

を指定します.

List-style-imageプロパティ

ブリット

の代わりに画像を使用

list-style-image : <이미지> | none
<이미지> = url(이미지 파일 경로)

List-style-positionプロパティ

リストの効果

inner:記号や数字を奥に書きます.

outside:記号または数字を外に書きます.デフォルト値

List-styleプロパティ
同時に

リスト属性

を表示する.