検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでのページ参照（詳しい説明）

CSSでのページ参照（詳しい説明）

青灯夜游
青灯夜游オリジナル
2018-10-08 15:02:043284ブラウズ

この章では、CSS ページ参照について紹介します。困っている友人は参考にしていただければ幸いです。

css

Web ページ要素のスタイルをより豊富にし、コンテンツとスタイルを作成するためCSS は、Cascading Style Sheets の略称で、カスケード スタイル シートを意味します。 CSS を使用すると、HTML でスタイルを表現するほとんどのタグが不要になり、HTML はドキュメントの構造とコンテンツのみを担当し、プレゼンテーションは完全に CSS に任せられるため、HTML ドキュメントがより簡潔になります。

css の基本構文

css の定義方法は次のとおりです。

セレクター {属性: 値; 属性: 値;}

選択 ハンドラーはスタイルをページ要素に関連付ける名前であり、属性は設定するスタイル属性です。各属性には 1 つ以上の値があります。コード例: 

p{ width:100px; height:100px; color:red }

css ページ導入方法:

1. 外部リンク: link タグを介してページ内に外部スタイル シートにリンクします。 

<link>

2. 埋め込み: スタイル タグを使用して Web ページに埋め込みスタイル シートを作成します。 

<style>
    p{ width:100px; height:100px; color:red }
        ......
</style>

3. インライン: ラベルの style 属性を使用して、ラベルにスタイルを直接書き込みます。 

        <p>......</p>

css テキスト設定

適用されるテキストによく使用される CSS スタイル:

  • カラー設定テキストの色（例: color:red;

  • ##font-size） テキストのサイズを設定します（例: font-size:12px;

    ）
    • ## font-family は、テキストのフォントを設定します。たとえば、 font-family:'Microsoft Yahei';

    • font-style は、フォントが傾いているかどうかを設定します。 as: font-style:'normal'; 傾かないように設定します。 font-style:'italic'; テキストの傾きを設定します。

    • font-weight テキストを太字にするかどうかを設定します。 : font-weight:bold; 太字に設定します font-weight :normal 太字に設定しません

    • font テキストの複数の属性を同時に設定します 書き込み順序には互換性の問題があります。 font: フォントサイズ/行高さを太字にするかどうか ;例: font:normal 12px/36px 'Microsoft Yahei';

    • の順に記述することをお勧めします。 line-height は、テキストの行の高さを設定します。たとえば、 line-height:24px;

    • text-decoration テキストの下線を設定します。たとえば、text-decoration:none ; テキストの下線を削除します。

    • text-indent テキストの最初の行のインデントを設定します。例: text-indent:24px; テキストの最初の行のインデントを設定します。 to 24px

    • text-align テキストの水平方向の配置を設定します (例: text-align:center) テキストの水平方向の中央揃えを設定します

    • css色の表現

CSS カラー値には 3 つの主な表現方法があります。

1. 色の名前表現 (例: 赤、金)

# 2. RGB 表現 (例) : rgb(255,0,0) は赤を表します

            3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

css选择器

常用的选择器有如下几种：

1、标签选择器

        标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：

*{margin:0;padding:0}
p{color:red}   

<p>....</p>   <!-- 对应以上两条样式 -->
<p>....</p>   <!-- 对应以上两条样式 -->
2、id选择器

        通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

举例：

#box{color:red} 

<p>....</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
3、类选择器

        通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

举例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<p>....</p>
<h1>....</h1>
<p>....</p>
4、层级选择器

        主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

举例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<p>
    <span>....</span>
    <a>....</a>
</p>

<h3>....</h3>
5、组选择器

        多个选择器，如果有同样的样式设置，可以使用组选择器。

