CSS

CSSの概要

CSSはCascading Style Sheetsの略で、中国語名はCascading Style Sheetsです。CSSは、フォント、色、境界線、間隔、背景、要素の位置など、HTML 要素の外観とレイアウトを制御するために使用されます。

HTMLはページの構造を整理し、CSSはページのスタイルを設定します。構造とスタイルを分離すると、コードの可読性と再利用性が向上します。

HTMLでのCSSの使用

CSSは3つの一般的な方法がある。

ライン内のスタイル

要素のstyle属性からスタイルを直接記述するには、次の手順に従います。

<input type="text" style="color: red;" />

インラインスタイルは現在の要素にのみ適用され、小規模で一時的なスタイル設定に適し、大規模な再利用にはつながりません。

内部スタイルシート

HTMLページので

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>内部样式表示例</title>
    <style>
        input {
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" />
</body>
</html>

内部スタイルシートは通常、現在のHTMLページにのみ適用されます。

外部スタイルシート#外部スタイルシート#

CSSコードを別のファイルに保存し、<link>タグを使用してインポートします。

<link rel="stylesheet" type="text/css" href="css 文件地址" />

外部スタイルシートは複数のページで再利用でき、実際の開発では最も一般的な方法です。

CSS 基本構文

CSSルールはセレクタと宣言ブロックで構成されています。

选择器 {
    属性名: 属性值;
    属性名: 属性值;
}

セレクタはスタイルを設定する必要のある要素を特定し、宣言ブロックは特定のスタイルを記述します。複数の宣言はセミコロンで区切られます。

CSSセレクター

ラベルセレクター

タグセレクタでは、ページ内の同じ名前のタグがすべて選択されます。

input {
    color: red;
}

IDセレクター

各 HTML 要素にはid属性を設定できます。IDセレクタは#で始まります。

#box {
    width: 300px;
    height: 300px;
}

同じページ内のidは一意のままにしてください。

クラスセレクタの選択

クラスセレクタは、.で始まる要素のclass属性によって要素にマッチします。

.btn {
    width: 200px;
    height: 40px;
}

同じクラスを複数の要素に適用することができ、1つの要素で複数のクラスを同時に使用することもできます。

子孫セレクター

子孫セレクタを使用して、要素内の適格な子孫要素を選択します。

.box input {
    border-radius: 5px;
}

このスタイルでは、クラス名boxの要素内のすべてのinput要素が選択されます。

グループ化セレクター

複数のセレクタが同じスタイルを使用する場合、コンマを使用して結合できます。

h1,
h2,
h3 {
    color: blue;
}

疑似クラスセレクタ

疑似クラスは要素の特定の状態を記述するために使用されます。ハイパーリンクでよく使われる擬似クラスは次のとおりです。

:link：未アクセスのリンク。
:visited：訪問したリンク。
:hoverマウスポインタが要素に移動します。
:active要素がアクティブになっています。たとえば、マウスが押されても離されていません。

a:link {
    color: red;
}

a:visited {
    color: gray;
}

a:hover {
    color: green;
}

a:active {
    color: blue;
}

これらの記述は擬似要素セレクタではなく擬似クラスセレクタです。擬似元素は通常::before、::afterなどの形を用いている。

共通のスタイル属性

寸法と間隔

width：要素の幅。
height：元素の高さ。
margin：外側からの距離
padding：内側マージン。

色と背景

color：文字の色。
background-color：背景色。
background-image：背景画像。
background-size：背景画像サイズ。
background-repeat：背景画像の重複。

フォントとテキスト

font-size：フォントサイズ。
font-family：フォントファミリ。
font-weight：フォントの太さ。
text-alignテキストの水平配置。

境界線とその効果

border：境界線。
border-radius：フィレット。
box-shadow：影。
cursorマウスポインタスタイル。

ケース1：ボタンパネル

CSSファイル

body {
    /* 设置页面背景图片 */
    background-image: url(img/fish.jpg);
    background-size: 1000px;
    background-repeat: no-repeat;
}

#box {
    width: 300px;
    height: 300px;
    margin: 50px auto;
    background-color: #cccccc80;
    border-radius: 10px;
    text-align: center;
}

.btn {
    width: 200px;
    height: 40px;
    margin-top: 20px;
    border: 0;
    border-radius: 5px;
    background-color: #cc33cc;
    color: white;
    font-family: 华文行楷;
    font-size: 30px;
    font-weight: bold;
}

.btn:hover {
    background-color: #cc66cc;
    cursor: pointer;
}

.btn:active {
    background-color: #cc99cc;
}

HTMLファイル

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>按钮面板</title>
    <link rel="stylesheet" type="text/css" href="css2.css" />
</head>
<body>
    <div id="box">
        <img src="img/dog.png" width="100" height="150" alt="小狗" />
        <button class="btn">按钮1</button>
        <button class="btn">按钮2</button>
    </div>
</body>
</html>

ケース2：登録インターフェイス

CSSファイル

.box {
    width: 400px;
    height: 300px;
    margin: 100px auto;
    padding-top: 50px;
    border-radius: 10px;
    background-color: #6699ff;
    box-shadow: 3px 3px 10px #006666;
    text-align: center;
}

.title {
    color: #9900cc;
    font-size: 20px;
    font-weight: bold;
}

.inp {
    margin-top: 20px;
}

input {
    width: 300px;
    height: 35px;
    border: 0;
    border-radius: 5px;
}

.btn {
    margin-top: 20px;
    background-color: #cc99cc;
    color: white;
}

.btn:hover {
    background-color: #cc33cc;
    cursor: pointer;
}

.name {
    width: 250px;
    padding-left: 42px;
    background-image: url("img/name.jpg");
    background-size: 40px;
    background-repeat: no-repeat;
}

.pwd {
    width: 250px;
    padding-left: 42px;
    background-image: url("img/pwd.jpg");
    background-size: 40px;
    background-repeat: no-repeat;
}

HTMLファイル

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>登录界面</title>
    <link rel="stylesheet" type="text/css" href="css3.css" />
</head>
<body>
    <div class="box">
        <div class="title">登&nbsp;&nbsp;录&nbsp;&nbsp;界&nbsp;&nbsp;面</div>
        <div class="inp">
            <input type="text" class="name" placeholder="请输入用户名" />
        </div>
        <div class="inp">
            <input type="password" class="pwd" placeholder="请输入密码" />
        </div>
        <div class="inp">
            <input type="submit" class="btn" value="提交" />
        </div>
    </div>
</body>
</html>