【p段落自动换行css】Css 0基础教程(11)伪类，伪元素，换行，font-face

介绍比较粗略。大家只要有印象就行了。后面会在具体的段落开发项目中详细说明。

Css3相似类

Css3中的伪类允许您设置网页上特定元素的属性，而不应用于脚本(如JavaScript)。

伪类通常是以' '(冒号)开头的：first-child和：last-child更常用的伪类。

:first-child与该元素的第一个子元素匹配。

Html代码：

Div id=“父级”

p又看到雪飘了。

p漂浮在悲伤的记忆中/p

p让我重新考虑你/p

p反而引起了我的痛苦。

/div

Css代码：

# parent p : first-child { color :绿色；text-decoration 3360 underline；}

运行结果如下：

:last-child是最后一个元素选择。

李卫素

伪元素用于选择元素的特定部分。

Css中有5个伪元素，每个元素以双冒号(:3360)开头

:3360 first-line选择器中的第一行文本

:3360 first-letter选择器中文本的第一个字母

选择：selection用户选择的元素部分

在：before元素之前插入部分内容

:after在元素后插入一些内容

在以下示例中，3360 first-line伪元素用于设置文本第一行的样式。

Html代码：

Div id='parent1 '

p早就分手了

Br为什么爱情还是很重？

Br独自回忆岁月。

Br这辈子可能不知道/p

/div

Css代码：

# parent 1p :3360 first-line { color 3360 # AE 4141；}

效果如下：

:3360 selection伪元素用于设置选定文本的样式。

Css代码：

# parent 1p :3360-WebKit-selection { background : # AE 4141；Color: # fff}

# parent1p:3360 selection {背景： # ae4141Color: # fff}

效果如下：

使用浏览器前缀-webkit-。并非所有浏览器都支持：seleciton相似元素

:before和：after类似元素使您能够向页面添加多种内容。

在以下示例中，before相似元素用于在段落前添加图像。

Html代码：

Div类=“父级”

p又想起你了/p

抱着p飘散的雪中/p

p温暖你的心/p

p赶走我的冰冻/p。

/div

Css代码：

div . parent p : before { content : URL(' be；)；}

效果如下：

确认样式中使用的content关键字

:适配器在末尾添加样式。

3个css3自动换行

使用Word-wrap属性可以自动换行长单词。两个属性值：normal和break-word。

Html代码：

P id='word-wrap '寒风催我起床

Css代码：

# word-wrap { width 3360100 px；海特：100pxBorder:2px solid # 000000word-wrap 3360 normal；}

效果如下：

word-wrap:normal，因为第段内容是中文；和word-wrap 3360 break-word；效果相同，自动换行。

4 @font-face

@font-face可让您将自订字体载入网页。通过此规则，设计不再局限于用户计算机上安装的字体

在IE8之前的版本中，URL必须指向嵌入的opentype(eot)文件，firefox、chrome等支持真类型(TTF)和opentype(OTF)字体。

定义名为“Text”的新字体

@ font-face { font-family 3360 ' text 'src : URL(')；}

然后可以像p{font-family:text一样使用这种新字体。}