Seitenverweise in CSS (ausführliche Erklärung)

In diesem Kapitel werden Ihnen CSS-Seitenverweise vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

css

Um die Stile von Webseitenelementen reichhaltiger zu machen und den Inhalt und Stil zu verbessern Aus dieser Idee ist CSS entstanden. CSS ist die Abkürzung für Cascading Style Sheets, was soviel wie „Cascading Style Sheets“ bedeutet. Mit CSS werden die meisten Tags, die Stile in HTML ausdrücken, nicht mehr benötigt. HTML ist nur noch für die Struktur und den Inhalt des Dokuments verantwortlich, und die Darstellung wird vollständig CSS überlassen, wodurch HTML-Dokumente prägnanter werden.

Grundlegende CSS-Syntax

Die Definitionsmethode von CSS ist:

Selector { attribute: value; attribute: value;}

Auswahl Der Handler ist der Name, der den Stil mit dem Seitenelement verknüpft, und das Attribut ist das Stilattribut, das Sie festlegen möchten. Jedes Attribut verfügt über einen oder mehrere Werte. Codebeispiel:

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

CSS-Seiteneinführungsmethode:

1. Externer Link: Link zum externen Stylesheet in die Seite über den Link-Tag.

<link>

2. Eingebettet: Erstellen Sie über das Style-Tag ein eingebettetes Stylesheet auf der Webseite.

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

3. Inline: Schreiben Sie den Stil direkt auf das Tag über das Stilattribut des Tags.

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

CSS-Texteinstellungen

Häufig verwendete CSS-Stile für angewendeten Text:

• Farbeinstellungen Die Farbe des Texts, zum Beispiel: color:red;

• font-size Legen Sie die Größe des Texts fest, zum Beispiel: font-size:12px;

• font-family legt die Schriftart des Textes fest, zum Beispiel: font-family:'Microsoft Yahei';

• font-style legt fest, ob die Schriftart geneigt ist, Zum Beispiel: Font-Style:'normal'; Nicht kippen, Font-Style:'Italic'; Textneigung festlegen

• font-weight Legen Sie fest, ob der Text fett ist, z als: Schriftstärke:fett; Schriftart auf fett setzen

• font Mehrere Attribute des Textes gleichzeitig festlegen. Es gibt Kompatibilitätsprobleme mit der Schrift Reihenfolge. Es wird empfohlen, in der folgenden Reihenfolge zu schreiben: Schriftart: ob die Schriftgröße/Zeilenhöhe fett dargestellt werden soll; Zum Beispiel: Schriftart:normal 12px/36px 'Microsoft Yahei';

• line-height legt die Zeilenhöhe des Textes fest, wie zum Beispiel: line-height:24px;

• text-decoration Legt die Unterstreichung des Textes fest, wie zum Beispiel: text-decoration: none; Entfernen Sie die Unterstreichung des Textes

• text-indent Legen Sie den Einzug der ersten Textzeile fest, z. B.: text-indent:24px; Text auf 24 Pixel

• text-align Legen Sie die horizontale Ausrichtung des Textes fest, z. B. text-align:center Stellen Sie den Text so ein, dass er horizontal zentriert ist

CSS-Farbdarstellung

Es gibt drei Hauptmethoden zur Darstellung von CSS-Farbwerten:

1. Farbnamendarstellung, z. B.: Rot, Gold

2. RGB-Darstellung, z Beispiel: rgb(255,0,0) steht für Rot

            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属性来设置。

Überlauf-Einstellungselemente:
1. sichtbarer Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert.
2. Der ausgeblendete Inhalt wird gekürzt und der Rest des Inhalts wird unsichtbar sein. Dieses Attribut hat auch die Funktion, Floats und Rand-Oberseiten-Kollision zu löschen.
3. Der Bildlaufinhalt wird gekürzt, aber der Browser zeigt Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.
4. automatisch Wenn der Inhalt zugeschnitten wird, zeigt der Browser Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.
5. Inherit legt fest, dass der Wert des Überlaufattributs vom übergeordneten Element geerbt werden soll.

Blockelement, Inline-Element, Inline-Blockelement

Element ist eine Beschriftung. Es gibt drei häufig verwendete Beschriftungen im Layout: Blockelement, Inline-Element und Inline-Blockelement Mithilfe der Eigenschaften dieser Elemente können Sie die Seite kompetent gestalten.

Blockelement
Blockelement kann auch als Linienelement bezeichnet werden: p, p, ul, li, h1~h6, dl, dt, dd usw. sind alles Blockelemente. Sein Verhalten im Layout:

• Unterstützt alle Stile

• Wenn die Breite nicht festgelegt ist, wird die Standardeinstellung verwendet Die Breite beträgt 100 % der Breite des übergeordneten Elements

• Das Feld belegt eine Zeile, auch wenn die Breite festgelegt ist

