CSS基本構文(背景属性を追加)

29761 ワード
TIL CSS テキストリンク
20210722

集中配列cssブロック単位


ブロック・レベルの中央ソート・コードの例
     #wrap {
        border: 2px solid blue;
        width: 400px;
        margin: 0 auto;
      }

widthを使用してブロックの長さを指定し、marginに垂直に位置合わせします.

css blockとinline


ネットワーク認識の基準と持つ属性が異なる
サンプルコード
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
    </div>
    <hr />
    <span>A</span><span>B</span><span>C</span>
    <span>D</span>
    <span>I</span>
      span {
        background-color: tomato;
        width: 100px;
        height: 100px;
        padding: 20px;
        display: inline-block;
      }
      
            #box div {
        background-color: yellowgreen;
        width: 200px;
        height: 200px;
      }


ААААА
左から右に積み重ねて、タグ間にスペースを出力します.
    間隔が表示され、タグが追加され、次に表示されます.

cssセレクタオプションの追加


選択者:link、hover、アクセス済み、active
選択者:first-child、last-child、nth-child()
サンプルコード1
      .btn {
        width: 120px;
        height: 50px;
        background-color: burlywood;
        color: #fff;
        display: block;
        border-radius: 5px;
        text-align: center;
        line-height: 50px;
        text-decoration: none;
      }
      .btn:hover,
      .btn:active {
        background-color: coral;
      }

リンクがaラベルの状態を選択してください
マウスを上に置くと
勘定科目の処理を実行する場合
一度訪れたことのあるリンクでも
サンプルコード2
      #box {
        border: 5px solid red;
        margin-bottom: 300px;
      }
      #box div {
        background-color: yellowgreen;
        width: 200px;
        height: 200px;
      }
      #box div:nth-child(1) {
        display: block;
      }
      #box div:nth-child(2) {
        padding: 50px;
      }
      #box div:nth-child(3) {
        border: 50px solid orange;
      }
      #box div:nth-child(4) {
        padding: 50px;
        border: 50px solid orange;
      }
      #box div:nth-child(5) {
        padding: 50px;
        border: 50px solid orange;
        box-sizing: border-box;
        /* width -> padding + border */
      }
    <div id="box">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
    </div>


勘定科目first-childは、選択者の内部の最初のタグです.
勘定科目last-childは、選択者内部の最後のタグです.
勘定科目nth-child()は、セレクタ()のn番目のタグです.

css付加説明:box-size:border-box


content以外の領域padding,borderをcontent領域の属性に調整します.

cssの追加説明:可視性、差異の表示


1.視認度:hiddenは雪の中に消えるだけで、位置を残す
2.display:一つも消えない
サンプルコード
      .menu li {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: rgb(36, 160, 160);
        color: #fff;
        display: inline-block;
      }
      
            .menu li:first-child {
        border: 1px solid hotpink;
      }
      .menu li:last-child {
        border: 1px solid blue;
      }
      .menu li:nth-child(2) {
        border: 1px solid gold;
        visibility: hidden;
      }
      .menu li:nth-child(3) {
        border: 1px solid green;
        display: none;
      }
    <ul class="menu">
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
    </ul>

¥menu 2の位置は依然として存在し、menu 3全体が消失

css段落の調整


