HTML示例08---CSS3概述

ゝ一世哀愁。 2022-03-18 02:58 96阅读 0赞

CSS（Cascading Style Sheet，层叠样式表）是一种**网页控制技术**，采用CSS技术，可以有效地对页面布局、字体、颜色、背景和其它效果实现更加精准的控制。网页最初是用HTML标记页面文档及格式，例如标题标记<h1>、段落标记<p>等，但这些标记无法满足更多的文档样式需求。为了解决这个问题，CSS应运而生，1997年---CSS1、1998年5月发布CSS2、2004年CSS2.1、2010年CSS3。。。

与CSS以前的版本相比较，**CSS3的变化是革命性的**，而不是仅限于布局功能的修订和完善。尽管CSS3的一些特性还不能够被很多浏览器支持，或者说支持的还不够好，但是它依然让我我们看到了网页样式的发展方向和使命。

简单地说，CSS3通过几行代码就可以实现很多以前需要使用脚本才能实现的效果，这不仅简化了代码，而且还能加快页面载入速度。

其语法格式如下：

selector {property:value}

说明：selector---选择器。CSS可以通过某种选择器选中想要改变样式的标记。

property---CSS属性。

value---CSS属性值。

这里给出一个简单的CSS示例，实现了添加页面背景以及设置文字阴影来演示CSS的使用过程。示例效果如下图所示

1.代码

html文件，css\_demo.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS示例01</title>
        <link href="CSS/test.css" type="text/css" rel="stylesheet">
    </head>
    <body>
       <div class="mr-box">
           <div class="mr-shadow"><span>无可辨</span>"薄"</div>
           <div class="mr-shadow1">薄,<span>是仅13毫米，1.1kg才是有的意境</span></div>
       </div>
    </body>
    </html>

css文件，test.css

**注：**（1）在当前目录下新建文件夹CSS，然后在其下新建test.css文件

（2）代码中url(../images/pic03.png)换成自己的图片地址

.mr-box{                               /*设置页面的总体格式*/
        width: 421px;                      /*设置页面的大小*/
        height: 480px;
        margin: 0 auto;                    /*左右外边距自动居中*/
        background: no-repeat url(../images/pic03.png) #E0D4D4 47% 43%;   /*设置页面背景*/
        background-size: 220px 254px;      /*设置页面背景的尺寸*/
    }
    
    /*设置第一部分文字的样式*/
    .mr-shadow{
        margin-left: 100px;                /*设置文字的左边距*/
        color: #dc1844;                    /*设置文字颜色*/
        font: 900 64px/64px sans-serif;    /*设置文字的粗细、大小及字体*/
        /*设置文字的阴影，参数的含义分别是水平方向位移、垂直方向位移、阴影宽度及阴影颜色*/
        text-shadow: -1px 0 0 #0a0a0a, -4px 0 0 #6f3b7b, -6px 0 0 #080808, -8px 0 0 #121ff1;
    }
    
    .mr-shadow font{
        font-size: 30px;
    }
    
    /*设置第二部分文字样式*/
    .mr-shadow1{
        color: #6C0305;                    /*设置文字颜色*/
        margin-top: 284px;                 /*设置向上的外边距*/
        font: 100 44px/54px '黑体';
        text-shadow: 0 -1px 0 #ca3636,0 2px 0 #ea1414,2px -2px 1px #c3d259,-2px 2px 15px #674242;
    }
    
    .mr-shadow1 font{
        font-size: 30px;
    }

2.运行结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMzNzE4NTYz_size_16_color_FFFFFF_t_70]: /images/20220318/944b3666fc14470498f8a7e4d211471a.png