[WEB 2]CSS Boxモデル2

12883 ワード
CSS テキストリンク
正式に箱の模型を使ってホームページを飾りましょう.
まず最初のhtmlファイルです.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    #active {
      color:red;
    }
    .saw {
      color:gray;
    }
    a {
      color:black;
      text-decoration: none;
    }
    h1 {
      font-size:45px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html" class="saw">HTML</a></li>
    <li><a href="2.html" class="saw" id="active">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>
  <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.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
  </p>
</body>
</html>

ここでタイトル、リスト、本文を線に分けたい場合は、どうすればいいですか?
スタイルタグのcontent、padding、border、marginプロパティを変更します.
  <style>
    body {
      margin : 0px;
    }
    #active {
      color:red;
    }
    .saw {
      color:gray;
    }
    a {
      color:black;
      text-decoration: none;
    }
    h1 {
      font-size:45px;
      text-align: center;
      border-bottom : 1px solid gray;
      margin : 0px;
      padding : 20px;
    }
    ol {
      border-right:1px solid gray;
      width : 100px;
      margin : 0px;
      padding : 20px;
    }
  </style>

スタイルラベルを修正して線を引いた
もちろん、最初から最後まで一度に漕いだわけではありません.
似ていますが、中間段階では、詳細を強調するために開発者モデルに入りました.
+)開発者モードF 12の使用
まず開発者モードのページに入り、F12をクリックします

このようなウィンドウが表示されます.
開発者モードに入ります.
通常、content、padding、border、marginのプロパティ値を変更する場合、
このような開発者モデルを使用するのは非常に便利です.
たとえば、h 1タグの内容を知りたい場合は

「開発者モード」ウィンドウのh 1タグにカーソルを合わせると、
左側のページペインでは、h 1タグの内容、塗りつぶし、枠線、余白が一望できます.
この機能を使ってcssの詳細に合わせることができます!
VUE:省市街地のカスケードセレクタを迅速に実現
ノードをビルドします.を使用して/エクスプレス休憩API