ボーダー属性の使用
1. ボーダーのスタイル
- ボーダーの幅 border-width
- ボーダーのスタイル ボーダーのスタイル
- ボーダーの色 ボーダーの色
2. ボーダー属性の属性値
- ボーダーの幅: 値と単位 (px)
-境界線のスタイル: 実線 (実線) 破線 (点線) 点線 (点線) 二重線 (二重実線)
- 境界線の色
- 英単語: 黄色、緑、赤...
- 16 進数:
- # で始まり、6 が続きます文字 (0~9a~f) #1234ab
- 次の 6 文字が等しい場合は 3 と省略できます
- #778899(#789) #000 #fff #ccc
3. border 属性の省略方法 -
attribute: border
- attribute 値: border-width border-style border-color
4. 要件によって、境界線の他の属性の使用法を拡張します
- 上の境界線の色を変更します: border-top-color
- 右側のすべてのスタイルを変更します: border-右
- ラベル自身の border:border:none/0 をクリアします
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
/* border-width: 2px;
border-style: double;
border-color: pink */
border: 5px solid #000;
border-top-color: green;
border-right: 2px dashed red
}
</style>
</head>
<body>
<div></div>
</body>
</html>レンダリング:
境界プロパティを使用して三角形を描画します: (フロントエンドのインタビューの質問でよく使用されます)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
background-color: pink
}
div{
width: 0;
height: 0;
border: 100px solid #000;
border-top-color: transparent;/* 透明 */
border-right-color: red;
border-bottom-color: transparent;
border-left-color: transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>レンダリングは次のとおりです。
ボックスモデルのプロパティのまとめ
1. コンセプト: 要素間の間隔を設定する
2. コンポーネント: コンテンツ、パディング、ボーダー、マージン
3. ボックスモデルの分類
- 標準ボックスモデル
- ボックス自体のサイズ: コンテンツ+パディング+ボーダー
- ボックス実際のサイズ: content+paddinng+border+margin
- 奇妙なボックス モデル
- ボックス自体のサイズ: content(paddinng+border)
- ボックスの実際のサイズ: content(paddinng+border)+margin
4. 奇妙なボックスの作成方法ボックス モデル (IE)
- 属性: box-sizing
- 属性値: content-box (標準)/border-box (奇妙な)
- 機能: パディングとボーダーの両方がボックス内で成長し、ボックスの幅と高さを拡張しません
テキストサイズの設定
1. 属性: font-size
2. 属性値: 値に単位 (Web ページで一般的に使用される単位ピクセル px) を加えた値
- ブラウザのデフォルトのフォント サイズは 16px
- ブラウザの違いにより、公式の最小値フォントは 12px のみです
- px 単位以外にも利用可能な単位がたくさんあります
- pt、em、rem、%、deg、vw、vh、vamx、vmin、rpx
- em: 相対単位、親要素に対する相対計算がよく使用されます最初の行のインデント
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-size: 2em /* 2*16 */
}
span{
font-size: 32px;
}
</style>
</head>
<body>
<span>今天是个好日子!</span>
<div>
今天是个好日子!
</div>
</body>
</html>レンダリングは次のとおりです。
フォント タイプ属性
1. 属性: font-family
2. 属性値
- ブラウザのデフォルト フォント タイプは Microsoft Yahei (商用料金)、win システムのデフォルトは Song Ti/New Song Ti
- 中国語のプロパティ値: です。引用符（ダブル/シングル）を追加することをお勧めします
- 英語の属性値：属性値に英単語が1つしかない場合、引用符は省略でき、複数の引用符を追加する必要があります
- セットフォントを使用する場合は、ダウンロードする必要がありますローカルのフォント パッケージ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-family:'Times New Roman', Times, serif,"微软雅黑"
/* 汽车备胎: 字体1,字体2*/
}
</style>
</head>
<body>
今天是周五了,明天我放假
<div>今天是周五了,明天我放假</div>
</body>
</html>レンダリングは次のとおりです。
ボールドとイタリックの属性
1. ボールド属性 1.
属性: font-weight
2. 属性値
- 100~900 の間の整数を設定します (100~500 は通常のフォントを意味し、600~900 はボールド フォントを意味します)
- 太字/太字 太字/太字
- 重要: 通常はデフォルトの太字スタイルをクリアします
Two: Italic 属性
1. 属性: font-style
2. 属性値
- italic (イタリック)
- oblique (斜めテキスト)
- 重要: normal デフォルトのイタリック スタイルをクリアする
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-weight: bolder;
font-style: oblique
}
b,strong{
font-weight: normal
}
i,em{
font-style: normal
}
</style>
</head>
<body>
<b>这是一段加粗的文本内容</b> <strong>这是一段加粗的文本内容</strong>
<div>这是一段正常的文本内容</div>
<i>这是一段倾斜的文本内容</i> <em>这是一段倾斜的文本内容</em>
</body>
</html>レンダリングは次のとおりです。
行の高さ属性は
1: 垂直方向の配置
1. 属性: line-height
2. 説明: ベースライン、複数行のテキスト間の 1 行目の上部と 2 行目の上部の間の距離
3. ポイント: 行の高さをコンテナの高さと同じです。1 行のテキストが垂直方向の中央に配置されます。
2: 水平方向の配置
1. 属性: text-align
2. 属性値
- 左、右、中央
- 両端を揃える
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 410px;
height: 80px;
border: 1px solid #000;
line-height: 80px;
}
</style>
</head>
<body>
<div>
欢迎XXX老板光临洗脚城
</div>
</body>
</html>レンダリングは次のとおりです。
複合属性の記述方法
1. 属性: font
2. 属性値: font-weight font-style font-size/line-height font-family
- font-weight font-style は、要件がなく、位置を指定できる場合は省略できます。交換
- font-size /line-height は変更できません
- font-family は、必要かどうかに関係なく記述する必要があります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 50px;
border: 1px solid #000;
/* font-size: 20px;
font-weight: bold;
font-style: oblique;
line-height: 50px;
font-family: 楷体; */
text-align: center;
font:20px/50px "微软雅黑"
}
</style>
</head>
<body>
<div>
文本
</div>
</body>
</html>レンダリングは次のとおりです。
フォントの色とその他の属性
1: フォントの色
1. 属性: color (font-color とは書かないでください)
2. 属性値:
- 英単語、16 進数
- rgb/rgba (赤、緑、青、アルファ) 透明度 0~1
- 16 進数 透明度 # 00000099 値 10~99
- 不透明度 0~1
2: テキスト装飾属性
1. 属性: text-decoration
2. 属性値
- 下線 下線
- 上線 上線
- 線なし 取り消し線 デル、s
- 重要: なし デフォルトの下線スタイルをクリアする
3: 最初の行のインデント
1. 属性: text-indent
2. 属性値
- px、em
- 最初の行のインデント プロパティは、テキストの最初の行に対してのみ機能します
- ブロック レベルの要素でのみ使用できます (幅と高さのサイズを設定します)。箱）
4: 漢字の間隔設定
1. 属性: letter-spacing
2. 属性値: px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
text-indent: 2em;
letter-spacing: 5px
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="">测试字体颜色</a>
<div>
测试字体颜色
</div>
</body>
</html>レンダリングは次のとおりです。
背景プロパティの使用:
1. 背景色属性
1. 属性: background-color/background
2. 属性値: 英単語、16 進数、rgb/rgba
2: 背景画像の属性
1. 属性: background-image
2. 属性値: url (パス)
3. 機能
- コンテナーが背景画像よりも大きい場合、画像はボックス全体を埋めるように並べて表示されます
- img 画像は位置を占める構造、背景画像はコンテナのサポートを必要とし、スペースを占有しない CSS スタイルです
- 背景画像がコンテナの幅と高さよりも大きい場合、コンテナと同じサイズの領域のみが表示されます
3: 背景タイリング属性
1. 属性: background-repeat
2. 属性値
- 繰り返し デフォルト値
- no-repeat タイリングなし
- 繰り返し x/y
4: 背景配置属性
1. 属性: background-position (配置)
2. 属性値: xy
- x: 左右中央
- y: 上下中央
- x 軸と y 軸も座標値を使用できます
5: 背景固定属性 (大型ゲーム)
1. 属性: background-attachment
2. 属性値
- スクロール デフォルト値はスクロールを意味します
- 固定 固定
6: 省略方法
1. 属性: 背景
2. 属性値: カラー画像タイル配置固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 700px;
height: 500px;
background: pink url(https://ts1.cn.mm.bing.net/th/id/R-C.ca1c627af29f268cf8190facbf88a897?rik=6oVl7fARNbfZAg&riu=http%3a%2f%2fn.sinaimg.cn%2fdefault%2f20150729%2fRtwH-fxfhxmp9761470.jpg&ehk=VA1RouduUbgv4aCid2x4BfnVlA0cHXwIuy47gZAlonM%3d&risl=&pid=ImgRaw&r=0) no-repeat center
/* background: pink;
background:pink url(https://ts1.cn.mm.bing.net/th/id/R-C.ca1c627af29f268cf8190facbf88a897?rik=6oVl7fARNbfZAg&riu=http%3a%2f%2fn.sinaimg.cn%2fdefault%2f20150729%2fRtwH-fxfhxmp9761470.jpg&ehk=VA1RouduUbgv4aCid2x4BfnVlA0cHXwIuy47gZAlonM%3d&risl=&pid=ImgRaw&r=0);
background-repeat: no-repeat;
background-position: center */
/* 水平方向=垂直方向 可以简写 */
}
/* body{
background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.ca1c627af29f268cf8190facbf88a897?rik=6oVl7fARNbfZAg&riu=http%3a%2f%2fn.sinaimg.cn%2fdefault%2f20150729%2fRtwH-fxfhxmp9761470.jpg&ehk=VA1RouduUbgv4aCid2x4BfnVlA0cHXwIuy47gZAlonM%3d&risl=&pid=ImgRaw&r=0);
background-attachment: fixed
} */
</style>
</head>
<body>
<div>
凡凡
</div>
</body>
</html>レンダリングは次のとおりです。
リスト プロパティ:
順序付きリストと順序なしリストのデフォルト スタイルには互換性の問題があり、通常は使用されません. これらはクリアする必要があります.
1. 属性: list-style
2. 属性値: なし
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul,ol,li{
list-style: none
}
</style>
</head>
<body>
<ul>
<li>这是一段文本</li>
</ul>
<ol>
<li>这是一段文本</li>
</ol>
</body>
</html>レンダリングは次のとおりです。
