CSS

記事のディレクトリ

序文
1つ、CSS
総括する

序文

その後、前回のフロントエンドレビュー01は、cssの関連知識のレビューを続けました。

ヒント：以下はこの記事の内容です。以下のケースは参照用です。

1つ、CSS

CSSは「カスケードスタイルシート」であり、Webページのスタイルを制御（強化）し、スタイル情報をWebページのコンテンツから分離できるようにするために使用されるマークアップ言語です。

1.CSS文法規則

例：p{ color:blue; font-size:50px; }

p：
セレクター：ブラウザーは、「セレクター」に従って、CSSスタイルの影響を受けるHTML要素（タグ）を決定します。
color、font-size：
property（property）は変更するスタイルの名前であり、各プロパティには値があります。属性と値はコロンで区切られ、中括弧で囲まれているため、完全なスタイル宣言（宣言）が形成されます。例：p {color：blue}
複数の宣言：複数の宣言を定義する場合は、次のことを行う必要があります。セミコロンを使用する各ステートメントを区切ります。最後のステートメントの最後にセミコロンを追加する必要はありませんが（ただし、各ステートメントの最後にセミコロンを追加してみてください）。
CSSコメント：/ *コメントコンテンツ* /

2. CSSとHTMLの組み合わせ（3種類）

2.1ラベルのスタイル属性に直接設定する

<span style="border: 2px solid lightblue;">span标签1</span>
<span style="border: 2px solid lightblue;">span标签2</span>
<span style="border: 2px solid lightblue;">span标签3</span>

効果：
CSSとHTMLの最初の組み合わせ

2.2ヘッドタグでは、スタイルタグを使用します

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span{
    
    
            border: 2px solid lightgreen;
        }
    </style>
</head>
<body>
<span style="border: 2px solid lightblue;">span标签1</span>
<span>span标签2</span>
<span>span标签3</span>
</body>

効果：
CSSとHTMLの2番目の組み合わせ

2.3 cssファイルを個別に書き込む（最もよく使用される）

cssスタイルを別のcssファイルとして記述し、リンクタグを介してインポートして再利用します。<link rel="stylesheet" type="text/css" href="./styles.css">cssスタイルファイルへのhtmlタグの使用。

cssファイル（新しいスタイルシート、cssを選択）：

span{
    
    
    border: 2px solid brown;
}

html：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<span style="border: 2px solid lightblue;">span标签1</span>
<span>span标签2</span>
<span>span标签3</span>

効果：
CSSとHTMLの3番目の組み合わせ
要約：最終効果は一連の効果に関連しており、どの方法が最後の最終効果です。

3.CSSセレクター

3.1タグ名セレクター

タグ名でスタイルを使用する

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span{
    
    
            border: 3px dashed skyblue;
            color: darkblue;
            font-size: 10px;
        }
    </style>

</head>
<body>
<span>span标签1</span>
<span>span标签2</span>
<span>span标签3</span>
</body>
</html>

効果：
タグ名セレクター

3.2IDセレクター

id属性を使用してスタイルを選択的に使用する

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        #id01{
    
    
            color: darkblue;
            font-size: 20px;
            border: 2px burlywood dashed;
        }
        #id02{
    
    
            color: yellowgreen;
            font-size: 30px;
            border: 3px red solid;
        }
    </style>

</head>
<body>
<span id="id01">span标签1</span>
<span id="id02">span标签2</span>
</body>
</html>

効果：
IDセレクター

3.3クラスセレクター（クラスセレクター）

クラス属性によるスタイルの選択的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>
    <style type="text/css">
        .class01{
    
    
            color: darkblue;
            font-size: 20px;
            border: 2px burlywood dashed;
        }
        .class02{
    
    
            color: yellowgreen;
            font-size: 30px;
            border: 3px red solid;
        }
    </style>

</head>
<body>
<span class="class02">span标签1</span>
<span class="class01">span标签2</span>
</body>
</html>

効果：
クラスセレクター

3.4コンビネーションセレクター

複数のセレクターが同じCSSスタイルを共有できるように、コンマで区切ります

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>
    <style type="text/css">
        .class01,#id01{
    
    
            color: darkblue;
            font-size: 20px;
            border: 2px burlywood dashed;
        }
    </style>

</head>
<body>
<span id="id01">span标签1</span>
<span class="class01">span标签2</span>
</body>
</html>

効果：
コンビネーションセレクター

4.一般的なスタイル

4.1フォントの色

色：青;
色は黒、青、赤、緑などの色名で書くことができます。色は
rgb値と16進表現値で書くこともできます：rgb（255,0,0）、＃00F6DE、 16を書く場合、16進数の値は＃を追加する必要があります

4.2幅

width：20px;
widthはピクセル値を書き込むことができます：20px;
またパーセンテージ値を書き込むことができます：20％;

4.3高さ

高さ：20px;
高さはピクセル値を書き込むことができます：20px;
パーセンテージ値も書き込むことができます：20％;

4.4背景色

背景色：＃0F2D4C

4.5フォントスタイル

色：＃FF0000;フォントの
色赤フォント-サイズ：20px;フォントサイズ

4.6赤の2ピクセルの実線の境界線

ボーダー：2px赤一色;

4.7DIV中心

マージン左：自動;
マージン右：自動;

4.8テキストの中央揃え：

text-align：center;

4.9下線を引くハイパーリンク

テキスト装飾：なし;

4.10表の細い線

table { border：1px solid black; / * set border * / border-collapse：collapse; / * merge borders * / } td、th { border：1px solid black; / * set border * / }

4.11リスト削除の変更

ul { リストスタイル：なし; }

総括する

今日はフロントエンドのCSSを確認しましたが、明日はJavaScriptを確認します。

フロントエンドレビュー02