クイックキャンパス百万バイト学校7日目(第2週火曜日-CSS basic)

28506 ワード

Today Topic : CSS basic

🗝 Keywords

JSとWeb
JSのサーバ利用(node.js)
Htmlタグの使用の重要性
✅ Html outline
⌝CSSはなぜこんなに重要ですか?

1.CSS基本構文

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        span {
            font-size : 50px;
            color : red;
        }
        /*주석*/
    </style>
</head>
<body>
    <span> ctaaag </span>
</body>
</html>

🚀 セレクタ、コマンド、コメント

選択者{属性:値;}

選択者{属性:値;属性:値;

スタイル範囲の先頭と末尾は括弧で表され、複数のプロパティは1つのセレクタに含めることができます.

注釈処理は、コマンド／ポストに自動的に入力される.

2.CSS宣言方式

2-1)組み込み

<style>
	div{
    	color: red;
        margin: 20px;
    }    
</style>

html内部のスタイルラベルに宣言する方法.デフォルトでは、フロントエンドはhtml/css/javascriptを分離します.

2）リンク方式

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

外部リンクでcssを適用する方法:並列入力方法.すなわち、リンク内のcssを同時に適用する

2-3)インライン

<div style="color: red; magin: 20px;"></div>

html要素のスタイル属性で直接作成します.選択者はいません.

識別

htmlは優先権を有するため、

は推奨されない.

2-4）導入方式

cssの他のcssファイルに接続します.シリアル入力でhtmlにプライマリリンクで接続されたcssリンクを最初に反映し、順次インポートされたcssファイルを適用します.

を使用してルールをインポートする場合は、@import url(「ファイルパス」)を入力する必要があります.

3.デフォルトの選択者

* {
	color: red;
}

abc {
	color: red;
}


.class {
	color: red;
}

#id {
	color: red;
}

🚀 デフォルトの選択者

asterrisk:*はすべての要素の選択者です.通常、複合セレクタとともに、特定の領域のすべてのコンテンツを選択するために使用されます.

ラベルセレクタ:ラベル名を入力します.

クラスセレクタ:クラス属性値にcss

を適用する

アイデンティティセレクタ:id属性値にcss

を適用する

4.複合セレクタ

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        span.orange {
            color: red;
        }
        ul > .orange {
            color:red;
        }
        div .orange {
            color: red;
        }
        .orange + li {
            color: orange;
        }
        .orange ~ li {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>사과</li>
            <li>딸기</li> 
            <li class='orange'>오렌지</li>
            <li>망고</li>
            <li>사과</li>
        </ul>
    <div>당근</div>
    <p>토마토</p>
    </div>
    <span class="orange">오렌지</span>
</body>
</html>

🚀 ふくごうセレクタ

一時選択者:両方の選択者を同時に満たす要素を選択するには、tagを選択します.class(or id)を使用して

を行う

サブセレクタ:abc>xyzの場合、セレクタabcのサブ要素xyzが選択されます.この場合、クラスのみが色

を変更する.

サブセレクタ:プログラムabcのサブ要素xyz選択を選択します.」区切り記号は、選択者の記号です.だからちゃんと仕切りを使います!!

隣接する兄弟選択プログラム:選択プログラムabcの次の兄弟要素xyz.つまり、上にはマンゴーだけがオレンジ色になっていて、

一般同級選択者:選択者abcの次の同級要素xyzはすべて選択されます.マンゴーもりんごも赤

になります

5.仮想クラスセレクタの装飾

5-1) hover

.box {
    width: 100px;
    height: 100px;
    background-color: orange;
    transition: 1s;
}

.box:hover {
    width:300px;
    background-color: royalblue;
}

🚀 hover仮想クラスセレクタ

セレクタABC要素にマウスカーソルを置いたときに選択されます.

サイズ、色など多様です.使用量が非常に多いので、

にご注意ください

すべての仮想クラスセレクタの前には、コロンが付いています.

🚀 transition

クラスセレクタでトランザクション効果を作成した後、クラスの変化速度を指定できます.

ビットの場合、1秒以内に緩やかに変化する効果を生じることができる.

5-2) active

a : active {
	color: red;
}

