CSS5

61IC中国电子在线

CCSv5入门教程 – CSSv5 Tutorials

CCSv5(Code Composer Studio v5)是TI公司的一个IDE环境，基本支持市面上所有TI的板子，CCSv5其实就是一个封装过得Eclipse，所以界面对我来说还是比较亲切的。

不知道为什么网上基本没有中文CCSv5资料，经过一系列摸索，总算成功新建并在板子上调试了第一个程序，整理出来，以馈后来者。

我这里以LM3S811板子为例, Demo用的是StellarisWare库。

1. 新建CCS Project （Create a new CSSProject） 61IC中国电子在线

61IC中国电子在线

2. 参数按下面调整（Set options as following） 61IC中国电子在线

61IC中国电子在线

3. 编写代码（Editing source code ）

1. #include "inc/hw_types.h"

2. #include "driverlib/debug.h"

3. #include "driverlib/sysctl.h"

4. #include "drivers/display96x16x1.h"

5.

6. #ifdef DEBUG

7. void

8. __error__(char *pcFilename, unsigned long ulLine)

9. {

10. }

11. #endif

12.

13. int main(void)

14. {

15. SysCtlClockSet(SYSCTL_SYSDIV_1 | SYSCTL_USE_OSC | SYSCTL_OSC_MAIN |

16. SYSCTL_XTAL_6MHZ);

17.

18. Display96x16x1Init(false);

19. Display96x16x1StringDraw(" Hello Embeded!", 0, 0);

HTML5+CSS3 分栏效果

在很多刊物、报纸、网页中，都会看到将文本内容分成几栏的效果。而columns属性就可以同时定义多栏的数目和每栏宽度等。

语法：

columns：宽度 栏目数

通过上述语法中，中文参数的含义，即可理解“宽度”代表着每栏的宽度。而“栏目数”代表着所要分隔的栏数。

1．column-width属性

该属性主要用来定义每栏的宽度。

语法：

column-width：[ auto]

其中，auto属性值取计算机值，而属性值由浮点数字和单位标识符组成的长度值。不可为负值。

2．column-span属性

该属性定义元素可以在栏目上定位显示。

语法：

column-span：1 | all

其中，“column-span：1;”表示只在本栏中显示。而“column-span：all;”表示横跨所有栏目并定位在栏目的Z轴之上。

3．column-rule属性

该属性定义每栏之间边框的宽度、样式和颜色。

语法：

column-rule：

祥子本来生活在农村，18岁时，不幸失去了父母和几亩薄田，便跑到北平城来赚钱谋生……

执行上述代码，在浏览器中可以看到所有文本将分成了4栏。 内容被分成四栏

使用 CSS 美化页面

本节介绍如何在 Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式。我们可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本，从而能更加灵活自如地控制页面的外观。

在本节中，你将使用层叠样式表 (CSS) 设置虚构餐馆 Cafe Townsend 主页上文本的格式。你将创建不同类型的 CSS 规则来设置正文文本的格式，还将设置该页左侧的链接文本的格式来创建导航条。

完成后的页面将如下图所示。

七、设置导航条文本的格式：

接下来，我们将使用 CSS 将样式应用到导航条的链接文本。

1. 若未打开 cafe_townsend.css 文件，则打开该文件，或单击其选项卡来显示该文件。

2. 定义一个新规则，方法是在该文件的 .bold 类样式后面键入以下代码：

复制代码

.navigation {

}

3. 这是一个空规则。 4. 保存 cafe_townsend.css 文件。

5. 打开 index.html 文件。

6. 在“CSS 样式”面板中，选中了“全部”模式，选择新的 .navigation 规则，然后单击面板右下角的“编辑样式”。

7. 在“CSS 规则定义”对话框中，执行下面的操作：

8. 在“字体”文本框中，输入 Verdana, sans-serif。 Font-family

9. 从“大小”弹出式菜单中选择 16，然后选择像素px。Font-size

10. 从“样式”弹出式菜单中选择“正常”。 Font-style

11. 从“粗细”弹出式菜单中选择“粗体”。 Font-weight

12. 在“颜色”文本框中，输入 #FFFFFF。 Color

13. 单击“确定”。

14. 接下来，我们将使用“CSS 样式”面板向 .navigation 规则添加更多属性。

15. 在“CSS 样式”面板中，确保选中了 .navigation 规则，然后单击“显示列表视图”。Ps: 列表视图可使“属性”窗格按字母顺序显示所有可用属性（与“设置属性”视图不同，“设置属性”视图只显示已设置的属性）。

《HTML5+CSS3+JavaScript》教学大纲

一、 课程的性质、目的与任务

《HTML5+CSS3+JavaScript》是专业中一门综合性很强的基础课程，主要内容包括三个模块，第一部分讲解HTML5中新添加的元素、重要的API的使用方法和应用技巧。第二部分讲述CSS3相关内容，包括选择器、盒样式、背景和动画的实现过程和方法。第三部分介绍JavaScript语言的内容，包括基础语法、函数、重要对象、DOM和事件的应用方式。笔者针对每个模块重要、实用的部分进行讲解，通过功能描述，实现代码，页面效果，源码分析等形式多方面展示各知识点的特性及功能，并将其与实际应用紧密联课程名称 HTML5+CSS3+JavaScript

课程编码 1123013 课程类型 专业课

课程性质 必修课 适用范围 电商、经济、管理、金融等专业

学分数 3 先修课程 计算机应用基础

学时数 72 实验/实践学时 18

课外学时 无 考核方式 考试

平时30% + 实验10% + 期末60%

制订单位 制订日期

执笔者 审核者 系，希望学生能够通过学习进一步深化对知识点的理解；同时，每个章节均提供了丰富的示例代码。

本课程的目的与任务是使学生通过本课程的学习，从HTML5新增元素使用的方法的入手，由浅入深学习页面开发的各种相关知识，学会页面开发的相关关键技术，能够掌握常见的页面内容的研发技能，同时通过实践学习页面开发三种语言的基本功能与应用，以梳理知识脉络和要点的方式，让学生掌握前端页面开发的相关思想。本课程除要求学生掌握页面开发的基础知识和理论，重点要求学生学会分析问题的思想和方法，为更深入地学习和今后的实践打下良好的基础。

二、教学目标与教学基本要求

1. 拥抱HTML5

了解构建HTML 5页面的环境搭建步骤，理解并掌握HTML 5页面的基本特征，能够使用样式美化HTML5页面。

2. HTML5中新增交互元素