CSS3的属性PPT
合集下载
最新CSS3常用属性大全
CSS3 动画属性( Animation )@keyframes //规定动画。
animation // 所有动画属性的简写属性，除了animation-play-state 属性。
animation-name // 规定@keyframes 动画的名称。
animation-duration //规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function //规定动画的速度曲线。
animation-delay //规定动画何时开始。
animation-iteration-count //规定动画被播放的次数。
animation-direction //规定动画是否在下一周期逆向地播放。
animation-play-state //规定动画是否正在运行或暂停。
animation-fill-mode //规定对象动画时间之外的状态。
CSS 背景属性( Background )background //在一个声明中设置所有的背景属性。
background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。
background-color //设置元素的背景颜色。
background-image //设置元素的背景图像。
background-position //设置背景图像的开始位置。
background-repeat //设置是否及如何重复背景图像。
background-clip //规定背景的绘制区域。
background-origin //规定背景图片的定位区域。
background-size //规定背景图片的尺寸。
CSS 边框属性（ Border 和 Outline ）border //在一个声明中设置所有的边框属性。
border-bottom //在一个声明中设置所有的下边框属性。
border-bottom-color//设置下边框的颜色。
网页设计与制作教程——Web前端开发(第6版)课件第5章 CSS3的属性5.8
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一章
5.8 CSS属性的应用
【例5-21】设置图像边框，本例文件5-20.html的显示效果，如图5-25所示。
5.8 CSS属性的应用
3. 图像的不透明度 语法：opacity：value | inherit; 【例5-22】设置图像的透明度，本例文件5-22.html的显示效果，如图5-26所示。
5.8 CSS属性的应用
2. 图文链接 对链接的修饰，还可以利用背景图片将文字链接进一步的美化。 【例5-24】图文链接，本例文件5-24.html，鼠标未悬停时文字链接的效果，如图528（a）所示；鼠标悬停在文字链接上时的效果，如图5-28（b）所示。
5.8 CSS属性的应用
5.8.3 创建导航菜单 1. 纵向导航菜单 【例5-25】制作纵向列表模式的导航菜单，本例文件5-25.html，鼠标未悬停在 菜单项上时的效果，如图5-29（a）所示；鼠标悬停在菜单项上时的效果，如图 5-29（b）所示。
padding:5px 5px 5px 0.5em; text-decoration:none; /*链接无修饰*/ border-left:12px solid #711515; /*左边的粗红边框*/ border-right:1px solid #711515; /*右侧阴影*/ } #nav li a:link, #nav li a:visited{ /*未访问过的链接、访问过的链接的样式*/ background-color:#c11136; /*改变背景色*/ color:#fff; /*改变文字颜色*/ } #nav li a:hover{ /*鼠标悬停于菜单项上时的样式*/ background-color:#990020; /*改变背景色*/ color:#ff0; /*改变文字颜色*/ } 菜单经过进一步美化，显示效果如图5-29所示。
第18讲 CSS3
8.5.8 “定位”样式设置 定位” 定位
控制网页元素的位置， 控制网页元素的位置，主要针对层的位置进 行控制。 类型”选项： 行控制。“类型”选项： • 静态：默认值。所有取值为 静态：默认值。所有取值为static的对象都按照 的对象都按照 你所编写的html标签的顺序依次呈现。 标签的顺序依次呈现。 你所编写的 标签的顺序依次呈现 • 绝对：以页面左上角为坐标原点定位层； 绝对：以页面左上角为坐标原点定位层； • 固定：以页面左上角为坐标原点，当页面滚动 固定：以页面左上角为坐标原点， 层在此位置保持固定。 时，层在此位置保持固定。 • 相对：以前一对象在文档中的位置为坐标原点。 相对：以前一对象在文档中的位置为坐标原点。
8.5.5 “方框”样式设置 方框” 方框
用于控制网页中块元素的大小， 用于控制网页中块元素的大小，以及与周围对象之间 的边距、填充、对齐等属性。 的边距、填充、对齐等属性。 块元素可以是文本、图像、层等。 块元素可以是文本、图像、层等。
边界
例：为图像加虚线边框。 为图像加虚线边框。 设置“填充” 设置“填充”为10px， ， 边界” “边界”为20px
CSS的属性 8.5 CSS的属性
类型 背景 区块 方框 边框 列表 定位 扩展
8.5.2 “类型”样式设置 类型” 类型
主要设置文本属性。 主要设置文本属性。 类型”定义字体和行间距（行高）。 例：用“类型”定义字体和行间距（行高）。
8.5.3 “背景”样式设置 背景” 背景
可设置任何对象的背景颜色或背景图像等属 性。 调整背景图像的重复次数， 例：调整背景图像的重复次数，固定背景图 像的位置。（对页面背景，修改body标记） 像的位置。（对页面背景，修改 标记） 。（对页面背景 标记 设置鼠标移近时的背景色。（ 。（设置 例：设置鼠标移近时的背景色。（设置 a:hover的属性） 的属性） 的属性
第12章 有关CSS的PPT
4.4.2 显示属性 4.5 列表属性 list-style-type 属性可以用来设置项目符号和编号的样式，取 值如表 6-1 所示。
表 6-1
样式 disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none
</HEAD> <BODY> <H1 class="title">惜春</H1> <DIV class="content"> <P>黑发不知勤学早，白首方悔读书迟。</P> <P class="author">——颜真卿</P> </DIV> <DIV class="content"> <P>莫等闲白了少年头，空悲切。</P> <P class="author">——岳飞</P> </DIV> </BODY> </HTML>
4.3.1 页面元素周围的空白 以下示例可以显示出这三种空白的区别，效果如图 6-5 所示 （A 表示边界、B 表示边框、C 表示填充）。
A
Bห้องสมุดไป่ตู้
C
图 6-5 元素周围空白的区别
<HTML> <HEAD><TITLE>边界、边框和填充的区别</TITLE> <STYLE> <!-P{margin:0.25in; border:0.25in solid black; padding:0.25in; background:gray} --> </STYLE> </HEAD> <BODY> <P>生命中的成功之道是，一个人应妥善准备，以待时机的到来。 </P> <P> 不一则不专，不专则不能。</P> </BODY> </HTML>
css3属性
transform：3D变形
➢transform-origin 允许你改变被转换元素的位置。2D 转换元 素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
➢perspective(n) 为 3D 转换元素定义透视视图。
➢transform-style 规定被嵌套元素如何在 3D 空间中显示。
transform：3D变形
➢rotate3d(x,y,z,angle) 定义 3D 旋转。
• rotateX(angle) 定义沿着 X 轴的 3D 旋转。 • rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 • rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
➢scale3d(x,y,z) 定义 3D 缩放转换。
线性渐变
线性渐变
线性渐变
线性渐变
径向渐变(放射渐变)
➢属性：radial-gradient()(形状 发散方向，起始颜色，终止颜色)
• 形状:ellipse（椭圆）/circle（圆形） • 发散方向：属性值可以为left、right、top、bottom、center（可组合
使用） • 大小(半径)：属性值可用像素或关键字表示 • closest-side:圆心到距离最近的边 • farthest-side:圆心到距离最远的边 • closest-corner：圆心到距离最近的角 • farthest-corner：圆心到距离最远的角 • 起始颜色...... 终止颜色...... • 重复的径向渐变：repeating-radial-gradinet()
• 围绕X轴倾斜，保持高度不变，围绕Y轴，保持宽度不变
transform：2D变形
transform：2D变形
网页设计与制作教程——Web前端开发(第6版)课件第5章 CSS3的属性5.9
பைடு நூலகம்
习题5
6. 制作如图5-43所示的导航栏。
习题5
7. 使用CSS实现社区网广告板块的设计，如图5-44所示。
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一章
习题5
1. 制作隔行换色表格，如图5-38所示。
习题5
2. 使用CSS修饰文本域，显示效果如图5-39所示。
习题5
3. 使用CSS修饰常用的表单元素，制作用户调查页面，显示效果如图5-40所示。
习题5
4. 制作网页中不同区域的链接效果，显示的效果如图5-41所示。
习题5
5. 制作如图5-42所示的导航栏。
5.9 实训——制作社区网页面
5.9.1 制作通知公告板块 1. 页面布局规划 页面布局的首要任务是弄清网页的布局方式，分析版式结构，待整体页面搭建有明 确规划后，再根据规划切图。通知公告板块页面的效果如图5-34所示，页面布局示意 图如图5-35所示。
5.9 实训——制作社区网页面
5.9.2 制作导航栏 1. 页面布局规划 导航栏页面的效果如图5-36所示，页面布局示意图如图5-37所示。
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第5章 CSS3的属性
5.9 实训——制作社区网页面
本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样 式。
目录
第5章 CSS3的属性 5.1 CSS背景属性 5.2 CSS字体属性 5.3 CSS文本属性 5.4 CSS尺寸属性 5.5 CSS列表属性 5.6 CSS表格属性 5.7 CSS内容属性 5.8 CSS属性的应用 5.9 实训——制作社区网页面 习题5
习题5
6. 制作如图5-43所示的导航栏。
习题5
7. 使用CSS实现社区网广告板块的设计，如图5-44所示。
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一章
习题5
1. 制作隔行换色表格，如图5-38所示。
习题5
2. 使用CSS修饰文本域，显示效果如图5-39所示。
习题5
3. 使用CSS修饰常用的表单元素，制作用户调查页面，显示效果如图5-40所示。
习题5
4. 制作网页中不同区域的链接效果，显示的效果如图5-41所示。
习题5
5. 制作如图5-42所示的导航栏。
5.9 实训——制作社区网页面
5.9.1 制作通知公告板块 1. 页面布局规划 页面布局的首要任务是弄清网页的布局方式，分析版式结构，待整体页面搭建有明 确规划后，再根据规划切图。通知公告板块页面的效果如图5-34所示，页面布局示意 图如图5-35所示。
5.9 实训——制作社区网页面
5.9.2 制作导航栏 1. 页面布局规划 导航栏页面的效果如图5-36所示，页面布局示意图如图5-37所示。
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第5章 CSS3的属性
5.9 实训——制作社区网页面
本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样 式。
目录
第5章 CSS3的属性 5.1 CSS背景属性 5.2 CSS字体属性 5.3 CSS文本属性 5.4 CSS尺寸属性 5.5 CSS列表属性 5.6 CSS表格属性 5.7 CSS内容属性 5.8 CSS属性的应用 5.9 实训——制作社区网页面 习题5
《网页设计》课件——第四章 盒子模型
边框成脊形
dashed 虚线
inset
使整个方框凹陷，即在外框内嵌入一个立体边框
solid
实线
outset 使整个方框凸起，即在外框内嵌外一个立体边框
double 双实线
➢ border-style属性为综合属性设置四边样式，必须按上右下左的顺时针顺序，省略时同样采用值复制的 原则，即1个值为4边，2个值为上下/左右，3个值为上/左右/下。
在复合属性中，边框属性border能同时设置4种边框。若果只需要给出一组边框的宽度、样式与颜色，可以通 过border-top、border-right、border-bottom、border-left分别设置。
举例 演示
【实例6-2】border边框属性的设置。
2 边距属性
边距属性分为：内边距padding和外边距marign两种。
比，使用百分比时，内边距的宽度值随着父元素宽度width的变化而变化而变化，与height无关。 ➢ padding也遵循值复制的原则，与border属性类似。 ➢ 当只对某个方向的内边距进行设置时，可以通过padding-top（上内边距）、padding-right
（右内边距）、padding-bottom（下内边距）、padding-left（左内边距）分别设置。
表示4个边框的宽度都为3像素。 表示上下边框的宽度都为3像素，左右边框的宽度都为6像素。 表示上边框的宽度都为3像素，左右边框的宽度都为6像素 下边框的宽度都为9像素。
也可以按照border-top-width:宽度值、border-right-width:宽度值、border-bottomwidth:宽度值、border-left-width:宽度值逐个定义。
CSS定位和布局属性 ppt课件
<style type="text/css"> div{
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center; } #div1{ position:static; /*静态定位*/ background:#ba9578; color:#FFF; } #div2 left:30px;
HTML5+CSS3网页设计与制作案例教程
CSS3部分
<body> <div id="div1"><p>div1</p></div> <div id="div2">
CSS3部分
【例13-1】正常流向（13-1.html）示例
HTML5+CSS3网页设计与制作案例教程
CSS3部分
部分代码如下：
div{
} #div1{ } #div2{ } #div3{ }
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center;
HTML5+CSS3网页设计与制作案例教程
CSS3部分
13.1 CSS定位属性
CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属 性进行定位。
HTML5+CSS3网页设计与制作案例教程
CSS3部分
13.1.1 正常流向
正常流向是预先设定的定位方式。默认情况下网页布局就是按文档流的 正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所 谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center; } #div1{ position:static; /*静态定位*/ background:#ba9578; color:#FFF; } #div2 left:30px;
HTML5+CSS3网页设计与制作案例教程
CSS3部分
<body> <div id="div1"><p>div1</p></div> <div id="div2">
CSS3部分
【例13-1】正常流向（13-1.html）示例
HTML5+CSS3网页设计与制作案例教程
CSS3部分
部分代码如下：
div{
} #div1{ } #div2{ } #div3{ }
width:200px; height:80px; margin:10px; padding:10px; border:2px dashed #000; text-align:center;
HTML5+CSS3网页设计与制作案例教程
CSS3部分
13.1 CSS定位属性
CSS的定位方式可以帮助设计者使文档更容易阅读，CSS主要通过position属 性进行定位。
HTML5+CSS3网页设计与制作案例教程
CSS3部分
13.1.1 正常流向
正常流向是预先设定的定位方式。默认情况下网页布局就是按文档流的 正常流向，即按HTML的结构顺序。由上而下、由左至右这样的走向就是所 谓的正常流向，浏览器也是依据这样的走向来解译我们的编码。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
局，颜色等等），各种 CSS 特效，甚至还支持 CSS 动画、元素的变换。这些 CSS 新特性是非常强大和 完善的，只需要加入几行简单的 CSS 代码便可以实 现出一系列令人眼前一亮的效果，这比用 JavaScript 去模拟这样的效果要好得多，不仅降低了复杂度， 变得易维护，在性能上也突飞猛进了。
知识点
3、CSS3 字体：以前CSS3的版本，网页设计师只能使用用户计算机上已经安 装的字体。在CSS3中，网页设计师可以使用任何字体。只需将字体文件包含 在网站中，它会自动下载给需要的用户。所选的字体是在 CSS3 的@font-face 规则中进行定义。 在新的 @font-face 规则中，必须先定义字体的名称，然后指向该字体文件。 如： <style> @font-face {font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>
或给边框添加阴影。
• • •
border-radius属性：被用于创建圆角。 box-shadow属性：用来添加阴影。 border-image属性：指定一个图片作为边框
如:border-radius:25px;
如：box-shadow: 10px 10px 5px #888888; 如：border-image:url(border.png) 30 30 round;
知识点
4、CSS3 用户界面：在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框
尺寸和外边框。
• • •
{
resize属性：指定一个元素是否应该由用户去调整大小。 box-sizing 属性：允许以确切的方式定义适应某个区域的具体内容。 outline-offset 属性：对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
谢谢观看
具体操作
打开示例文件
Hale Waihona Puke 添加CSS3属性测试效果
总结拓展
随着 Web2.0 技术的流行，之前的 CSS2 标准和相关 技术似乎已经满足不了日益增长的开发需求。人们 需要实现更加美观、用户体验更好的界面。为了满 足现有的对 于 Web UI 的开发需求，CSS3提供了一
系列强大的功能，如许多新的 CSS 属性（文字，布
背景图像大小由图像的实际大小决定。 CSS3中可以指定
背景图片，重新在不同的环境中指定背景图片的大小。
•
background-Origin属性：指定了背景图像的位置区域，
content-box, padding-box,和 border-box区域内可以放置
背景图像。
知识点
2、CSS3 边框（Borders）:在CSS3中可以创建圆角边框，
如：div border:2px solid black;
outline:2px solid red;
outline-offset:15px; } 规定边框边缘之外 15 像素处的轮廓。
知识点
5、CSS3 动画：在CSS3中，可以创建动画，它可以取代许多网页动画图像，如 Flash动画、JAVAScripts。 在CSS3中，使用@keyframes规则创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 如：@keyframes myfirst {from {background: red;} to {background: yellow;} } 当在@keyframe创建动画时，把它绑定到一个选择器，否则动画不会有任何效果。 如：div { animation: myfirst 5s; } 把 “myfirst” 动画捆绑到 div 元素，时长：5 秒。
02 CSS3
02 css3的属性
目 录
• • • •
任务介绍
知识点 具体操作 总结拓展
任务介绍
通过操作演示，让同学们掌握CSS3中的主要属性。
添加阴影效果的边框
知识点
1、CSS3背景：CSS3中包含了几个新的背景属性，提供更大 背景元素控制：
•
background-size 属性：指定背景图像的大小。CSS3以前，
知识点
3、CSS3 字体：以前CSS3的版本，网页设计师只能使用用户计算机上已经安 装的字体。在CSS3中，网页设计师可以使用任何字体。只需将字体文件包含 在网站中，它会自动下载给需要的用户。所选的字体是在 CSS3 的@font-face 规则中进行定义。 在新的 @font-face 规则中，必须先定义字体的名称，然后指向该字体文件。 如： <style> @font-face {font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>
或给边框添加阴影。
• • •
border-radius属性：被用于创建圆角。 box-shadow属性：用来添加阴影。 border-image属性：指定一个图片作为边框
如:border-radius:25px;
如：box-shadow: 10px 10px 5px #888888; 如：border-image:url(border.png) 30 30 round;
知识点
4、CSS3 用户界面：在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框
尺寸和外边框。
• • •
{
resize属性：指定一个元素是否应该由用户去调整大小。 box-sizing 属性：允许以确切的方式定义适应某个区域的具体内容。 outline-offset 属性：对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
谢谢观看
具体操作
打开示例文件
Hale Waihona Puke 添加CSS3属性测试效果
总结拓展
随着 Web2.0 技术的流行，之前的 CSS2 标准和相关 技术似乎已经满足不了日益增长的开发需求。人们 需要实现更加美观、用户体验更好的界面。为了满 足现有的对 于 Web UI 的开发需求，CSS3提供了一
系列强大的功能，如许多新的 CSS 属性（文字，布
背景图像大小由图像的实际大小决定。 CSS3中可以指定
背景图片，重新在不同的环境中指定背景图片的大小。
•
background-Origin属性：指定了背景图像的位置区域，
content-box, padding-box,和 border-box区域内可以放置
背景图像。
知识点
2、CSS3 边框（Borders）:在CSS3中可以创建圆角边框，
如：div border:2px solid black;
outline:2px solid red;
outline-offset:15px; } 规定边框边缘之外 15 像素处的轮廓。
知识点
5、CSS3 动画：在CSS3中，可以创建动画，它可以取代许多网页动画图像，如 Flash动画、JAVAScripts。 在CSS3中，使用@keyframes规则创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 如：@keyframes myfirst {from {background: red;} to {background: yellow;} } 当在@keyframe创建动画时，把它绑定到一个选择器，否则动画不会有任何效果。 如：div { animation: myfirst 5s; } 把 “myfirst” 动画捆绑到 div 元素，时长：5 秒。
02 CSS3
02 css3的属性
目 录
• • • •
任务介绍
知识点 具体操作 总结拓展
任务介绍
通过操作演示，让同学们掌握CSS3中的主要属性。
添加阴影效果的边框
知识点
1、CSS3背景：CSS3中包含了几个新的背景属性，提供更大 背景元素控制：
•
background-size 属性：指定背景图像的大小。CSS3以前，