2018/09/29渡课学习

(一). 学习内容

1. CSS 基本原理介绍；
2. CSS 基本语法；
3. CSS 选择器；
4. CSS 属性介绍。

   ---

(二). 课程重点

1. 掌握 CSS 的解析原理；
2. 掌握 3 种不同方式 CSS 定义的规范；
3. 掌握 DOM 的基本结构；
4. 掌握 ID CLASS 属性 分组 继承 派生等选择方式。

---

(三). 作业安排

1. 使用 CSS 美化之前 HTML 构建的个人简介页面，包括表格边框，表格单元格背景，字体，输入框样式等，要求在外部 CSS 文件中定义样式，并尝试如何优化类选择器的定义。（不能实现的样式，参考样式手册查看后测试）
2. 使用 CSS 美化之前 HTML 构建的框架锚点文章页面，对于标题、文本内容等进行文本样式的美化。
3. 问题：
   a. CSS 的版本进化历史。
   b. CSS 有哪些选择器，其定义语法分别是什么？
   c. HTML 和 CSS 有什么关系，为什么会有 CSS 技术的出现。
   预习 CSS 样式一大章节，预习注意，大体的看，不能明白的跳过，但是一定要看过，脑子里有个大体的概念，这个章节没有概念的难度，所以要尽可能的看懂；
   学会使用 CSS 参考书： http://www.w3school.com.cn/cssref/index.asp
   将 W3School 的实例尽可能的都看过： http://www.w3school.com.cn/example/csse_examples.asp

(四). 作业完成情况

1. 使用 CSS 美化之前 HTML 构建的个人简介页面

代码展示

	<style type="text/css">
		table
		{
			border-color: red;
			font-size: 20px
		}
	    .box
	    {
	    	color: blue
	    }
	    .aow
	    {
	    	color: yellow
	    }
	</style>

---

截图展示

---

2. 使用 CSS 美化之前 HTML 构建的框架锚点文章页面，对于标题、文本内容等进行文本样式的美化。

代码展示

	<style type="text/css">
		body
		{
			color: yellow;
			font-size: 25px;
			font-style: italic;

		}
		a
		{
			text-decoration: none;
			color: black
		}
	</style>
		<style type="text/css">
		h1{
			color: red;
		}
		.poy
		{
			color: blue

		}
		.asd
		{
			color: green
		}
		.zsd
		{
			color: green;
			font-size: 20px;
			font-style: italic;
		}
		.asd
		{
			font-size: 20px;
			font-weight: bold;
		}
	</style>

---

### 截图展示

---

3.问题

a. CSS 的版本进化历史

CSS1作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。1996 年 12 月 17 日 CSS 1 (Revised) 　
CSS2作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。1999 年 1 月 11 日 CSS 2 　1998 年 5 月 12 日 CSS 2.1 2007 年 7 月19 日 　CSS 2 Mobile 2007 年 10 月 19 日 　CSS 2 TV 2003 年 5 月 14 日 　CSS 2Print 2006 年 10 月 13 日
CSS3 计划将 CSS 划分为更小的模块。
W3C CSS 规范和时间线 规范 草案/提议 推荐
　CSS 3 2001 年 5 月 23 日 　CSS 3 Namespace 2006 年 8 月 28 日 　CSS 3 User Interface 2004 年 5 月 11 日 　CSS 3 Selectors 2005 年12 月 15 日 　CSS 3 Fonts 2002 年 8 月 2 日 　CSS 3 Web Fonts 2002 年 8 月 2 日CSS 3 Colors 2003 年 5 月 14 日 　CSS 3 TV 2003 年 5 月 14 日 　CSS 3 Backgrounds and borders 2005 年 2 月 16 日 　CSS 3 Text 2007 年 3 月 6 日 　CSS 3 Lists 2002 年 11 月 7 日 　CSS 3 Line 2002 年 5 月 15 日 　CSS 3 Box model 2007 年 8 月 9 日 　CSS 3 Multi column 2007 年 6 月 6 日 　CSS 3 Ruby 2003 年 5 月 14 日 　CSS 3 Border 2005 年 3 月 16 日 　CSS 3 Speech 2004 年 12 月 16 日 　CSS 3 Paged Media (PM) 2006 年 10 月 10 日 　CSS 3 Generated PM 2007 年 5 月 4 日 　CSS 3 Print 2006 年 10 月 13 日 　CSS 3 Values 2006 年 9 月 19 日 　CSS 3 Cascade 2005 年 12 月 15 日 　CSS 3 Template Layout 2009 年 4 月 2 日 　CSS 3 Media Queries 2009 年 9 月 15 日

---

b. CSS 有哪些选择器，其定义语法分别是什么

1 标签名选择器 div { color：Red;} 即页面中的各个标签名的css样式
2.类选择器 .divClass {color:Red;} 即定义的每个标签的class 中的css样式
3.ID选择器 #myDiv {color:Red;} 即页面中的标签的id
4.后代选择器（类选择器的后代选择器） .divClass span { color:Red;} 即多个选择器以逗号的格式分隔 命名找到准确的标签
5.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

---

c. 1. HTML 和 CSS 有什么关系

css 层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）等文件样式的计算机语言,达到布局和添加样式的作用。

---

c. 2. 为什么会有 CSS 技术的出现

为了让html做好自己的本职工作，单独的把css分离出来，实现解决耦合，复用率也高一点。