🚀 アクティブな仮想クラスセレクタ

activeは実際の行動です.これは、マウスをクリックする場合にのみ適用されます.

マウスボタンをクリックすると、元のステータス

に戻ります.

5-3) focus

<div class = "box" tabindex='-1'></div>

input:focus {
    background-color: orange;
}

🚀 フォーカス仮想クラスセレクタ

が焦点となると、特定の効果が行われます.非焦点要素には適用されません.

tabindexプロパティをフォーカスできない要素に掛け、値を-1に入れます.

フォーカスは同時に動作せず、1つのページでクリックした部分にのみ使用されます.

は、通常の入力要素、select、textareaとともに使用される.入力要素が焦点となる場合、背景色は

となる.

6.特定の状態を表す仮想クラスセレクタ

<div class="fruits">
  <span>딸기</span>
  <span>수박</span>
  <div>오렌지</div>
  <p>망고</p>
  <h3>사과</h3>
</div>

.fruits span:first-child {
    color:olive;
}

.fruits h3:last-child{
    color:beige;
}

.fruits *:nth-child(2n) {
    color: red;
}

.fruits *:nth-child(3) {
    color: blue;
}
.fruits *:not(span) {
    color: purple
}

🚀 選択者:first-child

.フルーツspan:first-schild{}span兄弟要素の1つ目を選択した場合、選択します.

最初でない場合、この部分は

を適用しない.
例えば

.フルーツdiv:first-schildは

に適用されません
🚀 選択者:last-child

.フルーツh 3:last-child{}最後の選択者は兄弟元素の

🚀 選択者:nth-child(n)

.フルーツ*:child(n){}をn回選択し、同級元素(n)を選択した場合に選択します.

に別名が追加されたため、すべての要素で2番目のサブ要素のみが選択されます.

nに2 nを加えると、nは0から代入され、2の倍数に適用される.

で2 n+1は?奇数

でn+2は?2番目から

が適用され、1番目を除く
🚀 ABC:not(選択者)

選択者ではなくABC要素を選択します.

7.仮想要素セレクタ

.box::before {
	content: "앞!";
}

.box::after {
	content: "뒤!";
}

.box::after {
	content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-color: royalblue;
}

🚀 .選択者:

before選択者の内部の前面に行(字)要素の内容

を挿入する.

afterは、行内要素を反対のセレクタの後ろに挿入します.

のコンテンツを指定する場合は、コンテンツ属性を使用する必要があります.beforeとafterを書くときは必ず入りますコンテンツが空であっても、before、afterを使用する必要があります.

また、

行の要素に文字を挿入することなく、サイズ、高さ、色を設定することもできます.

8.属性選択器

<input type="text" value="HEROPY">
<input type='password' value='1234'>
<input type='text' value='ABCD' disabled>
<span data-fruit-name="apple">사과</span>

[type] {
    color: red;
}

[type="password"]{
	color: red;
}

[data-fruit-name]{
	color: red;
}

🚀 属性を含む要素の選択
属性を

[]の選択可能な要素

に挿入します.

[]に値を追加すると、特定の要素の値に対応する部分のみが選択されます.

の代表的なグローバル属性dataを使用して、特定の部分を選択できます.

9.スタイル継承、強制継承

<div class='animal'>동물
  <div class='tiger'>호랑이</div>
  <div class='lion'>사자</div>
  <div class='elephant'>코끼리</div>
</div>

.animal {
	color: red;
}

🚀 スタイルの継承

の親要素に適用されるスタイルは、継承された子要素に適用されます.

が継承するCSSプロパティは、通常、アルファベット/文字に関連しています(ただし、すべてのアルファベット/文字プロパティではありません!)

font-style:斜体

font-weight:字高

font-size:フォントサイズ

行-高さ:行高さ

font-ファミリー:フォント(フォント)

color:フォント色

text-align:ソート

<div class="parent">
	<div class="child"></div>
</div>

.parent {
	width:300px;
    height:200px;
    background-color: red;
}
.child {
	width:100px;
    height:100px;
    background-color:orange;
}
.child {
	width:100px;
    height:inherit;
    background-color:inherit;
    position: fixed
    top:100px;
    right:10px;
}