TIL 12 | CSS - Basic

6650 ワード
TIL CSS WeCode 上のコード テキストリンク

CSSの基礎


なぜスタイルを使うのですか?


Webドキュメントでは、HTMLドキュメントでよく使用されるフォントや色、位置合わせ、要素の配置など、ドキュメントの外観を決定する方法を指します.

1.ウェブページの内容にかかわらず、デザインを変えるしかない。


HTMLでWebサイトの内容をリストし、CSSでWebドキュメントの設計を組織する考えがWeb標準の始まりです.このようにコンテンツとデザインが分かれている場合は、内容を修正してもデザインに影響を与えないので便利です.

2.異なる機器によって弾性変化の文書を生成することができる。


既存のHTMLドキュメントは、その出力方式に従ってドキュメントを適時に個別に作成する必要があるが、CSSを使用する場合は、HTMLで作成されたコンテンツを保持し、ターゲットデバイスのみに基づいてCSSを変更し、複数のデバイスで同じコンテンツを表示することができる.このように、さまざまなWebドキュメントを個別に作成するのではなく、1つのWebドキュメントで作業させるのがスタイルの役割です.

スタイルシート



スタイルシートは、Webブラウザが作成したブラウザのデフォルトスタイルと、サイト作成者が作成したユーザースタイルに大きく分けることができます.

ユーザースタイル


インラインスタイル


スタイルシートを使用せずにスタイルを適用するオブジェクトに簡単なスタイル情報を直接表示する方法を、ライン内スタイルと呼びます.
<p style="color : red;"> 빨간색 </p>

内部スタイルシート


Webドキュメントで使用するスタイルを同じドキュメントにまとめることを内部スタイルシートと呼びます.すべてのスタイル情報はheadラベルで定義され、styleラベル間で作成されます.
<head>
  <style>
    h1 {
    padding : 5px;
    background-color : red;
    color : white;
    }
  </style>
</head>
<body>
  <h1>내부 스타일 시트</h1>

外部スタイルシート


複数のWebドキュメントで使用するスタイルを個別のファイルとして保存し、インポートと使用方法を使用する場合は、個別に保存したスタイル情報を外部スタイルシートと呼び、.cssというファイル拡張子を使用します.
//CSS 파일
h1 {
	padding : 5px;
    background-color : red;
    color : white;
    }
//HTML 파일
//외부 스타일 시트를 연결할 때 사용하는 <link>태그
<link rel = "stylesheet" href = "css/style.css">

CSSプリファレンス


すべての選択者

*{ margin:0; }-文書内のすべての要素にスタイルを適用します.

タイプセレクタ

p { font-style : italic; }-スタイルは、特定のタグを使用するすべての要素に適用されます.

クラスセレクタ

.bg { background-color : #ddd; }-特定の部分のみを選択し、ドキュメントに複数回適用します.ピリオド(.)使用します.

idセレクタ

#container { width : 500px }-特定の部分のみを選択してドキュメントに1回適用します.#使用

グループセレクタ

h1, h2 { text-align : center; }-複数の要素に同じスタイルを適用します.

スタイルの優先順位


重要度

사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일

適用範囲


スタイルの適用範囲が小さいほど、必要な要素のスタイルにのみ適用され、優先度が高くなります.!important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일

ソース作成順序


後で作成したスタイルは、以前に作成したスタイルを上書きします.

ラベルと要素の違いは何ですか?


名前の通り、タグは指標記そのものであり、要素はタグを適用したことを指す.
<p>텍스트 단락</p>
このソースでは、<p>および</p>タグはタグそのものを表し、タグを含めて<p>タグを適用する「テキスト段落」部分をp要素と呼ぶ.したがって、<p>ラベルを使用するスタイルは、ラベル自体を適用するスタイルではないので、誤った言い方である.p要素に適したスタイルで表現するのが正しい.
TIL 12 day
全体の内容を見てからTILを書こうと思っていたのですが、CSは思ったより理解しなければならない内容が多く、何日もTILを書いていませんでした.
これからは毎日復習と学習内容の整理で行います.😭
Flex FAQ
Emoji表情処理のピット