Zusammenfassung der CSS-Kenntnisse (6)

Gemeinsame CSS-Stile

4. Absatzstil

1) Reihenhöhe

Kontrollieren Sie die Höhe jeder Zeile im Absatz

　Linienhöhe: normale Länge

Beispiel-Quellcode:

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.normal</span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;">normal</span>;
}<span style="color: #800000;">
.length</span>{<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;">30px</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="normal"</span><span style="color: #0000ff;">></span>这是正常的行高<span style="color: #0000ff;"><</span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>这是正常的行高<span style="color: #0000ff;"><</span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>这是正常的行高<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="length"</span><span style="color: #0000ff;">></span>这是30px的行高<span style="color: #0000ff;"><</span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>这是30px的行高<span style="color: #0000ff;"><</span><span style="color: #800000;">br</span><span style="color: #0000ff;">></span>这是30px的行高<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

Wirkung:

Dies ist die normale Zeilenhöhe
Dies ist die normale Zeilenhöhe
Dies ist die normale Zeilenhöhe

Dies ist eine Zeilenhöhe von 30 Pixel
Dies ist eine Zeilenhöhe von 30 Pixel
Dies ist eine Zeilenhöhe von 30 Pixel

　

Wenn ein Element eine Textzeile enthält und die Zeilenhöhe gleich der Höhe des Elements ist, wird die Textzeile vertikal zentriert.

*Beachten Sie, dass es sich um eine Textzeile handelt und die ursprünglichen inneren und äußeren Ränder des Browsers zuerst entfernt werden müssen.

Beispiel-Quellcode:

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
*</span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;">0</span>;
}<span style="color: #800000;">
.box</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    line-height</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是一行文字<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

Wirkung:

2) Absatzeinzug

Steuern Sie den Einzug der ersten Zeile eines Absatzes

　text-indent : Länge

Beispiel-Quellcode:

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.indent</span>{<span style="color: #ff0000;">
    text-indent</span>:<span style="color: #0000ff;">2em</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="normal"</span><span style="color: #0000ff;">></span>这里没有首行缩进<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="indent"</span><span style="color: #0000ff;">></span>这里首行缩进了2em<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

Wirkung:

Hier gibt es keinen Einzug der ersten Zeile

Die erste Zeile hier ist um 2em eingerückt

3) Absatzausrichtung

Steuern Sie nicht nur die Absatzausrichtung, sondern auch andere Inline- oder Inline-Block-Elemente im Objekt.

　Textausrichtung: links | rechts |

Beispiel-Quellcode:

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.box2</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;
}<span style="color: #800000;">
.left</span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">left</span>;
}<span style="color: #800000;">
.center</span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">center</span>;
}<span style="color: #800000;">
.right</span>{<span style="color: #ff0000;">
    text-align</span>:<span style="color: #0000ff;">right</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box2"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></span>左对齐文本<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span>居中对齐文本<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></span>右对齐文本<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　

Wirkung:

Linksbündiger Text

Mittig ausgerichteter Text

Rechtsbündiger Text

　4) Textabstand

Kontrollieren Sie den Abstand zwischen Text in Absätzen

　Buchstabenabstand: normale Länge

Beispiel-Quellcode:

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.normal</span>{<span style="color: #ff0000;">
    letter-spacing</span>:<span style="color: #0000ff;">normal</span>;
}<span style="color: #800000;">
.length</span>{<span style="color: #ff0000;">
    letter-spacing</span>:<span style="color: #0000ff;">10px</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="normal"</span><span style="color: #0000ff;">></span>这是默认的文字间距<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="length"</span><span style="color: #0000ff;">></span>这是10px的文字间距<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　

Wirkung:

Dies ist der Standardtextabstand

Dies ist ein Textabstand von 10 Pixel

 

　　5）文字溢出

　　　　控制文本内容溢出部分的样式

　　　　text-overflow : clip | ellipsis

　　　　clip : 当内联内容溢出块容器时，将溢出部分裁切掉。

　　　　ellipsis : 当内联内容溢出块容器时，将溢出部分替换为（...）。

　　　　因为text-overflow只是用来说明文字溢出时用什么方式显示，所以还需要定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），这样才能实现溢出文本被裁切或是显示省略号的效果。

 　　例子 源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.clip,.ellipsis</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">150px</span>;<span style="color: #ff0000;">
    border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
    white-space</span>:<span style="color: #0000ff;">nowrap</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;">hidden</span>;
}<span style="color: #800000;">
.clip</span>{<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;">clip</span>;
}<span style="color: #800000;">
.ellipsis</span>{<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;">ellipsis</span>;
}<span style="color: #800000;">
.clip:hover,.ellipsis:hover</span>{<span style="color: #ff0000;">
    text-overflow</span>:<span style="color: #0000ff;">inherit</span>;<span style="color: #ff0000;">
    overflow</span>:<span style="color: #0000ff;">visible</span>;
}

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>当你把光标移动到一下文本上，就能看到全部文本。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="clip"</span><span style="color: #0000ff;">></span>这里使用的是"text-overflow:clip"<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="ellipsis"</span><span style="color: #0000ff;">></span>这里使用的是"text-overflow:ellipsis"<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

 　　效果：

当你把光标移动到一下文本上，就能看到全部文本。

这里使用的是"text-overflow:clip"

这里使用的是"text-overflow:ellipsis"

 

　　6）段落换行

　　　　控制内容超过容器的边界时是否换行 （一般用于英文和URL地址）

　　　　word-wrap : normal | break-word

　　　　normal : 允许内容顶开或溢出指定的容器边界。浏览器默认处理

　　　　break-word : 内容将在边界内换行。如果需要，单词内部允许换行。

　　例子 源代码：

<span style="color: #008000;">/*</span><span style="color: #008000;"> CSS代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
    .break</span>{<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;">
        border</span>:<span style="color: #0000ff;">1px solid #000</span>;<span style="color: #ff0000;">
        word-wrap</span>:<span style="color: #0000ff;">break-word</span>;
    }

<span style="color: #008000;"><!--</span><span style="color: #008000;"> HTML代码 </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="break"</span><span style="color: #0000ff;">></span>我的博客：http://www.cnblogs.com/mossbaoo/<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

　　效果：（URL地址会另外换行）

我的博客：http://www.cnblogs.com/mossbaoo/