この章では、CSS ページ参照について紹介します。困っている友人は参考にしていただければ幸いです。
css
Web ページ要素のスタイルをより豊富にし、コンテンツとスタイルを作成するためCSS は、Cascading Style Sheets の略称で、カスケード スタイル シートを意味します。 CSS を使用すると、HTML でスタイルを表現するほとんどのタグが不要になり、HTML はドキュメントの構造とコンテンツのみを担当し、プレゼンテーションは完全に CSS に任せられるため、HTML ドキュメントがより簡潔になります。
css の定義方法は次のとおりです。
セレクター {属性: 値; 属性: 値;}
選択 ハンドラーはスタイルをページ要素に関連付ける名前であり、属性は設定するスタイル属性です。各属性には 1 つ以上の値があります。コード例:
p{ width:100px; height:100px; color:red }1. 外部リンク: link タグを介してページ内に外部スタイル シートにリンクします。
<link>
2. 埋め込み: スタイル タグを使用して Web ページに埋め込みスタイル シートを作成します。
<style>
p{ width:100px; height:100px; color:red }
......
</style>3. インライン: ラベルの style 属性を使用して、ラベルにスタイルを直接書き込みます。
<p>......</p>
適用されるテキストによく使用される CSS スタイル:
カラー設定テキストの色（例: color:red;
1. 色の名前表現 (例: 赤、金)
# 2. RGB 表現 (例) : rgb(255,0,0) は赤を表します
3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
常用的选择器有如下几种：
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：
*{margin:0;padding:0}
p{color:red}
<p>....</p> <!-- 对应以上两条样式 -->
<p>....</p> <!-- 对应以上两条样式 -->通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：
#box{color:red}
<p>....</p> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<p>....</p>
<h1>....</h1>
<p>....</p>主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
举例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<p>
<span>....</span>
<a>....</a>
</p>
<h3>....</h3>多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<p>....</p>
<p>....</p>
<p>....</p>常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<p>....</p>
<p>....</p>
<p>....</p>css元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
オーバーフロー設定項目:
1. 表示されるデフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
2. 非表示のコンテンツはトリミングされ、残りのコンテンツは非表示になります。この属性には、フロートをクリアし、マージン上部の折りたたみをクリアする機能もあります。
3. スクロール コンテンツはトリミングされますが、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。
4. auto コンテンツがトリミングされると、ブラウザには残りのコンテンツを表示するためのスクロール バーが表示されます。
5.inherit は、overflow 属性の値が親要素から継承されることを規定します。
要素は、レイアウトでよく使われるラベルとして、ブロック要素、インライン要素、インラインブロック要素の3つだけを理解してください。これらの要素の特性を利用して、ページを上手にレイアウトできます。
ブロック要素
ブロック要素は、レイアウトでよく使用されるタグ: p、p、ul、li、h1~h6、dl、dt、dd です。などはすべてブロック要素です。レイアウト内の動作:
すべてのスタイルをサポートします
幅が設定されていない場合、デフォルトの幅は親の幅の 100% です
幅が設定されている場合でも、ボックスは 1 行を占めます
インライン要素
インライン要素は、レイアウトで一般的に使用される a、span、em、b、strong、i などのタグもすべてインライン要素と呼ばれます。
#一部のスタイルをサポート (幅、高さ、上下のマージン、上下のパディングはサポートされていません)
#子要素はインライン要素であり、親要素を使用できます。 text-align 属性は子要素の水平方向の配置を設定し、line-height 属性値は垂直方向の配置を設定します
インライン要素間の改行を削除する 2. インライン要素の親の font-size を 0 に設定し、インライン要素自体のフォントサイズ
インライン ブロック要素
(内部ブロック要素とも呼ばれる) は、新しい要素タイプです。既存の要素はこれに属しません。 IMG 要素と INPUT 要素の動作はインライン要素と同様であるため、display 属性を使用してブロック要素またはインライン要素をそのような要素に変換できます。レイアウトでの動作:
display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示
文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
浮动特性
1、浮动元素有左浮动(float:left)和右浮动(float:right)两种
2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来
3、相邻浮动的块元素可以并在一行，超出父级宽度就换行
4、浮动让行内元素或块元素自动转化为行内块元素
5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动
7、浮动元素之间没有垂直margin的合并
清除浮动
父级上增加属性overflow：hidden
在最后一个子元素的后面加一个空的p，给它样式属性 clear:both（不推荐）
使用成熟的清浮动样式类，clearfix
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}清除浮动的使用方法：
.con2{... overflow:hidden}
或者
<p></p>关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：
relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed は、固定位置の要素を生成します。この要素はドキュメント フローから分離されており、ドキュメント フローの位置を占めず、ドキュメント フローに対して相対的に配置されていると理解できます。ブラウザウィンドウ。
絶対位置および固定位置のブロック要素およびインライン要素自動的にインライン ブロックに変換されます。 Element
位置決め要素は通常のドキュメント フローの上にフローティングされます。z-index 属性を使用して要素レベルを設定できます#。
##一般的な配置レイアウト
1. 上部に固定されたメニュー 2. 水平方向および垂直方向の中央に配置されたポップアップ ボックス 3. 固定されたサイド ツールバー
4.下部に固定ボタン
background 属性
background 属性は、CSS で頻繁に使用される重要な属性であり、背景を設定します。背景色と同様に、背景は次の設定項目に分類できる複合属性です。
#background-color 背景色を設定します
background-image 背景画像のアドレスを設定します
background-repeat 背景画像を繰り返し並べる方法を設定します
#background-position 背景画像の位置を設定します
background-attachment 背景画像を固定にするかページスクロールバーでスクロールするかを設定します
実際のアプリケーションでは、background 属性を使用して上記の設定項目をすべてまとめて設定することもできます。これを行うこともパフォーマンスが高く、互換性が高く推奨されます。たとえば、「background: #00FF00」 「url(bgimage.gif) no-repeat left center fixed」、ここで「#00ff00」は背景色を設定すること、「url(bgimage.gif)」は背景画像を設定すること、「no-repeat」は背景を設定することです-repeat; "left center" は、background-position を設定します。 "fixed" は、Background-attachment を設定します。一部の設定項目は省略しても問題ありません。デフォルト値が使用されます。
次の例では、次の画像を背景画像として使用します:
##1. "background:url(bg.jpg)"、デフォルトでは画像アドレスが設定されており、画像はボックスの左上隅からボックスを埋めていきます。
#2.「背景:シアン url(bg.jpg)repeat-x」、ボックスを水平に並べると、ボックスの他の部分が表示されます。背景色は「シアン」です。
3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”
5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。
相关代码：
nbsp;html>
<meta>
<title>test background</title>
<style>
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg1{background:cyan url(bg.jpg);}
.bg2{background:cyan url(bg.jpg) repeat-x;}
.bg3{background:cyan url(bg.jpg) repeat-y;}
.bg4{background:cyan url(bg.jpg) no-repeat;}
.bg5{background:cyan url(bg.jpg) no-repeat left center;}
.bg6{background:cyan url(bg.jpg) no-repeat right center;}
</style>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
例子说明：
代码中使用到的背景图片，可以直接在页面上的背景图片上点右键另存下来，命名为：“bg.jpg”，并且和网页文件存在同一个目录下。
关于背景图片的background-position的设置，设置背景图片水平位置的有“left”、“center”、“right”，设置背景图片垂直位置的有“top”、“center”、“bottom”，水平和垂直的属性值两两组合，就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种情况，我们可以用数值定位，截取大图片的某一块做为盒子的背景。
比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：
用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，如果不设置background-position，默认背景图的左上角会和盒子的左上角对齐，如果设置，可以用两个数值定位背景图，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。
实现原理示意图：
对应代码：
nbsp;html>
<meta>
<title>test background</title>
<style>
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg{width:94px;
height:94px;
border:3px solid #666;
background:url(location_bg.jpg) -110px -150px;
}
</style>
<p></p>
以上がCSSでのページ参照（詳しい説明）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
