[CSS]CSSの基礎

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

1.CSSのスタイル


1)CSSの様式
선택자 { 속성1: 속성값1; 속성2: 속성값2;}
  • 選択者:スタイルをどのラベルに適用するかを示すプロンプトが表示されます.
  • のかっこ:{}の間にスタイル情報が含まれています.
  • ハーフクローン:;複数のスタイル規則を区切りで指定します.
    ->プロパティと値は、スタイルルールと呼ばれるペアで構成されます.

    • 2.スタイルシート

  • スタイルシート
  • スタイルシートは、ブラウザのデフォルトスタイルとユーザースタイルに分けられます.
  • ユーザースタイルは、インラインスタイル、内部スタイル、外部スタイルに分けられます.

    • 1)ブラウザのデフォルトスタイル:Webブラウザでデフォルトで作成されたスタイルシート
    2)ユーザースタイル:Webサイト作成者によって作成されたスタイルシート
  • 行スタイル:単純なスタイル情報を適用するスタイルシート
  • 簡単なスタイル情報であれば、スタイルシートを使用せずに適用するオブジェクトに直接表示されます.
    • <body>
    <h1> 인라인 스타일 </h1>
    <p style="color: blue;"> 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 적용할 대상에 직접 표시한다. </p>
    <p> 이런 방법을 인라인 스타일이라고 한다. </p>
</body>
  • 内部スタイルシート:スタイルを複数の場所に適用するためのスタイルシート
    これは、
  • ページドキュメントで使用されるスタイルを同じドキュメントに整理したものです.
  • スタイル情報は、Webドキュメントをブラウザ画面に表示する前に決定する必要があります.したがって、すべてのスタイル情報はheadラベルで定義され、スタイルラベル間で作成されます.
    • <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
      h1 {
          padding: 10px;
          background-color: bisque;
          color: aquamarine;
      }
  </style>
</head>
<body>
  <h1> 내부 스타일 시트 </h1>
  <p> 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것이다. </p>
  <p> 적용할 태그의 스타일을 내부 스타일 시트에 작성한다. </p>
</body>
  • 外部スタイルシート:スタイル情報を個別に格納するスタイルシート
  • の複数のWebドキュメントで使用されているスタイルを個別のファイルとして保存し、必要に応じてインポートして使用します.
  • スタイルラベルを使用せずにWebドキュメントに接続する必要があるため、スタイルはドキュメントに適用する必要があるため、リンクラベルを使用して外部スタイルシートに接続します.
    • <link rel="stylesheet" href="외부 스타일 시트 파일 경로">

    3.CSSのデフォルト選択プログラム


    1)すべてのオプション:スタイルをドキュメント内のすべての要素に適用し、*を使用してスタイルをすべてのサブ要素に一度に適用します.
    기본형 * { 속성: 값; ... }
  • Webブラウザのデフォルトスタイルを初期化するときによく使用されます.
    ex)利益とダウンジャケットの理由で設計が不潔である場合、選択者全体を使用してWebドキュメント全体で利益とダウンジャケットのマージンを0に指定します.
    • 2)タイプ選択者:特定のタグを使用するすべての要素にスタイルを適用します.
    ->タイプセレクタを使用してスタイルを指定すると、そのスタイルはタグを使用するすべての要素に適用されます.
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1> 타입 선택자 </h1>
    <p> 특정 요소에 스타일을 적용하는 타입 선택자 </p>
    <p> 이렇게 하면 p 요소의 스타일은 한 번만 정의하였지만, </p>
    <p> 웹 문서에 있는 모든 p 요소에 스타일을 적용한다. </p>
</body>
    3)クラス選択者:スタイルを特定の部分に適用します.
    ->同じラベルでも、一部は異なるスタイルを適用するために使用されます.
  • クラス名を使用して他の選択者と区別します.この場合、クラス名の前にあります.貼り付けなければなりません.
    • <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            font-style: italic;
        }
        .accent {
            border: 1px solid blue;
            padding: 5px;
        }
        .bg {
            background-color: violet;
        }
    </style>
</head>
<body>
    <h1 class = "accent bg"> 클래스 선택자 </h1>
    <p> 특정 부분에 스타일을 적용하는 클래스 선택자 </p>
    <p> 같은 태그라도 일부는 다른 스타일을 사용하고 싶다면 <span class="accent"> 클래스 선택자 </span> 를 사용한다. </p>
    <p> 클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별하는데 이때 클래스 이름 앞에 . 을 반드시 붙여야 한다. </p>
    <p> 클래스 이름은 사용자가 기억하기 쉽게 임의로 지정하면 된다. </p>
</body>
    4)idセレクタ:特定の部分に一度だけスタイルを適用できます.
    クラスセレクタはドキュメントに複数回適用され、idセレクタはドキュメントに1回のみ適用されます。
  • . スタイルを指定するには、#を使用してWebドキュメントの特定の部分を選択します.
    • 5)グループ選択者:同じスタイル規則を使用する要素がグループ化されます.
  • 複数の選択者で同じスタイル・ルールが使用されている場合、複数の選択者を区切り記号でリストし、1回のスタイル・ルールのみを定義します.
    • 선택자1, 선택자2 {스타일 규칙}

    4.カスケードスタイルシート


    1)カスケード

  • カスケード:CSSの「C」の略で、スタイルシートの優先度が上から下まで勾配を採用することを意味します.
    ->CSSは、優先度のあるスタイルシートです.
    ->CSSは、Web要素に複数のスタイルを適用する場合、優先度に応じて適用するスタイルを決定します.
    • スケートはスター同士の衝突を防ぐ概念で、2つの方法がある。 スタイル優先度:スタイルルールの重要度と適用範囲に基づいて優先度を決定し、優先度に基づいて上から下へスタイルを適用します。 スタイル継承:タグの含む関係に基づいて、親要素のスタイルを上から下にサブ要素に渡します。

    2)スタイル優先度

  • Webブラウザのコンテンツを表示する場合は、3つのスタイルを同時に使用できます.
    ->コンピュータユーザによって指定されたスタイル、Webドキュメントを作成する作成者のスタイル、Webブラウザのデフォルト設定のスタイル
  • の重要度が同じスタイルであれば、スタイル適用範囲に基づいて優先順位を決定することができる.
  • スタイルの適用範囲が狭いほど、必要な要素のみに適用されるスタイルほど優先度が高くなります.
    でもここではスタイリングルールに従います!重要性を加えれば、そのスターの優先順位は他のスタイルより高くなります.
  • の重要度と適用範囲が同じ場合、定義されたスタイルのソース順序に基づいて優先度が決定されます.
    • 3)スタイル継承
  • スタイル継承とは、スタイルシートのサブエレメントにスタイルが個別に指定されていない場合、親エレメントのスタイル属性がサブエレメントに渡されることを意味します.
    • JavaScriptの閉鎖を理解する最も簡単な方法
    redisシリーズ:redisの紹介とインストール