CSS

グリッドの使用

グリッドを使用するには、各タグのボリュームを理解する必要があります.
これは最新の技術なので、データに基づいて現在使えるかどうかを判断しなければなりません->caniuse.comサイトで確認します(現在どの技術が使われているかの統計を表示します).

h 1とdiv,span

hn=タイトルラベル(他のコンテンツと区別)

div=設計目的のみで意味のないタグ.block elementはデフォルト属性で、デフォルトでは改行

<div> ~~~ </div>

span=divですが、inline elementプロパティ

<span> ~~~ </span>

grid: fr;

gridを使用する場合、

display: grid;

入力後に使用します.

1.#gridの場合、1番目のコンテンツNAVIGATIONを250 px、2番目のコンテンツARTICLEを2 frとして指定
->NAVIGATIONのサイズは250 px、ARTICLEは残りのサイズを埋めます

画面が狭くなるとARTICLEのサイズが小さくなります.

#frの場合、NAVIGATIONは2/3、ARTICLEは1/3を占めます.

画面が狭くなると、2つのコンテンツが同じ割合で縮小されます.

サイズfrの指定位置の内容長により、250 px指定サイズのNAVIGATIONセルのサイズが自動的に同じに変化します

グリッドの使用

+)Webページ->チェック項目の入力値は任意に調整できます.これで調整して、適切な値をコードに変更すると便利です.

コードの表示

<style>
 ...생략...
  #grid{
    display:grid;
    grid-template-columns: 150px 1fr;
  }
  ol{
    padding-left: 33px;
  }
  #article{
    padding-left: 25px;
  }
</style>
...생략...
  <div id="grid">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html" class="saw" id="active">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <div id="article">
      <h2>CSS</h2>
      <p>
        Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. 이하 생략
     </p>
    </div>
</div>

1.id=article h 2とpタグを組み合わせる
2.id=grid olとdiv=article(h 2とpを含む)タグを組み合わせる
3.grid効果を使用してid=gridに次のコードを作成する

#grid{
	display: grid;
	grid-template-columns: 150px 1fr;
     }

4.olラベルに左側の余白を付ける(スクリーンの枠線に近づけるために:

ol{
   padding-left: 33px;
  }

では、olはgrid中のolですが、後でコードを修正するときに他のolと混同しないように、明確にマークしたほうがいいです!(id名の下のラベルを入力)

#grid ol {
	padding-left: 33px;
    	}

id=articleで次のコードを記述し、充填効果による分割線とCSSの重複を防止します.

#article {
	padding-left:33px;
	}

この時点でarticleはgridに残っているので、明確に入力するには、次のように入力します.(ただし、articleはid値として使用されるため、明確に説明する必要はない.)

#grid #article

はんのうせっけい

画面のサイズに応じて、Webページの各要素を反応させ、最適化された形状を変更します.

メディアクエリ

反応式設計は純粋なWebを通じて、CSSを通じて実現する核心概念である.
[Web->チェック](Web->Check)をオンにして画面サイズを調整すると、現在のWebページの画面サイズがpxであるかどうかが右上隅に表示されます.(水平x垂直)

実習例1

条件:画面が800 pxより大きい場合、対応するコード部分はdisplay:noneと表示されます.効果が現れる.
765 px時

829 pxの場合

コードの表示(セグメント11)
800 pxより大きいスクリーンを表示しないで少なくとも800 pxの時スクリーンが見えません
-> screen width > 800px
->screenのmin-width:800 px
->メディアクエリに適した形式でパブリッシュ

<style>
@media(min-width: 800px) {
		div{
    		display: none;
		  }
      	}
</style>

実習例2

条件:画面が500 px未満の場合、パラレル構造をシリアル化し、コンテンツ間の区切り線が消えます.
500 px未満の場合

500 pxを超える場合(501 pxから有効)

コードの表示(CSSセクション)
特定の条件で削除したいタグの状態をnoneにする

<style>
  body{
    margin: 0;
  }
  a {
    color: black;
    text-decoration: none;
  }
  h1 {
    font-size: 45px;
    text-align: center;
    border-bottom: 1px solid gray;
    margin: 0;
    padding: 20px;
  }
  ol {
    border-right: 1px solid gray;
    width: 100px;
    margin: 0;
    padding: 20px;
  }
  #grid{
    display:grid;
    grid-template-columns: 150px 1fr;
  }
  #grid ol{
    padding-left: 33px;
  }
  #grid #article{
    padding-left: 25px;
  }
  @media(max-width: 500px){
    #grid{
      display: block;
    }
    ol {
      border-right: none;
    }
    h1 {
  border-bottom: none;
    }
  }
  </style>

CSSによる重複除外@メディア効果

次の場合2に示すように、htmlファイルにcssheetを格納して使用する場合、ページを再ロードすると、ページはまずhtmlファイルをダウンロードし、cssファイルを順番にダウンロードします.
(Webページ→チェック→Webアイテムの更新時に表示)
従って、1つのページに複数の個別のファイルがある場合、またはページ内にcssコードがあるだけの場合、ネットワークの観点から後者は効率的である.
BUT Cassingから見て!私たちのパソコンは一度styleに来ます.cssという名前のファイルをダウンロードする場合は、ファイルを変更しない限りstyleが使用されます.cssファイルを私たちのパソコンに保存します.style.cssファイルを要求すると、保存したファイルがインポートされます.
1.高速化(ネットワークを使用しないため)
2.業者はお金を節約できます.(ネットワーク使用コストの削減)
条件:html練習のために書いた1.html ~ 3.htmlページ(合計3ページ)はすべてmediaqueryで500 px未満の条件で指定した効果で表示されます!
#手動修復状況1:3ページ
3つのページはすべてスタイル部分をコピーして、idセレクタを指定します

<style> ~ </style>
<div id="grid">
<div id="article">

そうすれば.今は3ページあるので、あまり時間はかかりませんが、1億ページあれば?吸うときはこれを修復するだけで、データ削除を繰り返す必要があります!!!
#状況2:3ページのリンクアンダースコア効果を使用(1回/重複データ削除)
新しいcssファイルを作成し、htmlファイルごとにリンクして動作させます.

500 px未満の場合、並列構造はありません

500 pxを超える場合は並列構造を維持

コードの表示

<link rel="stylesheet" href="style.css">

以上のコードはhtml sheetごとに保存したcss sheetの効果を有効にします!(同じファイルに格納されます.

話が終わる

もしもし、大変ですね.🥴