- 前に書かれている：Bilibili dark horse programmer pink Teacherのチュートリアルを参照してください
- アドレス：https : //www.bilibili.com/video/BV14J4114768?t=328&p=26
目次
行の高さ
行の高さ測定
- 行の高さを測定する方法：
1行のテキストが垂直方向の中央に配置されます
- 私たちが最も行の高さを使用する場所の1つは、次のとおりです。1 行のテキストをボックスの中央に垂直に配置できます
- テキストの行の高さはボックスの高さに等しい
- 行の高さ=上距離+コンテンツの高さ+下距離
- 上と下の距離は常に等しいため、テキストは垂直方向の中央に表示されます。
- 行の高さと高さの3つの関係
- 行の高さが高さに等しい場合、テキストは垂直方向に中央揃えになります
- 行の高さが高さより大きい場合、テキストは低くなります
- 行の高さが高さより小さい場合、テキストは高くなります
ケース：ナビゲーションバー
- 効果の上にマウスを置きます：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*1. 变化样式 有大小 一行显示 我们想到了 行内块元素*/ a { /*一定要进行模式转换 行内块*/ display: inline-block; width: 100px; height: 30px; /*行高等于高度 可以让单行文本呢垂直居中*/ line-height: 30px; background-color: pink; /*可以让文字水平居中*/ text-align: center; color: #fff; text-decoration: none; } /*2. 鼠标经过 变化底色 和 文字的颜色*/ a:hover { background-color: orange; color: yellow; } </style> </head> <body> <a href="#">新闻</a> <a href="#">体育</a> <a href="#">汽车</a> <a href="#">好用</a> </body> </html>
CSSの背景
背景色
background-color:颜色值; 默认的值是 transparent 透明的
背景画像（background-image）
background-image : none | url (url)
パラメータ 効果 なし 背景画像なし（デフォルト） url 絶対アドレスまたは相対アドレスを使用して背景画像を指定します background-image : url(images/demo.png);
- 注：画像のアドレスの背景、引用符なしのURLを推奨しています。
ケース：背景画像のプレゼンテーション
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .bg { width: 800px; height: 500px; background-color: pink; /*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/ background-image: url(images/l.jpg); } </style> </head> <body> <div class="bg"> 12312312312312312312312312312 </div> </body> </html>
バックグラウンドリピート
background-repeat : repeat | no-repeat | repeat-x | repeat-y
パラメータ 効果 繰り返す 背景画像は垂直方向と水平方向に並べて表示されます（デフォルト） リピートなし 背景画像がタイリングされていません リピート-x 背景画像は水平に並べて表示されます リピート 背景画像は垂直に並べて表示されます
ケース：背景画像タイル
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .bg { width: 800px; height: 500px; background-color: pink; /*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/ background-image: url(images/l.jpg); /*默认的是平铺图 repeat*/ /*background-repeat: repeat;*/ /*背景图片不平铺*/ /*background-repeat: no-repeat;*/ /*横向平铺 repeat-x*/ /*background-repeat: repeat-x;*/ /*纵向平铺*/ background-repeat: repeat-y; } </style> </head> <body> <div class="bg"> 12312312312312312312312312312 </div> </body> </html>
背景位置フォーカス
background-position : length || length background-position : position || position
パラメータ 値 長さ パーセンテージ|浮動小数点数と単位識別子で構成される長さの値 ポジション 上|中央|下|左|中央|右名詞
- 注意：
- background-image属性を最初に指定する必要があります
- 位置の後にx座標とy座標が続きます。位置名詞または正確な単位を使用できます。
- 2つの値を指定し、どちらも方位角の名前である場合、2つの値の順序は関係ありません。たとえば、左上と左上は同じ効果があります
- 位置名詞を1つだけ指定した場合、他の値はデフォルトで中央揃えになります。
- 位置の後に正確な座標が続く場合、最初の座標はxでなければならず、2番目の座標はyでなければなりません
- 1つの値のみを指定する場合、値はx座標である必要があり、もう1つの値はデフォルトで垂直方向の中央に配置されます
- 場合指定された2つの値は、正確な単位と軸受名の混合物である、最初の値がx座標であり、そして第2の値はy座標であります
- 実際の作業で最も使用されるのは、背景画像の中央揃えです。
ケース：背景の位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .bg { width: 800px; height: 500px; background-color: pink; /*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/ background-image: url(images/l.jpg); /*背景图片不平铺*/ background-repeat: no-repeat; /*背景位置*/ /*background-position: x坐标 y坐标;*/ /*background-position: right top; 右上角*/ /*background-position: left bottom; 左下角*/ /*background-position: center center; 水平居中 垂直居中*/ /*则两个值前后顺序无关 因为是方位名词*/ /*background-position: center left; */ /*如果只指定了一个方位名词，另一个值默认居中对齐*/ background-position: top; } </style> </head> <body> <div class="bg"> 12312312312312312312312312312 </div> </body> </html>
ケース：小さな絵の左側のボックスを揃えます
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .icon { width: 150px; height: 35px; background-color: pink; background-image: url(images/sina.png); background-repeat: no-repeat; background-position: 10px center; } </style> </head> <body> <div class="icon"></div> </body> </html>
背景添付
- 背景の添付は、背景が回転しているか固定されているかを説明するためのものです
background-attachment : scroll | fixed
パラメータ 効果 スクロール 背景画像はオブジェクトのコンテンツと共にスクロールします 修繕 固定背景画像
ケース：背景の添付ファイル
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 3000px; background-image: url(images/sms.jpg); background-repeat: no-repeat; /*这种写法一般是我们以后 超大背景图片的做法 背景定位*/ background-position: center top; /*背景固定的*/ background-attachment: fixed; } p { font-size: 30px; color: #fff; } </style> </head> <body> <p>天王盖地虎，小鸡炖蘑菇</p> </body> </html>
背景の省略表記
- 背景：属性値の書き込み順序は、正式には必須ではありません。読みやすくするために、次のように書くことをお勧めします。
- 背景：背景色背景画像アドレスアドレス背景タイル背景スクロール背景位置;
background: transparent url(image.jpg) repeat-y scroll center top ;
ケース：バックグラウンドショートハンド
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 3000px; /*background-color: #ccc; background-image: url(images/sms.jpg); background-repeat: no-repeat; background-position: center top; background-attachment: fixed;*/ /*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/ background: #ccc url(images/sms.jpg) no-repeat fixed center top; } p { font-size: 30px; color: #fff; } </style> </head> <body> <p>天王盖地虎，小鸡炖蘑菇</p> </body> </html>
ケース：リンクナビゲーションバーの包括的なケース
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .nav { /*让里面的6个链接 居中对齐水平 这句话对 行内元素 行内块元素都有效果的*/ text-align: center; } .nav a { /*有大小的 因为a 是行内元素 不能直接设置宽度和高 必须要转换 行内块元素*/ display: inline-block; width: 120px; height: 50px; /*行高等于盒子的高度 就可以让单行文本垂直居中*/ line-height: 50px; color: #fff; /*background-color: pink;*/ text-decoration: none; /*背景简写*/ background: url(images/bg.png) no-repeat; } /*鼠标经过nav里面的链接， 背景图片更换一下就好了*/ .nav a:hover { background-image: url(images/bgc.png); } </style> </head> <body> <div class="nav"> <a href="#">网站首页</a> <a href="#">网站首页</a> <a href="#">网站首页</a> <a href="#">网站首页</a> <a href="#">网站首页</a> <a href="#">网站首页</a> </div> <a href="#">123</a> </body> </html>
透明な背景（CSS3）
background: rgba(0, 0, 0, 0.3);
- 最後のパラメーターは、0〜1のアルファ透明度範囲です。
- 私たちは、0.3の0を省略し、背景を書き込むのに慣れています。rgba（0、0、0、.3）;
- 注：半透明の背景とは、ボックスの背景が半透明であり、ボックス内のコンテンツには影響がないことを意味します
- CSS3であるため、ie9より前のバージョンはサポートされていません。
ケース：透明な背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .alpha { width: 300px; height: 300px; background: rgba(0, 0, 0, .2); } </style> </head> <body> <div class="alpha"> 哒哒哒 </div> </body> </html>
背景の要約
の属性 効果 値 背景色 背景色 定義済みのカラー値/ 16進数/ RGBコード 背景画像 背景画像 url（画像パス） バックグラウンドリピート タイリングするかどうか 繰り返し/繰り返しなし/繰り返し-x /繰り返し-y 背景の位置 背景の位置 長さ/位置はそれぞれx座標とy座標です。正確な数値単位がある場合は、最初にXの記述方法に従い、次にYに従う必要があることに注意してください。 背景添付ファイル 固定またはスクロールする背景 スクロール/固定 背景の省略表記 よりシンプル 背景色背景画像アドレス背景タイル背景スクロール背景位置;それらには順序がありません 透明な背景 ボックスを半透明にします 背景：rgba（0,0,0,0.3）;の後には4つの値が必要です