首页 前端知识 CSS3中的字体和文本样式

CSS3中的字体和文本样式

2024-04-29 12:04:33 前端知识 前端哥 90 418 我要收藏

CSS3优化了CSS 2.1的字体和文本属性,同时新增了各种文字特效,使网页文字更具表现力和感染力,丰富了网页设计效果,如自定义字体类型、更多的色彩模式、文本阴影、生态生成内容、各种特殊值、函数等。

1、字体样式

字体样式包括类型、大小、颜色、粗细、下画线、斜体、大小写等,下面分别进行介绍。

1.1、定义字体类型

使用CSS3的font-family属性可以定义字体类型,用法如下:

    font-family : name

其中,name表示字体名称,可以设置字体列表,多个字体按优先顺序排列,以逗号隔开。

如果字体名称包含空格,则应使用引号括起。第二种声明方式使用所列出的字体序列名称,如果使用fantasy序列,将提供默认字体序列。

【示例】新建网页,保存为test1.html,在<body>标签内输入两行段落文本。

<!doctype html>
<html>
    <head>
         <style type="text/css">
               p {
                    /* 段落样式 */
                    font-family:  "隶书";                       
                     /* 隶书字体 */
                  }
         </style>
    </head>

    <body>
    
    </body>
        <p>月落乌啼霜满天,江枫渔火对愁眠。 </p>
        <p> 姑苏城外寒山寺,夜半钟声到客船。</p>
    <script>

    </script>
</html>

在这里插入图片描述

1.2、定义字体大小

使用CSS3的font-size属性可以定义字体大小,用法如下:

    font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller
| length

其中,xx-small(最小)、x-small(较小)、small(小)、medium(正常)、large(大)、x-large(较大)、xx-large(最大)表示绝对字体尺寸,这些特殊值将根据对象字体进行调整。

larger(增大)和smaller(减少)这对特殊值能够根据父对象中字体尺寸进行相对增大或者缩小处理,使用成比例的em单位进行计算。

length可以是百分数,或者浮点数字和单位标识符组成的长度值,但不可为负值。其百分比取值是基于父对象中字体的尺寸进行计算,与em单位的计算相同。

【示例】新建网页,在<head>标签内添加<style type="text/css">标签,定义一个内部样式表。然后输入下面样式,分别设置网页字体的默认大小、正文字体大小,以及栏目中的字体大小。

    body {font-size:12px;}                           /* 以像素为单位设置字体大小 */
    p {font-size:0.75em;}                            /* 以父辈字体大小为参考设置字体大小 */
    div {font:9pt Arial, Helvetica, sans-serif;}     /* 以点为单位设置字体大小*/

1.3、定义字体颜色

使用CSS3的color属性可以定义字体颜色,用法如下:

    color : color

其中,参数color表示颜色值,取值包括颜色名、十六进制值、RGB等颜色函数等。

