HTML示例08---CSS3概述

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

HTML示例08---CSS3概述相关推荐

08.CSS3选择器、边框、背景、按钮
CSS3概述 CSS3简介如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高 ...
erlang有前途吗_带有示例的Erlang概述
erlang有前途吗 Erlang is a functional programming language developed by Ericsson for use in telecom appl ...
CSS3概述、选择器、兼容性、样式
一.css3简介 1.什么是css3 CSS 用于控制网页的样式和布局 CSS3 是最新的 CSS 标准 CSS3是CSS2的升级版 2.css3的功能选择器盒模型背景和边框文字特效 2D/3 ...
css3 选择器_IT兄弟连 HTML5教程 CSS3揭秘 CSS3概述
对于Web开发者来说,CSS3不只是一门新奇的技术,更重要的是这些全新概念的Web应用给开发人员带来了无限的可能性,也极大地提高了开发效率.我们不必再依赖图片或者JavaScript去完成圆角.多背景 ...
to_sql用法示例_SQL Union概述，用法和示例
to_sql用法示例 This article will provide a deep dive into the SQL Union operator, describing its many us ...
《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息作者: (美)Brian P. Hogan 译者: 卢俊祥丛书名: 图灵程序设计丛书出版社:人民邮电出版社 ISBN:97871153634 ...
CSS3新特性（阴影、动画、渐变、变形、伪元素等） CSS3与页面布局学习总结——CSS3新特性（阴影、动画、渐变、变形、伪元素等）...
目录一.阴影 1.1.文字阴影 1.2.盒子阴影二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点三.伪元素 3.1.before 3.2.after 3.3.清除浮动四.圆角与边框 ...
《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
关于H5、CSS3新增的一些元素及属性
H5简介 HTML5是HTML最新的修订版本,具有新的元素,属性和行为. HTML5规范于2014年10月29日由万维网联盟正式宣布. 随着移动化的进程,HTML5终将成为主流. H5的新变化 H5文 ...
使用 HTML5 和 CSS3 创建现代 Web 站点
开始之前本教程假定您具有 HTML.CSS 和 JavaScript 的一些基本经验.假定您知道什么是 HTML 元素或标记.属性表示什么.HTML 标记的基本语法.Web 页面的常规结构等等.关于 ...

HTML示例08---CSS3概述

HTML示例08---CSS3概述相关推荐

最新文章

热门文章