PowerPoint 演示文稿

Size: px

Start display at page:

Download "PowerPoint 演示文稿"

燥凌终
6 years ago
Views:

1 Lecture 03 DIV + CSS United, Clear, and Simple Web Arts #3 - CSS By Yanju Chen

2 Document Type 文档类型 When creating an HTLM Document in Dreamweaver, we will find the following statement added automatically: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> It tells the browsers the type of the document in order to avoid some compatible problems. 这句话标明本文档是过渡类型, 另外还有框架和严格类型, 目前一般都采用过渡类型, 因为浏览器对 XHTML 的解析比较宽松, 允许使用 HTML4.01 中的标签, 但必须符合 XHTML 的语法

3 Encoding 语言编码 And another statement is as follow: <meta http-equiv="content-type" content="text/html; charset=gb2312" /> It tells the browsers what language of encoding we use to write the webpage. gb2312 encoding means the document is encoded in Simplified-Chinese, and usually the general encoding in the world is UTF-8. Make sure the encoding of your css file corresponds.

4 What is CSS? Its full name is Cascading Style Sheet ( 层叠样式表 ). As mentioned, it set up the rules of properties for the elements in the webpage. ( 规定了网页元素的属性 ) It is organized and easy to read and maintain compared to the way HTML Language adopts. ( 相对于 HTML 的控制, 它更加有序和容易维护 ) And at the same time, it offers more properties and even methods of the HTML elements. ( 甚至能控制 HTML 自己很难控制的东西, 例如定义 HTML 元素的某些方法 )

5 How to include CSS? There are already 3 ways you can choose: 1. Inline Styles( 行内样式 ): inside the HTML document, style information on a single element, specified using the "style" attribute. <p style="font-size:18px;"> 内部样式 </p> <table style= font-face: 微软雅黑 ;"> 内部样式 </table> Etc. It only works on the specific element. ( 只对标签内元素有效 )

6 How to include CSS? There are already 3 ways you can choose: 2. Embedded style( 内部样式 ): blocks of CSS information inside the HTML itself <style> h2 { color:#f00;} a { color:green; } </style> It is like a tag, but it should be put in between <head></head>. And it works on all elements of the page. ( 放在头部, 整页有效 )

7 How to include CSS? There are already 3 ways you can choose: 3. External style sheets( 外部样式 ): a separate CSS file referenced from the document <link href="layout.css" rel="stylesheet" type="text/css" /> The CSS is in another file, and we include it using the statement above, kind of like the way we do in C and C++. ( 放在单独文件, 需要时引入 ) This is the usual way we adopt for its convenience to be reused. ( 可以用于整个网站每个页面, 容易维护 )

8 Let s take the 3 rd way as an example, which is also the formal way we use when creating a webpage. First of all, a statement should be included: <link href="layout.css" rel="stylesheet" type="text/css" /> And let s create a file called layout.css using any editor you prefer.

9 And let s talk about selector. ( 选择器,css 和 js 的能力来源 ) According the syntax of selector, we can select nearly every elements and contents of the page and the combination of them. ( 通过选择器机制, 几乎所有的东西都可以被选中并修改 ) For example, the HTML elements, the contents, the nth children of a container, the first letter of a paragraph, the elements with specific id or class, the properties of a link when clicked, the neighbors of an element, and the combination of them etc. It is strong. ( 简而言之, 很强 )

10 So how to use selector? Before that, let s see some basic syntax. Usually, the CSS file is going like this: [Selector]{ } Properties1: value1 [value2] [value3] ; Properties2: value1 [value2] ; /*You comments here.*/ Combine those blocks, and you get a CSS file.

11 About the [Selector], to choose different elements, we have different ways. To choose elements with a specific class, we use.classname{} To choose elements with a specific id, we use #id{} To choose a specific type of tag, we use tagname{} To choose every child of a selector, we use [father].child{} To choose the first child of a selector, we use [father]>[child] To choose the Pseudo Class ( 伪类 )of a selector, we use [selector]:[status] To choose the next specific elements, we use [selector]+[selector] To choose the properties of some selector by using a space, we use [selector] [property] To combine some of them, we use a comma, e.g. #id1 #id2,#id3,#tagname,.classname{}

12 So what is the Pseudo Classes? 伪类 (Pseudo classes) 是选择符的螺栓, 用来指定一个或者与其相关的选择符的状态它们的形式是 selector:pseudo class { property: value; }, 简单地用一个半角英文冒号 (:) 来隔开选择符和伪类简单理解, 就是绑定了的事件 Due to the capability of the browsers, only some of them are well supported.

13 Some Pseudo Classes Well Supported: 属性描述 CSS :active 向被激活的元素添加样式 1 :focus 向拥有键盘输入焦点的元素添加样式 2 :hover 当鼠标悬浮在元素上方时, 向元素添加样式 1 :link 向未被访问的链接添加样式 1 :visited 向已被访问的链接添加样式 1 :first-child 向元素的第一个子元素添加样式 2 :lang 向带有指定 lang 属性的元素添加样式 2

14 And next let s talk about the layout, which is the most important part of the CSS usage. CSS 盒模型 Concepts: Content( 内容 ) Padding( 填充 ) Border( 边框 ) Margin( 边界 ) 每个被赋予 block 属性的元素都满足此模型

15 About the positioning of the elements: Block Elements 块级元素 div, h1, p 显示为一块内容 Inline Elements 行内元素 strong, span,a 显示为一行简单地, 就是有没有换行 By setting the property display: block/none/inline/etc., you can transform them.

16 There are 3 positioning methods in CSS: 1. The Normal Positioning ( 普通流 ): The default one, usually we don t use this. 2. Relative Positioning ( 相对定位 ): The reference is the original place it ought to be. 3. Absolute Positioning ( 绝对定位 ): Usually the nearest positioned parent is the reference. Use position: absolute/relative to specify the positioning

17 Relative Positioning Absolute Positioning

18 And then a simple concept of Float ( 浮动 ) It works like liquid.

19 And about the position details control( 细节定位控制 ): Usually we use: margin: value1 [value2] [value3] [value4] padding: value1 [value2] [value3] [value4]

20 And finally let s introduce some others. background-color: url([path]) background-repeat:repeat/repeat-x/repeat-y/no-repeat/inherit background-position:center/top/buttom/right/left/[self-defined] etc.

21 An Example 例子分析 The sysumstc Web also uses CSS+DIV.

22 Conclusions 总结 AND Thank you! & have a nice day

05 01 accordion UI containers 03 Accordion accordion UI accordion 54

jquery UI plugin Accordion 05 01 accordion UI containers 03 Accordion accordion UI accordion 54 05 jquery UI plugin 3-1