【示例】分别定义页面、段落文本、<div>标签、<span>标签包含字体的颜色,代码如下:

    body { color:gray;}                        /* 使用颜色名 */
    p { color:#666666;}                        /* 使用十六进制 */
    div { color:rgb(120,120,120);}             /* 使用RGB */
    span { color:rgb(50%,50%,50%);}            /* 使用RGB */

1.4、定义字体粗细

使用CSS3的font-weight属性可以定义字体粗细,用法如下:

    font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

其中,normal为默认值,表示正常的字体,相当于取值为400;bold表示粗体,相当于取值为700,或者使用标签定义的字体效果。

bolder(较粗)和lighter(较细)是相对于normal字体粗细而言。

另外,也可以设置值为100、200、300、400、500、600、700、800、900,它们分别表示字体的粗细,是对字体粗细的一种量化方式,值越大就表示字体越粗,相反就表示字体越细。

【示例】新建test.html文档,定义一个内部样式表,然后输入下面样式,分别定义段落文本、一级标题、

标签包含字体的粗细效果,同时定义一个粗体样式类。

    p { font-weight: normal }                 /* 等于400 */
    h1 { font-weight: 700 }                   /* 等于bold */
    div{ font-weight: bolder }                /* 可能为500 */
    .bold {font-weight:bold;}                 /* 粗体样式类 */

注意:设置字体粗细也可以称为定义字体的重量。对于中文网页设计来说,一般仅用到bold(加粗)、normal(普通)两个属性值。

1.5、定义艺术字体

使用CSS3的font-style属性可以定义字体的倾斜效果,用法如下:

    font-style : normal | italic | oblique

其中,normal为默认值,表示正常的字体,italic表示斜体,oblique表示倾斜的字体。italic和oblique两个取值只能在英文等西方文字中有效。

【示例】新建test.html文档,输入下面样式,定义一个斜体样式类。在<body>标签中输入两段文本,并把斜体样式类应用到其中一段文本中。

<!doctype html>
<html>
    <head>
         <style type="text/css">
               .italic {/* 斜体样式类 */
        font-style:italic;
    }
         </style>
    </head>

    <body>
        <p>知我者,谓我心忧,不知我者,谓我何求。 </p>
        <p class="italic">君子坦荡荡,小人长戚戚。</p>
    </body>
    <script type="scope">
    </script>
</html>

效果如下:
在这里插入图片描述

1.6、定义修饰线

使用CSS3的text-decoration属性可以定义字体的修饰线效果,用法如下:

    text-decoration : none || underline || blink || overline || line-through

其中,normal为默认值,表示无装饰线,blink表示闪烁效果,underline表示下画线效果,line-through表示贯穿线效果,overline表示上画线效果。

<!doctype html>
<html>
    <head>
         <style type="text/css">
               .underline {text-decoration:underline;}                /*下画线样式类 */
               .overline {text-decoration:overline;}                  /*上画线样式类 */
               .line-through {text-decoration:line-through;}          /* 删除线样式类 */
               .line { text-decoration:line-through overline underline; }
         </style>
    </head>

    <body>
        <p class="underline">昨夜西风凋碧树,独上高楼,望尽天涯路</p>
        <p class="overline">衣带渐宽终不悔,为伊消得人憔悴</p>
        <p class="line-through">众里寻他千百度,蓦然回首,那人却在灯火阑珊处</p>
        <p class="line">古今之成大事业、大学问者,必经过三种之境界。</p>
    </body>
    <script type="scope">
        
    </script>
</html>

在这里插入图片描述
提示:CSS3增强text-decoration功能,新增如下5个子属性:

  • text-decoration-line:设置装饰线的位置,取值包括none(无)、underline、overline、line-through、blink。
  • text-decoration-color:设置装饰线的颜色。
  • text-decoration-style:设置装饰线的形状,取值包括solid、double、dotted、dashed、wavy(波浪线)。
  • text-decoration-skip:设置文本装饰线条必须略过内容中的哪些部分。
  • text-underline-position:设置对象中的下画线的位置。

1.7、定义字体的变体

使用CSS3的font-variant属性可以定义字体的变体效果,用法如下:

    font-variant : normal | small-caps

其中,normal为默认值,表示正常的字体,small-caps表示小型大写字母字体。

【示例】新建test.html文档,在内部样式表中定义一个类样式:
在这里插入图片描述
注意:font-variant仅支持拉丁字体,中文字体没有大小写效果区分。

1.8、定义大小写字体

使用CSS3的text-transform属性可以定义字体的大小写效果,用法如下:

    text-transform : none | capitalize | uppercase | lowercase

其中,none为默认值,表示无转换发生;capitalize表示将每个单词的第一个字母转换成大写,其余无转换发生;uppercase表示把所有字母转换成大写;lowercase表示把所有字母转换成小写。

【示例】新建test.html文档,在内部样式表中定义3个类样式。然后,在<body>标签中输入3行段落文本,并分别应用上面定义的类样式。

<!doctype html>
<html>
    <head>
         <style type="text/css">
          .capitalize {text-transform:capitalize;}       /*首字母大小样式类 */
          .uppercase {text-transform:uppercase;}         /*大写样式类 */
          .lowercase {text-transform:lowercase;}         /* 小写样式类 */
         </style>
    </head>

    <body>
        <p class="capitalize">text-transform:capitalize;</p>
        <p class="uppercase">text-transform:uppercase;</p>
        <p class="lowercase">text-transform:lowercase;</p>
    </body>
    <script type="scope">
    </script>
</html>

在这里插入图片描述

2、文本样式

文本样式主要设计正文的排版效果,属性名以text为前缀进行命名,下面分别进行介绍。

2.1、定义水平对齐

使用CSS3的text-align属性可以定义文本的水平对齐方式,用法如下:

    text-align : left | right | center | justify

其中,left为默认值,表示左对齐;right为右对齐;center为居中对齐;justify为两端对齐。

【示例】新建test.html文档,在内部样式表中定义3个对齐类样式。然后,在<body>标签中输入3段文本,并分别应用这3个类样式。

<!doctype html>
<html>
    <head>
         <style type="text/css">
            .left { text-align: left; }
            .center { text-align: center; }
            .right { text-align: right; }
         </style>
    </head>

    <body>
        <p align="left">昨夜西风凋碧树,独上高楼,望尽天涯路</p>
        <p class="center">衣带渐宽终不悔,为伊消得人憔悴</p>
        <p class="right">众里寻他千百度,蓦然回首,那人却在灯火阑珊处</p>
    </body>
    <script type="scope">
    </script>
</html>

在这里插入图片描述

2.2、定义垂直对齐

使用CSS3的vertical-align属性可以定义文本垂直对齐的方式,用法如下:

    vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length

取值简单说明如下:

  • auto:将根据layout-flow属性的值对齐对象内容。
  • baseline:表示默认值,将支持valign特性的对象内容与基线对齐。
  • sub:表示垂直对齐文本的下标。
  • super:表示垂直对齐文本的上标。
  • top:表示将支持valign特性的对象的内容对象顶端对齐。
  • text-top:表示将支持valign特性的对象的文本与对象顶端对齐。
  • middle:表示将支持valign特性的对象的内容与对象中部对齐。
  • bottom:表示将支持valign特性的对象的内容与对象底端对齐。
  • text-bottom:表示将支持valign特性的对象的文本与对象底端对齐。
  • length:表示由浮点数字和单位标识符组成的长度值或者百分数,可为负数,定义由基线算起的偏移量,基线对于数值来说为0,对于百分数来说就是0%。

【示例】新建test1.html文档,在<head>标签内添加<style type="text/css">标签,定义一个内部样式表,然后输入下面样式,定义上标类样式。然后在<body>标签中输入一行段落文本,并应用该上标类样式。

<!doctype html>
<html>
    <head>
         <style type="text/css">
              .super {vertical-align:super;}
         </style>
    </head>

    <body>
        <p>vertical-align表示垂直<span class=" super ">对齐</span>属性</p>
    </body>
    <script type="scope">
    </script>
</html>

在这里插入图片描述

2.3、定义文本间距

使用CSS3 letter-spacing属性可以定义字距,使用word-spacing属性可以定义词距。这两个属性的取值都是长度值,由浮点数字和单位标识符组成,默认值为normal,表示默认间隔。

定义词距时,以空格为基准进行调节,如果多个单词被连在一起,则被word-spacing:视为一个单词;如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词,word-spacing:属性有效。

【示例】新建网页,设计内部样式表,定义两个类样式。然后在标签中输入两行段落文本,并应用上面两个类样式。

<!doctype html>
<html>
    <head>
         <style type="text/css">
             .lspacing {letter-spacing:1em;}          /* 字距样式类 */
              .wspacing {word-spacing:1em;}            /* 词距样式类 */
         </style>
    </head>

    <body>
        <p class="lspacing">letter spacing word spacing(字间距)</p>
        <p class="wspacing">letter spacing word spacing(词间距)</p>
    </body>
    <script type="scope">
    </script>
</html>

在这里插入图片描述
注意:字距和词距一般很少使用,使用时应慎重考虑用户的阅读体验和感受。对于中文用户来说,letter-spacing属性有效,而word-spacing:属性无效。

2.4、定义行高

使用CSS3的line-height属性可以定义行高,用法如下:

    line-height : normal | length

其中,normal表示默认值,一般为1.2em,length表示百分比数字,或者由浮点数字和单位标识符组成的长度值,允许为负值。

【示例】新建网页文档,在标签内添加

<!doctype html>
<html>
    <head>
         <style type="text/css">
            .p1 {/* 行高样式类1 */
                    line-height:1em;    /* 行高为一个字大小 */
                }
            .p2 {/* 行高样式类2 */
                    line-height:2em;    /* 行高为两个字大小 */
                }
         </style>
    </head>

    <body>
        <p class="p1">“人生三境界”语出王国维《人间词话》。第一境界是“立”、第二境界是“守”、第三境界是“得”。第一境界是立志、是下决心,只有具备了这个条件才会有第二、第三境界。</p>
        <p class="p2">“望尽天涯”正从一夜无眠生出,脉理细密。“西风凋碧树”,不仅是登楼极目所见,而且包含有昨夜通宵不寐卧听西风落叶的回忆。景既萧索,人又孤独,几乎言尽的情况下,作者又出人意料地展现出一片无限广远寥廓的境界:“独上高楼,望尽天涯路。”这里固然有凭高望远的苍茫之感,也有不见所思的空虚怅惘,但这所向空阔、毫无窒碍的境界却又给主人公一种精神上的满足,这是从“望尽”一词中可以体味出来的。这三句虽然包含望而不见的伤离意绪,但感情悲壮,毫无纤柔颓靡。</p>
    </body>
    <script type="scope">
    </script>
</html>

在这里插入图片描述

2.5、定义首行缩进

使用CSS3的text-indent属性可以定义文本首行缩进,用法如下:

    text-indent : length

其中,length表示百分比数字,或者由浮点数字和单位标识符组成的长度值,允许为负值。建议在设置缩进单位时,以em为设置单位,它表示一个字距,这样可以比较精确地确定首行缩进的效果。

【示例】新建文档,设计内部样式表,输入下面样式,定义段落文本首行缩进2个字符。然后在<body>标签中输入标题和段落文本:

<!doctype html>
<html>
    <head>
         <style type="text/css">

                p { text-indent:2em;}  /* 首行缩进2个字符 */
         </style>
    </head>

    <body>
        <p class="p1">“人生三境界”语出王国维《人间词话》。第一境界是“立”、第二境界是“守”、第三境界是“得”。第一境界是立志、是下决心,只有具备了这个条件才会有第二、第三境界。</p>
        <p class="p2">“望尽天涯”正从一夜无眠生出,脉理细密。“西风凋碧树”,不仅是登楼极目所见,而且包含有昨夜通宵不寐卧听西风落叶的回忆。景既萧索,人又孤独,几乎言尽的情况下,作者又出人意料地展现出一片无限广远寥廓的境界:“独上高楼,望尽天涯路。”这里固然有凭高望远的苍茫之感,也有不见所思的空虚怅惘,但这所向空阔、毫无窒碍的境界却又给主人公一种精神上的满足,这是从“望尽”一词中可以体味出来的。这三句虽然包含望而不见的伤离意绪,但感情悲壮,毫无纤柔颓靡。</p>
    </body>
    <script type="scope">
    </script>
</html>

在这里插入图片描述

2.6、书写模式

使用CSS3新增的writing-mode属性,可以增强文本布局中的书写模式,基本语法如下所示:

    writing-mode:horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

取值简单说明如下:

  • horizontal-tb:水平方向自上而下的书写方式,类似IE私有值lr-tb。
  • vertical-rl:垂直方向自右而左的书写方式,类似IE私有值tb-rl。
  • vertical-lr:垂直方向自左而右的书写方式。
  • lr-tb:左-右,上-下。对象内容在水平方向上从左向右流入,后一行在前一行的下面显示。
  • tb-rl:上-下,右-左。对象内容在垂直方向上从上向下流入,自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。

【示例】设计唐诗从右侧流入,自上而下显示,效果如下图所示。

<!doctype html>
<html>
    <head>
         <style type="text/css">

            #box {
                float: right;
                writing-mode: tb-rl;
                -webkit-writing-mode: vertical-rl;
                writing-mode: vertical-rl;
            }
         </style>
    </head>

    <body>
      
    </body>
    <div id="box">
        <h2>春晓</h2>
        <p>春眠不觉晓,处处闻啼鸟。夜来风雨声,花落知多少。</p>
    </div>
        
    <script type="scope">

    </script>
