[Web開発]CSSの基本知識


💡CSS


•HTML親-子構造:HTMLタグが自分を囲むタグ(親タグ)を変更した場合、その内容(子タグ)も影響を受けます.
•CSSは修飾に使用されますが、ターゲットを指定する必要があります.クラスは、クラスに名前を作成し、修飾するオブジェクトを指定する署名です.(次のコードを参照)
•CSSはhead an styleスペースを作成して使用します.
例えば、mytitleというclassを飾るためにhead an style部分にあります.mytitle { ... } こう書く
•CSS:
👉背景
background-color
background-image
background-size
👉サイズ
width
height
👉フォント
font-size
font-weight
font-family
color
👉間隔
margin
padding
👉以前に作成した簡単なログインページでは、h 1ラベル部分を装飾します.
h 1タグ部分にclass=「mytitle」部分を追加し、修飾するターゲットのラベルを作成します.
あとは頭の上mytitle{...} mytitle classターゲットに修飾する方法を説明するセクションを追加します.
h 1ラベル部分の字を赤に変えました(color:red;)フォントサイズは60 pxです.(font-size:60px)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
    <style>
        .mytitle{
            color:red;
            font-size:60px;
        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인페이지</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>
</body>
</html>
👉したがって、h 1タグ部分が下図のように変更されていることを確認できます.