CSS TIL 01

2021年6月21日に作成された文書1号.
CSSについてご理解いただけました.
(コンテンツが長すぎるため、1つのドキュメントをすべて書き込むことができないため、3つのドキュメントに分けられます.)

CSS

CSSの用途

CSS担当スタイリング

コンテンツの配置と位置(レイアウト設計)

最低のフォント(Typhography)、例えばテキストを強調表示したり下線を引いたりする

基本的な文法を理解しましょう。

CSSの基本コンポーネント

CSS構成:

Selector:タグ、idまたはクラスを選択します.(特定の要素を選択)

宣言ブロック:この要素に適用されるコンテンツをカッコで作成

宣言:要素の内容(色、番号など)に適用
≪属性名｜Attribute Name｜ldap≫:適用する属性を指定します.
属性値:属性に適用する値を入力してスタイルを表します.
*宣言区切り記号:セミコロン(;)使用

CSSファイルの追加

CSSファイルをHTMLファイルに接続する:linkラベル内hrefプロパティで接続

<link rel="stylesheet" href="index.css" />

link:HTMLファイルを他のファイルに関連付ける

rel:接続するファイルのロールまたはフィーチャー

|積層スタイルシート

rel属性追加ファイルの場所

1つのフォルダ内にある場合は、ファイル名

のみを入力します.

ファイルが他のフォルダに存在する場合は、絶対パスまたは相対パスを入力します.

セレクタ

idと命名して造形を適用する

id:スタイルの指定時に1つの名前(#名)のみ指定stylesheet要素の色のみを変更しますか?
h 4要素はラベルです!色を変更するには、タグを選択します.

h4 {
  color: red; /* h4 태그의 색상을 변경 */
}

navigationセクションの下にあるhref要素を正しく選択するには、この領域にidを追加して解析します.

#navigation-title {
  color: red; 
  /* navigation section의 h4만 콕 찝어 */
}

名前をつけるときはできるだけ意味がある
idを持つ要素を選択する場合は<h4>記号を使用します.
idは、1つのドキュメントで1つの要素にのみ使用されます.

スタイルを分類してclassに適用する

class:スタイル(.名)を指定するためにグループ化
同じ機能を持つCSSを複数の要素に適用する
同じクラスをすべての<h4>要素に追加すると、同じスタイルを複数のエンティティに適用できます.
classは#ではなくliを使用して選択します.

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-item {
  text-decoration: underline; 
  /* menu-item 클래스 */
}

idまたはclass名は自由ですが、数字で始まることはできません.

複数のclassを1つのエンティティに適用

複数のクラスを1つの要素にスペースとして適用するクラスの名前を分離

<li class="menu-item selected">Home</li>

エレメントを作成したり、エレメントにスタイルを適用したりする場合は、その名前と用途をよく確認してください.

.selected {
  font-weight: bold;
  color: #009999;
}

id VS Class

選択したドキュメントに同じ値を持つ要素が1つしかない要素を分類(分類)し、特定の要素に名前を付けるには、idclass#を.として選択します.
Written with StackEdit .