TIL-CSS(CSS概要、CSS基本構文)

8346 ワード
CSS style テキストリンク

22.04.15


💜 積層スタイルシートの概要


CSSはHTMLとともにWebを構成するデフォルトのプログラミング要素である.HTMLがWebドキュメントにテキスト、画像、テーブルなどのコンポーネントを入れてスケルトンを作成する場合、CSSは色やサイズ、画像のサイズや位置、展開方法などのWebドキュメントの設計要素を担当します.
  • CSSは、デザイン要素をHTMLから分離することによって定義できる積層スタイルシートの略です.
    • 適切なCSSを定義することで、異なるWebページに適用できます.
  • Webドキュメントの内容にかかわらず、デザインを変更したり、デザインを保持したりするだけで、Webドキュメントの内容を簡単に変更できます.
  • は同じ文書構造を有し、異なるCSSトピックを適用することができる.

    • 🧡 Internal Style Sheet


    内部スタイルシートは、HTMLドキュメントにスタイルコードを入れる方法です.<Style>および`にCSSコードを挿入します.たとえば、HTMLドキュメントに次のコードを挿入すると、ドキュメント内のすべての要素のテキストが黄色に変わります.
    ※半クローンは、開始と終了を区別するために貼らなければなりません.※
    ex) 
    `<tittle>`web1-HTML`</tittle>`
`<meta charset="utf-8">`
`<style>`
 ` a {`
` color:yellow;`
` } `
`</style>`

    💚 text-decoration


    🎀 テキストの装飾を設定します.
  • none
    ->テキスト装飾は適用されません.
  • underline
    ->テキストの下部に線を付けます.
    • >`<tittle>`web1-HTML`</tittle>`
 `<meta charset="utf-8">`
 `<style>`
 ` a {`
` color:yellow;`
 `text-decoration: none;`
 ` } `
 `</style>`
    >   `<body>`
    `<h1>``<a href="index.html">`WEB`</font>``</a>``</h1>`
    `<ol>`
      `<li>``<a href="1.html">`HTML`</a>``</li>`
      `<li>``<a href="2.html" style="color:red;text-decoration:underline">`CSS`</a>``</li>`
      `<li>``<a href="3.html">`JavaScript`</a>``</li>`
    `</ol>`

    💛 CSSセレクタ、CSSのプロパティ


  • セレクタ
  • 声明
  • 属性
  • 属性値(Value)
    • [BOJ]13549号:鬼ごっこ3
    WEB自動化テスト_1自動化テストの概要