CSSの基礎 - のJava EE（b）の入門

Java EEの（b）に入門- CSSの基礎
　　ブログの庭iwehdio：https://www.cnblogs.com/iwehdio/

1、CSSの基礎

欠点のHTMLテーブルのレイアウト：
1. あまりにも多くのレベルをネスト、入れ子のための障害になりやすいです。
2. ページは柔軟十分ではありません、テーブルの全体のレイアウトを変更する必要の一部を変更したいです。
- DIV + CSSは、これらの問題を解決するために使用することができます。
ブロックHTMLタグ：DIVとスパン：
- divタグ：<div></div>行ごとのデフォルト、ワードラップ。
- spanタグ：<span></span>，同じ行に表示されるコンテンツ。
CSS：カスケーディングスタイルシート（カスケードスタイルシート）、美化し、コードの再利用性を向上させるために使用するHTMLページ。（HTMLページスケルトン決定、CSS最適化されたウェブサイトのパフォーマンスの結果）
CSSの構文は簡単です：
- スタイルタグでは、CSSコンテンツ、headタグでスタイルタグで最高の書き込みを書き込みます。文法構造：
```
<style>
选择器{
    属性名称1：属性的值1；
    属性名称2：属性的值2；
}
</style>
```

ヘルプへのセレクタは、変更されるラベルや要素を見つけます。

要素セレクター：

元素的名称{
    属性名称1：属性的值1；
    属性名称2：属性的值2；
}

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div{
            color: aquamarine;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>AAAA</div>
    <div>BBBB</div>
</body>

IDセレクタは：＃で始まります。IDが指定されたタグ識別ブロックです。IDは、それ以外の場合は、一般的に最初の設定がデフォルトになり、一意である必要があります。

#ID{
    属性名称1：属性的值1；
    属性名称2：属性的值2；
}

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #div1{
            color: aquamarine;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="div1">AAAA</div>
    <div>BBBB</div>
</body>

クラスセレクタ：そもそも。クラスは、ブロックタグのカテゴリを指定され、ブロックはクラスを指定することができ、タグのクラスが同じです。