</html>

在这里插入图片描述

2.7、文本溢出

使用text-overflow属性可以设置超长文本省略显示,基本语法如下所示:

    text-overflow:clip | ellipsis

适用于块状元素,取值简单说明如下:

  • clip:当内联内容溢出块容器时,将溢出部分裁切掉,为默认值。
  • ellipsis:当内联内容溢出块容器时,将溢出部分替换为…。

【示例】设计新闻列表有序显示,对于超出指定宽度的新闻项,则使用text-overflow属性省略并附加省略号,避免新闻换行或者撑开板块。

    dd {/*设计新闻列表项样式*/
        font-size:0.78em;
        height:1.5em;width:280px;                           /*固定每个列表项的大小*/
        padding:2px 2px 2px 18px;                           /*为添加新闻项目符号腾出空间*/
        background: url(images/icon.gif) no-repeat 6px 25%; /*以背景方式添加项目符号*/
        margin:2px 0;
        white-space: nowrap;                                /*为应用text-overflow做准备,禁止换行*/
        overflow: hidden;                                   /*为应用text-overflow做准备,禁止文本溢出显示*/
        -o-text-overflow: ellipsis;                         /* 兼容Opera */
        text-overflow: ellipsis;                            /* 兼容IE, Safari (WebKit) */
        -moz-binding: url('images/ellipsis.xml#ellipsis');  /* 兼容Firefox */
    }

