CSSの概要

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

HTMLタグはもともと、文書の内容を定義するために設計されていました。<H1>、<P>、<表>タグなど、HTMLの意思が表明されたメッセージを使用して、この段落「「これは」テーブルであるとのように」「これは、タイトルです」。同時に、文書のレイアウトは、任意の書式タグを使用せずに、ブラウザによって行われます。

すべての主要なブラウザは、カスケーディング・スタイル・シートをサポート

DIVと理解のスパン

DIVは、単独で使用されるブロック要素（単一の表示ライン）は、意味を持たず、主にページレイアウトのため、CSSに関連して使用されなければならない、HTMLタグです。
スパンは、単独で意味を持たないHTMLタグ、インライン要素（表示ライン）であり、組み合わせのCSS、主に修飾コンテンツ囲まれたパターンで使用されなければなりません。

クラスセレクタ

クラスセレクタの役割を再生するには、ドキュメント上のクラスセレクタ世紀のマークを使用する前に。

.name{text-align:center}

文書の後半に、スタイル関連の「クラス」属性、および「名前」の値として指定さで事前定義されたスタイルを含むことにより、明示的に有するどのようなスタイルのタグの特定の場合のために選択

<p class=name>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .sheen{font-size: large;color: salmon}
    </style>
</head>
<body>
<div class="sheen">
    Sie sprechen gut Deutsch.
</div>
<div class="star">
    Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div class="sheen">
    Nein,ich studiere.
</div>
</body>
</html>

画像のキャプション

IDセレクタ

また、ボード番号またはハッシュとして知られている-番号ID＃フロントセレクタとIDセレクタ類似クラスセレクタ。クラスセレクタのように、IDセレクタは、ワイルドカードセレクタを無視することができます。
IDは一度だけ使用できる一意の識別子であります

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style>
        #sheen{font-size: x-large;color: rosybrown}
        #star{font-size: large;color: #c0ffff}
        #clotho{font-size: xx-large;color: darkgreen}
    </style>
</head>
<body>
    <div id="sheen">
        Sheen:Sie sprechen gut Deutsch.
    </div>
    <div id="star">
        Star:Was machen Sie hier in Berlin?Arbeiten Sie hire?
    </div>
    <div id="clotho">
        Clotho:Nein,ich studiere.
    </div>
</body>
</html>

画像のキャプション

タグセレクタ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center}

    </style>
</head>
<body>
<h3>使用CSS</h3>
<div>
    类选择器
</div>
<div>ID选择器</div>
<div>标签选择器</div>
</body>
</html>

画像のキャプション

設定してリンクされたスタイル

リンクは、CSSスタイルが（など、色、フォントファミリ、背景、など）の多くがありますが属性を設定することができます。
それらが置かれているそれらの状態のスタイルに応じて設定することができるリンク特殊性。
：の4つの状態のリンク
通常、非訪問済みリンク-リンク：A
：訪問-ユーザーがリンクを訪問しました
： -ホバーマウスポインタがリンク上にある
： -リンクが一瞬をクリックすると、アクティブA

CSSスタイルの導入

方法の紹介：

1). 行内引入: <a style="行内引入的样式">
2). 内部引入: 写在head标签里面的style标签里面的样式;
3). 外部引入: 将css样式独立成一个文件， 通过<link rel="stylesheet" href="css/main.css">与当前html文件链接在一起.
三种引入方式的优先级: 就近原则

//CSS文件
div {
    width: 80%;
    margin: 0 auto;
    padding: 0;

}

ul {
    list-style-type: none
}

li {
    display: inline-block;
    width: 20%;
    background: snow;
    color: #333333;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: large;
    text-transform: capitalize;
}

li:hover {
    background: green;
    color: snow;
}

a:hover {

    color: snow;

}

<!--HTML文件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            background: red;
        }
    </style>
    <link rel="stylesheet" href="css/main.css">

</head>
<body>

<div>
    <ul>
        <li style="background: blue">
            <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
        </li>
        <li>CSS</li>
        <li>JS</li>
        <li>python</li>
    </ul>
</div>
</body>
</html>

画像のキャプション

ギャングのpython計画---- CSSスタイルクラスを開発

CSSの概要

DIVと理解のスパン

クラスセレクタ

IDセレクタ

タグセレクタ

設定してリンクされたスタイル

CSSスタイルの導入

おすすめ