7/2 CSS インラインCSS 外部CSS クラス指定（CSS）id指定（CSS） CSSで中央揃え margin 要素の検証

【CSS】

　Web文書、表示のレイアウトをする言語

　スタイルシート　・・・Web文書などのレイアウト、デザインを定義するための概念

　スタイルシートのおかげでhtmlをいじらずにデザインを変えられる

　スタイルシートをタグ内に書く→　インラインCSS

　スタイルシートの外部ファイルを作りそこに書く　→外部CSS

＜インラインCSS＞

　　色を変える・・・<p style="color:色コード;">テキスト</p>

＜外部CSS＞

　　使用方法　　head内に

　　　　　　<link rel="stylesheet"href="ファイル名.css"type="text/css">

　　　　　　　を記述でファイル名.css内の情報が読み込まれる

　　　　　　　　デザインをファイル名.cssに書けば適用される

＜クラス指定でCSS＞

CSSファイルに　タグ.クラス名{詳細}　を書く　

htmlファイルには　<タグ　class="クラス名">で適用

＜id指定でCSS＞

　　CSSファイルに　タグ#id名{詳細}　を書く

　　htmlファイルには<タグ　id="id名">　　で適用

＜画像挿入＞

　　画像のアクセス権が許可されてないと表示できない

＜画像中央揃え＞

htmlファイル---

<div class="center"><img src="画像ファイル名.jpeg" /></div>

CSSファイル---

.center{

text-align: center;

}

<位置取り＞

　　text-align:center　中央揃え

                        right,leftで左右に移動

       margin-left,top,right,bottomで余白の設定

　　　autoにすると中央揃え　　

  ・・・枠を作ってその中で中央揃え

ーーーCSSファイル

.sample1{

        width: 10000px;　　　　テーブルの幅

        height: 900px;　　　　　テーブルの高さ

        background: #ccc;

        background-color: white;　　　テーブルの色

        display: table-cell;

        vertical-align: middle;　　　　縦中央

        text-align:center;　　　　　　横中央　

}

＜ブロック要素とインライン要素の違い＞ 

・インライン・・・続けて書いても横に並ぶ

・ブロック・・・続けて書いても横に並ばない

　インラインの中にブロック要素を書いてはいけない

どれが、インライン要素でどれがブロック要素か知り必要がある。

【vi】

　　　dd　　　行削除

           1G　　　最初の行に移動

【要素の検証】

　Web上で右クリックで使える

   html,CSSのおかしいところをチェックできる