アリスの3日目の水曜日のリアルタイムの教室css

18711 ワード

李戈英の理論の授業

html、css、javascriptをリアルタイムで符号化できるサイト
https://jsbin.com/?html,output
https://codepen.io/

h2+(ol>(li>a)*3)

これを打つと下のように出てきます

<h2></h2>
<ol>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ol>

idは、1つだけ指定したい場合、重複せずに書く
classは、いくつかを組み合わせて1つのグループに指定したい場合に使用します.

        <ul>
            <li style="text-decoration: underline;">item</li>
            <li class="italic" id="target">item</li>
            <li >item</li>
            <!-- 하나만 지정하고싶을때는 id, 그룹해서 지정하고싶으면 class -->
        </ul>

テキスト-装飾:下線下線
aタグを使用してリンクすると、下線が自動的に生成され、text-chention:noneを使用して下線を削除できます.

<h1 class="italic" style="text-decoration: underline;">CSS 기본 문법</h1>

エッジオーバーラップ(マージ)

        h1 {
            /* display: inline; */
            padding: 50px;
            margin: 50px;
            /* 마진 겹침 현상 : 수직의 마진값은 오버랩이 된다. */
            width: 300px;
            height: 300px;
        }
        /* inline은 자기크기만큼 쓴다, block은 화면 전체를 쓴다. */

gridを使用してn*n形状アレイを作成できます.

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 20px solid red;
            margin: 10px;
        }

        #container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            /* fr이아니고 px로 하면 고정값이됨. fr은 반응형웹처럼됨 */
        }
    </style>
</head>
<body>
    <div>TOP</div>
    <div id="container">
        <div>LEFT</div> 
        <div>CENTER</div> 
        <div>RIGHT</div>
    </div>
    <div>BOTTOM</div>
</body>
</html>

結果

mediaqueryを使用して、画面サイズに応じて異なるデザインを設定できます->反応式Web

            @media all and (min-width: 480px) { 
                #container {
                display: grid;
                grid-template-columns: 150px 1fr;
                transition: back;
            }
            ol {
                border-right: 10px solid pink;
            }
            }

480以上

480未満

480~960

@media all and (min-width: 480px) and (max-width: 960px) {}

ここでborder-rightは簡略化された形式で記述されている.

コーチ実習

viewport宣言コード、headに入れます.

<meta name="viewport" content="width=device-width, initial-scale=1">

矩形を丸くする

border-radius: 50px;

borderウィンドウ画面の半幅:50 vw;
block: top to bottm
inline: left to right
任意のスペースを作成
div: block
span: inline

p.abc vs. p .abc
p.abc:abcレベルのp

```
<p class="abc"></p>
```

p.abc:pラベルのクラスabc

```
<p>
	<a class="abc"></a>
</p>
```

は類似しており、p#abcもある.

grid:2 D
flex:1次元
flex容器にはflex itemがあります.
flex-direction:row y軸に垂直に位置合わせ
flex-direction:列x軸に垂直に整列
row

column

#flex-container {
 display: flex;
 justify-content: flex-start;
}

flex処理idがflex-contantのdivである場合、display:flex;こう書きます.
videf-content:現在の主軸にflex-start(左端から)、flext-end(右端から)、center(中央)を任意の方向に整列
align-items:flex-start(左から右)、flext-end(右から中)、center(中央)、space-tween(各オブジェクト間にスペースキーがある)、space-around(漢居+両端オブジェクトの横にスペースキーもある)を、現在のスケルトンに垂直な方向に揃えます.
flex-direction: column; : スピンドルに垂直
https://chlolisher.tistory.com/18
position: static, fixed, absolute, relative
静的:無効
固定こてい:固定こてい
absolute:親コンテナに依存
相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対相対
https://m.blog.naver.com/xowns4817/222138686218
https://bio-info.tistory.com/66

Reference

この問題について(アリスの3日目の水曜日のリアルタイムの教室css), 我々は、より多くの情報をここで見つけました https://velog.io/@chss3339/엘리스-3일차-수요일-실시간-강의-css

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

JAvaメモリ動的コンパイル

2-3 tree