在这里插入图片描述

2.8、文本换行

使用word-break属性可以定义文本自动换行,基本语法如下所示。

    word-break:normal | keep-all | break-all

取值简单说明如下:

  • normal:为默认值,依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。
  • keep-all:对于中文、韩文、日文不允许字断开,适合包含少量亚洲文本的非亚洲文本。
  • break-all:与normal相同,允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本,如使连续的英文字母间断行。

【示例】设计表格样式,由于标题行文字较多,标题行被撑开,影响用户的浏览体验。这里使用word-break: keep-all;禁止换行,主要样式如下:

    th {
        background-image: url(images/th_bg1.gif);  /*使用背景图模拟渐变背景*/
        background-repeat: repeat-x;               /*定义背景图平铺方式*/
        height: 30px;
       vertical-align:middle;                      /*垂直居中显示*/
       border: 1px solid #cad9ea;                  /*添加淡色细线边框*/
       padding: 0 1em 0;
       overflow: hidden;                           /*超出范围隐藏显示,避免撑开单元格*/
       word-break: keep-all;                       /*禁止词断开显示*/
       white-space: nowrap;                        /*强迫在一行内显示*/
    }

在这里插入图片描述

3、特殊设置

3.1、initial值

initial表示初始化值,所有的属性都可以接收该值。如果重置属性值,那么就可以使用该值,这样就可以取消用户定义的CSS样式。注意,IE暂不支持该属性值。