举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<p>....</p>
<p>....</p>
<p>....</p>
6、伪类及伪元素选择器

        常用的伪类选择器有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 などのタグもすべてインライン要素と呼ばれます。

  • #一部のスタイルをサポート (幅、高さ、上下のマージン、上下のパディングはサポートされていません)

  • 幅と高さはコンテンツによって決まります

    • #ボックスは 1 行に結合されます

    • コードが壊れ、ボックス間に隙間ができます

  • #子要素はインライン要素であり、親要素を使用できます。 text-align 属性は子要素の水平方向の配置を設定し、line-height 属性値は垂直方向の配置を設定します

    • インライン要素間のギャップを解決する方法

インライン要素間の改行を削除する 2. インライン要素の親の font-size を 0 に設定し、インライン要素自体のフォントサイズ

インライン ブロック要素

(内部ブロック要素とも呼ばれる) は、新しい要素タイプです。既存の要素はこれに属しません。 IMG 要素と INPUT 要素の動作はインライン要素と同様であるため、display 属性を使用してブロック要素またはインライン要素をそのような要素に変換できます。レイアウトでの動作:

すべてのスタイルをサポート

  • 幅と高さが設定されていない場合、幅と高さはコンテンツによって決まります。

  • ボックスは 1 行に配置されます

  • コード ブレーク、ボックスによってスペースが生じます

  • 子要素はインライン ブロック要素であり、親要素は text-align 属性を使用して子要素の水平方向の配置を設定し、line-height 属性値を使用して子要素の垂直方向の配置を設定できます

  • これら3つの要素は表示属性の相互変換で設定できますが、実際の開発ではブロック要素の方が多く使われるため、インライン要素をブロック要素に変換し、一部をインラインブロックに変換して使用することが多いです。インライン要素の場合、ブロック要素が変換される代わりにインライン要素を直接使用します。

    • 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 は、固定位置の要素を生成します。この要素はドキュメント フローから分離されており、ドキュメント フローの位置を占めず、ドキュメント フローに対して相対的に配置されていると理解できます。ブラウザウィンドウ。

    • #static デフォルト値、位置決めなし。要素は通常のドキュメント フローに表示されます。これは、位置決め属性をキャンセルするか、位置決め属性を設定しないのと同じです。

    • 継承は、親要素から位置属性の値を継承します。

    ## 位置指定された要素のプロパティ

    絶対位置および固定位置のブロック要素およびインライン要素自動的にインライン ブロックに変換されます。 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 を設定します。一部の設定項目は省略しても問題ありません。デフォルト値が使用されます。

      • 例:

    次の例では、次の画像を背景画像として使用します:

    CSSでのページ参照（詳しい説明）

    ##1. "background:url(bg.jpg)"、デフォルトでは画像アドレスが設定されており、画像はボックスの左上隅からボックスを埋めていきます。

    #2.「背景:シアン url(bg.jpg)repeat-x」、ボックスを水平に並べると、ボックスの他の部分が表示されます。背景色は「シアン」です。

    CSSでのページ参照（詳しい説明）

    3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。

    CSSでのページ参照（詳しい説明）

    4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”

    CSSでのページ参照（詳しい説明）

    5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。

    CSSでのページ参照（詳しい説明）

    6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。

    CSSでのページ参照（詳しい説明）

    相关代码：

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”，水平和垂直的属性值两两组合，就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种情况，我们可以用数值定位，截取大图片的某一块做为盒子的背景。

 比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：

CSSでのページ参照（詳しい説明）

用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，如果不设置background-position，默认背景图的左上角会和盒子的左上角对齐，如果设置，可以用两个数值定位背景图，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。

实现原理示意图：

CSSでのページ参照（詳しい説明）

对应代码：

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 サイトの他の関連記事を参照してください。

css html Static Float auto 继承 选择器 样式表 display position overflow margin padding 伪类 伪元素 background input ul li
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ul の li コンテンツを垂直方向にセンタリングおよび水平方向にセンタリングする方法の詳細な図による説明次の記事：ul の li コンテンツを垂直方向にセンタリングおよび水平方向にセンタリングする方法の詳細な図による説明

関連記事

続きを見る