CSS3基本概念码动未来教案篇

CSS3是万维网的核心语言之一，其主要功能是展示页面样式，也就是说，网页的外观、布局、美化效果都是由它来完成的。因此，想开发高质量的页面，学习CSS3是必不可少的。
CSS3是什么
CSS的全称是 Cascading Style Sheets，层叠样式表，3指的是版本，CSS3是CSS技术的升级版本。CSS语言是一种标记语言，负责展示页面样式，我们用CSS的属性加粗字体，这样CSS接管了网页样式的处理。
相对于其他开发类语言，开发CSS程序最为简单，它可以是一个单独的文本文件也可以直接嵌入到html文件当中。作为单独文件常以.css为扩展名，作为嵌入，写到style>标签当中即可。
CSS3能做什么
CSS的工作主要是把页面的结构和样式分离，专门负责样式展示。以前的页面HTML和CSS是没有区分的，都是HTML，这样的后果是有很多标签并没有任何语义，只是表示特殊的样式，同时标签为了规定样式的属性层出不穷，这就是内容和表现的杂糅。
在新式的页面中，HTML只表示结构和内容，样式部分交给CSS控制，做到了内容和表现分离。所以，CSS就是去专业负责设置页面样式的语言。
通过CSS属性，设置了div的字体。显然，以前杂糅在html中显示样式的标签被CSS属性所取代，CSS规定了页面展示的样式。
一个简单的CSS3示例
技能目标
通过本小节的学习，对CSS有个初步入门级了解，能够识别什么是CSS代码，简单掌握CSS开发流程，了解CSS语法格式。
语法格式
Key：value
格式说明
key指的是CSS属性，属性是CSS基本单位，也可以称为CSS关键字，规定处理哪方面的页面效果。value是属性对应的值，不同值对应不同效果。
案例演示
需求：设置页面中元素背景色为红色，根据上述功能，新建一个名称为h2_1_1.html在页面。
!DOCTYPE html>
html lang=“en”>
head>
meta charset=“UTF-8”>
style>
div{
background-color: red;
}
/style>
/head>
body>
div>Hello World/div>
/body>
/html>
案例实践
新建一个页面，开发div元素，在head中开发style>标签，在标签内开发CSS代码，把div元素的背景色设置为黄色。
扩展知识
当然，CSS能设置的样式远比当前我们介绍的要高级要复杂，需要我们一步一步了解。尤其是CSS3以来，又增加了大量新的特性，受到了广大前端开发者的热捧。
更多内容请添加微信：madongweikai，或扫描下方二维码添加