【示例】在页面中插入了4段文本,然后在内部样式表中定义这4段文本为蓝色、加粗显示,字体大小为24px。

    <style type="text/css">
    p {
        color: blue;
        font-size:24px;
        font-weight:bold;
    }
    </style>
    <p>春眠不觉晓,</p>
    <p>处处闻啼鸟。</p>
    <p>夜来风雨声,</p>
    <p>花落知多少。</p>

在这里插入图片描述

如果想禁止使用第一句和第三句用户定义的样式,只需在内部样式表中添加一个独立样式,然后把文本样式的值都设为initial值,具体代码如下所示:

    p:nth-child(odd){
       color: initial;
       font-size:initial;
       font-weight:initial;
    }

在这里插入图片描述
在浏览器中可以看到,第一句和第三句文本恢复为默认的黑色、常规字体,大小为16px。

3.2、inherit值

inherit表示继承值,所有属性都可以接收该值。

【示例】设置一个包含框,高度为200px,包含2个盒子,定义盒子高度分别为100%和inherit。在正常情况下显示200px,但是在特定情况下,如定义盒子绝对定位显示,则设置height: inherit;能够按预定效果显示,而height: 100%;就可能撑开包含框。

    <style type="text/css">
    ……
    .height1 { height: 100%;}
    .height2 {height: inherit;}
    </style>
    <div class="box">
        <div class="height1">height: 100%;</div>
    </div>
    <div class="box">
        <div class="height2">height: inherit;</div>
    </div>

在这里插入图片描述
提示:inherit一般用于字体、颜色、背景等;auto表示自适应,一般用于高度、宽度、外边距和内边距等关于长度的属性。

3.3、unset值

unset表示清除用户声明的属性值,所有的属性都可以接收该值。如果属性有继承的值,则该属性的值等同于inherit,即继承的值不被擦除;如果属性没有继承的值,则该属性的值等同于initial,即擦除用户声明的值,恢复初始值。注意,IE和Safari暂时不支持该属性值。

【示例】设计4段文本,第一段和第二段位于

容器中,设置段落文本为30px的蓝色字体,现在擦除第二段和第四段文本样式,则第二段文本显示继承样式,即12px的红色字体,而第四段文本显示初始化样式,即16px的黑色字体。

<!DOCTYPE html>
<html>
    <head>
       <style type="text/css">
            .box {color: red; font-size: 12px;}
            p {color: blue; font-size: 30px;}
            p.unset {
                color: unset;
                font-size: unset;
            }
       </style>
    </head>

    <body>
        <div class="box">
            <p>春眠不觉晓,</p>
            <p class="unset">处处闻啼鸟。</p>
        </div>
        <p>夜来风雨声,</p>
        <p class="unset">花落知多少。</p>
    </body>

    <script>

    </script>
