第5章 CSS3文本

最新推荐文章于 2021-06-28 11:13:57 发布

itzyjr

最新推荐文章于 2021-06-28 11:13:57 发布

阅读量173

点赞数

分类专栏：《图解CSS3:核心技术与案例实战》读书笔记

本文链接：https://blog.csdn.net/itzyjr/article/details/106417513

版权

《图解CSS3:核心技术与案例实战》读书笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

㊀文本简介

在CSS文本功能上主要分为三大类：字体、颜色和文本。

CSS字体类型：

以上6个文本属性都属于文本功能中的字体类型，其中font-family是复合属性中必不可少的属性。此外还有一个复合属性font，如下：

font:font-style font-weight/line-height font-family

CSS文本类型：

除了字体和文本类型之外，还包含一个颜色属性color，主要用来设置文本颜色。

㊁文本阴影属性

text-shadow:color x-offset y-offset blur-radius, *

❏color：可选，阴影颜色。默认颜色是文本颜色。

❏x-offset：X轴位移，指定阴影水平位移量。正值，阴影在对象右边，反之阴影在对象左边。

❏y-offset：Y轴位移，指定阴影垂直位移量。正值，阴影在对象底部，反之阴影在对象顶部。

❏blur-radius：可选，阴影模糊半径。值为0表示不具有模糊效果。

可以使用text-shadow属性给文本指定多个阴影，并且针对每个阴影使用不同颜色。指定多个阴影时使用逗号将多个阴影进行分隔。text-shadow多阴影效果按照给定的顺序应用，因此前面的阴影有可能会覆盖后面的，但它们永远不会覆盖文本本身。

实战体验：制作立体文本

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>text-shadow制作3D立体文本效果</title>
    <style type="text/css">
        body{background-color: #665757;}
        .text-wrap {
            width: 600px;
            margin: 10px auto;
            padding: 10px 0;
            border: 5px solid #ccc;
            position: relative;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.80);
            clear: both;
            font-family: 'Airal', serif;
            font-size: 50px;
            text-align: center;
            color: #f7edf7;
        }
        .box1 {
            text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    1px 0px 0 rgb(173,163,173),
                    2px 0px 0 rgb(157,147,157),
                    3px 0px 0 rgb(142,132,142),
                    4px 0px 0 rgb(126,116,126),
                    5px 0px 0 rgb(111,101,111),
                    6px 0px 0 rgb(95,85,95),
                    7px 0px 0 rgb(79,69,79),
                    8px 0px 7px rgba(0,0,0,0.35),
                    8px 0px 1px rgba(0,0,0,0.5),
                    0px 0px 7px rgba(0,0,0,.2);
        }
        .box2 {
            text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    1px -1px 0 rgb(173,163,173),
                    2px -2px 0 rgb(157,147,157),
                    3px -3px 0 rgb(142,132,142),
                    4px -4px 0 rgb(126,116,126),
                    5px -5px 0 rgb(111,101,111),
                    6px -6px 0 rgb(95,85,95), 
                    7px -7px 0 rgb(79,69,79),
                    8px -8px 7px rgba(0,0,0,0.35),
                    8px -8px 1px rgba(0,0,0,0.5),
                    0px 0px 7px rgba(0,0,0,.2);
        }
        .box3 {
            text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    0px -1px 0 rgb(173,163,173),
                    0px -2px 0 rgb(157,147,157),
                    0px -3px 0 rgb(142,132,142),
                    0px -4px 0 rgb(126,116,126),
                    0px -5px 0 rgb(111,101,111),
                    0px -6px 0 rgb(95,85,95), 
                    0px -7px 0 rgb(79,69,79),
                    0px -8px 7px rgba(0,0,0,0.35),
                    0px -8px 1px rgba(0,0,0,0.5),
                    0px 0px 7px rgba(0,0,0,.2);
        }
        .box4 {
            text-shadow:0px 0px 0 rgb(188,178,188),-1px -1px 0 rgb(173,163,173),-2px -2px 0 rgb(157,147,157),-3px -3px 0 rgb(142,132,142),-4px -4px 0 rgb(126,116,126),-5px -5px 0 rgb(111,101,111),-6px -6px 0 rgb(95,85,95), -7px -7px 0 rgb(79,69,79),-8px -8px 7px rgba(0,0,0,0.35),-8px -8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
        }
        .box5 {
            text-shadow:0px 0px 0 rgb(188,178,188),-1px 0px 0 rgb(173,163,173),-2px 0px 0 rgb(157,147,157),-3px 0px 0 rgb(142,132,142),-4px 0px 0 rgb(126,116,126),-5px 0px 0 rgb(111,101,111),-6px 0px 0 rgb(95,85,95), -7px 0px 0 rgb(79,69,79),-8px 0px 7px rgba(0,0,0,0.35),-8px 0px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
        }
        .box6 {
            text-shadow:0px 0px 0 rgb(188,178,188),-1px 1px 0 rgb(173,163,173),-2px 2px 0 rgb(157,147,157),-3px 3px 0 rgb(142,132,142),-4px 4px 0 rgb(126,116,126),-5px 5px 0 rgb(111,101,111),-6px 6px 0 rgb(95,85,95), -7px 7px 0 rgb(79,69,79),-8px 8px 7px rgba(0,0,0,0.35),-8px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
        }
        .box7 {
            text-shadow:0px 0px 0 rgb(188,178,188),0px 1px 0 rgb(173,163,173),0px 2px 0 rgb(157,147,157),0px 3px 0 rgb(142,132,142),0px 4px 0 rgb(126,116,126),0px 5px 0 rgb(111,101,111),0px 6px 0 rgb(95,85,95), 0px 7px 0 rgb(79,69,79),0px 8px 7px rgba(0,0,0,0.35),0px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
        }
        .box8 {
            text-shadow:0px 0px 0 rgb(188,178,188),1px 1px 0 rgb(173,163,173),2px 2px 0 rgb(157,147,157),3px 3px 0 rgb(142,132,142),4px 4px 0 rgb(126,116,126),5px 5px 0 rgb(111,101,111),6px 6px 0 rgb(95,85,95), 7px 7px 0 rgb(79,69,79),8px 8px 7px rgba(0,0,0,0.35),8px 8px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
        }
        .box9{
            text-shadow:0px 0px 0 rgb(188,178,188),1px 0px 0 rgb(173,163,173),2px 0px 0 rgb(157,147,157),3px 0px 0 rgb(142,132,142),4px 0px 0 rgb(126,116,126),5px 0px 0 rgb(111,101,111),6px 0px 0 rgb(95,85,95), 7px 0px 0 rgb(79,69,79),8px 0px 7px rgba(0,0,0,0.35),8px 0px 1px rgba(0,0,0,0.5),0px 0px 7px rgba(0,0,0,.2);
        }
    </style>
