第9讲使用CSS样式表设置背景颜色与图像
CSS中如何设置图片代替文本？ 图文混排中，使用哪个CSS属性可以实现？ CSS中剪切图片的思路是如何呢？
本讲目标
背景颜色给页面分块 背景图片的设置 背景图像替换 滑动门技术的标题 背景综合一：我的个人主页 背景综合二：古词《念奴娇·赤壁怀古》
新知识导入
对于做网页的初学者可能更习惯于使用一些 漂亮的图片作为自己网页的背景。
background-image:url(bg1.jpg); /* 背景图片 */
background-repeat:repeat-y;
/* 垂直方向重复 */
案例演示1 案例演示2 案例演示3 案例演示4
背景图片的位置
查看源代码
发现：无论网页如何拉伸，楼房的背景图片一直处于页面的 右下角，那么将如何设置呢？
但是，浏览一下大型的商业网站，你会发现 他们更多运用的是白色、蓝色、黄色等，使得网 页显得典雅，大方和温馨。更重要的是，这样可 以大大加快浏览者打开网页的速度。
常用的浅色案例
一般来说，网页的背景色应该柔和一些、素一些、淡一些， 再配上深色的文字，使人看起来自然、舒畅。而为了追求醒 目的视觉效果，可以为标题使用较深的颜色。
添加多个背景图片
由于在CSS中，一个标记只能使用一次background属性， 若想添加多个背景，只有给多个标记添加不同背景来实现
查看源代码
背景样式的缩写
background-color:blue; background-image:url(bg1.jpg); background-repeat:repeat-y; background-attachment:fixed; background-position:5px 10px;
3、 习惯色 这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多
使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜 色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。
背景色给页面分块
查看源代码
背景图片的重复
使用CSS为页面添加背景图片的方法，使用属性 background-image
网页颜色原理和象征意义
我们所有网页上颜色，在HTML下看到的是以颜色英文单词 或者十红六色进---是制一的种表激奋示的方色法彩。（刺如激#效0果00，0能00使表人示产生为冲黑动色，愤）。不 同的颜怒色，有热情着，不活同力的的感含觉义。 ，给人各种丰富的感觉和联想。
绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康， 安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的 气氛。 橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨， 时尚的效果。 黄色---具有快乐，希望，智慧和轻快的个性，它的明度最 高。 蓝色---是最具凉爽，清新，专业的色彩。它和白色混合，能 体现柔顺，淡雅，浪漫的气氛(象天空的色彩)
时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资
公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的颜色使用到网
Hale Waihona Puke 站上显得色调自然、底蕴深厚。
2、 风格色 许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中
性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多 ，大公司使用蓝色的较多……这些都是在突出自己的风格。
白色---具有洁白，明快，纯真，清洁的感受。
黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。
1、 公司色
网页颜色的使用风格
案例演示
在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要
有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同
背景综合一：我的个人主页
查看源代码
背景综合二：古词《念奴娇·赤壁怀古查看》源代码
千里之行 始于足下
17
background:blue url(bg1.jpg) repeat-y fixed 5px 10px;
严格来说没什么顺序之分，但推荐一定的次序有利于代码修改和阅 读：颜色、背景图片、是否重复、是否固定、如何定位
标题的图像替换
素材准备 参考代码
滑动门技术的标题
参考代码
效果：我们看到上述两行，背景图片可长可短，就像滑动门似的。 用途：常用于标题或导航。
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属性，可以实现各种背景样式的显示效果，例如渐变背景、带有背景图片的背景等等。
css 常用格式化样式
css常用格式化样式CSS（层叠样式表）用于设计和格式化网页的外观和样式。
下面是一些常用的格式化样式：1.文本格式化：●修改字体：font-family:Arial,sans-serif;●修改字体大小：font-size:16px;●修改字体粗细：font-weight:bold;●修改字体颜色：color:#333;●修改行高：line-height:1.5;●修改文字对齐方式：text-align:center;2.盒子模型格式化：●修改元素的宽度和高度：width:200px;height:100px;●设置边框：border:1px solid#ccc;●设置内边距：padding:10px;●设置外边距：margin:20px;●设置元素的背景颜色：background-color:#f5f5f5;3.背景格式化：●设置背景图片：background-image:url('example.jpg');●背景图片重复方式：background-repeat:no-repeat;●背景图片位置：background-position:center center;●背景图片大小：background-size:cover;4.元素定位：●设置元素相对定位：position:relative;●设置元素绝对定位：position:absolute;●元素位置：top:50px;left:20px;5.清除浮动：●清除浮动：.clearfix::after{content:"";display:table;clear:both;}6.响应式设计：●媒体查询：@media screen and(max-width:600px){在小屏幕下的样式body{font-size:14px;}}这些是一些常见的CSS格式化样式，用于调整文本、盒子模型、背景、定位和响应式设计等方面的样式。
《CSS样式》习题答案
一、选择题1．CSS是（ C ）的缩写。
A．C olorful S tyle S heetsB．C omputer S tyle S heetsC．C ascading S tyle S heetsD．C reative S tyle S heets2．引用外部样式表的格式是（ B ）。
A．<style src="mystyle.css">B．<link rel="stylesheet" type="text/css" href="mystyle.css"> C．<stylesheet>mystyle.css</stylesheet>3．引用外部样式表的元素应该放在（ C ）。
A．H TML文档的开始的位置B．H TML文档的结束的位置C．在head元素中D．在body元素中4．内部样式表的元素是（ A ）。
A．<style>B．<css>C．<script>5．元素中定义样式表的属性名是（ A ）。
A．s tyleB．c lassC．s tylesD．f ont6．下列（ C ）是定义样式表的正确格式。
A．{body:color=black(body}B．b ody:color=blackC．b ody {color: black}D．{body;color:black}7．下列（ A ）是定义样式表中的注释语句。
A．/* 注释语句*/B．// 注释语句C．// 注释语句//D．‘注释语句8．如果要在不同的网页中应用相同的样式表定义，应该（ C ）。
A．直接在HTML的元素中定义样式表B．在HTML的<head>标记中定义样式表C．通过一个外部样式表文件定义样式表D．以上都可以9．样式表定义#title {color:red} 表示（ B ）。
如何设置页面背景颜色
如何设置页面背景颜色在网页设计中，页面背景颜色是一个重要的元素。
通过设置页面背景颜色，我们可以为用户呈现出不同的氛围和风格。
本文将介绍一些常见的方法来设置页面背景颜色，帮助您打造出美观舒适的网页。
一、使用内联样式设置页面背景颜色使用内联样式表是一种简单快捷的方法来设置页面背景颜色。
您可以直接在网页标签中添加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布局
css文字颜色与背景颜色搭配方案
css文字颜色与背景颜色搭配方案CSS文字颜色与背景颜色搭配方案在网页设计中，文字颜色和背景颜色的搭配方案是非常重要的，它可以直接影响到用户对网页的视觉感受和阅读体验。
一个合理的搭配方案能够提高网页的可读性和美观度。
下面将介绍几种常用的CSS文字颜色与背景颜色搭配方案。
1. 对比明显的黑白搭配黑色文字配以白色背景是最经典的搭配方案之一。
黑白搭配具有很高的对比度，能够提供清晰的视觉效果，使文字清晰可辨。
这种搭配适用于大部分网页内容，特别是文章、新闻等需要大量阅读的页面。
2. 温暖色调的搭配温暖的背景色如淡黄、浅橙等搭配深蓝或深紫色的文字，能够给人带来温馨、舒适的感觉。
这种搭配适用于一些具有浪漫、温暖氛围的网页，如婚庆、旅游等。
3. 冷色调的搭配冷色调的背景色，如浅蓝、淡绿等，搭配深灰或深蓝色的文字，给人一种清新、宁静的感觉。
这种搭配适用于一些需要表现冷静、专业的网页，如科技、金融等领域。
4. 互补色的搭配互补色是指在色相环上相对的两种颜色，如红色与绿色、蓝色与橙色等。
互补色的搭配具有强烈的对比度和视觉冲击力，能够吸引用户的注意力。
但由于对比度较高，不适合大面积的文字和背景搭配，可以在一些需要突出重点的地方使用。
5. 类似色的搭配类似色是指在色相环上相邻的两种颜色，如红色与橙色、绿色与黄色等。
类似色的搭配具有较强的层次感和和谐感，给人一种舒适的感觉。
这种搭配适用于一些需要表现和谐、渐变的网页，如艺术、摄影等领域。
6. 灰色的搭配灰色是一种中性色，与大多数颜色都能够搭配得很好。
浅灰色的背景搭配深灰色的文字，给人一种稳重、专业的感觉。
灰色的搭配适用于一些需要表现稳定、中立的网页，如商务、法律等领域。
7. 高饱和度的搭配高饱和度的颜色搭配会给人一种活力、充满激情的感觉。
搭配时要注意选择合适的颜色，避免过于刺眼。
这种搭配适用于一些需要突出个性、吸引眼球的网页，如时尚、音乐等领域。
总结来说，合理的CSS文字颜色与背景颜色搭配方案能够提高网页的可读性和美观度。
CSS常用样式属性大全
CSS常用样式属性大全1. 文本样式- `font-size`: 设置字体大小- `font-family`: 设置字体类型- `font-weight`: 设置字体粗细- `color`: 设置字体颜色- `text-decoration`: 设置文本修饰，如下划线、删除线等- `text-align`: 设置文本对齐方式- `text-transform`: 设置文本大小写转换2. 背景样式- `background-color`: 设置背景颜色- `background-image`: 设置背景图片- `background-size`: 设置背景图片大小- `background-position`: 设置背景图片位置- `background-repeat`: 设置背景图片重复方式3. 边框样式- `border`: 设置边框样式、宽度和颜色- `border-radius`: 设置边框圆角- `border-width`: 设置边框宽度- `border-color`: 设置边框颜色4. 尺寸和布局样式- `width`: 设置元素宽度- `height`: 设置元素高度- `margin`: 设置元素外边距- `padding`: 设置元素内边距- `display`: 设置元素的显示方式5. 盒模型样式- `box-sizing`: 控制盒模型的计算方式- `overflow`: 设置内容溢出时的处理方式6. 定位样式- `position`: 设置元素的定位方式- `top`: 设置元素离顶部的距离- `left`: 设置元素离左边的距离- `right`: 设置元素离右边的距离- `bottom`: 设置元素离底部的距离7. 动画样式- `transition`: 设置元素的过渡效果- `animation`: 设置关键帧动画效果以上是CSS常用的样式属性，通过调整这些属性，您可以灵活地控制网页的样式和布局。
css网页中设置背景图片的方法详解
css⽹页中设置背景图⽚的⽅法详解css⽹页中设置背景图⽚的⽅法详解在css代码中设置背景图⽚的⽅法，包括背景图⽚、背景重复、背景固定、背景定位等⽤css设置⽹页中的背景图⽚，主要有如下⼏个属性：1，背景颜⾊ {background-color:数值}2，背景图⽚ {background-image: url(URL)|none}3，背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4，背景固定 {background-attachment:fixed|scroll}5，背景定位 {background-position:数值|top|bottom|left|right|center}6，背影样式 {background:背景颜⾊|背景图象|背景重复|背景附件|背景位置}1．背景颜⾊：background-color语法：{ padding: 0px;">说明：参数取值和颜⾊属性⼀样注意：在HTML当中，要为某个对象加上背景⾊只有⼀种办法，那就是先做⼀个表格，在表格中设置完背景⾊，再把对象放进单元格。
这样做⽐较⿇烦，不但代码较多，还要为表格的⼤⼩和定位伤些脑筋。
现在⽤CSS就可以轻松地直接搞定了，⽽且对象的范围很⼴，可以是⼀段⽂字，也可以只是⼀个单词或⼀个字母。
例⼦：给部分⽂字加背景颜⾊给部分⽂字加背景颜⾊表格背影颜⾊：代码⽰例:style=" margin-left: 0px; padding: 0px; clear: both; line-height: 24px;">2．背景图⽚：background-image语法：{background-image: url(URL)|none}说明： URL就是背景图⽚的存放路径。
如果⽤“none”来代替背景图⽚的存放路径，将什么也不显⽰。
css background image的用法
CSS background image的用法一、背景图片的基本概念在CSS中，背景图片是指在元素的背景中添加图像。
背景图片可用于网页设计、页面装饰和内容呈现等方面。
CSS提供了多种方式来使用背景图片，使页面更加丰富和吸引人。
二、CSS的background-image属性使用背景图片时，需要使用CSS的background-image属性来定义。
background-image属性的常用语法如下：background-image: url(image.jpg);其中，url()函数用来指定背景图片的路径。
可以是一个相对路径，也可以是一个绝对路径。
另外，background-image属性还支持使用gradient定义背景图片。
三、使用背景图片的基本步骤为了在网页中使用背景图片，需要经过以下几个步骤：1. 准备图片资源首先，需要准备好所需的图片资源。
可以使用自己设计的图片，也可以从网络上下载合适的图片。
在选择图片时，要注意图片的格式和大小，以确保页面的加载速度和显示效果。
2. 添加CSS样式在CSS文件中，使用background-image属性来添加背景图片。
可以通过类选择器、ID选择器或标签选择器来指定要应用背景图片的元素。
3. 设置背景图片的属性为了使背景图片在页面中显示出来，还需要设置一些背景图片的属性。
可以通过background-size、background-position、background-repeat等属性来调整背景图片的大小、位置和重复方式。
四、背景图片的常见用法在网页设计中，背景图片通常用于以下几个方面：1. 全局背景图片可以在整个页面的背景中添加一个全局背景图片，使页面的视觉效果更加丰富和统一。
可以使用body元素或顶层容器元素作为添加背景图片的对象。
2. 特定区域的背景图片除了全局背景图片，还可以为特定区域添加背景图片，以突出该区域的特点或重点内容。
可以使用div元素或其他合适的容器元素来添加背景图片。