</html>

在这里插入图片描述

3.4、all属性

all属性表示除了unicode-bidi和direction两个CSS属性以外的所有CSS属性。

注意:IE暂时不支持该属性。

【示例】针对上节示例,我们可以简化p.unset类样式:

    p.unset {
        all: unset;
    }

如果在样式中,声明的属性非常多,使用all会极为方便,可以避免逐个设置每个属性。

3.5、opacity属性

opacity属性定义元素对象的不透明度,其语法格式如下所示:

    opacity: <alphavalue> | inherit;

其取值简单说明如下:

  • <alphavalue>是由浮点数字和单位标识符组成的长度值,不可为负值,默认值为1。opacity取值为1时,元素是完全不透明的;取值为0时,元素是完全透明的,不可见的;介于0~1的任何值都表示该元素的不透明程度。如果超过了这个范围,其计算结果将截取到与之最相近的值。
  • inherit表示继承父辈元素的不透明性。

【示例】设计

对象铺满整个窗口,显示为黑色背景,不透明度为0.7,这样可以模拟一种半透明的遮罩效果;再使用CSS定位属性设计 对象显示在上面。主要代码如下:

    <style type="text/css">
    body {margin: 0; padding: 0;}
    div { position: absolute; }
    .bg {
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.7;
        filter: alpha(opacity=70);
    }
    </style>
    <div class="web"><img src="images/bg.png" /></div>
    <div class="bg"></div>
    <div class="login"><img src="images/login.png"  /></div>

在这里插入图片描述
注意:使用色彩模式函数的alpha通道可以针对元素的背景色或文字颜色单独定义不透明度,而opacity属性只能为整个对象定义不透明度。

3.6、transparent值

transparent属性值用来指定全透明色彩,等效于rgba(0,0,0,0)值。

【示例】使用CSS的border设计三角形效果,通过transparent颜色值让部分边框透明显示,代码如下所示:

<!DOCTYPE html>
<html>
    <head>
       <style type="text/css">
        #demo {
            width: 0; height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid red;
        }
       </style>
    </head>

    <body>
        <div id="demo"></div>
    </body>

    <script>

    </script>
</html>

在这里插入图片描述

3.7、currentColor值

border-color、box-shadow和text-decoration-color属性的默认值是color属性的值。使用currentColor关键字可以表示color属性的值,并用于所有接收颜色的属性上。

【示例】设计图标背景颜色值为currentColor,这样在网页中随着链接文本的字体颜色的不断变化,图标的颜色也跟随链接文本的颜色变化而变化,确保整体导航条色彩的一致性,达到图文合一的境界:

    <style type="text/css">
    ……
    .link { margin-right: 15px; }
    .link:hover { color: red; }  /* 虽然改变的是文字颜色,但是图标颜色也一起变化了 */
    </style>
    <a href="##" class="link"><i class="icon icon1"></i>首页</a>
    <a href="##" class="link"><i class="icon icon2"></i>刷新</a>
    <a href="##" class="link"><i class="icon icon3"></i>收藏</a>
    <a href="##" class="link"><i class="icon icon4"></i>展开</a>

在这里插入图片描述
提示:如果将color属性设置为currentColor,则相当于设置为color: inherit。

3.8、rem值

CSS3新增rem单位,用来设置字体的相对大小,与em类似。em总是相对于父元素的字体大小进行计算,而rem是相对于根元素的字体大小进行计算。

rem的优点:在设计弹性页面时,以rem为单位,所有元素的尺寸都参考一个根元素,整个页面更容易控制,避免父元素的不统一,带来页面设计的混乱,特别适合移动页面设计。

【示例】浏览器默认字体大小是16px,如果预设rem与px的关系为:1rem = 10px,那么就可以设置html的字体大小为font-size:62.5%(10/16=0.625=62.5%),在设计稿中把px固定尺寸转换为弹性尺寸,只需要除以10就可以得到相应的rem尺寸,整个页面所有元素的尺寸设计就非常方便。

    html { font-size:62.5%; }
    .menu{ width:100%; height:8.8rem; line-height:8.8rem; font-size:3.2rem; }

在Web App开发中推荐使用rem作为单位,它能够等比例适配所有屏幕。

3.9、font-size-adjust属性

在项目开发中,经常会遇到不同类型的字体,在相同的大小下显示的效果并不统一。

