1.CSSの概要

ヒント：ここで、この記事に記録する一般的なコンテンツを追加できます
。例：人工知能の継続的な開発に伴い、機械学習のテクノロジーがますます重要になっています。多くの人々が機械学習を学び始めています。この記事では、機械学習の基本。コンテンツ。

ヒント：以下はこの記事の内容です。以下のケースは参照用です。

1.パンダとは何ですか？

カスケードスタイルシート（英語のフルネーム：カスケードスタイルシート）は、HTML（標準ユニバーサルマークアップ言語のアプリケーション）またはXML（標準ユニバーサルマークアップ言語のサブセット）を表現するために使用されるコンピューター言語です。CSSは、Webページを静的に変更できるだけでなく、さまざまなスクリプト言語を使用してWebページの要素を動的にフォーマットすることもできます。
HTMLはページのコンテンツを構成するために使用され、CSSはコンテンツが画面にどのように表示されるかを決定します。
WebページのコンテンツはHTML要素で構成されています。これらの要素の表示方法には、ページ全体のレイアウト、位置、距離、色、要素のサイズ、表示するかどうか、フロートするかどうかなど、多くの側面が含まれます。透明度など。

第二に、CSSの実際のアプリケーション

1.色、サイズ、配置

色の一部はブラウザで使用され
ここに画像の説明を挿入します
ます：one.css関連のコードが書かれています：

.example-1 {
    
    
  width: 100%;
  height: 200px;
  background-color: powderblue;
  text-align: center;
}
.example-2 {
    
    
  height: 100px;
  width: 50%;
  background-color: rgb(15, 121, 163);
  text-align: center;
}

One.htmlコードは次のように記述されています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="one.css">
  <title>诗的扉页</title>
</head>
<body>
  <div class="example-1">
    人间情事一丢，就有了清澈的骨骼。
<br>
      ——余秀华
  </div>
  <div class="example-2">
    精致的沉默，凌驾于一切之上。
<br>
    ——三岛由纪夫
  </div>
</body>
</html>

ここに画像の説明を挿入します

2.ボックスモデル

説明：

コンテンツ：テキスト、画像などのボックスのコンテンツ。
パディング：パディング。内側の余白、つまりコンテンツと境界線の間の領域とも呼ばれます。
境界線：デフォルトでは表示されない境界線。
マージン：外側のマージン、境界の外側の領域、およびその他の要素

cssコード：

.box1 {
    
    
  height: 100px;
  width: 200px;
  background-color:#71d35e;
  color: aliceblue;
  border: 10px solid rgb(217, 231, 89);
  padding: 25px;
  margin: 25px;
}
.box2 {
    
    
  height: 100px;
  width: 200px;
  background-color:#d85688;
  color: aliceblue;
  border: 10px solid rgb(230, 144, 215);
  padding: 25px;
  margin: 25px;
}

htmlコード：

    <div class="box1">生命是艰辛又转瞬即逝的，然而再没有另一个生命了。
<br>
      ——马尔克斯《族长的秋天》
      </div>
    <div class="box2">爱自己是终生浪漫的开始。
<br>
      ——王尔德</div>

ここに画像の説明を挿入します

3.境界線とマージン

内側と外側の境界線の設定によると（ほぼ同じ）：

パディング：20px; / *同じ上、下、左、右/
padding-top：20px;
padding-bottom：100px;
padding-right：50px;
padding-left：80px;
padding：25px 50px 75px 100px; /短い形式、上下を押す、下、左の順序設定/
パディング：25px 10px; /短い形式、上下は25px、左右は10px * /

自分で書き直したコードは、ブラウザに次のように表示されます。
ここに画像の説明を挿入します

4.ポジショニング

position属性は、要素を配置するために使用されます。この属性の値は次のとおりです。
静的静的
相対相対
固定固定
絶対絶対

ここに画像の説明を挿入します

5.オーバーフロー

要素のコンテンツが指定された領域を超えると、オーバーフロー属性を使用してこれらのオーバーフロー部分を処理します。visibleの
デフォルト値はオーバーフロー部分です。オーバーフロー部分はクリップされません。
非表示のクリッピングオーバーフロー部分は領域の外側に表示され、
スクロールは表示されません。スクロールクリッピングオーバーフロー部分ですが、
自動トリミングオーバーフロー部分を表示するための上下および左右のスクロールバーと、必要に応じてスクロールバーを提供します。