大前端应用开发与架构设计-使用CSS美化Web站点

时间：2018-07-06 17:48:25 阅读：201 评论：0 收藏：0 [点我收藏+]

大前端应用开发与架构设计-使用CSS美化Web站点

大前端应用开发与架构设计

3.1 CSS概述

CSS(Cascading Style Sheets)即层叠样式表，是用来控制HTML页面元素的外观样式(例如字体颜色、大小以及元素的定位等等)，目前最新的版本是CSS3。

网页中使用HTML+CSS能够实现网页的元素与外观样式分离,也就是HTML只负责页面元素以及语义部分,CSS负责页面的外观样式，这也是W3C组织推荐的做法:尽量使用CSS取代HTML属性，因为如果让HTML既负责页面结构，又要负责页面样式，那样结构和样式会显得十分臃肿和混乱，可维护性和可重用性降低。

为了更加直观的理解CSS在网站中的作用，这里以淘宝网为例子。

带CSS的淘宝网首页
技术分享图片

不带CSS的淘宝网首页
技术分享图片

如何删除样式呢?如下图所示
只要在开发者工具的Elements选项中删除<header></header>标签中的<style></style>内容即可
技术分享图片

3.2 CSS样式分类

CSS样式按照书写位置的使用方式分类有三种，分别是行内样式，内部样式表和外部样式表。

3.2.1 行内样式表

行内样式表用于控制页面中局部(例如某篇文章的一段内容)的内容样式，使用方式是在标签中定义属性style="属性:值;属性:值;"即可，日常开发中较少使用。

