Summary of CSS knowledge (6)

Common CSS styles

4. Paragraph style

　1) Line height

　 Control the height of each line in the paragraph

　 line-height : normal | length

　Example source code:

<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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 style="color: #800000;">br</span><span style="color: #0000ff;">></span>这是正常的行高<span style="color: #0000ff;"><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 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 style="color: #800000;">br</span><span style="color: #0000ff;">></span>这是30px的行高<span style="color: #0000ff;"><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></span></span></span></span></span></span></span>

Effect:

This is the normal row height
This is the normal row height
This is the normal row height

This is a line height of 30px
This is a line height of 30px
This is a line height of 30px

　If there is a line of text in an element, and the line height is equal to the height of the element, then the line of text will be vertically centered.

　 *Note that it is a line of text, and the original inner and outer margins of the browser must be removed first.

　Example source code:

<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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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></span></span></span>

　Effect:

2)Paragraph indent

　Control the indentation of the first line of a paragraph

　　text-indent : length

　Example source code:

<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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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></span></span></span>

Effect:

There is no first line indent here

The first line here is indented by 2em

3)Paragraph alignment

　 Control paragraph alignment. Not only text, but other inline or inline-block elements in the object can also be aligned by text-align.

　　text-align : left | right | center | justify

　Example source code:

<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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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 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 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></span></span></span></span></span>

　Effect:

Left aligned text

Center align text

Right aligned text

　4)Text spacing

　 Control the distance between text in paragraphs

　　letter-spacing : normal | length

　Example source code:

<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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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></span></span></span>

　Effect:

This is the default text spacing

This is 10px text spacing

 

　　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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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 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></span></span></span></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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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></span></span>

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

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