[TIL]CS基本構文

8457 ワード
TIL CSS テキストリンク
積層スタイルシートとは?
htmlのレコードを設計するためのWebドキュメント全体のスタイルのスタイルシートを予め記憶しておく.
htmlでは、<style> </style>によって設計効果が提供される.styleラベルは、開始/終了ラベルからなる<head></head>ラベルの間に存在しなければならない.ただし、通常は、外部スタイルシートにスタイルを作成し、linkに接続することが望ましい.
<html>
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <h4>실행결과</h4>
</body>
</html>

実行結果


CSSファイルの接続


.cssファイルを読み込むには、要素接続ファイルを使用する必要があります.<link>は<head>内にある.
  • href:cssファイルアドレスまたはパス
  • タイプ:ドキュメントタイプ.text/cssに設定する必要があります.
  • rel:htmlファイルとcssファイルの関係を説明します.スタイルシートにリンクするため、値はスタイルシート
    • に設定される.
    <link rel="stylesheet" type="text/css" href="style.css">
    cssファイルがhtmlファイルと同じディレクトリに格納されている場合、
    <link href="./style.css" type="text/css" rel="stylesheet">

    Tag Name


    css{}を使用してhtml要素を選択します.例えばhtmlで<p>を選択するには、
    p{}と表示します.
    p {
   font-family: Arial;
  }
    ​

    Class Name


    タグだけでなくclass要素も選択できます.class要素はtag要素より優先されます.<p class="brand">Sole Shoe Company</p>をhtmlからcssにインポートします.
    .brand{}で表す
    ​

    Multiple Classes


    複数のcssクラスをhtml要素に適用できます
    html
    <h1 class="title uppercase">Top Vacation Spots</h1>
    css
    .title {     
   color: teal;
 }   
.uppercase {    
  text-transform: uppercase;
}
    ​

    ID name


    id使用#css効果を適用#idname{attribute}
    classは繰り返し使用できますが、idは一度しか使用できません.最も具体的です.
    すなわち,IDはクラスのすべてのスタイルを再定義し,classはタグセレクタのすべてのスタイルを再定義する.
    html
    <h1 class="title uppercase" id="article-title">Top Vacation Spots</h1>
    css
    #article-title {
  font-family: cursive;
  text-transform: capitalize;
}
    ​

    Specificity


    cssスタイルの順序を決定し、ID->class->タグ付け
    ​

    Chaining Selectiors


    例えば、h 1要素について.特別な場合
    h1.special { }
    これをマークすると、p要素に特殊なクラスがあってもスタイルは指定されません.

    Nested Elements

    <ul class='main-list'>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
    cssで.main-list li { }
    使用する場合は、classのタグ要素(li)を選択してcssスタイルを適用します.
    .classの要素は他の要素より優先されるため、cssは適用されません.
    ​

    Multiple Selectors


    繰り返す場合は、コードを減らすことで

    ​
    ​
    mocha+chaiノート
    Linq to entityノート