【示例1】为每个单词Text统一大小为20px,但是字体类型不同,在浏览器中预览,可以看到字体的视觉效果并不统一:

<!DOCTYPE html>
<html>
    <head>
       <style type="text/css">
            div {font-size: 20px;}
            .font1 {font-family: Comic Sans Ms;}
            .font2 {font-family: Tahoma;}
            .font3 {font-family: Arial;}
            .font4 {font-family: Times New Roman;}
       </style>
    </head>

    <body>
        <div class="font1">Text 1</div>
        <div class="font2">Text 2</div>
        <div class="font3">Text 3</div>
        <div class="font4">Text 4</div>
    </body>

    <script>

    </script>
</html>

在这里插入图片描述
因此,CSS3新增font-size-adjust属性,该属性可以设置aspect值。

提示:aspect值就是字体的小写字母x的高度与font-size高度之间的比率。当字体的aspect值很高时,如果为当前字体设置很小的尺寸会更易阅读。

【示例2】针对示例1,分别调整每种字体的aspect值:

    .font1 { font-size-adjust: 0.50; font-family: Comic Sans Ms; }
    .font2 { font-size-adjust: 0.54; font-family: Tahoma; }
    .font3 { font-size-adjust: 0.54; font-family: Arial; }
    .font4 { font-size-adjust: 0.49; font-family: Times New Roman; }

在这里插入图片描述

4、色彩模式

CSS 2.1支持Color Name(颜色名称)、HEX(十六进制颜色值)、RGB。CSS 3新增三种颜色模式:RGBA、HSL和HSLA。

4.1、rgba()函数

RGBA是RGB色彩模式的扩展,它在红、绿、蓝三原色通道基础上增加了Alpha通道。其语法格式如下所示:

    rgba(r,g,b,<opacity>)

参数说明如下:

  • r、g、b:分别表示红色、绿色、蓝色3种原色所占的比重,取值为正整数或者百分数。正整数的取值范围为0~255,百分数的取值范围为0.0%~100.0%。超出范围的数值将被截至其最接近的取值极限。注意,并非所有浏览器都支持使用百分数值。
  • <opacity>:表示不透明度,取值为0~1。

【示例】使用CSS3的box-shadow属性和rgba()函数为表单控件设置半透明度的阴影来模拟柔和的润边效果。其主要样式代码如下:

    input, textarea {                /*统一文本框样式*/
        padding: 4px;                /*增加内补白,增大表单对象尺寸,看起来更大方*/
        border: solid 1px #E5E5E5;   /*增加淡淡的边框线*/
        outline: 0;                  /*清除轮廓线*/
        font: normal 13px/100% Verdana, Tahoma, sans-serif;
        width: 200px;                /*固定宽度*/
        background: #FFFFFF;         /*白色背景*/
        /*设置边框阴影效果*/
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    }

提示:rgba(0,0,0,0.1)表示不透明度为0.1的黑色,这里不宜直接设置为浅灰色,因为对于非白色背景来说,灰色发虚,而半透明效果可以避免这种情况。

4.2、hsl()函数

HSL是一种标准的色彩模式,包括人类视力所能感知的所有颜色,在屏幕上可以重现16 777 216种颜色,是目前运用最广泛的颜色系统。它通过色调(H)、饱和度(S)和亮度(L)3个颜色通道的叠加来获取各种颜色。其语法格式如下所示:

    hsl(<length>,<percentage>,<percentage>)

参数说明如下:

  • <length>表示色调(Hue),可以为任意数值,用以确定不同的颜色。其中,0(或360)表示红色,60表示黄色,120表示绿色,180表示青色,240表示蓝色,300表示洋红。
  • <percentage>(第一个)表示饱和度(Saturation),可以为0%~100%。其中,0%表示灰度,即没有使用该颜色;100%表示饱和度最高,即颜色最艳。
  • <percentage>(第二个)表示亮度(Lightness),取值为0%~100%。其中,0%最暗,显示为黑色;50%表示均值;100%最亮,显示为白色。

4.3、hsla()函数

HSLA是HSL色彩模式的扩展,在色相、饱和度、亮度三要素基础上增加不透明度参数。使用HSLA色彩模式,可以定义不同透明效果。其语法格式如下所示:

    hsla(<length>,<percentage>,<percentage>,<opacity>)

其中,前3个参数与hsl()函数的参数含义和用法相同,第4个参数<opacity>表示不透明度,取值为0~1。

4.5、文本阴影

