wxss学习系列《三》背景(Background)与颜色(Color),边框
CSS3背景、边框、字体和文本
轮廓
轮廓
绘制在HTML元素边框边缘外围
CSS轮廓属性 outline：总体声明所有边框属性
outline值顺序及单个属性 outline-color：设置边框颜色 outline-style：设置边框线样式 outline-width：设置边框线宽度
背景
CSS背景属性 background：总体声明所有背景属性
边框图片
CSS边框图片 Border-image：设置边框填充图片 Border-image-source ：设置图片路径 Border-image-slice ：设置边框向内偏移 Border-image-width ：设置边框宽度 Border-image-outset ：设置图片超出边框的量 Border-image-repeat ：设置图片平铺、铺满、拉伸
• 2、给网页增加背景图片，并让图片放在 顶部居中，不要重复？
• 3、给网页的一个div添加边框，并设置漂 亮的边框效果？
计算机与信息工程系
字体
CSS字体属性 font：总体声明所有字体属性
font值顺序及单个属性 font-style：设置字体样式 font-variant：设置是否小型大写显示文本 font-weight：设置字体粗细 font-size：设置文字大小 font-family：设置字体
字体
@font-face添加自己的字体 默认字体必须在客户机器上存在，有了@font-face就可以使用任何字体了
文本属性
值 color direction Letter-spacing Line-height Text-align Text-decoration Text-indent Text-shadow Text-transform White-space Word-spacing
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属性，可以实现各种背景样式的显示效果，例如渐变背景、带有背景图片的背景等等。
background-color参数
background-color参数背景颜色参数在网页设计中的应用引言：在网页设计中，背景颜色是一个重要的元素，它可以为网页增加美感，提升用户体验。
背景颜色参数是指在CSS中设置背景颜色的属性。
本文将详细讨论背景颜色参数在网页设计中的应用。
正文内容：1. 背景颜色参数的基本概念1.1 背景颜色的作用背景颜色可以为网页提供整体的视觉效果，使网页看起来更加美观和舒适。
1.2 CSS中的背景颜色属性在CSS中，通过background-color属性可以设置元素的背景颜色。
该属性可以接受各种颜色值，如十六进制、RGB值、颜色名称等。
2. 背景颜色参数的具体应用2.1 设置网页的整体背景颜色通过在CSS中设置body元素的background-color属性，可以为整个网页设置背景颜色。
2.2 设置特定元素的背景颜色通过在CSS中设置特定元素的background-color属性，可以为该元素设置独特的背景颜色，以突出其重要性或与整体风格相协调。
2.3 背景颜色的渐变效果CSS中的background-color属性还支持渐变效果，可以通过设置渐变的起始颜色和结束颜色，实现背景颜色的平滑过渡效果。
2.4 背景颜色的透明度设置通过设置背景颜色的透明度，可以实现一些特殊的效果，如半透明背景或叠加效果。
2.5 背景颜色的动画效果利用CSS的动画属性，可以实现背景颜色的动态变化，增加网页的交互性和吸引力。
3. 背景颜色参数对用户体验的影响3.1 背景颜色的对比度合理设置背景颜色的对比度可以提高网页的可读性和可访问性，使用户更加舒适地浏览网页。
3.2 背景颜色的情绪表达背景颜色可以传达出不同的情绪和氛围，如明亮的颜色可以给人带来活力和愉悦感，而暗淡的颜色则可能给人带来沉闷和压抑感。
3.3 背景颜色的品牌识别对于企业或品牌网站来说，背景颜色的选择和使用可以帮助用户更好地识别和记忆品牌。
4. 背景颜色参数在不同设备上的适配性4.1 响应式设计下的背景颜色在响应式设计中，需要考虑不同设备上的背景颜色适配性，以保证用户在不同设备上的浏览体验。
CSS基础详解-3颜色和背景
background-position:35px 20px;
• 控制图片离容器左边和上边的距离 • 可以使用px或em等进行定位
百分比 background-position:20% 10%; 如果不设置，背景图片默认显示在左上角
实例代码
动手做：
背景图片居中显示
Demo 3-3-7bgPositon.html 思考：如果同时设置了图片平铺，会怎样呢？
例： background-color:purple; background-color:#6600CC
实例代码
动手做：
将背景设为浅绿色 （#A9E9D9） Demo 3-3-3bgColor.html 思考：将标题的背景 设为深绿色？
本节内容
设置颜色
设置背景颜色
设置背景图片
插入背景图片 设置背景图片的平铺方式
说明：
re铺 repeat-y:只在垂直方向平铺 no-repeat:不平铺
实例代码
动手做
背景图片不平铺
Demo3-3-6bgRepeat.html
本节内容
设置颜色
设置背景颜色
设置背景图片
插入背景图片 设置背景图片的平铺方式
本节内容
设置颜色
设置背景颜色
设置背景图片
插入背景图片 设置背景图片的平铺方式
背景图片的位置
设置背景图片的附着方式
设置颜色
color:关键字 | RGB值
例：color:red color:#FF0000 color:#F00 常用颜色的关键字
设置颜色实例
Demo 3-3-1poem.html
背景图片的位置
设置背景图片的附着方式
微信小程序wxss设置样式
微信小程序wxss设置样式对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显示出来一、wxml界面结构wxmL比较容易理解，主要是由八大类基础组件构成：一、视图容器(View Container)：二、基础内容(Basic Content)组件名说明组件名view视图容器iconscroll-view可滚动视图容器textswiper可滑动的视图容器progress三、表单组件(Form)四、操作反馈组件(Interaction)组件名说明组件名button按钮action-sheetform表单modalinput输入框progresscheckbox多项选择器toastradio单项选择器五、导航(Navigation)picker列表选择器组件名slider滑动选择器navigatorswitch开关选择器label标签六、多媒体(Media)七、地图(Map)组件名说明组件名audio音频mapimage图片video视频八、画布(Canvas)组件名说明canvas画布关于这八大类的属性和具体用法可参考以下参考文献链接：/weixinapp/itz51q8o.htmlhttps:///debug/wxadoc/dev/component/二、wxsswxml理解起来容易，但光搭好了框架，并不能达到我们想要的界面效果，这就需要用到wxss样式了。
wxss样式决定了组件应该如何显示，并在css的基础上做了一些功能扩展，主要包括：1.尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx。
一般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下：设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)iPhone51rpx = 0.42px1px = 2.34rpxiPhone61rpx = 0.5px1px = 2rpxiPhone6s1rpx = 0.552px1px = 1.81rpx2.样式导入可以使用@import语句来导入外联样式表，其后面跟需要导入外联样式表的相对路径，并以分号结束。
CSS颜色与背景
颜色与背景本文，你将学习如何在网站上应用颜色与背景。
我们还会介绍用于定位和控制背景图像的高级方法。
本课将对下列CSS属性进行讲解：∙color∙background-color∙background-image∙background-repeat∙background-attachment∙background-position∙background前景色：‘color’属性CSS属性color用于指定元素的前景色。
例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。
h1 {color: #ff0000;}∙显示示例颜色值可以用十六进制表示（比如上例中的#ff0000），也可以用颜色名称（比如“red”）或RGB值（比如rgb(255,0,0)）表示。
‘background-color’属性CSS属性background-color用于指定元素的背景色。
因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。
你也可以为其他包含标题或文本的元素单独应用背景色。
在下例中，我们为body和h1元素分别应用了不同的背景色。
body {background-color: #FFCC66;}h1 {color: #990000;background-color: #FC9804;}显示示例注意：我们为h1元素应用了两个CSS属性，它们之间以分号（“;”）分隔。
背景图像[background-image]CSS属性background-image用于设置背景图像。
在下面的示例中，我们使用了一张蝴蝶的图像作为背景。
你可以将该图片下载下来（方法为：鼠标右击该图片，然后选择“图片另存为”），以便在自己的计算机上使用。
当然，你也可以选用其他你觉得满意的图片。
css背景和边框标签实例详解
css背景和边框标签实例详解⼀、css背景标签1，设置背景颜⾊back-ground-color 属性指定元素的背景⾊。
⼩实例如下图所⽰：运⾏结果如下：可以通过选择器给不同的标签设置不同的颜⾊，在这⾥h1,div,和p标签将拥有不同的背景⾊：实例：运⾏结果如下图所⽰：2.设置背景图像background-image属性指定⽤作元素背景的图像。
默认情况下，图像会重复，以覆盖整个元素。
⽤url来引⼊外部图⽚。
具体实例如下所⽰：运⾏结果如下图：注意事项：使⽤背景图⽚时，要注意背景图⽚的样式，不要有⼲扰到⽂本的图像，以免影响效果。
css背景重复的问题默认情况下，background-repeat属性在垂直和⽔平⽅向上都重复图像。
某些图像应只适合⽔平或垂直⽅向上重复，若想仅在⽔平⽅向上重复，需要⽤（background-repeat：repeat-x；），则背景看起来更好；若想要仅在垂直重复图像，需设置background-repeat：repeat-y；属性还可以指定只显⽰⼀次背景图像：⽤background-repeat：no-repeat标签即可。
4、指定背景图像的位置指定背景图像的位置需要使⽤background-position标签具体实例如下图所⽰：下⾯将会展⽰把背景图⽚放在右上⾓的代码：运⾏结果如下图所⽰：5、设置背景图像固定background-attachment 属性来设置背景图像固定，其属性值scroll图像随页⾯元素⼀起滚动（默认值），fixed图像固定在屏幕上，不随页⾯元素滚动。
6、设置背景图像⼤⼩background-size 属性可以设置背景图像的⾼度和宽度。
第⼀个值设置宽度，第⼆个值设置⾼度。
如果设⼀个值，则第⼆个值会默认auto。
其格式如下所⽰：background-size：属性1 属性2；实例如下：运⾏结果如下：7、设置图像透明效果使⽤opacity属性能够使任何元素能够使任何元素呈现出透明效果，透明度在0~1之间，其格式如下：opacity：opacityValue；⼆、css边框标签1.设置边框颜⾊（1）设置边框样式（border-style）边框样式⽤于定义边框的风格，常⽤属性值如下：none：没有边框即忽略所有边框的宽度（默认值）。
CSS背景（background）
CSS背景（background）⼀、背景颜⾊（color）语法：background-color：颜⾊值；默认的值是 transparent 透明的⼆、背景图⽚（image）1、语法：background-image：none | url（url）参数作⽤none⽆背景图（默认的）url使⽤绝对或相对地址指定背景图像background-image：url（images/demo.png）；2、⼩技巧：提倡背景图⽚后⾯的地址，url不要加引号。
三、背景平铺（repeat）1、语法：background-repeat：repeat | no-repeat | repeat-x | repeat-y参数作⽤repeat背景图像在纵向和横向上平铺（默认的）no-repeat背景图像不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向上平铺四、背景位置（position）重点1、语法：background-position：length || lengthbackground-position：position || position参数值length百分数|由浮点数字和单位标识符组成的长度值position top | center | bottom | left | center | right ⽅位名词2、注意：①必须先指定background-image属性；②position后⾯是x坐标和y坐标，可以使⽤⽅位名词或者精确单位；③如果只指定了⼀个⽅位名词，另⼀个值默认居中，为50%；④如果只指定⼀个数值，那该数值⽤于x坐标，另⼀个默认是y坐标，默认居中。
⑤如果指定两个值，两个值都是⽅位名字，则两个值前后顺序⽆关，⽐如left，top和top，left 效果⼀致；⑥如果指定两个值，精确单位和⽅位名字混合使⽤，则第⼀个值是x坐标，第⼆个值是y坐标。
3、实际⼯作中⽤的最多的是背景图⽚居中对齐。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
小程序商店提供wxss学习系列三
一：背景(Background)与颜色(Color)
一、背景：background。
设置对象的背景特性。
一个元素可以设置多重背景图像，每组之间用逗号隔开，如果存在重叠关系，前面的背景图像会覆盖在后面背景图上。
1.background-color：指定背景的颜色。
取值：正常的颜色取值。
2.background-image：背景图片。
如果设置了这个属性，最好也添加下background-color ，用于当背景image不可见时保持与文本颜色有一定的对比度
3.background-repeat：设置对象背景图如何铺排填充。
repeat-x：背景在横向上平铺。
repeat-y：背景在纵向上平铺。
repeat：背景图在横向纵向上平铺。
no-repeat：图像不平铺。
round：背景图像自动缩放直到适应且填充整个容器。
space：背景图像以相同的间距平铺且填充满整个容器或者某个方向。
space:
round:
4.background-attachment：指定对象的背景图像是随对象内容滚动还是固定的。
取值：fixed：固定位置。
scroll：相对于元素固定，跟着元素。
local：相对于元素内容固定，总是跟着内容。
5.background-position:指定对象的背景图像位置。
取值：left，right，top，bottom，center。
也可以用百分比。
6.background-size：指定对象的背景图像的尺寸大小。
取值：auto：背景图的真实大小。
cover：等比例缩放到完全覆盖容器。
有可能超出容器。
contain：将背景图等比例缩放到宽度或者高度与容器的宽度或者高度相等，始终都在容器内。
7.background-clip：指定对象的背景图像向外裁剪的区域。
取值：padding-box：从padding区域(不含padding)开始向外裁剪背景。
border-box：从border区域(不含border)开始向外裁剪背景。
content-box：从content 区域开始向外裁剪背景。
text：从前景内容的形状做为裁剪区域向外裁剪。
8.background-origin：指定对象的背景图像显示的原点。
取值：padding-box：从padding区域(不含padding)开始向外裁剪背景。
border-box：从border区域(不含border)开始向外裁剪背景。
content-box：从content 区域开始向外裁剪背景。
二、颜色：color：设置对象的文本颜色。
可使用颜色名，rgb，hex，rgba，hsl，hsla，transparent等等来设置。
opacity：设置对象的不透明度。
取值范围为0.0-1.0。
opacity：0.2
opacity：0.8
二：边框(Border)
一.边框：border 设置对象边框的特性。
1.语法：border：length style color
2.style：none ，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset。
二.相关属性。
1.border-width：设置边框宽度：常用取值：medium：默认值，相当于3px。
thin：1px。
thick：5px。
不可以为负值。
2.border-color:设置边框颜色。
3.border-top:设置顶部边框。
border-top-width,border-top-style,border-top-color 分别设置宽度，样式以及颜色
4.border-right：设置右边框。
5.border-bottom：设置底边框。
6.border-left：设置左边框。
7.border-radius：设置对象使用圆角边框。
取值为数字或者百分比。
8.当然也可以给4个角单独的设置：
左上角：border-top-left-radius，右上角：border-top-right-radius，左下角：border-bottom-left-radius，右下角：border-bottom-right-radius
9.box-shadow:设置对象阴影。
第一个值：设置水平方向阴影偏移量。
第二个值：设置垂直方向阴影偏移量。
第三个值：设置对象的阴影模糊值。
不允许为负值
第四个值：设置对象的阴影外延值，不允许为负值
第五个值：color。
第六个值：inset，阴影在左上位置，如下图：box-
shadow:6rpx 6rpx 6rpx 6rpx rebeccapurple inset
10.border-image：对象的边框样式使用图片来填充。
1>border-image-source:设置图片的来源。
使用绝对或者相对地址或者渐变色来确定图片。
2>border-image-slice :设置边框背景图的分隔方式。
取值：数值/百分比fill.该属性指定从上右下左来分割图片，将图像分成4个角，4条边以及中间区域。
中间区域始终是透明的，除非使用关键字fill。
3>border-image-width:设置边框背景的宽度。
用于指定使用多厚的边框来承载呗裁剪后的图像。
4>border-image-outset：设置对象的边框背景图的扩展，意思就是说假如设置了10rpx，那么图像就会在原来基础上外延10rpx在显示。
5>border-image-repeat：设置对象的边框图片的平铺方式。
stretch:拉伸。
repeat：平铺，碰到边界的时候截断。
round：根据边框的尺寸动态调整图片的大小，使得刚好可以铺满整个边框。
space：根据边框的尺寸动态调整图片的之间的间距，使得刚好铺满整个边框。