行内样式应用案例(css_row_type.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS行内样式的使用</title>
</head>
<body>
  
    <h3 style="font-size: 24px;">江雪</h3>
    <p>唐代：柳宗元</p>
    <p style="font-size: 18px;"> 千山鸟飞绝，万径人踪灭。</p>
    <p style="color: #ccc;">孤舟蓑笠翁，独钓寒江雪。</p>
</body>
</html>

3.2.2 内部样式表

内部样式表用于控制当前页面的内容样式，使用方式是在<head></head>标签内使定义<style></style>元素，然后将样式定义写在<style></style>元素内即可，此方式用于控制单页面，无法实现多个页面复用样式。

内部样式应用案例(css_inner_style.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS内部样式</title>

    <!--定义内部样式-->
    <style>
        /* 所有的文字都使用居中的样式 */
        body{
            text-align: center;
        }
    
    /* 使用标签选择器定义h3标题的样式 */
        h3{
            font-size: 24px;
            font-weight: 700;
            font-family: ‘Courier New‘, Courier, monospace;
            
        }

        p{
            font-size: 18px;
            font-family:‘Segoe UI‘, Tahoma, Geneva, Verdana, sans-serif;
            line-height: 26px;
            
        }

        div{
            color: #ccc;
            font-size: 14px;
        }
    </style>
</head>

<body>

    <h3>登鹳雀楼</h3>

    <div>唐代：王之涣</div>

    <p>白日依山尽，黄河入海流。</p>

    <p> 欲穷千里目，更上一层楼。</p>
</body>

</html>

3.2.3 外部样式表

外部样式表用于控制网站的内容样式，使用方式是使用<link href="样式路径" type="text/css" rel="stylesheet"/>即可，真正实现了网页的结构和内容样式的分离,也便于提高复用性(即多个网页使用同一个样式文件)和维护性，也是日常开发中最常用的样式使用方式。

外部样式应用案例(css_out_type.html)如下所示

首先在web/css路径下建立外部样式文件(out.css)

body{
    text-align: center;
}

h3{
    color: #ff8000;
    font-size: 24px;
    font-family: ‘Courier New‘, Courier, monospace;

}

p{
    color: #0080ff;
    font-size: 18px;
    font-family: ‘Courier New‘, Courier, monospace;
    line-height: 26px;
}
}

然后在web/module/css/type/ 下定义css_out_type.html,完整实现如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS外部样式的使用</title>
</head>
<!-- 引用外部样式 -->
<link rel="stylesheet" href="../../../css/out.css">
<body>

    <h3>静夜思</h3>
    <p>唐代：李白</p>
    <p>  床前明月光，疑是地上霜。</p>
    <p>  举头望明月，低头思故乡。</p>
      
</body>
</html>

3.3 CSS样式的使用规则

选择器:{
属性名:属性值;
属性名:选择器;
}

选择器用于指定CSS样式作用的HTML对象，花括号({})内是该对象设置的具体样式
属性和属性值之间以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如颜色，大小等等。
属性和属性值之间使用“:”连接
多个"键值对"之间使用“;”隔开

3.4 CSS基本选择器

在大型门户网站(腾讯、网易、新浪、搜狐)中，HTML元素成千上万，如果想要修改某些元素的样式，那么首先必须得找到元素。在CSS中，选择需要添加样式的元素称为选择器。

3.4.1 标签选择器

标签选择器是用来更改页面指定标签(元素)的外观样式,其语法格式为

标签名称{
    属性名:属性值;
}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式，应用案例(tag_selector.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签选择器的使用</title>

    <style>
        /*标签选择器:修改指定标签的样式,会更改所有指定标签的样式*/

        p{
            color: #0080ff;
            font-size:18px;
            font-family: ‘Courier New‘, Courier, monospace;
        }

       
    </style>
</head>

<body>

    <h1>前端学习技术指南</h1>
    <hr/>
    <p>
        主要技术栈:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup
    </p>

    <p>
        开发环境:Visual Studio Code+Git+WebStorm+Chrome+Apache
    </p>


    <h3>学习编程的方法</h3>

    <p>看视频、看书、写代码、写博客</p>

    <p>与行内人交流，参加行业大会</p>

    <p>分析开源项目</p>



</body>

</html>

3.4.2 类选择器

类选择器用于解决标签选择器不能实现个性化样式，其定义格式为

.类选择器名称{属性名:属性值}

如果想要在HTML标签中使用类样式，只需要在HTML元素的开始标签中加上class=类型选择器名称即可,在定义类选择器时命名不能使用中文，建议命名见名知意,多个单词之间使用-隔开，应用案例(class_selector.html)如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>类选择器的使用</title>

    <style>
        /*定义三个类选择器，用于改变字体的颜色*/
        .color-aqua{
            color: aqua;
        }

        .color-chartreuse{
            color: chartreuse;
           
        }

        .color-deepskyblue{
            color: deepskyblue;
          
        }

  
    </style>
</head>
<body>
    <div>

        <h1>前端三大主流框架</h1>
        <!--使用上面定义的类选择器-->
        <p class="color-aqua">vue</p>
        <p class="color-chartreuse">angular</p>
        <p class="color-deepskyblue">react</p>
        
    </div>
</body>
</html>

接下来结合标签选择器和类选择器实现Google的Logo,应用案例(google.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用标签和类样式选择器实现Google logo</title>

    <style>
        span{
            font-size: 150px;
            font-family: ‘Courier New‘, Courier, monospace;
            font-weight: normal;
            
        }

        .blue{
            color:blue;
        }

        .red{
            color: red;
        }
        .orange{
            color: orange;
        }
        .green{
            color: green;
        }
    </style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">o</span>
    <span class="orange">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
</body>
</html>

在日常开发中，多类选择器可以作用在同一个HTML元素中，以便HTML元素能够实现更多的样式效果，如下图淘宝首页所示便使用了多类选择器
技术分享图片

多个类选择器使用空格隔开，类选择器的顺序不会影响页面效果，应用案例(multi_class_selector.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多个类选择器的使用</title>

    <style>
        h3{
            font-size: 24px;
            font-family: ‘Courier New‘, Courier, monospace;
            color:chartreuse;
        }

        .font-size{
            font-size: 14px;
        }
        .color{
            color: aqua;
        }

        .font-weight{
            font-weight: 700;
        }
        
    </style>
</head>
<body>
    <div>
        <h3>四大天王</h3>
        <!-- 调用多个类选择器,实现多个效果，中间使用空格隔开 -->
        <p class="font-family font-size color">刘德华</p>
        <p class="font-weight">张学友</p>
        <p class="font-size">黎明</p>
        <p class="font-family">郭富城</p>
    </div>
</body>
</html>

3.4.3 id选择器

ID选择器用于改变页面中HTML元素中相同ID的元素的外观样式，其定义格式为

#ID名称{
    属性名:属性值;
    属性名:属性值;
}

应用案例(id_selector.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>id选择器的使用</title>

    <style>
      
            #card_number{
                color: #ccc;
                font-size: 18px;
            }
    </style>
</head>
<body>

    <h3>id选择器</h3>
    <label 爱好:> <input type="checkbox" name="hobby" value="1">编程 &nbsp;<input type="checkbox" value="2" name="hobby" >旅游 &nbsp;<input type="checkbox" value="3" name="hobby">登山 &nbsp; </label> <br />
    <label> 身份证号<input type="text" id="card_number" name="card_number"></label>
</body>
</html>

ID选择器和类选择器的区别是当前页面中基于HTML元素的id属性值是唯一的，因此id选择器的样式只能使用一次，而类选择器可以反复使用。

3.4.4 通配符选择器

通配符*用于匹配任意元素,而通配符选择器用于设置页面所有元素的统一样式，通配符选择器的格式为

* {
    属性:属性值；
    属性:属性值;
}

通配符选择器应用案例(wildcardcharacter_selector.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通配符选择器</title>

    <style>
    /* 定义通配符选择器，改变字体大小和颜色 */
    *{
        
        color: #0080ff;
        font-size: 18px;
    }
    </style>
</head>
<body>
    
    
        <h1>前端学习技术指南</h1>
        <hr/>
        <p>
            主要技术栈:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup
        </p>
    
        <p>
            开发环境:Visual Studio Code+Git+WebStorm+Chrome+Apache
        </p>
    
    
        <h3>学习编程的方法</h3>
    
        <p>看视频、看书、写代码、写博客</p>
    
        <p>与行内人交流，参加行业大会</p>
    
        <p>分析开源项目</p>
    
</body>
</html>

CSS基础选择器中，最常用的就是类选择器、多类选择器、元素选择器。id选择器和通配符选择器在日常开发使用较少。

3.5 CSS字体

字体样式属性主要用于控制字体的大小(font-size)、字体类型(font-family)、颜色(color)、加粗(font-weight)、倾斜(font-style)等外观样式。

font-size属性用于控制字体的大小，通常网页中使用的字体大小为14px+,在日常开发时尽量使用偶数(例如14，16，18)数字字号，如下代码片段所示，修改h1标题的字体大小为26px。

   h1{
            /*设置字体大小*/
            font-size: 26px;
        }

font-family属性用于设置字体，Windows系统默认是微软雅黑，当然网页也可以设置多个字体，字体之间使用逗号(,)隔开即可。
如果字体是中文(例如宋体)或者英文字体包含空格，#和$时必须使用引号("")括起来，例如‘Microsoft YaHei‘,‘Courier New‘, Courier, monospace，如果多个字体中包含了中文和英文字体，那么英文字体必须在中文字体之前。
在日常开发中推荐使用系统默认的字体，那样可以在任何浏览器中都能够正确的显示。

需要注意的是在旧版本(例如Windows XP)系统中不支持将font-family的属性值设置为类似微软雅黑或者宋体的中文，这里可以使用Unicode编码\5B8B\4F53和\5FAE\8F6F\96C5\9ED1分别来表示宋体和微软雅黑中文字体，这两种字体也是最常用的中文字体。如下代码片段所示展示了字体设置的常用案例

       p{
            font-family: ‘Microsoft YaHei‘,‘Courier New‘, Courier, monospace,"\5B8B\4F53","\5FAE\8F6F\96C5\9ED1"
        }

font-weight属性用于设置字体的粗细，常用属性值有normal和bold,属性值还可以使用数字(100-900)表示,其中normal等价于400,bold等价于700。

 span{
            font-weight: 400;
        }

font-style属性用于设置字体的风格(主要是倾斜或者不倾斜)，当属性值为normal时表示不倾斜，当属性值为italic时表示倾斜。

/*设置超链接标签的文本加粗和倾斜*/
        div a{
            font-weight: 700;
            font-style: italic;
        }

        div em{
            /*让斜体摆正*/
            font-style: normal;
        }

字体的应用案例(font_style.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字体样式的使用</title>

    <style>
    
        h1{
            /*设置字体大小*/
            font-size: 26px;
            /*设置字体颜色*/
            color: aquamarine;
            /*设置字体*/
            font-family:"微软雅黑";
        }


        p{
            /*网页中普遍使用14px+的字体大小*/
            font-size: 14px;
            /*如果有多个字体，使用逗号分隔，字体名包含空格 使用引号括起来*/
            font-family: ‘Microsoft YaHei‘,‘Courier New‘, Courier, monospace
        }

        h3{
            font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman‘, serif;
            font-size :22px;
            color: aqua;

        }

        /*设置div下的p标签样式*/
        div p{
            font-family: "\5B8B\4F53","\5FAE\8F6F\96C5\9ED1";
            font-size: 18px;
            color:red;
            
        }

        span{
            font-weight: 400;
        }

        /*设置超链接标签的文本加粗和倾斜*/
        div a{
            font-weight: 700;
            font-style: italic;
        }

        div em{
            /*让斜体摆正*/
            font-style: normal;
        }

    </style>
</head>
<body>
        
        <h1>前端学习技术指南</h1>
        <hr/>
        <p>
            主要技术栈:HTML5+CSS3+JavaScript+JavaScript+jQuery+Bootstarp+Angular+Vue+Node+React+Git+Webpack+Glup
        </p>
    
        <p>
            开发环境:Visual Studio Code+Git+WebStorm+Chrome+Apache
        </p>

        <div>
                <h3>学习编程的方法</h3>

                <p>看视频、看书、写代码、写博客</p>

                <span>与行内人交流，参加行业大会</span>

                <p>分析开源项目</p>

        </div>
        <div>
            <h4>程序员常去的网站</h4>
            <a href="https://www.csdn.net">csdn</a>
            <a href="https://www.cnblogs.com">cnblogs</a>
            <a href="https://www.51cto.com">51cto</a>
            <a href="http://www.chinaunix.net">chinaunix</a>
            <a href="https://www.oschina.net">oschina</a>
      
        </div>

        <div>
            <em>斜体内容</em>
        </div>
</body>
</html>

在设置font属性时可以采用一种比较简单的写法，如下所示

选择器{font:font-style font-weight font-size font-family},需要注意的是属性值顺序是固定不变的,其中font-size和font-family属性值是必须设置的。

3.6 伪类选择器

伪类选择器主要是给其他选择器增加效果，常用的伪类选择器包括链接伪类选择器、结构伪类选择器、目标伪类选择器三种。

3.6.1 链接伪类选择器

链接伪类选择器主要是作用在超链接元素(即<a href=></a>)上，其最常用的样式效果就是当我们访问常见的电商站点(例如淘宝、京东)的超链接元素时，字体的颜色会发生改变。
链接伪类选择器可以设置未访问的链接(a:link),已经访问的链接(a:visited),鼠标移动到超链接上(a:hover)和选定的链接(a:active)四种链接样式结果，应用案例(alink.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>链接伪类选择器</title>
    <base target="_blank"/>

    <style>

        /*
            linked visisted hover active 顺序固定
            日常开发中通常使用a:hover
        */

        /*未访问的链接*/
        a:link{
            color: red;
            font-size:16px;
            font-weight: 400;
        }

        /*已经访问的链接*/
        a:visited{
            color: orange;
            font-size: 16px;

        }

        /*鼠标悬浮在超链接元素的效果*/
        a:hover{
            color: aqua;
            font-size: 24px;
            font-family: ‘Courier New‘, Courier, monospace;
            font-weight: 700;
        }
      
          /*选定(选中超链接不松开鼠标)的超链接*/
          a:active{
            color: deeppink;
            font-size: 28px;
        }
        


    </style>
</head>
<body>
    <div><a href="https://miaosha.jd.com/">京东秒杀</a></div>
    <div><a href="https://a.jd.com/">优惠券</a></div>
    <div><a href="https://red.jd.com/">闪购</a></div>

</body>
</html>

需要注意的是四种超链接样式效果的顺序是固定的，否则会无法显示设置的样式，日常开发中常用的是a:hover即鼠标移动到超链接上的样式效果，应用案例(alink_app.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超链接伪类选择器的日常应用场景</title>

    <style>
        /*
        
            在日常开发中(以京东网站为例)，超链接伪类选择器通常只设置鼠标移动到超链接的样式
        */
        a{
            color: gray;
            font-size: 16px;
        }

        a:hover{
            color:red;
            font-size: 18px;
            font-weight: 700;
        }
    </style>
</head>
<body>


        <div><a href="https://miaosha.jd.com/">京东秒杀</a></div>
        <div><a href="https://a.jd.com/">优惠券</a></div>
        <div><a href="https://red.jd.com/">闪购</a></div>
    
</body>
</html>

3.6.2 结构(位置)伪类选择器

CSS3中新增结构伪类选择器，用于页面中同时有多个相同类型元素(例如多个<li></li>)的情况下,修改指定的元素样式。
Selector:first-chid匹配符合Selector选择器，而且必须是其父元素的第一个子节点的元素。
Selector:last-chid匹配符合Selector选择器，而且必须是其父元素的最后一个子节点元素。
Selector:nth-child(n)匹配符合Selector选择器，而且必须是其父元素的第n个子节点的元素。
Selector:nth-last-chid(n)：匹配符合Selector选择器，而且必须是其父元素的倒数第n个子节点的元素

，其中n可以是数字，奇数(odd),偶数(even),还可以是数学公式(例如n+1,2n 等等)。

应用案例(pos.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>结构(位置)伪类选择器</title>

    <style>
        /*选择第一个li元素*/
        li:first-child{
            color: red;
        }
        /*选择最后一个li元素*/
        li:last-child{
            color: aqua;
        }

        /*选择指定的li元素*/
        li:nth-child(3){
            color: darkorange;
        }
    
    </style>
</head>
<body>
    <div>
        <ul>
            <li>first</li>
            <li>second</li>
            <li>third</li>
            <li>fourth</li>
            <li>fifth</li>
        </ul>
    </div>
</body>
</html>

3.6.3 目标伪类选择器

目标伪类选择器(:target)用于页面中活动的目标元素,应用案例(target.html)如下所示,当点击锚链接元素时，跳转到锚链接的内容会改变其样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>目标选择器</title>

    <style>
    
    /*当前活动目标元素改变字体颜色*/
    :target{
        color:salmon;

    }
    </style>
</head>
<body>
        <div id="chatper">
                <h1><a href="#first">第一章</a></h1>
                <h1><a href="#">第二章</a></h1>
                <h1><a href="#">第三章</a></h1>
                <h1><a href="#">第四章</a></h1>
                <h1><a href="#">第五章</a></h1>
                <h1><a href="#">第六章</a></h1>
                <h1><a href="#">第七章</a></h1>
                <h1><a href="#">第八章</a></h1>
                <h1><a href="#">第九章</a></h1>
                <h1><a href=#"">第十章</a></h1>
                <h1><a href="#">第十一章</a></h1>
                <h1><a href="#">第十二章</a></h1>
                <h1><a href="#">第十三章</a></h1>
                <h1><a href="#">第十四章</a></h1>
                <h1><a href="#">第十五章</a></h1>
                <h1><a href="#">第十六章</a></h1>
                <h1><a href="#">第十七章</a></h1>
                <h1><a href="#">第十八章</a></h1>
                <h1><a href="#">第十九章</a></h1>
                <h1><a href="#">第二十章</a></h1>
                <h1><a href="#">第二十一章</a></h1>
                <h1><a href=#"">第二十二章</a></h1>
                <h1><a href="#">第二十三章</a></h1>
                <h1><a href="#">第二十四章</a></h1>
          
              </div>
              
          
              <div id="content">
          
                  <div id="first">
          
                      <h1>第一章</h1>
          
                      <div id="chapter1">
          
                          <p>生命不息，编码不止</p>
                      </div>
                  </div>
              </div>
</body>
</html>

3.7 CSS外观样式

CSS外观样式主要用于控制本文颜色(color)、行间距(line-height)、水平对齐方式(text-align)、首行缩进(text-indent)、字间距(letter-spacing)和单词间距(word-spacing)以及CSS3新增的颜色半透明、文字阴影(text-shadow)效果。

3.7.1 文本颜色

在CSS中可以通过color属性定义文本的颜色，常用的取值方式有如下三种:

预定义的颜色值;例如red,green,blue等等
十六进制的颜色值，例如#FF0000,也是日常开发中最常用的使用方式
RGB值，例如红色可以使用rgb(255,0,0)或者rgb(100%,0%,0%)

在日常开发中想要定义文本颜色，还要记住十六进制的颜色值比较繁琐，这里我们借助Visual Studio Code的取色器插件(Visual Color Picker)实现设置颜色，安装和使用教程如下图所示

颜色取色器使用

如下图所示，在使用时只需要使用Ctrl+Shift+P调出命令面板，然后输入VS Color Picker即可选颜色
技术分享图片

颜色取值的应用案例(color.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css更改外观属性</title>

    <style>

        /*使用预定义的颜色值*/
        .red{
            color:red;
        }

        /*
            使用十六进制表示颜色
            十六进制取值 0-9,a-f
        */
        #hex_color{
            color:#82ea8c;
        }
        /*使用rgb颜色值 最大数值为255*/
        li:nth-child(3){
            color: rgb(255, 0, 0);
        }


    
    </style>
</head>
<body>
    <h3>CSS颜色属性的三种取值方式</h3>

    <div id="color">
        <ol>
            <li class="red">预定义的颜色值，例如red,blue,green等等</li>
            <li id="hex_color">十六进制的值，例如#FF0000,#FF6600,日常开发中十六进制是最常用的定义颜色的方式</li>
            <li>RGB代码,如红色可以使用rgb(255,0,0)或者rgb(100%,0%,0%)</li>
        </ol>
    </div>
</body>
</html>

3.7.2 文本间距

在写新闻文章时，行与行之间是存在一定距离的，这在CSS中称为行间距(line-height),通常行间距取值是字体大小+8px，
还可以指定文本的水平对其方式(text-align),其主要取值包括left,center,right。
而且通常在段落的文本中，首行通常会缩进(text-indent)。
还可以通过letter-spacing调整中文文字之间的距离，通过world-spacing调整英文单词之间的距离，但是通常使用默认间距即可。
文本间距的应用案例(news.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行高对其和首行缩进的属性使用</title>

    <style>
        h2 {
            /*文本水平对齐的方式*/
            text-align: center;
        }

        p {
            font-size: 16px;
            /* 行间距(行与行之间的距离)  字体大小+8px*/
            line-height: 24px;
            /*水平对齐方式 主要取值为left center right*/
            text-align: left;
            /*首行缩进 1em表示1个字的宽度*/
            text-indent: 2em;
            /*字间距*/
            letter-spacing: 2px;
            /*英文单词单词间距(对中文无效)*/
            word-spacing: 1px;
        }
    </style>
</head>

<body>

    <div id="news">

        <h2>习大大外交思想引领中国特色大国外交开创新局面</h2>
        <p>中央外事工作会议6月22日至23日在北京召开，这次会议，习大大总结了党的十八大以来我国对外工作取得的历史性成就，回答了新时代如何做好对外工作的重大理论和实践问题，为全面推进新时代对外工作明确前进方向、提供根本遵循。新华社《学习进行时》原创品牌栏目“讲习所”推出文章为您解读。</p>
        <p> 做好对外工作的重大理论和实践问题，为全面推进新时代对外工作明确前进方向、提供根本遵循。新华社《学习进行时》原创品牌栏目“讲习所”推出文章为您解读。</p>
        <p>作为习大大新时代中国特色社会主义思想的重要组成部分，习大大外交思想是新时代我国对外工作的根本遵循和行动指南。</p>
        <p>Life is half spent before we know what it is.</p>
    </div>
</body>

</html>

3.7.3 CSS3新特性之颜色半透明和文字阴影

如果要想实现颜色半透明的效果，只需要使用color:rgba(r,g,b,a)即可，其中前三个参数和之前介绍的颜色属性的RGB值一样，a表示alpha，取值范围为0-1之间。
文字阴影可以通过text-shadow属性实现，该属性有四个参数值，分别表示文字的水平位置、垂直位置、模糊距离以及阴影颜色，其中水平位置和垂直位置是必须的。
它们的应用案例(css3_feature.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3新特性之颜色半透明和文字阴影</title>

    <style>
        ul li {
            font-size: 28px;
            font-style: italic;
        }

        /*要想实现文字半透明效果，使用rgba(arg1,arg2,arg3,arg4) 传递四个参数，其中第四个参数的取值在0-1之间*/

        li:nth-child(1) {
            color: rgb(255, 77, 22);
        }

        li:nth-child(2) {
            color: rgba(255, 77, 22, 0.5);
        }


        ol li{
            font-size: 50px;
            /*水平位置* 垂直位置* 模糊距离 阴影颜色*/
            text-shadow: 5px 11px 3px rgba(255, 0, 0, 0.5);
        }

    </style>
    
</head>

<body>

    <div>
        <ul>
            <li>CSS3新特性之未添加颜色半透明</li>
            <li>CSS3新特性之添加颜色半透明效果</li>
        </ul>
    </div>

    <div>
        <ol>
            <li>CSS3新特性之文字阴影</li>
            <li>CSS3新特性之文字阴影</li>
           
        </ol>
    </div>
</body>

</html>

如果想要更改样式的属性值并立刻查看更改后的效果，可以直接在Chrome提供的开发人员工具中修改，如下图所示
技术分享图片
不过需要指出的是，当修改后获得想要的样式结果后，需要将修改的内容复制到对应的源文件(例如这里的css3_feature.html)中，否则一刷新浏览器，修改的结果将会丢失。

3.7.4 综合案例

使用选择器及其文本样式实现新闻案例(selector_text_style_app.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器及其文本样式的综合案例</title>

    <style>
        body {
            color: #3.4c3c;
            font-size: 16px;
        }

        h1 {
            text-align: center;
            font-weight: 400;
            font-size: 26px;
        }

        p {
            font-size: 16px;
            line-height: 24px;
            text-indent: 2em;
            text-align: left;
            letter-spacing: 1px;

        }
        /*标签选择器*/
        div {
            text-align: center;
            font-size: 14px;
        }
        /*类样式选择器*/
        .xinhua {
            color: #ff8000;

        }
        /* 链接伪类选择器 */
        .xinhua:hover {
            color: #00ffff;
        }
    </style>
</head>

<body>
    <h1>中国国家主席会见法国总理菲利普</h1>
    <div>2018-06-25 12:10:32　来源:
        <span>
            <a class="xinhua" href="http://home.xinhua-news.com/rss/newsdetail/6c76532a6336b9f1a88587df2a24f820/1529899831084">新华网</a>
        </span>
    </div>
    <hr />

    <p>新华社北京6月25日电 国家主席25日在人民大会堂会见法国总理菲利普。</p>
    <p>习大大欢迎菲利普访华，指出马克龙总统和总理先生在半年内相继访华，体现了法方对发展中法关系的高度重视，体现了中法关系的高水平。当前，世界正在发生深刻复杂变化。中方愿同法方一道，不断丰富中法全面战略伙伴关系内涵，继续做国家间相互尊重、合作共赢、交流互鉴的典范。</p>
    <p>习大大强调，中法是全面战略伙伴，双方要强化伙伴意识，坚持相互信任、平等相待，尊重和照顾彼此核心利益和重大关切。充分发挥中法各个对话交流机制和平台作用，增进相互了解，深化互信。要着力深化务实合作，尽早落实已达成的各项合作共识和协议，发挥好重大项目的引领带动作用，加快培育新的合作增长点。中方赞赏法方愿积极参与共建“一带一路”的合作，愿本着共商共建共享原则，实现“一带一路”倡议同法国和欧盟发展战略有效对接。双方要共举多边主义旗帜，坚持公平正义，共同维护国际关系基本准则。中方愿同欧方一道努力，推动中欧关系行稳致远。
    </p>
    <p>菲利普表示，马克龙总统年初对中国成功的访问，再次彰显了法中战略合作的重要性。中国既有长远规划，又能脚踏实地，发展成就令人钦佩。法国对法中关系充满信心，愿继续深化两国经贸、文化交流，推进民用核能、航空航天等战略性合作。“一带一路”倡议是一个面向未来的合作设想，符合全人类的利益。法国在国际事务中坚持独立自主的政策，在多边主义面临挑战的今天，拥有稳定的合作伙伴非常宝贵。法方愿同中方共同致力于促进世界的和平与稳定，加强欧盟同中国的合作关系。
    </p>
    <p> 杨洁篪、王毅、何立峰等参加会见。
    </p>
</body>

</html>

3.8 显示模式

在使用HTML+CSS布局网页时，通常把HTML元素分为块级元素和行内元素，之前在讲述使用HTML构建Web站点时使用了典型的块级元素<div></div>和典型的行级元素<span></span>描述了两者在结构上的区别。
块级元素:总是从新行开始，可以容纳其他块级元素(<p></p>以及标题标签不能存放块级元素)和内联元素，宽度默认是容器的100%，高度、行高、外边距以及内边距都可以设置，后期网页布局时会经常使用块级元素(<div></div>)实现网页的布局。

行级元素:和相邻的元素在一行显示，无法设置高度、宽度，水平方向的内边距和外边距可以设置，垂直的无法设置。默认的宽度就是内容本身的宽度，行内元素只能容纳文本或者其他行内元素(<a></a>标签除外)

有些html元素(例如<input>,<img>,<td></td>)既有行内元素的特点，又可以设置宽度和高度，它们被称为行内块元素，高度，行高、外边距以及内边距都可以控制。

它们的应用案例(html_element_type.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html元素分类</title>

    <style>
        body{
            background-color: red;

        }

        div{
            font-size: 18px;
            line-height: 26px;
            text-align: left;
            text-indent: 2em;
            padding: 2px;
            margin: 2px;
            background-color: aqua;

        }

        p{
            font-size: 18px;
            line-height: 26px;
            text-align: left;
            text-indent: 2em;
            padding: 2px;
            margin: 2px;
            background-color: aqua;
        }

        span{
            background-color:darkorange;
            /*行内元素无法设置宽度和高度 这里的设置无效*/
            width: 200px;
            height: 300px;
        }

        input{
            width: 400px;
            height: 20px;
        }

        img{
            border: 1px;
            width: 400px;
            height: 200px;
        }

     

    </style>
</head>
<body >
    <!--块级元素-->
    <div>我是块级元素</div>
    <p>我是块级元素</p>
    <div id="parent">
        <div id="child">我是子元素</div>
    </div>

    <!--行级元素-->
    <span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span><span>我是行级元素</span>
    <br />

    <input type="text"><input type="text"><input type="text">
    <br/>

    <img src="../../images/Canyenne.jpg" alt="我是一张图片" ><img src="../../images/Canyenne.jpg" alt="我是一张图片" ><img src="../../images/Canyenne.jpg" alt="我是一张图片" >
    <table border="1" align="center" valign="bottom" width="300px" height="200px"  cellspacing="0" cellpadding="25">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>身高</td>
            <td>体重</td>
        </tr>
    </table>
</body>
</html>

块级元素、行内元素和行内块级元素是可以互相转换的，通过设置display属性即可，应用案例(html_element_convert.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html元素类型转换</title>
    <style>
    
        h3{
            text-align: left;
        }

        div{    
            background-color:cyan;
            width: 400px;
            height: 50px;
            /*通过设置display属性的值为inline设置在一行显示，即实现块级元素转换为行内元素*/
            display: inline;
        }


        span{
            /*将行内元素转换为块级元素*/
            display: block;
            background-color: deepskyblue;
        }


        a{
            width: 200px;
            height: 50px;
            background-color: chartreuse;
            display: inline-block;
        }
    </style>
</head>
<body>
    <h3>块级元素转换为行内元素</h3>
    <div>html5+css3+javascript</div>
    <div>bootstarp+jquery+angular+vue+react+node</div>
    <div>webpack+gulp+git</div>
    <div>webstorm+chrome+apache</div>
    <h3>行内元素转换为块级元素</h3>
    <span>html5+css3+javascript</span>
    <span>bootstarp+jquery+angular+vue+react+node</span>
    <span>webpack+gulp+git</span>
    <span>webstorm+chrome+apache</span>
    <h3>行内元素转换为行内块级元素</h3>
    <a href="https://www.baidu.com">百度一下，你就知道</a><a href="https://www.baidu.com">百度一下，你就知道</a><a href="https://www.baidu.com">百度一下，你就知道</a>
</body>
</html>

3.9 CSS复合选择器

复合选择器就是多个基础选择器的组合，通过不同的组合方式，目的是为了在页面中选择更加精确的目标元素。

3.9.1 交集选择器

交集选择器是由标签选择器和类选择器组成，例如h1.class,用于控制在页面中既是...又是...的关系的元素，应用案例(intersection.html)如下所示,应用频率相对较少，不太建议使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之交集选择器</title>

    <style>
        .mobilePhone {
            font-size: 18px;
            font-weight: 700;
            line-height: 26px;
            text-align: left;
        }


        /*使用交集选择器 设置既是div元素又是mobilePhone类样式*/
        div.mobilePhone{
            color: aqua;
        }
    </style>
</head>

<body>
    <!--不同元素具有相同的样式，想要在此基础之上改变某些元素的样式-->

    <div class="mobilePhone">xiaomi</div>
    <div class="mobilePhone">huawei</div>

    <p class="mobilePhone">apple</p>
    <p class="mobilePhone">samsung</p>
</body>

</html>

3.9.2 并集选择器

使用并集选择器，多个基础选择器(标签选择器、类选择器、ID选择器)之间使用逗号,隔开，应用场景是如果页面中某些不同的元素具有完全或者部分相同的样式时使用,应用案例(union.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之并集选择器</title>

    <style>

        h1{
            text-align: center;
        }
    
    /*并集选择器:多个选择器之间使用逗号隔开*/
        div,p,.custom-class,#custom-id{
            color: aqua;
            font-size: 18px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!--多个选择器对应的元素样式完全一样则可以使用并集选择器-->
    <h1>前端技术栈</h1>
    <div>
        html5+css3+javascript
    </div>

    <p>bootstrap+jQuery+Angular+Vue+React+Node</p>

    <div class="custom-class">webpack+gulp+git</div>
    <div id="custom-id">webstorm+chrome+Apache</div>

</body>
</html>

3.9.3 后代选择器

后代选择器用于选择元素或者元素组的后代(包含层级关系(子级，孙子级...)的标签元素)，其写法就是把外层标签写在前面，内层标签写在后面，中间使用空格隔开。
当标签发生嵌套时(例如<ul><li></li></ul>),内层标签(<li></li>)就是外层标签(<ul></ul>)的后代，应用案例(descendant.html)如下所示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之后代选择器</title>
    <style>

    /*设置标题样式*/
      
        h1 {
            text-align: left;
            font-size: 28px;
            font-style: italic;
        }

        /*后代元素选择器*/
        /*设置id为technology的无序列表的样式*/
        #technology ol li {
            color: #ff8000;
            font-size: 18px;
            font-style: italic;
            font-weight: 400px;
        }
        /*设置有序列表的样式*/
        ol li{

            color: #00ff00;
            font-size: 20px;
            font-style: normal;
            font-weight: 700px;
        }
    </style>
</head>

<body>
    <h3>大前端技术栈</h3>
    <div id="technology">
        <ol>
            <li>html5+css3+javascript</li>
            <li>bootstrap+jQuery+Angular+Vue+React</li>
            <li>webpack+glup+git</li>
        </ol>
    </div>

    <h3>学习编程的方法</h3>
    <ol>
        <li>看视频</li>
        <li>写代码</li>
        <li>写博客</li>
    </ol>
</body>

</html>

3.9.4 子元素选择器

子元素选择器用于页面中后代选择器中一级子元素(亲儿子)，应用案例(child.html)如下所示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合标签之子元素选择器</title>

    <style>
        /*后代选择器*/
        .car li{
            color:#00ff00;
        }
      
       /*子元素选择器 第一个ol下的li元素*/
        .car > li {
            color:#ff0080;
        }


        /* ul > li{
            color: #00ff00;
            font-size: 18px;
            font-family: ‘Courier New‘, Courier, monospace;
        } */

        /*后代选择器*/
        .item li{
            color: #00ff00;
            font-size: 18px;
            font-family: ‘Courier New‘, Courier, monospace;
        }
        /*子元素选择器 ol下的第一个li元素*/
        .item > li{
            color:#ff0080;
            font-size: 18px;
            font-family: ‘Courier New‘, Courier, monospace;
        }
       
    </style>
</head>

<body>
    <h1>汽车排行榜</h1>
    <ol class="car">
        <li>
            富豪级豪华车

            <ol>
                <li>劳斯莱斯幻影</li>
                <li>宾利慕尚</li>
                <li>迈巴赫62S</li>
            </ol>
        </li>

        <li>
                行政级豪华车
    
                <ol>
                    <li>奔驰S600L</li>
                    <li>宝马760LI</li>
                    <li>奥迪A8L</li>
                </ol>
            </li>
       
       
    </ol>

    <ul class="item">
        <li> 一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>

    <ul class="item">
        <li> 一级菜单
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</body>

</html>

复合选择器的综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器综合案例</title>

    <style>
        /* 链接登录的颜色改为红色,著导航栏的链接登录改为蓝色 后代选择器 */

        .site-right a {
            color: #ff0000;
        }

        .nav a {
            color: #0000ff;
        }

        /*将主导航栏和测导航栏里面的文字改为14像素,并且是微软雅黑  并集选择器*/

        .nav,
        .site-nav {
            font-size: 14px;
            font-family: "Microsoft YaHei";
        }

        /*主导航栏的一级菜单的链接文字颜色变为绿色 子元素选择器*/

        .nav > ul > li > a {
            color: #00ff40;
        }
    </style>
</head>

<body>
    <!-- 主导航栏-->
    <div class="nav">
        <ul>
            <li>
                <a href="#">公司首页</a>
            </li>
            <li>
                <a href="#">公司简介</a>
            </li>
            <li>
                <a href="#">产品介绍</a>
            </li>
            <li>
                <a href="#">联系我们</a>
                <ul>
                    <li>
                        <a href="mailto:18601767221@163.com">公司邮箱</a>
                        <a href="#">公司电话</a>
                    </li>
                </ul>
            </li>

        </ul>
    </div>
    <!--侧导航栏-->
    <div class="site-nav">
        <div class="site-left">左侧导航栏</div>
        <div class="site-right">
            <a href="#">登录</a>
        </div>
    </div>
</body>

</html>

3.9.5 属性选择器

属性选择器主要是用于选取页面元素指定的属性，例如超链接元素<a href="" title></a>,其中href,title就是其元素的属性，代码片段如下所示，用于设置带有title属性的字体颜色。

<style>
        /* 标签[属性] */
        a[title]{
            color:#ff0000;
        }
</style>
        
 <h3>四大门户网站</h3>
    <div class="nav">
        <a href="http://www.qq.com/" title="跳转到腾讯首页">腾讯</a>
        <a href="http://www.163.com/" title="跳转到网易首页">网易</a>
        <a href="">新浪</a>
        <a href="">搜狐</a>
    </div>

除此以外属性等于type-valueE[attribute=type-value]
属性值包含type_value并且在开始位置E[attribute^=type-value]，
属性值包含type_value并且在结束位置E[attribute$=type-value],
属性值包含E[attribute*=type-value]type_value
应用案例(attribute.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>

    <style>
        /* 标签[属性] */
        a[title]{
            color:#ff0000;
        }
        /* 属性值判断获取元素  设置文本框字体的颜色*/
        input[type=text]{
            color: #0080ff;
        }

        /*设置以样式名字为font开头的字体颜色 ^= 以..开头*/
        div[class^=font]{ 
            color: #0080ff;
        }

        /*设置以样式名字为font结尾的字体颜色*/
        div[class$=font]{
            color: #ff0000;
        }

        div[class*=attribute]{
            color: #ff8000;
        }


    </style>
</head>
<body>
    <!--选取标签带有某些属性的元素-->

    <h3>四大门户网站</h3>
    <div class="nav">
        <a href="http://www.qq.com/" title="跳转到腾讯首页">腾讯</a>
        <a href="http://www.163.com/" title="跳转到网易首页">网易</a>
        <a href="">新浪</a>
        <a href="">搜狐</a>
    </div>

    <div class="info">

        <input type="text" value="我是一个文本框">
        <input type="text" value="我是一个文本框">
        <input type="text" value="我是一个文本框">
        <input type="submit" value="我是一个提交按钮">
        <input type="submit" value="我是一个提交按钮">
        <input type="submit" value="我是一个提交按钮">
        <input type="reset" value="我是一个重置按钮">
        <input type="reset" value="我是一个重置按钮">
        <input type="reset" value="我是一个重置按钮">
    </div>

    <div class="font14">属性选择器的模糊匹配</div>
    <div class="font16">属性选择器的模糊匹配</div>
    <div class="font18">属性选择器的模糊匹配</div>
    <div class="font20">属性选择器的模糊匹配</div>
    <div class="font22">属性选择器的模糊匹配</div>
    <div class="font24">属性选择器的模糊匹配</div>
    <div class="font26">属性选择器的模糊匹配</div>
    <div class="font28">属性选择器的模糊匹配</div>

    <div class="30font">属性选择器的模糊匹配</div>
    <div class="32font">属性选择器的模糊匹配</div>

    <div class="attribute-selector">属性选择器的模糊匹配</div>
    <div class="selector-attribute">属性选择器的模糊匹配</div>
    <div class="custom-selector-attribute">属性选择器的模糊匹配</div>
   
</body>
</html>

3.9.6 伪元素选择器(CSS3)

伪元素选择器可以通过E::first letter来改变指定元素的第一个字符的样式，通过E::first line来改变指定元素的第一行内容的样式，通过E::selection来改变选中内容的样式，通过E::before在指定元素之前追加内容，通过E::after在指定元素之后追加内容。应用案例(pesudo.html)如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* 修改第一行第一个字符的字体颜色 */
      #desc p::first-letter{
            color: #0080ff;
            font-size: 30px;
        }

     #desc p::first-line{
        font-size: 18px;
     }

     /* 更改选中内容的样式,这里修改了字体颜色 */
     p::selection{
         color: #00ff00a9;
     }
     
     /*在div(id为append)内部的内容之前插入内容 */
     #append::before{
         content: "我";
     }
     
     /*在div(id为append)内部的内容之后插入内容 */
     #append::after{
         content: "你";
     }


        
    </style>
</head>
<body>
    <div id="desc">

       <p>Everyone is NO.;</p>
       
    </div>

    <div id="append">
        爱

    </div>

</body>
</html>

大前端应用开发与架构设计-使用CSS美化Web站点

标签：第十四微软总结 cal 4.4 外部像素 can doc

原文地址：https://www.cnblogs.com/ittimeline/p/9274564.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行