人机交互界面设计第五章_CSS3详解教材教学课件.pptVIP

人机交互界面设计 第五章 CSS3详解 目录 01 css3概述 02 css的配置方法 03 css的声明及选择器 04 css中的注释 05 css3基本属性 06 css3中的伪类和伪对象 07 css3中的动画 05-01 背景属性 05-03 列表属性 05-02 文本属性 05-04 其他常用显示属性 06-01 常用的css伪类 06-02 结构性伪类 06-03 伪对象 07-01 2d变形 07-03 3d变形 07-02 css3过渡 07-04 animation动画 01 css3概述 Css样式表优点 CSS(Cascading Style Sheets)，即层叠样式表。他用来设置网页中各种标签的样式，如设置文字大小，颜色，行高，背景等等。“层叠”是指当在 HTML文件中引用多个样式文件时，浏览器将依据层叠顺序及就近原则进行处理，以避免发生冲突。 更多的排版和页面布局控制。可以控制字号、行距、字间距、边距、缩进等。 样式和结构分离。文本格式和颜色可以独立于网页结构内容部分进行配置和存储。 方便修改。若需要更换某个模块的字体颜色，只需要修改css样式里面的文字颜色属性即可，有利于网页维护。 文档变得更小，提高加载速度。Css从文档分离出来后，html的体积会变得更小。 CSS3是CSS技术的升级版本CSS3语言开发是朝着模块化发展的。在css3语言中，增加了更多的新模块。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局、动效等 02 css的配置方法 嵌入样式： head style type=＂text/css＂ !— 选择器1{样式属性1:取值;样式属性2:取值;…} …… -- /style /head 内联样式： HTML 标签 style=样式属性:取值;样式属性:取值;… 不提倡，因为他不能更好的实现结构样式分离，特殊情况下可以使用，只适合该特定元素的特定属性 外部样式 将外部的独立的样式表文件引入到 HTML 文件中。 用法： head link rel=stylesheet type=text/css href=样式表文件的地址 /head 导入样式： 在 HTML 文件初始化时，会被全部导入到 HTML 文件内，作为文件的一部分 style type=”text/css” @import url(外部样式表文件地址); /stytle 03 css的声明及选择器 Css的声明 ss的声明指的是需要设置的css属性（例如颜色）及其值。 Css的声明指的是需要设置的css属性（例如颜色）及其值。它有一定的语法规则。不管是外部链接还是嵌入样式，导入式样式，声明css的方法都是一样的。语法结构如下： 选择符｛ 属性1:属性值; 属性2:属性值; … ｝ 03 css的声明及选择器 Css选择器 标签选择器 id 选择器 类选择器 分组选择器 包含选择器 通配符选择器 03 css的声明及选择器 标签选择器 我们直接给标签设置样式的类型就是标签选择器 例如： a{ color:#ff0000; font-size:16px; } 03 css的声明及选择器 类选择器 类选择器也叫class选择器，语法为: .类名{属性1:属性值;} 例如： Css部分： .class{ color:#ff0000; font-size:16px; } Html部分： a class=“red” href=”#” 点此链接2 /a 03 css的声明及选择器 通配符选择器 它由星号*来表示选择器的名称，可以定义所有的网页元素显示格式。通配符一般用于统一浏览器设置 例如： 意思是，将该页面的所有标签样式中的外边距、内边距重置为0，来统一浏览器样式 *{ margin:0; padding:0; } 03 css的声明及选择器 案例 请完成如上图的html及css样式 03 css的声明及选择器 优先级 当有多个选择器作用于同一个元素时，最终会使用哪一个选择器所设置的样式？ 优先级由高到低为：行内样式 id 选择器 类选择器 标签选择器。 若一个页面内有不同类型的css文件，css文件的优先级别为：行内样式表 内嵌样式表 链接样式表 导入样式表。 04 css中的注释 注释 为了帮助理解和后期维护，在css中应该有一定的注释即解释，这些注释是不会对css代码产生影响的。 如： /*-------注释内容--------*/ html注释和css注释可以混用吗？ 不行。 05 css3基本属性 ----背景属性 Css2的背景可以设置为纯色，图片，重复；