TIL(Today I Learned) - 002

10697 ワード
CSS html テキストリンク

css


css selector

.a div .b .pre span {
  background-color: yellow;
}
こんなcssがあると言ってください.これは、aクラス内のdivタグ内のbクラス内のspanタグにのみ適用されます.次のコードを見てください.
<div class="a">
  <div>
    <header class="b">
      <h1 class="pre">
        <span>제목! 노란색 배경 나옴!</span>
        <span class="title">이것도 나옴!</span>
      </h1>
      <span>이건 적용안 됨</span>
    </header>
  </div>
  <span>이건 적용안 됨</span>
</div>
spanラベルは5、6、8、11行目に使用されるが、実際には上のcssは5、6行目にのみ適用される.
このようにcssを使用すると、重複したスタイルが生成されます.
次のルールが適用されます.
  • インラインスタイル(要素に直接作成):1000点
  • id:100分
  • 級:10分
  • tag:1点
    • 覚えておくだけで、tag<<<<<<<<<<<<<

    Block & Inline



    上図では、黄色の部分が領域を占めています.
    1行目、2行目、3行目、4行目がblock、5行目がinlineです.
    <header>, <footer>, <p>, <li>, <table>, <div>, <h1>
    『代表的なBlockタグたち』
    常に新しい行から始まり、左右の領域を占めます.
    <span>, <a>, <img>
    『代表的なinlineタグたち』
    テキストの一部のみを占めます.
    しかし、これはcssによって性質を変えることができる.
    .inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
    これらの値はcssプロパティのスケールとして使用でき、inlineプロパティがあります.
    .block-span {
  display: block;
}
    逆に、これらの値をスケールすることでblockプロパティを得ることができます.

    margin auto

    .center {
  margin: 20px auto;
}
    css属性で上図のように記述する場合、20 pxは上、下、autoは左、右を表す.
    .center {
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
}
    <2つのコードの意味は同じです.>

    <実用化>

    セレクタシンボル



    上から、タグの最初の順序は次のとおりです.
    タグの最後の順序.
    タグの奇数順.
    ラベルの偶数の順序.

    position


    positionには4つの値が存在する.
  • position: static;
  • position: relative;
  • position: absolute;
  • position: fixed;
    • ダブルスタティックはデフォルトです.

    position: relative;


    これは静的時に対する上下左右の移動である.

    position: absolute;


    これはposition:static属性を持たない親に対して上下左右に移動します.親に相対、絶対、固定タグがない場合は、一番上のタグ(body)に基づいています.

    position: fixed;


    これは、表示されている画面に対して固定されています.

    float & clear


    簡単に言えば、クラスの対応する部分を別々に配置します.浮いてしまうので、既存のdivタグなどの段落に縛るのではなく、全体の形状を分散させます.そのためclearを使用しています.
    float要素を持つ親ラベルにcssでクリア:両方;作成すると、親はフローティング効果の影響を受けずにフローティング要素を囲みます.

    HTML


    ol & ul




    Input & Textarea

    <input type="text" placeholder="ID"> 
<input type="password" placeholder="비밀번호"> 
<input type="number" placeholder="학번">
<textarea>소개:</textarea>
<button>제출완료</button>

    ＜上記コードの実行画面＞
    Inputラベルを使用して入力を受信できます.
    typeはtext,password,numberなどを受信することができ,それらの用途はそれぞれ異なる.
  • text:任意の通常のテキストを受信できます.
  • パスワード:入力時に黒点として表示されます.
  • number:数字のみ入力できます.
    • placeholderタグで入力できる内容.
    valueで値を事前に入力できます.
    textareaラベルを使用してinputラベルよりも長い文を入力できます.
    input[type="text"]::placeholder {
  color: red;
}
    上記cssコードを記述する場合、入力中typeがtextの部分にのみcssを適用します.
    同時学習ノート
    reducevgコマンド