</head>
<body>
<div class="text-wrap box1">W3cplus (0 deg)</div>
<div class="text-wrap box2">W3cplus (45 deg)</div>
<div class="text-wrap box3">W3cplus (90 deg)</div>
<div class="text-wrap box4">W3cplus (135 deg)</div>
<div class="text-wrap box5">W3cplus (180 deg)</div>
<div class="text-wrap box6">W3cplus (225 deg)</div>
<div class="text-wrap box7">W3cplus (270 deg)</div>
<div class="text-wrap box8">W3cplus (315 deg)</div>
<div class="text-wrap box9">W3cplus (360 deg)</div>
</body>
</html>

㊂溢出文本属性

text-overflow:clip | ellipsis
——————————————————————————————
clip：不显示省略标记(...)，只是简单的裁切。
ellipsis：文本溢出时显示省略标记(...)，省略标记插入的位置是最后一个字符。

实际上，text-overflow属性仅用于决定文本溢出时是否显示省略标记(...)，并不具备样式定义的功能。要实现文本溢出时裁切文本显示省略标记(...)效果，还需要两个属性的配合：

1.强制文本在一行显示(white-space:nowrap);

2.溢出内容隐藏(overflow:hidden);

3.定义容器的宽度。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Text-overflow的应用</title>
    <style type="text/css" media="screen">
        .text-overflow-clip{
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            text-overflow:clip; /* 文本裁切 */
            white-space:nowrap; /* 强制不换行 */
            overflow:hidden; /* 溢出隐藏 */
        }
    </style>
</head>
<body>
<div class="text-overflow-clip">
    Text-overflow属性值为clip的实战，看看他能不能截取文本？如何截取文本？会怎么显示？
