第9讲_使用CSS样式表设置背景颜色与图像
CSS的样式PPT课件
知识点精讲
知识点分析 CSS文字样式的常用属性 设置字体： 基本语法为font-family:字体1，字体2，字体3。 例如：h1{font-family:宋体，楷体，隶书;}。 设置文字大小 基本语法为font-size:尺寸|百分比|关键字。 设置斜体 基本语法为font-style:normal|italic|oblique。 设置文字粗细 基本语法为font-weight:normal|bold|bolder|lighter|number。 设置变体 基本语法为font-variant:normal|small-caps。
网站建设与管理
CSS的样式
考纲解读
1 掌握CSS的基础知识。 2 掌握CSS的属性。
考点解读
重难点分析：CSS样式表、样式选择器及CSS的属性。
知识点精讲
知识点1 CSS的基础知识 例题精讲 请输入正确的代码
【解析】外部链接样式表的声明方法为<link rel=″stylesheet″ type=″text/css″ href=″样式 表文件的地址″>
知识点精讲
巩固提高
在Dreamweaver软件中，给网站首页设置“页面属性”的具体要求如下:
网站首页中文字大小设置为12 px，文字颜色设置为“#000”。
设置网页背景颜色为“#CCC”。 设置“链接（CSS） ”中“下划线样式”为“始终无下划线”。 设置“链接（CSS）”中“链接颜色”为“#000”。 下面是网站首页的部分源代码，请从选项A~N中将正确的内容填入相应位置。
知识点精讲
CSS段落和其他文字样式属性 修饰文字 基本语法为text-decoration:underline|overline|line-through|blink|none。 设置段落的水平对齐方式 基本语法为text-align:left|right|left|justify。 颜色及背景 设置文字颜色 基本语法为color：颜色的名称|RGB值|十六进制数。 设置背景 基本语法为background:背景颜色|背景图像|背景重复|背景附件|背景位置。 设置背景颜色属性 基本语法为background-color:颜色|transparent（透明）。 设置背景图像属性 基本语法为background-image:url（背景图片的路径和名称）。
css background用法和搭配
css background用法和搭配
CSS的background属性用于设置元素的背景样式。
通过background属性，可以设置元素的背景颜色、图片、重复方式、位置等属性。
以下是一些常用的background属性值及其搭配方式：
1. background-color：设置元素的背景颜色。
示例：background-color: #F5F5F5;（设置背景颜色为浅灰色）
2. background-image：设置元素的背景图片。
示例：background-image: url("image.jpg");（设置背景图片为名为image.jpg 的图片）
3. background-repeat：设置背景图片的重复方式。
示例：background-repeat: no-repeat;（设置背景图片不重复）
4. background-position：设置背景图片的位置。
示例：background-position: center;（将背景图片居中显示）
5. background-size：设置背景图片的大小。
示例：background-size: cover;（将背景图片拉伸以填满整个元素）
6. background-attachment：设置背景图片是否随元素滚动而滚动。
示例：background-attachment: fixed;（固定背景图片，不随元素滚动）
通过组合使用不同的background属性，可以实现各种背景样式的显示效果，例如渐变背景、带有背景图片的背景等等。
css3实现背景图片颜色修改的多种方式
css3实现背景图⽚颜⾊修改的多种⽅式css3可以改变图⽚的颜⾊了。
从此再也不⽤设计出多张图，⽽且随时可以修改。
下⾯就简单介绍下css3中是如何做到改变背景图⽚的颜⾊效果的。
⽅式⼀：利⽤css3滤镜filter中的 drop-shadow代码如下：<style>.icon{display: inline-block;width: 180px;height: 180px;background: url('img/XXX.png') no-repeat center cover;overflow: hidden;}.icon:after{content: '';display: block;height: 100%;transform: translateX(-100%);background: inherit;filter: drop-shadow(144px 0 0 #fff); //需要修改的颜⾊值}</style><i class="icon"></i>说明：drop-shadow 滤镜可以给元素或图⽚⾮透明区域添加投影将背景透明的 PNG 图标施加⼀个不带模糊的投影，就等同于⽣成了另外⼀个颜⾊的图标再通过 overflow:hidden 和位移处理将原图标隐藏mix-blend-mode 取值情况：【除了最后3个，⼤体和ps效果⼀样】mix-blend-mode: normal; // 正常mix-blend-mode: multiply; // 正⽚叠底mix-blend-mode: screen; // 滤⾊mix-blend-mode: overlay; // 叠加mix-blend-mode: darken; // 变暗mix-blend-mode: lighten; // 变亮mix-blend-mode: color-dodge; // 颜⾊减淡mix-blend-mode: color-burn; // 颜⾊加深mix-blend-mode: hard-light; // 强光mix-blend-mode: soft-light; // 柔光mix-blend-mode: difference; // 差值mix-blend-mode: exclusion; // 排除mix-blend-mode: hue; // ⾊相mix-blend-mode: saturation; // 饱和度mix-blend-mode: color; // 颜⾊mix-blend-mode: luminosity; // 亮度mix-blend-mode: initial; // 默认mix-blend-mode: inherit; // 继承mix-blend-mode: unset; // 还原⽅式⼆：利⽤css3的mix-blend-mode 和 background-blend-mode代码如下：<style>.icon{display: inline-block;width: 180px;height: 180px;background-image: url($'img/XXX.png'), linear-gradient(#f00, #f00);background-blend-mode: lighten;background-size: cover;}</style><i class="icon"></i>说明：lighten这个混合模式：变亮、变亮模式与变暗模式产⽣的效果相反，⿊⾊⽐任何颜⾊都要暗，所以⿊⾊会被任何⾊替换掉。
网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库：CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1：制作“李彦宏——众里寻他千百 度”网页 5.2 知识库：CSS图像样式
目录
5.3 基础项目2：制作“少年中国说”网页 5.4 知识库：CSS背景样式 5.5 提高项目：制作“低碳生活 从我做起”网页 5.6 拓展项目：制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下：
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色（比如 red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number
transparent inherit
name属性或id属性相关联，创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定，所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域，其属性及属性值如下：
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示： 当vertical-align的值为bottom或者sub时，IE与Firefox 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。
如何设置页面背景颜色
如何设置页面背景颜色在网页设计中，页面背景颜色是一个重要的元素。
通过设置页面背景颜色，我们可以为用户呈现出不同的氛围和风格。
本文将介绍一些常见的方法来设置页面背景颜色，帮助您打造出美观舒适的网页。
一、使用内联样式设置页面背景颜色使用内联样式表是一种简单快捷的方法来设置页面背景颜色。
您可以直接在网页标签中添加style属性，并设置背景颜色的数值或颜色名称。
例如：```html<body style="background-color: #F0F0F0;"><!-- 网页内容 --></body>```通过设置background-color属性的值，可以将页面背景颜色设置为特定的十六进制颜色码，如#F0F0F0，或使用颜色名称，如"white"。
根据需要调整数值或颜色名称来实现您想要的背景颜色效果。
二、使用CSS样式表设置页面背景颜色除了内联样式表，您还可以使用外部CSS样式表来设置页面背景颜色。
首先，您需要创建一个新的CSS文件（例如style.css），然后在HTML文件的头部引用该文件。
接下来，在CSS文件中添加如下代码：```cssbody {background-color: #F0F0F0;}```通过将背景颜色规则应用于body元素，您可以全局设置整个网页的背景颜色。
同样，您可以根据需求调整背景颜色的数值或颜色名称。
三、使用背景图片作为页面背景除了纯色背景，您还可以使用图片作为页面背景。
这样可以为网页增添一些视觉元素和艺术感。
要设置背景图片，可以使用以下CSS规则：```cssbody {background-image: url("background.jpg");background-repeat: no-repeat;background-size: cover;}```在上述代码中，我们通过background-image属性指定了背景图片的URL。
第9章 CSS样式表
9.3 实例——使用CSS样式控制页面
把外部CSS样式表链接到页面
CSS样式表文件与网页文件的关系
9.3 实例——使用CSS样式控制页面
操作步骤:
– 打开未设置样式的主页文件 – 打开CSS样式面板，单击面板下方的（附加样式表）按钮，打开如下
图所示“链接外部样式表”对话框，单击“浏览”按钮，打开如下图 所示对话框，选择CSS文件夹中的wenzi.css和font.css进行链接，网 页中相应的样式即发生改变
9.3 实例——使用CSS样式控制页面
9.3 实例——使用CSS样式控制页面
– 采用上述方法定义biankuang的CSS规则，参数设置如下图所 示
9.3 实例——使用CSS样式控制页面
9.3 实例——使用CSS样式控制页面
– 采用上述方法定义bankuai的CSS规则，参数设置如下图所示
9.3 实例——使用CSS样式控制页面
9.4 DIV+CSS布局
–单击【确定】按钮，完成Body标签样式的定义 –定义#container容器。单击“CSS样式”面板右下角的“新建样式” 按钮，弹出“新建CSS规则”对话框，设置参数如下图所示。
9.4 DIV+CSS布局
–单击【确定】按钮，打开“#container的CSS规则定义”对话框，设 置参数如下图所示
“插入Div标签”对话框
9.4 DIV+CSS布局
插入DIV标签
–在页面中单击，执行“插入”|“布局对象”|“Div标签”命令， 弹出“插入Div标签”对话框，在“插入”栏中选择“在插入 点”，在“ID”栏中选择“container”样式，如下图所示
“插入Div标签”对话框
9.4 DIV+CSS布局
9.第2章：CSS样式表与模板(4)
课
程
名
称
组装与维护
第2章：CSS样式表与模板（4）
第3节：对图像运用CSS滤镜：图片滤镜
审批签字
授课时间
月日
授课班级
2010计算机班
计划课时
2课时
实用课时
17--18
教学目的与要求
1.掌握基本概念：图片滤镜
授课类型
理论课
教学方法
讲授法
教具
2）全部相同：将相同的边框样式属性设置应用于元素的“上”“右”“下”和“左”侧。取消选择“全部相同”可设置元素各个边的边框样式。
3）宽度：设置元素边框的粗细。
小结、作业及课后回顾5分钟
小结
本节主要讲述了在网页中对图像运用CSS滤镜的过程。
作业
巩固本次课所学知识
课后
教学
回顾
点名，课程介绍5分钟。
讲授新课
80分钟
教学过程和内容
时间分配
1）单词间距：设置单词的间距。
2）字母间距：增加或减小字母或字符的间距。
3）垂直对齐：指定应用它的元素的垂直对齐方式。
4）文本对齐：设置元素中的文本对齐方式。
5）文本缩进：指定第一行文本缩进的程度。
2.接下来设置方框样式。方框样式定义特定元素的大小及其周围元素间距等属性。在CSS样式定义对话框的左边选择“盒子”，然后再右侧详细设置方框样式。
一、基本概念
CSS不仅可以对文字进行样式的修改，还可以对表格进行修改。
1.区块样式的修改2.方框样式的修改3.边框样式的修改
二、上机操作
1.首先介绍如何设置区块样式。区块样式主要定义段落文本中文字的字距、对齐方式等格式。在CSS样式定义对话框左边选择“区块”选项，然后再右边选项区域详细设置区块样式即可。
CSS常用样式属性大全
CSS常用样式属性大全1. 文本属性- `color`：设置文本颜色- `font-size`：设置字体大小- `font-family`：设置字体系列- `font-weight`：设置字体粗细- `text-align`：设置文本对齐方式- `text-decoration`：设置文本装饰（如下划线、删除线等）- `text-transform`：设置文本大小写转换2. 背景属性- `background-color`：设置背景颜色- `background-image`：设置背景图片- `background-repeat`：设置背景图片的重复方式- `background-position`：设置背景图片的位置- `background-size`：设置背景图片的尺寸3. 边框属性- `border`：设置元素边框样式、宽度和颜色- `border-radius`：设置元素边框的圆角- `border-color`：设置元素边框的颜色- `border-width`：设置元素边框的宽度4. 布局属性- `display`：设置元素的显示方式（如块级、内联等）- `width`：设置元素的宽度- `height`：设置元素的高度- `margin`：设置元素外边距- `padding`：设置元素内边距- `float`：设置元素的浮动方式5. 盒模型属性- `box-sizing`：设置元素的盒模型计算方式- `overflow`：设置元素溢出内容的处理方式- `position`：设置元素的定位方式- `top`：设置定位元素的上边距- `bottom`：设置定位元素的下边距- `left`：设置定位元素的左边距- `right`：设置定位元素的右边距以上是CSS中常用的样式属性，通过合理使用这些属性可以实现各种各样的页面效果。
在编写CSS代码时，建议将样式属性单独分行展示，以增加代码的可读性和维护性。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
案例演示3
案例演示4
背景图片的位置
查看源代码
发现：无论网页如何拉伸，楼房的背景图片一直处于页面的 右下角，那么将如何设置呢？
添加多个背景图片
由于在CSS中，一个标记只能使用一次background属性， 若想添加多个背景，只有给多个标记添加不同背景来实现
查看源代码
背景样式的缩写
background-color:blue; background-image:url(bg1.jpg); background-repeat:repeat-y; background-attachment:fixed; background-position:5px 10px;
背景综合一：我的个人主页
查看源代码
背景综合二：古词《念奴娇· 赤壁怀古》 查看源代码
千里之行 始于足下
17
常用的浅色案例
一般来说，网页的背景色应该柔和一些、素一些、淡一些， 再配上深色的文字，使人看起来自然、舒畅。而为了追求醒 目的视觉效果，可以为标题使用较深的颜色。
网页颜色原理和象征意义
我们所有网页上颜色，在HTML下看到的是以颜色英文单词 或者十六进制的表示方法（如#000000表示为黑色）。不 红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤 怒，热情，活力的感觉。 同的颜色有着不同的含义，给人各种丰富的感觉和联想。
绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康， 安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的 气氛。 橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨， 时尚的效果。 黄色---具有快乐，希望，智慧和轻快的个性，它的明度最 高。 蓝色---是最具凉爽，清新，专业的色彩。它和白色混合，能 体现柔顺，淡雅，浪漫的气氛(象天空的色彩)
白色---具有洁白，明快，纯真，清洁的感受。 黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。
网页颜色的使用风格
案例演示
1、 公司色 在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要 有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同 时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资 公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的颜色使用到网 站上显得色调自然、底蕴深厚。 2、 风格色 许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中 性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多 ，大公司使用蓝色的较多……这些都是在突出自己的风格。 3、 习惯色 这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多 使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜 色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。
background:blue url(bg1.jpg) repeat-y fixed 5px 10px; 严格来说没什么顺序之分，但推荐一定的次序有利于代码修改和阅 读：颜色、背景图片、是否重复、是否固定、如何定位
标题的图像替换
Байду номын сангаас
素材准备
参考代码
滑动门技术的标题
参考代码
效果：我们看到上述两行，背景图片可长可短，就像滑动门似的。 用途：常用于标题或导航。
回顾
CSS中如何设置图片代替文本？ 图文混排中，使用哪个CSS属性可以实现？ CSS中剪切图片的思路是如何呢？
本讲目标
背景颜色给页面分块 背景图片的设置 背景图像替换
滑动门技术的标题
背景综合一：我的个人主页
背景综合二：古词《念奴娇· 赤壁怀古》
新知识导入
对于做网页的初学者可能更习惯于使用一些 漂亮的图片作为自己网页的背景。 但是，浏览一下大型的商业网站，你会发现 他们更多运用的是白色、蓝色、黄色等，使得网 页显得典雅，大方和温馨。更重要的是，这样可 以大大加快浏览者打开网页的速度。
背景色给页面分块
查看源代码
背景图片的重复
使用CSS为页面添加背景图片的方法，使用属性 background-image
background-image:url(bg1.jpg); background-repeat:repeat-y; /* 背景图片 */ /* 垂直方向重复 */
案例演示1
案例演示2