CSSフォント

10252 ワード

テキストリンク

font-family

family-nameおよびgeneric-family構成

フォントは複数の

を同時に指定できます.

コンピュータにフォントがインストールされていない場合は、以下のフォントが適用されるため、最後にgeneric-familyフォントを指定する必要があります.

.sans-serif {
      font-family: "Courier New", Helvetica, sans-serif;
    }

family-nameスペースがある場合は引用符で囲んで宣言

|原則として、

最後のgeneric-familyはキーワードであるため、引用符で囲まない

font-size

フォントサイズを指定する属性

.class {
	font-size: keyword | length | initial | inherit ;
}

keyword:medium(デフォルト)、xx-小、x-小、小、大、x-大、xx-大、小、大

length:px、em等固定数値

%:親要素ベースfont-size

font-style/font-weight

font-style:フォントスタイルを指定する

.class {
	font-style: normal | italic | oblique | initial | inherit;
}

normal:font-ホームカテゴリのデフォルト

italic:斜体表示

oblique:斜体表示

font-weight:フォントの太さを指定する

.class {
	font-weight: normal | bold | bolder | lighter | number | initial | inherit ;
}

normal:デフォルト(400)

bold:太字表示(700)

bolder:親より厚い

lighter:親要素より薄い

number:100,200,300,400,500,600,700,800,900(大きいほど厚い)

line-height

.class {
	line-height: normal | number | length | initial | inherit ;
}

normal:ブラウザのデフォルト属性(通常は1.2)

number:font-sizeで設定した数字で拡大・縮小

length:px、em等固定数値

%:font-sizeで設定したパーセンテージ適用

参照

%親要素の%値は継承されません.%で計算されたpx値は

を継承します.

단위없는 숫자 값을 사용하는 것이 가장 좋은 방식

body { font-size: 20px; line-height: 2; }    
/* line-height = 40px; */
p { font-size: 10px; }                                  
/* line-height = 20px; */
body { font-size: 20px; line-height: 200%; }    
/* line-height = 40px; */
p { font-size: 10px; }                                  
/* line-height = 40px; */

vertical-align

인라인 요소に使用される수직 정렬(ブロック内にある)

text-align

인라인 요소に使用される수평 정렬(ブロック内にある)

📝コード#コード#

<style>
    h1 { text-align: center; }
    h3 { text-align: right; }
    p.justify  { text-align: justify; }
    a  { text-align: center; }
</style>

<h1>CSS란</h1>
<h3>위키백과, 우리 모두의 백과사전</h3>
<p class="justify">종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.</p>
<a href='#'>Reference</a>