</div>
</body>
</html>

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Text-overflow的应用</title>
    <style type="text/css" media="screen">
        .text-overflow-ellipsis{
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            text-overflow:ellipsis;
            white-space:nowrap;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div class="text-overflow-ellipsis">
    Text-overflow属性值为clip的实战，看看他能不能截取文本？如何截取文本？会怎么显示？
</div>
</body>
</html>

实战体验：制作固定区域的博客列表

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>text-overflow制作固定区域的博客列表</title>
    <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" />
    <style type="text/css">
        .block {
            margin: 0 auto;
            margin-top: 20px;
            width: 318px;
            line-height: 20px;
            border: 1px solid #fc9;
        }
        .block ol {
            padding-left:23px;
            width: 14em;
            background:url(bg.png) no-repeat 2px 4px;
        }
        .block li {
            clear:both;
            margin: 0;
            padding: 0;
            list-style: none outside none;
        }
        .block li a {
            float:left;
            _display:inline;
            max-width:14em;
            white-space: nowrap;
            _white-space:noraml;/*超长就换行，第二行被裁掉 @ie6*/
            _height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            color: #333;
            _background:transparent;/*解决莫名占据高度bug @ie6*/
        }
        .block li span {
            _position: relative;/*应付父容器hacLayout裁切bug @ie6 */
            float: left;
            _display: inline;
            margin-right: -99px;
            padding-left: 10px;
            font-size: 10px;
            color: #999;
        }
    </style>
</head>
<body>
<div class="block">
    <h3>最新博文</h3>
    <ol class="clearfix">
        <li><a href="#">如何和何时使用CSS的!important</a><span>2013-02-19</span></li>
        <li><a href="#">社交媒体网站设计尺寸参考</a><span>2013-02-19</span></li>
        <li><a href="#">10个简单有效的方法帮你改善jQuery代码与性能</a><span>2013-01-28</span></li>
        <li><a href="#">预处理器的对比——Sass、LESS和Stylus</a><span>2013-01-26</span></li>
        <li><a href="#">43个处理触摸事件的jQuery插件</a><span>2013-01-09</span></li>
        <li><a href="#">2012年国外优秀前端网站</a><span>2013-01-02</span></li>
        <li><a href="#">CSS团队精神：CSS最佳实践团队开发</a><span>2012-12-31</span></li>
        <li><a href="#">使用CSS3的background-size优化苹果的Retina屏幕的图像显示</a><span>2012-12-26</span></li>
        <li><a href="#">你应该知道的一些事情——CSS权重</a><span>2012-12-21</span></li>
        <li><a href="#">使用CSS Scriptes来优化你的网站在Retina屏幕下显示</a><span>2012-12-18</span></li>
    </ol>
</div>
</body>
</html>

㊃文本换行

word-wrap属性：

在CSS3中，使用word-wrap属性实现长单词与URL地址的自动换行。

word-wrap:normal | break-word
——————————————————————————————
normal：默认值，浏览器只在半角空格或连字符的地方进行换行
break-word：将内容在边界内换行（不截断英文单词换行）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Word-wrap的使用</title>
    <style>
        div {
            float: left;
            width: 150px;
            margin: 10px;
            font-size: 16px;
            font-family: simsun;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div>我是测试文本主，全部是中文，没有任何英文，主要是用来测试作用，看看效果而以。我是测试文本主，全部是中文，没有任何英文，主要是用来测试作用，看看效果而以。我是测试文本主，全部是中文，没有任何英文，主要是用来测试作用，看看效果而以。我是测试文本主，全部是中文，没有任何英文，主要是用来测试作用，看看效果而以。</div>
<div>W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。</div>
<div>W3CPLUS is a front end lover's home, W3CPLUS to create the best web front end study site. W3CPLUS strive to original to study together, progress together, share for the principle. W3CPLUS station provides about CSS, HTML, css3, meta jQuery, mobile phone, mobile terminal technical documentation, DEMO, resources, and the front end lover together mutual encouragement.</div>
<div>Use the URL:http://www.w3cplus.com/css/using-transparency-in-web-design-dos-and-donts.html,to test. and user the text:sssssssssssssssssssssssssssssssstestesssssssssssssdtestsadasfsatesssssssssssdstewsdfa and number:78895482852268123356463345663214524543123464215646321467436143167431316464313464643134646431464 to test. </div>
</body>
</html>

加上 word-wrap:break-word; 后：

唯一不完美的是，它不会按单词换行，直接将长单词截断换行，增加了阅读难度。

注：word-wrap应用在<pre>和<table>中时，是没有任何效果的！

word-break属性：

word-break属性来决定自动换行的处理方法。它不仅可以让浏览器实现半角空格或连字符后面的换行，而且还可以让浏览器实现任意位置的换行。

word-break:normal | break-all | keep-all | break-word
——————————————————————————————————————————————————————
normal：默认值，根据语言自己的规则确定换行方式，中文到边界上的汉字换行，英文从整个单词换行。
break-all：可以强行截断英文单词，达到词内换行效果。
keep-all：不允许字断开。如果是中文把前后标点符号内的一个汉字短语整个换行，英文单词整个换行；
          如果出现某个英文字符长度超过容器边界，后面的部分将撑破容器；
          如果边框为固定属性，则后面部分无法显示。
break-word：与word-wrap:break-word效果一样。

white-space属性：

white-space属性主要用来声明建立布局过程中如何处理元素中的空白符。

white-space:normal || pre || nowrap || pre-line || pre-wrap || inherit
——————————————————————————————————————————————————————————————————————
normal：默认值。空白处会被浏览器忽略。可以通过这个值恢复到属性的默认值。
pre：文本空白处会被浏览器扣留，其行为方式类似于HTML中的<pre>标签效果。
nowrap：文本不会换行，文本会在同一行上，起到碰到换行标签<br/>为止。
pre-line：合并空白符序列，但保留换行符。
pre-wrap：保留空白符序列，但是正常进行换行。
inherit：继承父元素的white-space属性值。