Inline-Element
Inline-Elemente können auch als Inline-Elemente bezeichnet werden, wie zum Beispiel: a, span, em, b, strong, i usw. Ihr Verhalten im Layout:

• Unterstützt einige Stile (Breite, Höhe, Rand oben und unten, Polsterung oben und unten werden nicht unterstützt)

• Die Breite und Höhe werden durch den Inhalt bestimmt

• Boxen werden in einer Zeile platziert

• Der Code bricht ab und es entsteht eine Lücke zwischen den Boxen

• Untergeordnete Elemente sind Inline-Elemente und übergeordnete Elemente können verwendet werden. Das text-align-Attribut legt die horizontale Ausrichtung der untergeordneten Elemente fest, und der Attributwert line-height legt die vertikale Ausrichtung fest

Methoden zum Schließen der Lücke in Inline-Elementen
1. Entfernen Sie die Zeilenumbrüche zwischen Inline-Elementen
2. Setzen Sie die Schriftgröße des übergeordneten Elements des Inline-Elements auf 0 und Legen Sie die Schriftgröße des Inline-Elements selbst fest

für das Inline-Blockelement
Inline-Blockelemente, auch Inline-Blockelemente genannt, sind ein neuer Elementtyp Die img- und input-Elemente fallen in diese Kategorie, verhalten sich aber auch innerhalb der Inline-Elemente. Wir können das display-Attribut verwenden, um Blockelemente oder Inline-Elemente in solche Elemente umzuwandeln. Ihr Verhalten im Layout:

• Unterstützt alle Stile

• Wenn Breite und Höhe nicht festgelegt sind, werden Breite und Höhe durch die bestimmt Inhalt

• Kästchen werden in einer Zeile platziert

• Codeunterbrechungen, das Kästchen erzeugt Abstände

• Untergeordnete Elemente sind Inline-Blockelemente. Das übergeordnete Element kann das Attribut text-align verwenden, um die horizontale Ausrichtung des untergeordneten Elements festzulegen, und den Attributwert line-height, um die vertikale Ausrichtung des untergeordneten Elements festzulegen

Diese drei Elemente können über das Anzeigeattribut Gegenseitige Konvertierung festgelegt werden. In der tatsächlichen Entwicklung werden jedoch häufiger Blockelemente verwendet, sodass wir häufig Inline-Elemente in Blockelemente und einen kleinen Teil in Inline-Blöcke konvertieren Verwenden Sie Inline-Elemente, verwenden Sie Inline-Elemente direkt anstelle von Blockelementen, die transformiert werden.

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;}

  Nach dem Login kopieren

  清除浮动的使用方法：

  .con2{... overflow:hidden}
  或者
  <p></p>

  Nach dem Login kopieren

定位

关于定位 
       我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

• relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移

• absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

• Fixed erzeugt ein Element mit fester Positionierung, das vom Dokumentenfluss getrennt ist und nicht die Position des Dokumentenflusses einnimmt. Es kann als schwebend über dem Dokumentenfluss verstanden werden und relativ zum Dokumentenfluss positioniert werden Browserfenster.

• statisch Standardwert, keine Positionierung, das Element erscheint im normalen Dokumentfluss, was dem Aufheben des Positionierungsattributs oder dem Nichtfestlegen des Positionierungsattributs

• inherit erbt den Wert des Positionsattributs vom übergeordneten Element

Eigenschaften positionierter Elemente Absolut positionierte und fest positionierte Blockelemente und Inline Elemente werden automatisch in Inline-Blöcke konvertiert. Element

Positioniertes Elementebene Positioniertes Element schwebt über dem normalen Dokumentfluss. Sie können das Z-Index-Attribut verwenden, um die Elementebene festzulegen

Typisches Positionierungslayout 1. Menü oben fixiert
2. Popup-Box horizontal und vertikal zentriert
3. Feste seitliche Symbolleiste
4 . Unten behoben Schaltfläche

Attributerklärung Hintergrundattribut ist ein häufig verwendetes und wichtiges Attribut in CSS. Es ist für die Festlegung des Hintergrunds verantwortlich Bild für die Box. Hintergrund ist ein zusammengesetztes Attribut, das in die folgenden Einstellungselemente unterteilt werden kann:

• background-color legt die Hintergrundfarbe fest

• background-image Legen Sie die Hintergrundbildadresse fest

• background-repeat Legen Sie fest, wie das Hintergrundbild wiederholt gekachelt wird

• background-position Legen Sie die Position des Hintergrundbilds fest

• background-attachment Legen Sie fest, ob das Hintergrundbild fixiert ist oder mit der Seiten-Bildlaufleiste scrollt

2. „Hintergrund:Cyan-URL(bg.jpg) wiederholen-x“, kacheln Sie das Feld horizontal und die anderen Teile des Feldes werden angezeigt Hintergrundfarbe „Cyan“.

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>

Das obige ist der detaillierte Inhalt vonSeitenverweise in CSS (ausführliche Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!