使用text-shadow属性可以给文本添加阴影效果,具体语法格式如下:

    text-shadow:none | <length>{2,3} && <color>?

取值简单说明如下:

  • none:无阴影,为默认值。
  • <length>①:第1个长度值用来设置对象的阴影水平偏移值,可以为负值。
  • <length>②:第2个长度值用来设置对象的阴影垂直偏移值,可以为负值。
  • <length>③:如果提供了第3个长度值,则用来设置对象的阴影模糊值,不允许为负值。
  • <color>:设置对象的阴影颜色。

【示例1】为段落文本定义一个简单的阴影效果:

<!DOCTYPE html>
<html>
    <head>
       <style type="text/css">
            p {
                    text-align: center;
                    font: bold 60px helvetica, arial, sans-serif;
                    color: #999;
                    text-shadow: 0.1em 0.1em #333;
                }
       </style>
    </head>

    <body>
        <p>HTML5+CSS3</p>
    </body>

    <script>

    </script>
</html>

在这里插入图片描述
【示例2】text-shadow属性可以使用在:first-letter和:first-line伪元素上。本例使用阴影叠加设计立体文本特效,通过左上和右下各添加一个1px错位的补色阴影,营造一种淡淡的立体效果,代码如下:

    <style type="text/css">
    p {text-shadow: 1px 1px white, -1px -1px #333;}

在这里插入图片描述

4.6、动态生成内容

使用content属性可以在CSS样式中临时添加非结构性的标签,或者说明性内容等。具体语法格式如下。

    content: normal | string | attr() | url() | counter() | none;

取值说明如下:

  • normal:默认值。表现与none值相同。
  • string:插入文本内容。
  • attr():插入元素的属性值。
  • url():插入一个外部资源,如图像、音频、视频或浏览器支持的其他任何资源。
  • counter():计数器,用于插入排序标识。
  • none:无任何内容。

【示例1】使用content属性,配合CSS计数器设计多层嵌套有序列表序号样式:

    <style type="text/css">
    ol { list-style:none;}                                              /*清除默认的序号*/
    li:before {color:#f00; font-family:Times New Roman;}                /*设计层级目录序号的字体样式*/
    li{counter-increment:a 1;}                                          /*设计递增函数a,递增起始值为1 */
    li:before{content:counter(a)". ";}                                  /*把递增值添加到列表项前面*/
    li li{counter-increment:b 1;}                                       /*设计递增函数b,递增起始值为1 */
    li li:before{content:counter(a)"."counter(b)". ";}                  /*把递增值添加到二级列表项前面*/
    li li li{counter-increment:c 1;}                                    /*设计递增函数c,递增起始值为1 */
    li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";}  /*把递增值添加到三级列表项前面*/
    </style>

在这里插入图片描述
【示例2】使用content为引文动态添加引号:

    <style type="text/css">
    /* 为不同语言指定引号的表现 */
    :lang(en) > q {quotes:'"' '"';}
    :lang(no) > q {quotes:"?" "?";}
    :lang(ch) > q {quotes:"“" "”";}
    /* 在q标签的前后插入引号 */
    q:before {content:open-quote;}
    q:after  {content:close-quote;}
    </style>

9.7、自定义字体

使用@font-face规则可以自定义字体类型,具体语法格式如下:

    @font-face { <font-description> }

<font-description>是一个名值对的属性列表,属性及其取值说明如下:

  • font-family:设置字体名称。
  • font-style:设置字体样式。
  • font-variant:设置字体是否大小写。
  • font-weight:设置字体粗细。
  • font-stretch:设置字体是否横向拉伸变形。
  • font-size:设置字体大小。
  • src:设置字体文件的路径。注意,该属性只用在@font-face规则里。

【示例】简单演示如何利用@font-face规则在页面中使用网络字体,示例代码如下:

    <style type="text/css">
    @font-face {                                            /* 引入外部字体文件 */
        font-family: "lexograph";                           /* 选择默认的字体类型 */
        src: url(http://randsco.com//fonts/lexograph.eot);  /* 兼容IE */
        /* 兼容非IE */
        src: local("Lexographer"), url(http://randsco.com/fonts/lexograph.ttf) format("truetype");
    }
    h1 { /* 设置引入字体文件中的lexograph字体类型 */
        font-family: lexograph, verdana, sans-serif;
        font-size:4em;}
    </style>
    <h1>http://www.baidu.com/</h1>

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6545.html
标签
评论
发布的文章

什么是JSON 为什么使用它

2024-05-07 13:05:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!