1. &nbsp2.`text-indent:-数字;
サンプルコード
        <p class="con03">
          ※ 수목원은 자연과 더불어 사는 우리 인간에게 매우 소중한 존재입니다.<br />
          식물이나 <strong>시설을 훼손</strong>하거나 타인에게 방해가 되는
          행동은 삼가시기 바랍니다. <br />방문해주신 모든 분께 감사드립니다.^^
        </p>
      .con03 {
        padding: 10px 0 10px 30px;
        margin-left: 20px;
        display: block;
        border: 1px solid #bcd3be;
        background-color: #f6fdf7;
        line-height: 1.8;
        width: 650px;
        text-indent: -17px;
      }

css色表現


1.色名
2. rgb(red, green, blue)
3. #nnn4.rgb(赤、緑、青、opt=透明度(0-1))
サンプルコード
      ul li {
        padding: 20px 0;
        list-style-type: none;
        text-align: center;
        color: #fff;
      }
      ul li:nth-child(1) {
        background-color: red;
      }
      ul li:nth-child(2) {
        background-color: #1212e9;
      }
      ul li:nth-child(3) {
        background-color: rgb(6, 131, 6);
      }
      ul li:nth-child(4) {
        background-color: rgba(6, 131, 6, 0.5);
      }
    <ul>
      <li>빨강</li>
      <li>파랑</li>
      <li>그린</li>
      <li>노랑</li>
    </ul>

css重要背景属性


1. background-color
2. background-size
3. background-repeat
4. background-position
5. background-attachment
6. background-image
7. opacity
サンプルコード
      .bg {
        height: 400px;
        border: 1px solid red;
        background-image: url(main_image.jpeg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 500px;
        background-color: cornflowerblue;
      }
  <body>
    <ul>
      <li>빨강</li>
      <li>파랑</li>
      <li>그린</li>
      <li>노랑</li>
    </ul>
    <div class="bg"></div>
    <div class="gradient_liner">선형 그라데이션</div>
    <div class="gradient_radial">원형 그라데이션</div>
  </body>

¥imgはurlオプションで画像ファイルを指定できます
デフォルトでは、画面に表示される画像が繰り返されます.
    これは、どのように繰り返すかを決定するオプションです.
    (repeat-x, repeat-y, no-repeat)
勘定科目カラーの背景色の指定
АААААААААААААА
АААААААААААА
ААААААААААААААА\1040
АААААААААААААА
複数の画像を背景に配置する場合
background-image: img 1, img 2;
属性を追加します.
background-size: img 1, img 2;

cssグラデーション


1. linear-gradient
2. radial-gradient
使用方法
  • 線形勾配(位置と角度)  開始色、  クリーンネス
  • ラジアル勾配(中心始色、  がいぶえん
    • サンプルコード
          .gradient_liner {
        background-image: linear-gradient(225deg, black, hotpink);
        background-image: -webkit-linear-gradient(225deg, black, hotpink);
        background-image: -moz-linear-gradient(225deg, black, hotpink);
        background-image: -o-linear-gradient(225deg, black, hotpink);
      }
      .gradient_radial {
        background-image: radial-gradient(
          rgb(217, 255, 0),
          yellow,
          coral,
          orange
        );
      }
        <div class="gradient_liner">선형 그라데이션</div>
    <div class="gradient_radial">원형 그라데이션</div>

    css parallax


    background-attach:fixedスクロールを使用して背景を変更する
    サンプルコード
          html,
      body {
        height: 100%;
        margin: 0;
        color: #777;
      }
      .bg01,
      .bg02,
      .bg03 {
        background-color: #333;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
        opacity: 0.7;
      }
      .bg01 {
        background-image: url(images/bg01.jpg);
        min-height: 100%;
      }
      .bg02 {
        background-image: url(images/bg02.jpg);
        min-height: 400px;
      }
      .bg03 {
        background-image: url(images/bg03.jpg);
        min-height: 400px;
      }
    <body>
    <div class="bg01">
      <span class="caption">SCROLL start</span>
    </div>
    <div class="txt01">
      <h2>HAPPY HAPPY HAPPY</h2>
    </div>
    <div class="bg02">
      <span class="caption">Test Demo1</span>
    </div>
    <div class="txt02">
    </div>
    <div class="bg03">
      <span class="caption">Test Demo2</span>
    </div>
    <div class="txt03">
    </div>
    <div class="bg01">
      <span class="caption">SCROLL end</span>
    </div>
  </body>

    スクロール移動👇

    スクロールの移動👇👇

    👀   上の図に示すように、背景はスクロールするにつれて移動します.
           画面に現れるものが見えます.
    その理由は、bodyに100%の高さを与え、対応する背景クラスでmin-height:100%、background-size: cover;をそれぞれ拡大して画像を100%にし、background-attachment: fixed;を与えて、画像をスクロールから独立させ、divボックスサイズに応じて与えられた画像が部分的に切り取られて移動しているように見えるからである.
    この視覚現象を視差と呼ぶ.
    Android RecyclerViewについて
    buttonの様子