UI 软件 设计 页面布局（二）.

Presentation on theme: "UI 软件 设计 页面布局（二）."— Presentation transcript:

1 UI 软件 设计 页面布局（二）

2 目录 CSS基础 1 DIV基础 2 练习 3 小结 4 — * —

3 CSS是Cascading Style Sheets的英文缩写,即层叠样式表.
UI DESIGN CSS是用于布局与美化网页的. CSS是Cascading Style Sheets的英文缩写,即层叠样式表. CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀. CSS是大小写不敏感的,CSS与css是一样的. CSS是由W3C的CSS工作组产生和维护的. CSS基础 — * —

4 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
UI DESIGN CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector {declaration1; declaration2; ... declarationN } 下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。 CSS基础 — * —

5 应用CSS到网页中 UI DESIGN 1.链入外部样式表 <link href="mystyle.css" rel="stylesheet" type="text/css" media="all"> 2.内部样式表 内部样式表是把样式表放到页面的< head >区里，这些定义的样式就应用到页面中了，样式表是用< style >标记插入的 CSS基础 — * —

6 导入外部样式表是指在内部样式表的< style >里导入一个外部样式表，导入时用@import 4.内嵌样式
应用CSS到网页中 UI DESIGN 3.导入外部样式表 导入外部样式表是指在内部样式表的< style 4.内嵌样式 内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式 <p style="color: sienna;margin-left: 20px;"> CSS基础 — * —

7 CSS基本元素 UI DESIGN 颜色 字体 边框 边距 定位 CSS基础 — * —

8 DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。 DIV代码两种形式：
UI DESIGN DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。 DIV代码两种形式： <div id=“id名称”>内容</div> <div class=“class名称”>内容</div> DIV基础 — * —

9 练习 UI DESIGN 沟通知识概述 — * —

10 小结 UI DESIGN CSS DIV 小结 — * —

11 Thank You