基礎文法の整理
CSS(Cascading style Sheets)
💡 CSSは、ブラウザにHTML内の各要素のスタイルを定義し、画面に表示する方法を説明するために作成された言語です.
CSSの構文はセレクタと宣言で構成されています.
セレクタ-CSSを適用するHTML要素(element)
宣言-セミコロン(;)区切られた形で含まれ、カッコ({})を使用して領域全体を囲みます.
宣言方法
インライン
HTML要素(タグ)のスタイル属性に直接作成する方法
<body>
<p style="width:100px; height:100px; margin:5px;">
</body>HTMLでの合成方法
<head>
<style type="text/css">
.logo {
color: #22a2a2a;
width:100px;
height:100px;
}
</style>
</head>HTMLを使用して外部ドキュメントからCSSをロードおよび適用する方法
<head>
<link href="./style.css" rel="stylesheet" type="text/css">
</head>
CSS@importはCSSを外部ドキュメントにロードして適用します.
<head>
<style type="text/css">
@import url(style.css);
</style>
</head>選択者
HTML要素セレクタ
HTML要素の名前を直接使用して、CSSを適用するターゲットを選択できます.
<style>
h2 { color: teal; text-decoration: underline; }
</style>
...
<body>
<h2>이 부분에 스타일을 적용합니다.</h2>
</body>
アイデンティティーセレクタは、CSSを適用する特定の要素を選択します.[#分割]
<style>
#heading { color: teal; text-decoration: line-through; }
</style>
...
<body>
<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>
</body>クラスセレクタ
クラスセレクタは、特定のセット内の複数の要素を一度に選択するために使用されます.
<head>
<meta charset="UTF-8">
<title>CSS Syntax</title>
<style>
.head{
color: lime;
text-decoration: overline;
}
</style>
</head>
<body>
<h1>클래스 선택자를 이용한 선택</h1>
<h2 class="head">이 부분에 스타일을 적용합니다.</h2>
<h3 class="head">이 부분에도 같은 스타일을 적용합니다.</h3>
</body>
スタイル適用の優先度
http://tcpschool.com/css/css_intro_syntax
Reference
この問題について(基礎文法の整理), 我々は、より多くの情報をここで見つけました https://velog.io/@lucy_leee/기초-문법-정리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol