CSS
-
コンセプト：
- 造園やページレイアウトコントロール
- カスケーディングスタイルシートカスケーディング・スタイル・シート
- 階層化：複数のスタイルは、同じhtml要素に作用するだけでなく、発効します
-
利点：
- 強いです
- 制御内容のプレゼンテーションとスタイルの分離
- デカップリング、結合を減らします
- 労働者のそれより簡単に分裂してください
- 開発効率を向上させます
-
CSSの使用： CSSとHTMLの結合様式
- インラインスタイル
- タグのCSSコードで指定されたスタイル属性
- 如：<divのスタイル=「色：赤;」> hell0世界</ div>
- 内部様式
- headタグ、タグのボディコンテンツ定義のスタイルのタグで、スタイルCSSコードラベルがあります
- インラインスタイル
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
<style>
div{
color: blue;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>
-
- 外部スタイル
- リソースファイルのCSSの定義
- headタグでは、タグのリンクは、外部のリソースファイルの導入を定義し
- HTMLファイル：
- 外部スタイル
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<div>hello world</div>
</body>
</html>
CSSファイル：
div{
color: green;
}
-
- 注意：
- これらの三つの方法、スコープを増やすのCSSの効果
- 最初のあまり一般的には、後者は、第二の使用します
- これは、ライトのように記述することができます:(第3）のヘッドタグれる
<スタイル>
@import「CSS / a.css」
</スタイル>
- 注意：
-
CSSの構文：
- フォーマット：
セレクタ{
プロパティ名1：1の属性値、
プロパティ名2：属性値2;
...
} - セレクター：フィルタ要素は同様の特性を持ちます
- 注：セミコロンによって必要とされる属性の各々 、分離特性が最後のセミコロンではないかもしれません。
- フォーマット：
-
セレクター：フィルタ要素は同様の特性を持ちます
- セレクタ根拠：
- IDセレクタ：id属性値、推奨値固有ID HTMLページの特定の要素を選択
構文：#ID属性値を{} - セレクタ要素：同一のラベル名と選択要素
構文：タグ名} {
注：IDセレクタ要素が優先セレクタよりも高いです - クラスセレクター：同じ要素のクラス属性値選択
の.class属性値{}：構文
注：セレクタ要素上クラスセレクタ優先
- IDセレクタ：id属性値、推奨値固有ID HTMLページの特定の要素を選択
- 拡張セレクタ：
- すべての要素を選択します
。構文：*}を{ - セレクタ設定：
構文：1つのセレクタを、{2}を選択 - 子セレクタ：フィルタエレメントセレクタセレクタ要素12
構文：セレクタセレクタ2 {1} - 親セレクタ：2 1親要素を選択するフィルタ選択
構文：セレクタ1>セレクタ{2} - 属性選択：選択要素の要素名、属性名=属性値
構文要素名[属性名=「属性値」] {} - 擬似クラス選択：ステータスを持ついくつかの要素を選択します
- 構文要素：{ステータス}
- 以下のような：<A>
- リンク：初期化状態
- 訪問：訪問した状態
- 活性：アクセスされた状態
- ホバー：マウスサスペンド状態
- すべての要素を選択します
- セレクタ根拠：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
<style>
#div1{
color: red;
}
div{
color: green;
}
.cls1{
color: blue;
}
div p{
color: pink;
}
div>p{
border: 1px solid;
}
input[type='text']{
border: 5px solid;
}
a:link{
color: pink;
}
a:hover{
color: green;
}
a:active{
color: yellow;
}
a:visited{
color: red;
}
</style>
</head>
<body>
<div id="div1">hello world</div>
<div>史迪仔仔仔</div>
<p class="cls1">戴小叮当</p>
<div>
<p>阿伟</p>
</div>
<p>阿伟</p>
<input type="text">
<input type="password"><br><br><br>
<a href="#">阿伟</a>
</body>
</html>
- 属性：
- フォント、テキスト
- フォントサイズ：フォントサイズ
- 色：テキストの色
- テキスト整列：整列
- 行の高さ：行の高さ
- 背景
- バックグラウンド：
- フレーム
- ボーダー：境界線を設定し、複雑なプロパティ
- サイズ
- 幅：幅
- 高さ：高さ
- ボックスモデル：コントロールのレイアウト
- マージン：マージン
- パディング：パディング
- デフォルトでは、パディングは、ボックス全体のサイズに影響を与えます
- ボックスサイズ：境界ボックス、ボックスの幅及び高さは、最終の大きさであるように、ボックスのプロパティを設定します
- フロート：フローティング
- 左
- 正しい
- フォント、テキスト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
<style>
div{
border: 1px solid red;
width: 100px;
}
.div1{
width: 100px;
height: 100px;
/*margin: 50px;*/
}
.div2{
width: 200px;
height: 200px;
padding: 50px;
box-sizing: border-box;
}
.div3{
float: left;
}
.div4{
float: left;
}
.div5{
float: left;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1"></div>
</div>
<div class="div3">aaaa</div>
<div class="div4">bbbb</div>
<div class="div5">cccc</div>
</body>
</html>
