CSS 1をクリア
1.CSSとは
CSSは、積層スタイルシートの略です.CSSは、様々なメディアにおけるHTML要素の表示方法を定義するスタイルシート言語である.
2.CSS構文
選択者{属性名1:属性値1;属性名2:属性値2;...}
p { text-align: center; color : blue; }
3.CSSコメント
コメントは、HTMLドキュメントでコメントを使用するようにCSSで使用できます.
コメントを表示するには、/**/の間に内容を入力します.
4.CSSの適用方法
1)インラインスタイル
HTML要素の内部でstyleプロパティを使用してCSSスタイルを適用する方法.行内スタイルはこの要素にのみ適用されます.
例)
中央揃え.!
中央揃え! 2）内部スタイルシート 内部スタイルシートを使用するには、<style>タグを使用してCSSスタイルをHTMLドキュメントのタグに適用します。 < style> ul { list-style-type: none; color: hotpink; } < /style> 外部スタイルシート 外部で作成されたスタイルシートファイルはです。css拡張子を使用して保存します。スタイルは、スタイルを適用するWebページ<head>タグ<link>タグを使用して外部スタイルシートを含む場合にのみ有効になります。 例) style.css ul{ list-style-type: none; color : blue; } <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外部スタイルシート</title> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <h 2>外部スタイルシート</h 2> <p>css</p>の適用方法 <ul> <li>インラインスタイル</li> <li>内部スタイル</li> <li>外部スタイル</li> </ul> </body> </html>
5.CSSセレクタ
すべての選択者
スタイルをすべての要素に適用します.セレクタ全体を使用して、複数の要素を一度に選択し、スタイルを同時に適用します.
ex) *{margin :0; padding: 0;}
HTML要素セレクタ
特定のタグを使用するすべての要素にスタイルを適用します.
ex) h2 { color :orange;}
idセレクタ
#記号を使用してid属性を持つ要素にスタイルを指定します.
#color { color: blue } /*요소에 관계업이 id가 color인 요소 */
h2#color { color : blue } /* h2 요소에 id가 color인 요소 */
<h2 id="color">안녕하세요.</h2>classセレクタ
特定のグループをクラス、ポイント(.)と呼びます.シンボルを使用して、同じクラス名を持つすべての要素を選択します.
.color {color:blue; } /*요소에 관계없이 class가 color인 요소*/
p.color {color: red;} /*h2요소이며 class가 color인 요소*/
<h2 class="color">안녕하세요.</h2>[グループセレクタ](Group Selector)複数の要素をリストし、カンマ(,)で区切ってスタイルを定義します.
ex) h2,p{text-align : center;}
6.サブセレクタ
親要素の子のすべての要素の選択者を選択します.(すべての子供と子孫を含む)
<body>
<h2>하위 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li>
<a href="https://www.google.co.kr">구글</a>
</li>
<li>
<p>다음</p>
</li>
<li>
<a href="https://www.nate.com">네이트</a>
</li>
</ul>
</body>ul aのa要素の下線(サブ要素とサブ要素を含む)と、ul a要素のサブ要素none}/ul要素の下線を削除します.
サブセレクタ
親要素の子要素のすべての子要素の選択者を選択します.
例)
ul >a{text-decoration: none; }
隣接する兄弟セレクタ
同じ親要素を持つ子要素間の関係.
相前後関係は兄弟関係であり、これは先に現れた要素-->後に現れた要素を意味する.
ex)
a + li { color: red;}/a要素の兄弟に続く兄弟要素がliである場合は、選択/
一般的な兄弟選択者
これは、兄弟関係を持つ要素からタイプ要素を除いたすべての兄弟要素を選択することを意味します.
ex)
a ~ li {color : red;}/a要素の兄弟から次のすべての兄弟li要素を選択することを示します.
10.属性セレクタ
htmlタグでsrc、href、style、type...プロパティは、たとえば選択者として指定できます.
=(等しい)記号を中心に、~などの特殊文字を組み合わせてタイプを分けます.
<img src="apple.jpg">
------ ---- -----
요소 속성 속성값{属性名="属性値"}=属性名と属性値の選択
{属性名~="属性値"}属性値が完全に一致する要素を選択
{属性名*="属性値"}=属性値を含むすべての文字の要素を選択
{属性名^=「属性値」}=接頭辞で始まる属性値を持つすべての文字の要素を選択
{属性名="属性値"}=属性値が接頭辞から始まる文字に完全に一致する文字または"
関連文字を持つ要素の選択
{属性名$="属性値"}=属性値を接尾辞で終わるすべての文字の要素を選択
Reference
この問題について(CSS 1をクリア), 我々は、より多くの情報をここで見つけました https://velog.io/@zlor26/CSS-정리-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol