1週間がゆっくりと過ぎていくと思っていたら、いつの間にか2週目.
基礎を中心に勉強しているが、よく勉強しているかどうか分からない.
基礎というのが一番ですが、何か行き過ぎたところがあるのではないかと不安です.
CSSは難しいですが、課題は面白いです.デザインの変化をリアルタイムで確認できます.
時間が経つのが速くて、退屈な感じがしません.
まだ基礎を学んだことがありませんが、これも基礎を築いて、次の授業が簡単にできます.
あるようです.

CSS

CSSとは?

CSSは、HTML、XHTML、XMLなどの積層スタイルシートの略です.
ドキュメントスタイルを修飾するときに使用されるスタイルシート言語.

CSSの基本構造

CSSファイルをHTMLファイルに接続すると、htmlドキュメントのリンクラベルにhref属性でファイルが接続されます.
linkラベルは、HTMLファイルやその他のファイルをリンクするために使用されます.
積層スタイルシートはスタイルシートであるため、relプロパティにスタイルシートを追加します.
hrefプロパティには、ファイルの場所を追加する必要があります.

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  flex: 1;
}
main {
  flex: 1;
  padding: 0 20px;
}
nav {
  flex: 0 0 180px;
  padding: 0 10px;
}
aside {
  flex: 0 0 130px;
  padding: 0 10px;
}

CSSプロパティを追加するには、次の手順に従います。

CSSファイルのプロパティを追加するには、大きく3つの方法があります.

1.外部スタイルシート

<link rel="stylesheet" href="index.css" />

htmlドキュメントのリンクタグにhrefプロパティでファイルを接続します.
linkラベルは、HTMLファイルやその他のファイルをリンクするために使用されます.
積層スタイルシートはスタイルシートであるため、relプロパティにスタイルシートを追加します.
hrefプロパティには、ファイルの場所を追加する必要があります.

2.内部スタイルシート

<style>
  h1 {
    color: blue;
  }
</style>

htmlドキュメントのスタイルラベルにCSSプロパティを定義します.

3.インラインスタイル

<nav style="background: #eee; color: blue">...</nav>

タグ内部でstyle属性でCSS属性を定義します.

デフォルトコレクタ

1.タグにスタイルを適用

h4 {
  color: red;
}

h 4ラベルの色を変更

2.idでスタイルを名前付けて適用する

<h4 id="navigation-title">This is the navigation section.</h4>

#navigation-title {
  color: red;
}

3.class応用造形と命名

<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-item {
  text-decoration: underline;
}

4.複数のclassを1つのエンティティに適用する

<li class="menu-item selected">Home</li>

.selected {
  font-weight: bold;
  color: #009999;
}

idとclassの違い

idclass#を選択します.選択したドキュメントに同じ値を持つ要素が1つしかない複数の要素をスタイル分類(classification)し、特定の要素の名前を付ける

CSSリファレンス

W3Schools
MDN