[CSS]生活コード2日目

18635 ワード
選択者 ツールバーの テキストリンク

自分でCSS属性を確定する


CSSにはPropertyという用語があることがわかりました.これは検索、質問、好奇心を意味します.
だからこの授業ではCSSの属性を自分で理解した経験を試してみました.
タイトルWEBのサイズを変更したい場合は、「css text size property」を検索し、中央に位置合わせしたい場合は「css text center property」を検索します.
h1{ //h1이라는 속성을 가진 태그를 가리키는 선택자
    font-size:60px; //글씨 크기 조절
    text-align:center; //정렬 조절
  }
最終的に、この授業で伝えなければならないのは、大量の属性を頭の中で無計画に暗記させることではなく、情報技術が発達した今の時代、私たちは1分以内に必要な情報を見つけて使用することができます.つまり、「私たちはすべての属性を事実上知っています」ということです.

CSSセレクタのデフォルト値


CSS,すなわち効果と選択者を支配する2つの重要な基礎があることを知っており,上で効果の内容を学習した.
今回は選択者の重要な基礎を学ぶことにした.
複数のタグの属性を付与および管理するには、クラス(class)というHTML属性を使用します.
.saw{ //클래스 값이 saw인 태그를 가리키는 선택자
    color:gray;
  }

<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>
class(クラス)には組み合わせの意味が含まれています.
classプロパティには、複数の値をスペースで区切ることができます.
1つのラベルには複数のプロパティがあり、複数の選択者によって1つのラベルを制御できます.
HTMLでは、より近いコマンドがより大きな影響力を持っています.(同じ形式の選択者であれば、最近のコマンドの選択者の優先度が高い)
<!doctype html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf=8">
<style>
  a {
    color:black;
    text-decoration: none;
  }
  .active{
    color:red;
  }
  .saw{ //active와 같은 형태의 선택자(클래스)일땐 마지막에 명령한 선택자가 우선순위가 높음
    color:gray;
  }
  h1{
    font-size:60px;
    text-align:center;
  }
</style>

</head>

<body>
<h1><a href="index.html">WEB</font></a></h1>
<ol>
  <li><a href="1.html" class="saw">HTML</a></li>
  <li><a href="2.html" class="saw active">CSS</a></li>
  <li><a href="3.html">JavaScript</a></li>
</ol>

(.sawコマンドの実行が遅くなり、CSS色がグレーになります)
しかし、1つのラベルに同じ形式の属性を加えるのは良い方法ではないので、IDセレクタという優先度の高いセレクタを使用する必要があります.
選択者の優先度はラベル<クラスWhy ? このように優先度を区別するのは、ラベルセレクタによって全体的なラベルの設計が行われ、例外をより優先度の高いセレクタに設定するだけで、設計と符号化の面でより効率的であるからである.(★★原理)
<!doctype html>
<html>
<head>
<title>WEB1 - CSS</title>
<meta charset="utf=8">
<style>
  a {
    color:black;
    text-decoration: none;
  }
  #active{
    color:red;
  }
  .saw{
    color:gray;
  }
  h1{
    font-size:60px;
    text-align:center;
  }
</style>

</head>

<body>
<h1><a href="index.html">WEB</font></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>

(activeコマンドはもっと早いですが、CSSは赤に反映されています)
idの核心は繰り返し不可能でユニークな値であり、より具体的である.(idの値は一度しか現れません)
Webページにid=「active」のラベルが一度表示された場合、他の場所でactiveを使用することはできません.
では、「cssセレクタ」を検索して、必要なセレクタを検索できます.
複数の形式の選択者を組み合わせることで、私たちが望む効果を特定のラベルに細かく位置決めすることができ、作成するコードの量を大幅に削減し、一部を修正するだけで多くのものを変えることができる効率的なコードを作成することができます.
スプリングAOP
NOIPのテンプレートまとめ