HTML/CSS/JS Ch 7

11083 ワード
Week2 0419 テキストリンク

CH07.

기본문법 및 주석
  • 選択者{属性:値;}
    選択者:スタイル(CSS)を適用するセレクタ(Selector)
    属性:「スタイル」(CSS)の「属性」(Properties)
    {}:スタイル範囲の先頭と末尾
    • - HTML
<div>Hello</div>

- CSS
div {
  font-size: 50px;
  color: blue;
  text-decoration: underline;
}

-주석
/**/
    CSS 선언방식
  • 内蔵
    • htmlでスタイルラベルを作成する
    <style>
	div{
    	color: red;
    }
</style}
  • 組み込み
    要素のstyleプロパティに直接スタイルを作成します.
    プログラムが選択されていません
    メンテナンス上の欠点(優先)
    • <div style="color: red;></div>
  • リンク
    • linkラベルを使用して外部cssドキュメントをインポート
    <link rel="stylesheet" href="./css/main.css">

- main.css
div{
	color: red;
}
  • 輸入方式
    CSSドキュメントでは、CSSの@importルールを使用します.
    他のCSSドキュメントのインポートと接続方法
    • 、接続の遅延
    <link rel="stylesheet" href="./css/main.css">

- main.css
@import url(./box.css)
div{
	color: red;
}

- box.css
.box {
	background-color: red;
}
    CSS 선택자 기본 선택자
  • Universal Selector
    *
    すべての要素
    • を選択
    * {
	color: red;
}
  • Type Selector
    タグ名
    適切なタグ要素
    • を選択
    li {
	color: red;
}
  • class Selector
    .class
    HTML class属性値がその値である要素
    • を選択
    .ABC {
	color: red;
}
  • ID Selector
    #id
    HTML id属性値がその値である要素
    • を選択する.
    #ABC {
	color: red;
}
    복합선택자デフォルトの選択者を組み合わせた選択者
  • Basic Combinator
    ABC.XYZ
    2つの選択者を同時に満たす要素
    • を選択する.
    ABC.XYZ {
	color: red;
}
  • Child Combinator
    ABC > XYZ
    選択者ABCのサブエレメントXYZ選択
    • ABC>XYZ {
	color: red;
}
  • Descendant Combinator
    ABC .MXYZ(注意スペース)
    選択者ABCのサブエレメントXYZ選択
    • ABC. XYZ {
	color: red;
}
  • Adjacent Sibling Combinator
    ABC + XYZ
    ABCの次の兄弟要素XYZを選択
    ABC + XYZ {
	color: red;
}
  • General Sibling Combinator
    ABC ~ XYZ
    ABCの次の兄弟要素XYZを選択
    • をすべて選択
    ABC ~ XYZ {
	color: red;
}
    Pseudo-Classes(가상 클래스 선택자)
  • HOVER
    マウスカーソルを選択者要素に合わせる場合は、
    • を選択します.
    a:hover {
	color: red;
}
  • ACTIVE
    「選択者」要素をクリックすると
    • が選択されます.
    a:active {
	color: red;
}
  • FOCUS
    選択者要素がフォーカスされている場合に選択
    • フォーカス可能な要素のみ
    input:focus {
	background-color: red;
}
    cf.24579152属性によりFocusとすることができる.
  • FIRST CHILD
    選択者が最初の兄弟要素である場合、
    • を選択します.
    .fruits div:first-child {
	color: red;
}
  • LAST CHILD
    選択者が兄弟要素の中で最も小さい場合は、
    • を選択します.
    .fruits div:first-child {
	color: red;
}
  • NTH CHILD
    兄弟要素のn番目を選択した場合は、
    • を選択します.
    - 2
.fruits *:nth-child(2) {
	color: red;
}

- 2, 4, 6, ...
.fruits *:nth-child(2n) {
	color: red;
}
  • NOT
    XYZ
    • ではなくABCを選択
    .fruits *:NOT(span){
	color: red;
}
    Pseudo-Elements (가상 요소 선택자)
  • BEFORE, AFTER
    要素の内部に内容を挿入
    行内要素
    content<-必須プロパティ
    • - HTML
<div class = "box"
	content!
</div>

- CSS
.box::before{
	content: "앞"
}
.box::after{
	content: "뒤"
}

- print
앞content!뒤
    Attribute (속성선택자)
  • ATTR
    特定の属性を含む要素
    • を選択
    - HTML
<input type="text" value = "Hello">
<input type="password" value = "1234">
<input type="text" value = "ABCD" disabled>

- CSS
[disabled] {
	color: red;
}
  • ATTR=VALUE
    特定の属性を含む特定の値を持つ要素
    • を選択する.
    - HTML
<input type="text" value = "Hello">
<input type="password" value = "1234">
<input type="text" value = "ABCD" disabled>

- CSS
[type="password"] {
	color: red;
}
    스타일 상속文字/文字に関連する属性は継承されます
    継承されないプロパティはinheritで継承できます선택자 우선순위同じ要素が複数の宣言のターゲットである場合、どの宣言のCSS属性を上書きするかを決定します.
    1.点数の高い宣言優先
    2.点数が同じなら、最終解釈の宣言を優先する
    - HTML
<div id="color_yellow"
    class="color_green"
    style="color: orange;">
    hello!
</div>

- CSS
div {color: red !important;} -> 태그
#color_yellow {color: yellow} -> ID
.color_green {color: green;} -> Class
div {color: blue;} -> 태그
* {color: darkblue} -> 전체
body {color: violet} -> 태그
    !important : infinity
    行内:1000
    ID : 100
    CLASS : 10
    ラベル:1
    すべての選択者:0
    継承:X
    HTML/CSSデフォルトコード
    優雅なテクノロジーコース1級レビュー