. 类名{
    属性名称1：属性的值1；
    属性名称2：属性的值2；
}

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .part1{
            color: aquamarine;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="part1">AAAA</div>
    <div>BBBB</div>
    <div class="part1">CCCC</div>
    <div>DDDD</div>
</body>

CSSセレクタのグループ：カンマを複数選択するために使用を分離しました。

属性セレクタ：プロパティ指定された塗りつぶし[]で、タグの種類を始めます。そして、これらの特性を有するスタイルラベルを適用するだけでなく、これらのプロパティの値を指定することができます。

标签[属性]{
    属性名称1：属性的值1；
    属性名称2：属性的值2；
}

<head>
    <meta charset="utf-8">
    <title></title>
    <style> /* 只会改变AAA的颜色 */
        a[href][title='a']{
            color: crimson;
        }
    </style>
</head>
<body>
    <a href="#" title="a">AAA</a>
    <a href="#" title="b">BBB</a>
</body>

子孫のセレクター：2つのスタイルでタグ1という子孫を選択し、1と2は、スペースで区切っラベル、ラベル2ラベル1 2下のすべてのラベルのスタイルの変更が含まれることを意味し、ラベル1の子孫です。ラベル1>タグ2、その子孫を変更することなく、子孫の唯一の直接の親、子孫を変更する場合。

祖先 子代{
    属性名称1：属性的值1；
    属性名称2：属性的值2；
}
父代 > 子代{
    属性名称1：属性的值1；
    属性名称2：属性的值2；
}
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1 em{
            color: crimson;
        }
    </style>
</head>
<body>
    <h1>
        <p>AAAAA</p>
        <p>BBBBB</p>
        <em>CCCC</em>
        <p>
            <em>DDDDD</em>  <!--如果是 > 则此项不变色-->
        </p>
    </h1>
</body>

疑似クラスセレクタ：ハイパーリンクタグが主に使用。

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        a:link {color: black}   /*未访问的链接*/
        a:visited {color: pink} /*已访问的链接*/
        a:hover {color: green}  /*鼠标移动到链接上*/
        a:active {color: blue}  /*选定的链接*/
    </style>
</head>
<body>
    <a href="#">BBBB</a>
</body>

導入のCSS方式：
- 外部スタイル紹介：、.cssファイルを作成した.cssスタイルのタグファイルの内容を貼り付けます。その後、元のスタイルタグの位置、<link>タグの導入。
  
  relが導入されたタイプは、スタイルシートは、スタイルシートを再分配を示しています。導入されたファイルの.cssへのhrefの相対パス。
```
.part1{
    color: aquamarine;
    font-size: 50px;
}
```
```
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style1.css"/>
</head>
<body>
    <div class="part1">AAAA</div>
    <div>BBBB</div>
    <div class="part1">CCCC</div>
    <div>DDDD</div>
</body>
```
- 内部様式：スタイルタグで直接CSSスタイルを書きます。
- インラインスタイル：CSSスタイルで書かれた、ラベルに直接スタイルのプロパティを追加します。
```
<div style="color: aqua;">AAAA</div>
```
CSSフロート：
- フローレイアウトを実現。自動的にラップが追加されていない、適応後添加は、行に表示されます。
- 浮動要素は、文書の通常の流れのうちになります、それは、文書の通常の流れの中のスペースを占有しません。
- スタイル属性フロートプロパティを指定することにより、または左rigthとして指定することができます。
```
<div style="float:left;width: 200px;height: 200px;background-color: aqua;"></div>
        <div style="float:left;width: 200px;height: 200px;background-color: red;"></div>
        <div style="float:left;width: 200px;height: 200px;background-color: blue;"></div>
    </body>
</html>
```
- 明確なプロパティは、あなたはフロートをクリアすることができます。両側がフロートに許可されているとして指定され、左右フロートに許可されていない右側にあり、左にフロートさせています。
- あなたはフロート下のdiv要素は、上記に影響されないしたい場合は、空のdivを追加し、フロートをクリアするには、clearプロパティを指定する必要があります。
行の高さ：行の高さと効果を中心に上下にテキストと一致し、高さのスタイルを実現することができる指定します。
CSSセレクタの優先順位：
- インラインスタイル> IDセレクタ>セレクタクラス>要素セレクタ。
- より高い優先順位が低い優先順位の設定を上書き。
- タグは、近接効果の原則に従って、複数のクラスのために提供することができます。それに関係なく効果近くクラスセレクタから選択されたタグ内の二つのクラスのオーダーです。
ボックスモデル：パディングパディングが存在する（すなわち、境界boder図示）容器と外側容器の内容物との間。外側容器は、他の余白マージンを持つボックスがあります。マージンは、ボックスの位置を変更し、内容を変更することによってすることができます。
- 内边距：パディングトップ、パディング右、パディング下、パディング左。
- 外边距：マージントップ、マージン右マージン下、マージンは左。
- 簡単セットアップ：パディングとマージンプロパティ。
  - パディング：10pxの; 10pxのについてのすべてのアップとダウン。
  - パディング：10pxの20ピクセル、縦が10pxのですが、それは20ピクセル程度です。
  - パディング：10pxの20ピクセル30px;左10pxの、右側20ピクセル、下30px、20ピクセル（デフォルトでは、同一の右側）に。
  - 時計回りの方向から短いデフォルトで。マージンプロパティ共感。
CSS絶対位置：トップと左の位置を制御するために、トップを設定し、その後、左のプロパティを絶対、絶対、開放位置：プロパティの位置を指定します。

図2に示すように、ケース

ケース1：Webサイトのホームページを最適化します。

クラスセレクタで最初のページを達成するために最適化されています。

実装：

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* logo、菜单、产品部分的样式 */
        .logo{
            float: left;
            width: 33%;
            height: 60px;
            line-height: 60px;  /*行高*/
        }

        .amenu{
            color: white;
            text-decoration: none; /*去掉下划线*/
            line-height: 50px;
        }
        .product{
            float:left;
            text-align: center;
            width: 16%;
            height: 240px;
        }
    </style>
</head>
<body>
    <div>
        <!--第一部分 logo -->
        <div>
            <div class="logo">
                <img src="../img/logo2.png" />
            </div>
            <div class="logo">
                <img src="../img/header.png" />
            </div>
            <div class="logo">
                <a href="#">登陆</a>
                <a href="#">注册</a>
            </div>
        </div>
        <div style="clear: both;"></div>
        <!--第二部分 菜单 -->
        <div style="background-color: black;height: 50px;">
            <a href="#" class="amenu">首页</a>
            <a href="#" class="amenu">手机数码</a>
            <a href="#" class="amenu">零食烟酒</a>
            <a href="#" class="amenu">日用百货</a>
        </div>
        <!--第三部分 产品 -->
        <div>
            <img src="../img/1.jpg" width="100%"/>
        </div>
        <div>
            <div><h2>最新商品<img src="../img/title2.jpg" /></h2></div>
            <div style="float:left;width: 15%;height: 480px;">
                <img src="../products/hao/big01.jpg" width="100%" height="100%"/>
            </div>
            <div style="float:left;width: 84%;height: 480px;">
                <div style="height: 240px;width: 50%;float:left;">
                    <img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
                </div>
                <div class="product">
                    <img src="../products/hao/small01.jpg" />
                    <p>榨汁机</p>
                    <p style="color: red;">￥998</p>
                </div>
             </div>
        </div>
    </div>
</body>

：ブログの庭iwehdio https://www.cnblogs.com/iwehdio/

CSSの基礎 - のJava EE（b）の入門

1、CSSの基礎

図2に示すように、ケース

おすすめ