【CSS3学习】 CSS3 简述

Micah2017年08月25日 17:45 分类 : Web前端  > CSS
阅读: 1960

分享到微信朋友圈

什么是CSS 3? CSS3是CSS技术的升级版本,它是由Web界的巨头联合组成的“CSS Working Group”的组织共同协商策划的,CSS3语言开发是朝着模块化发展的

自从2010年开始,HTML 5CSS3 就一直是互联网技术中最受关注的两个话题。从前端技术的角度把互联网的发展分为:第一阶段、以Web 1.0的内容为主,前端主流是HTMLCSS;第二阶段、Web 2.0的Ajax应用,热门技术是JavaScript/DOM/异步数据请求;第三阶段、就是这个HTML5和CSS3 的时代,这又是一个令人兴奋的崭新时代。


【CSS3学习】 CSS3 简述

CSS 3是什么


什么是CSS 3? CSS3是CSS技术的升级版本,它是由Web界的巨头联合组成的“CSS Working Group”的组织共同协商策划的,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。


CSS 3 的历史


1、CSS 1

1996年12月 ,CSS 1正式推出。这个版本中已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。


2、CSS 2

1998年5月,CSS 2 正式推出。这个版本增加样式表结构。


3、CSS 2.1

2004年2月,CSS 2.1正式推出。它在只是在CSS 2 的基础上面做了一点改动,删除了一些text-shadow 等不被浏览器支持的属性。


4、CSS 3

现在大家使用的CSS 基本上是 CSS 2,在这之后的10年基本没有发生什么变化,直到2010年 CSS 3 问世。


CSS 3 可以做些什么


在CSS 3 中,并没有采用总体结构,而是采用了分工协作的模块化结构。


一些最重要CSS3模块如下:

l- 选择器

l- 盒模型

l- 背景和边框

l- 文字特效

l- 2D/3D转换

l- 动画

l- 多列布局

l- 用户界面


为什么需要分成这么多模块来进行管理呢?

这是为了避免产生浏览器对于模块支持不完全的情况。如果是一个总体结构,这样会造成会支持不完全,把总体结构分成几个模块,各个浏览器可以选择杜宇哪些模块进行支持、哪些不支持,以减少支持不完全的可能性。


一个简单的CCS 3 示例

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>dd</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="author" content="">
<link media="all" href="css/css3-xzq.css" type="text/css" rel="stylesheet">
</head>
<style type="text/css">
.image-border{ margin: 40px}
div[class*=div1]{color: #0000C0}
div[class^=div1]{border: 1px #e05a5a solid}
div[class$=div1]{font-size: 28px}
</style>
<body>
<div class="image-border">
<div id="div1" class="div1">样式数据1</div>
<div id="div2" class="div1">样式数据2</div>
<div id="div3" class="div2">样式数据3</div>
<div id="div4" class="div1-1">样式数据4</div>
<div id="div5" class="div1-2">样式数据5</div>
<div id="div6" class="eeeeediv1-2">样式数据6</div>
<p class="div1">样式数据3</p>
</div>
</body>
</html>
 

【CSS3学习】 CSS3 简述

这个示例主要是 简单介绍下CSS 对于元素属性选择器的应用,主要是下面:


[att=val] att代表 属性, val 代表属性里面的值

[att*=val] * 代表只要att属性里面属性值包含val的所有元素都可以控制

[att^=val] ^ 代表只要att属性里面属性值以val开头的所有元素都可以控制

[att$=val] $ 代表只要att属性里面属性值以val结尾的所有元素都可以控制


元素[att = val] 在属性选择器前可以加元素进行范围限定


下面章节将介绍:【CSS3学习】 选择器 (属性选择器)

Micah
IT技术整理

精彩评论:0

还可以输入250个字 评论

评论成功

评论失败

 

微信公众号

微博