其他特殊效果

首字处理

去过网易跟帖的朋友可能遇见过这种样式：

会发现文本的首字跟其他文本有些不同，我们可以利用CSS的伪对象first-letter来实现

<style type="text/css">
        p{
            font:18px/1.5 Arial;
        }
        p:first-letter{
            font-size: 26px;
            font-weight: bold;
        }
</style>
<p> 
    正恩哥你好！我在深圳华强北有一伙朋友，专做各种电子数码产品，手机、电脑都可以，请问你们郭嘉科研所还收人吗？
</p>

效果如下图：

首行处理

这个暂时没有在网上找到例子，其实和首字处理差不多，同样利用伪对象，只不过是 first-line，只会影响第一行的文本效果，感兴趣的同学可以自己写的demo玩玩。

文字隐藏

文字隐藏是当某段文字超出自己所在的容器时，我们可以将超出的文本内容隐藏
简单写个demo：

<style type="text/css">
        p{
            width: 300px;
            height: 70px;
            border:1px dashed;
            font:18px/1.5 Arial;
            overflow: hidden;
        }
        p:first-letter{
            font-size: 26px;
            font-weight: bold;
        }
</style>
<p> 
    正恩哥你好！我在深圳华强北有一伙朋友，专做各种电子数码产品，手机、电脑都可以，请问你们郭嘉科研所还收人吗？
</p>

下面两图分别是未隐藏和隐藏的效果：

其实文字的隐藏更多是用在以图代字的环境中，就是说用图片代替一些字（这些字往往是特效字体），这时候会把字体隐藏。可以利用visibility:hidden 或者display:none两个属性。设置visibility:hidden的容器会占有原页面的位置空间，设置display:none的容器不会占用页面空间，代码简单就不贴了。

文字链接

链接也就是HTML中的a标签，负责页面的跳转，在网页中很常见

基础链接样式

一个最基础的链接

<a href="#">这是一个链接</a>

它的默认样式是蓝色的带有下划线的可以点击的一段文本。在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。CSS中可以利用伪类来修饰我们的链接样式：

a:link 未被访问过的链接样式
a:visited 已被访问过的链接样式
a:hover 鼠标移动到链接上时的样式
a:active 选定的链接样式(鼠标点击时的样式)

带有修饰的链接样式

我们可以给链接增加各种修饰，比如：增加文字权重，添加文字边框，修改内外边距，增加背景色等等，可以打开脑洞进行各种尝试。下面写了个小demo练练手：

<style type="text/css">
.myLink {
    color:#FFFFFF;
    background-color:red;
} 
.myLink:hover {
    padding-bottom:3px;
    text-decoration:none;
    color:#000000;
    border-bottom:1px dashed #FF0000;
    background:none;
} 
</style>
<a href="#" class="myLink">带有修饰的链接样式</a>

效果如下图：

带有图片的链接样式

我们也可以在链接中加入图片。

.myLink {
    padding-left:20px;
    background:url(images/music_1.gif) no-repeat left center;
    text-decoration: none;
    color: green;
} 
.myLink:hover {
    background:url(images/music_2.gif) no-repeat left center;
    text-decoration: none;
    color: red;
} 
<a href="#" class="myLink">带有图片的链接样式</a>

效果如下图所示：