介绍得比较粗略,大家只要有个印象就可以,后边我们会在详细的在具体的前段开发项目中来讲解.
一 css3伪类
css3中的伪类允许我们在不适用于JavaScript等脚本的情况下去设置web页面中某些特定的元素的属性.
伪类通常以":"(冒号)开头. :first-child和:last-child是较为常用的伪类.
:first-child将会匹配该元素中的第一个子元素.
html代码:
<div id="parent">
<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代码:
<div id="parent1">
<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代码:
<div class="parent">
<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;}
,
