CSS 1をクリア

7445 ワード
CSS テキストリンク

1) CSS


Cascading Style Sheets
:スタイルシートは、スタイリング中のドキュメントです.

  • Author style:開発者定義

  • User style:ユーザによる決定(ex.dark mode)

  • Browser:標準スタイルシートの定義

  • スタイル適用優先度:Author>User>Browser
    Author->User->Browserの順に積層します.

  • !重要:(他の優先度を無視)定義された特定の属性を再定義します.しかし、できるだけ使わないほうがいいです.
    • p{
  color: red !important;
}
#thing{
  color: green;
}
    <p id="thing">will be RED.</p>

    2) Selector


    SelectorExampleUniversal** { box-sizing : border-box; }Typetagli { list-style : none; }ID#id_name#home { margin: auto; }Class.class_name.btn { border-radius : 3px; }State:button : hover { color : red; }Attribute[ ]a [ href="naver.com"] { color : purple; }

    - Child Selector (A>B)


    親が中にいるchild要素を選びます.

    - Selector Expression Example


    すべての表現を表示するには、ここをクリックします.
    
a[href]{
color: purple;
}
// href 속성을 가진 모든 a 태그

a[href="naver.com"]{
color: purple;
}
// href 속성값이 "naver.com"인 모든 a 태그

a[href^="naver"]{
color: purple;
}
// href 속성값이 "naver"로 시작하는 모든 a 태그

a[href$=".com"]{
color: purple;
}
// href 속성값이 ".com"으로 끝나는 모든 a 태그

a[href*="ver"]{      >> To include a specified value
color:purple;        
}
// href 속성값이 "ver"을 포함하는 모든 a 태그

#special{ }
li#special{    >> ❗ Don't space it out.
}
//li 태그 중에 ID가 special인 태그

    - Power


    Universal tag(*):同じ力なら、これからもっと強く書きます.

    3) CSS structure


    HTMLへのCSSの適用

    1. External stylesheet


    最もよく使われる、最も役に立つ方法
    HTML <head>で<link>要素を参照
    <link rel="stylesheet" href="style.css">
  • パス
    • <!-- 현재 폴더의 styles 라는 하위 폴더 안에 -->
<link rel="stylesheet" href="styles/style.css">

<!-- 상위 폴더로 올라간 다음, styles 라는 하위 폴더 내로 이동 -->
<link rel="stylesheet" href="../styles/style.css">

    2. Internal stylesheet


    外部CSSファイルがないのではなく、HTML <head>に含まれる<style>要素の内部にCSSを記述します.
    <head>
  <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }
    </style>
</head>

    3. Inline styles


    これはstyle属性を含む1つの要因にのみ影響するCSS宣言です.
    メンテナンスに不利(ドキュメントごとに同じ情報を複数回更新する必要がある場合があります)、CSS情報とHTML構造情報を混在させると、コードの可読性が低下する可能性があります.

    4) Shorthands

    font, background, padding, border, marginなどのいくつかの属性をクイックビュー属性と呼ぶ.これにより、複数行のプロパティ値を1行に合成し、コードをよりきれいにすることができます.
    background-color:red;
background-image:url(bg.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;
    上のコードは以下の通りです.
    background: red url(bg.png) 10px 10px repeat-x fixed;

    5) Custom properties


    頻繁に繰り返される数値がある場合は、メンテナンスの面で使用するために定数にしたほうがいいです.--(double dash)name: value;定義された場所のすべてのサブエレメントからアクセスできますが、通常は:root{}(最大親ノード)で定義され、どこでも使用できます.
    ロード時var(--name);このように使います.
    /* Global */
:root {
  /* Color */
  --text-color: #f0f4f5;
  --background-color: #263343;
  --accent-color: #d49466;
  
  /* Size */
  --padding: 12px;
  --avatar-size: 36px;
  
  /* Font Size */
  --font-large: 18px;
  --font-medium: 14px;
  --font-small: 12px;
  --font-micro: 10px;
}
// 사용할 때
.btn{
  color: var(--text-color);
}
    参考資料
    https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
    pytorch学習1インストールと入門
    同時実行とsychronizationの試み−第1部:最初のアプローチ