day3


CSS


学習内容


CSSコード


id, class
  • idは属性値で、1つしかありません.idはドキュメントに1つしかありません.つまり、特殊なマークは1回しか与えられません.CSSを呼び出すと、これを「#」と表示します.
  • classは、属性値を繰り返し付与することができる.複数の箇所を与えることができ、同じスタイルや動作をするときに、同じ名前を同時に使うことができます.CSSを呼び出すと、"."に表示されます.
    CSSスタイルと同じクラス値を持っていても、CSSスタイルよりも早いインラインスタイルが適用されます.
    親子関係コードは、
  • idおよびclassで作成できます.
  • 優先スタイルプロパティ>id>class>tag順序
    幅(幅)、高さ(高さ)
    ウィンドウサイズ
  • にかかわらず、一定の幅と高さを維持します(pxを使用)
    div{
      width: 100px;
      height: 100px;
      background-color: yellow;
      }

    ウィンドウのサイズに応じて幅と高さが変化します(%):
  • div{
      width: 100%;
      height: 100px;
      background-color: yellow;
      }

  • ウィンドウを減らしても、最小と最大に減少します.
      min-width: 600px;
      max-width: 800px;
    枠線のコードの作成
  • ソリッドボックス
    border: solid 10px red;

  • border-radius円枠
    border-radius: 50px red;

    フォント
  • フォント色の変更
    background-color: yellow;
  • フォント色の変更
    color: rgb(123,111,21);
  • フォントサイズの変更
    font-size: 80px;
  • フォントスタイルの適用
    font-style: italic;
    アプリケーション
  • フォント
    font-family: Arial, Times, sans-serif;
    各種フォントが適用される場合は、前から順次支援できるフォントが適用されます
  • フォントの太さの変更
    font-weight: 100;
    数字が大きいほど、太さが太くなります.
  • Text decoration
    text-decoration: underline;
    下線の適用
    text-decoration: line-through;
    削除線の適用
  • ソート
    text-align: right;
    右揃え
    インベントリ
  • リストスタイルの変更
    list-style: none;

    適用後▼

    background
  • 背景色設定コード
    background-color: yellow;
  • 背景画像挿入コード
    background-image: url(주소);
  • 背景画像x軸にのみ適用されるコード
    background-image: url(주소);
    background-repeat: repeat-x;
  • 背景画像を繰り返し適用しないコード
    background-image: url(주소);
    background-repeat: no-repeat;
  • 背景画像並べ替えコード
    background-position: left bottom;

    難点


    idとclassで親子関係を築く意味は頭の中では理解できたが、コードでは実現できない.

    解決策


    週末は復習を繰り返すしかありません...

    学習の心得.


    私は本当にできるかどうか心配しています.HTMLしかやっていないときに知っている部分が多くて、これからは面白くなりますが、CSSは目が見えないので、新しい学習心理で真剣に対応しなければなりません.