HTML示例08---CSS3概述

最新推荐文章于 2024-08-13 14:09:09 发布

rs勿忘初心

最新推荐文章于 2024-08-13 14:09:09 发布

阅读量188

点赞数

文章标签： CSS 示例学习

本文链接：https://blog.csdn.net/sinat_33718563/article/details/87654181

版权

前端基本知识点专栏收录该内容

14 篇文章 1 订阅

订阅专栏

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.运行结果