css零基础自学教程（十一）伪类，伪元素，自动换行,font-face

绍得比较粗略,大家只要有个印象就可以,后边我们会在详细的在具体的前段开发项目中来讲解.

一 css3伪类

css3中的伪类允许我们在不适用于JavaScript等脚本的情况下去设置web页面中某些特定的元素的属性.

伪类通常以":"(冒号)开头. :first-child和:last-child是较为常用的伪类.

:first-child将会匹配该元素中的第一个子元素.

html代码:

<p>又见雪飘过</p>

<p>飘于伤心记忆中</p>

<p>让我再想你</p>

<p>却掀起我的痛</p>

</div>

css代码:

#parent p:first-child{color:green; text-decoration:underline; }

执行结果如下:

:last-child则是选取最后一个元素.

二伪元素

伪元素用于选取元素的特定部分.

在css中有五个伪元素,每个都以一个双冒号(::)开头

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

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

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

::before 在元素之前插入一些内容

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

在下面的例子中,::first-line伪元素用于为文本的第一行设置样式.

html代码:

<p>早经分了手

<br>为何热爱尚情重

<br>独过追忆岁月

<br>或许此生不会懂</p>

</div>

css代码:

#parent1 p::first-line{color:#AE4141;}

效果如下:

::selection伪元素用于对选定的文本进行设置样式.

css代码:

#parent1 p::-webkit-selection{background:#AE4141; color:#fff;}

#parent1 p::selection{background:#AE4141; color:#fff;}

效果如下:

使用了浏览器前缀-webkit-.有的浏览器会不支持::seleciton伪元素

使用::before和::after伪元素允许我们向页面添加各种各样的内容.

在下面的例子中,::before伪元素用于在段落之前添加图像.

html代码:

<p>又再想起你</p>

<p>抱拥飘飘白雪中</p>

<p>让你心中暖</p>

<p>去驱走我冰冻</p>

</div>

css代码:

div.parent p::before{ content:url("before.jpg");}

效果如下:

请注意样式中使用的content关键字

::after则会在末尾增加样式.

三 css3自动换行

word-wrap属性允许对长单词进行自动换行处理.它有两个属性值:normal和break-word.

html代码:

<p id="word-wrap">冷风催我醒,原来共你是场梦,像那飘飘雪泪下,弄湿冷清的晚空.原来是那么深爱你.</p>

css代码:

#word-wrap{width:100px; height:100px; border:2px solid #000000; word-wrap:normal; }

效果如下:

由于是段落内容是中文,所以word-wrap:normal; 和word-wrap:break-word; 效果是一样的都会自动换行.

四 @font-face

@font-face允许将自定义字体加载到网页中.借助于此规则,设计不再局限于安装在用户计算机上的字体

在IE8和更低版本中,url必须指向Embedded OpenType(eot)文件,而firefox,chrome等支持True Type(ttf)字体和OpenType(otf)字体.

定义一个名为"text"的新字体

@font-face{font-family:"text"; src:url("text.otf"); }

然后这个新的字体可以使用了如p{font-family:text;}

使文本不换行，可以使用CSS的white-space属性，并将其值设置为nowrap。这样，文本将不会在单词之间换行，而是会继续在同一行上直到到达元素的边界。

white-space: nowrap;

你可以将此属性应用于需要保持文本在同一行的元素上，例如：

<div style="white-space: nowrap;">
  这是一个不会换行的文本块。
</div>

在这个例子中，div元素内的文本将不会换行。

5代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            background-color: #aaa;
        }
        .p1{
            white-space: nowrap;
        }
        .p2{
            word-wrap: break-word;
        }
        .p3{
            word-break: break-all;
        }
        .p4{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<p class="p1">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p>
<p class="p2">ljj ljljoi hsgfa tgregv dsgrewg ygvsg werfwgr rweg vcdgss</p>
<p class="p3">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew</p>
<p class="p4">comrem dfgdsgfd sdffafsdafa dsfaf sdfsaf thgwer awdafqew dgadsfs</p>
</body>
</html>

强制不换行：white-space 属性是用来设置如何处理元素中的空白；

属性：

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

p{  white-space: nowrap;}

2、自动换行：word-wrap属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象；

属性：

normal: 只在允许的断字点换行(浏览器保持默认处理)

break-word:在长单词或URL地址内部进行换行

p{  word-wrap: break-word;}

3、强制断行：word-break 属性用来标明怎么样进行单词内的断句；

属性：

normal：使用浏览器默认的换行规则。

break-all:允许在单词内换行

keep-all:只能在半角空格或连字符处换行

p{  word-break: break-all;}

4、溢出显示省略号：ext-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（’…’，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串；

属性：clip这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断。为了能在两个字符过渡处截断，你必须使用一个空字符串值 (’’)(To truncate at the transition between two characters, the empty string value (’’) must be used.)。此为默认值。

ellipsis这个关键字的意思是“用一个省略号 (’…’, U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。

string用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小到连省略号都容纳不下，那么这个字符串也会被截断。

p{ overflow: hidden; text-overflow: ellipsis;}

在线咨询

上一篇：小白必看！Django 模板语言基础来啦
下一篇：超优秀 H5可视化制作编辑器H5DS

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

css零基础自学教程（十一）伪类，伪元素，自动换行,font-face

您的项目需求