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、实际⼯作中⽤的最多的是背景图⽚居中对齐。
CSS中background的用法
CSS中background的⽤法CSS中 background 是⼀个很基本的⽽且⽐较常⽤的样式background : background-color || background-image || background-repeat || background-attachment || background-size || background-clip || background-position这个是 background 的⼏个参数，这些参数并不是都要写上的。
1.background-color：背景颜⾊，这⾥可以写英⽂，可以写RGB，可以写#xxxxxxtransparent : 背景⾊透明2.background-image：背景图⽚，只能写 none 或者 url (url)3.background-repeat：背景图象的平铺repeat : 背景图像在纵向和横向上平铺no-repeat : 背景图像不平铺repeat-x : 背景图像在横向上平铺repeat-y : 背景图像在纵向平铺4.background-attachment：背景图象的流动性scroll : 背景图像是随对象内容滚动fixed : 背景图像固定5.background-size : 背景图⽚尺⼨属性length : 可以是尺⼨percentage ：百分⽐auto ：⾃动（默认值）cover ：按⽐例调整背景图⽚，这个属性值跟contain正好相反，背景图⽚会按照⽐如⾃适应铺满整个背景区域。
假如背景区域不⾜以包含背景图⽚的话，那么背景图⽚就会被咔嚓。
覆盖，背景要覆盖元素的所有区域，不能有空⽩出现。
contain ：按⽐例调整背景图⽚，使得其图⽚宽⾼⽐⾃适应整个元素的背景区域的宽⾼⽐，因此假如指定的图⽚尺⼨过⼤，⽽背景区域的整体宽⾼不能恰好包含背景图⽚的话，那么其背景某些区域可能会有空⽩。
包含，整个背景图都要被包含在元素内，没有超出的部分。
wxss样式写法
wxss样式写法WXSS (WeiXin Style Sheets) 是微信小程序中的样式语言，其语法与CSS 非常相似，但是有一些微信特定的扩展和限制。
以下是一些基本的WXSS 样式写法：1.选择器：WXSS 的选择器与CSS 的选择器基本相同，例如，你可以选择一个类名、ID 或者元素。
css.myClass {color: red;}2.盒模型：WXSS 的盒模型与标准CSS 的盒模型有所不同，它默认不包含边距和边框。
你需要使用box-sizing属性来控制盒模型的行为。
cssbox-sizing: border-box;3.尺寸单位：WXSS 使用rpx (responsive pixel) 作为尺寸单位，rpx 可以根据屏幕宽度自适应。
你还可以使用vw、vh 等视窗单位。
4.样式属性：WXSS 支持大部分CSS 属性，例如color、background-color、font-size、margin、padding等。
同时，WXSS 还支持微信特有的属性，例如flex、flex-direction、align-items等。
5.样式规则的顺序：在WXSS 中，样式的优先级由高到低依次是：内联样式> 自定义样式> 微信内置样式。
6.特殊属性：WXSS 还有一些特殊的属性，例如display、position、flex等，这些属性在微信小程序中有特殊的行为或限制。
7.条件编译：WXSS 支持条件编译，你可以使用wx:if、wx:elif、wx:else来根据条件编译不同的样式。
8.媒体查询：WXSS 也支持媒体查询，你可以根据设备的宽度、高度等来应用不同的样式。
9.样式的作用域：在微信小程序中，样式的作用域默认是组件的内部，也就是说，组件内部的样式会覆盖外部的同名样式。
以上是一些基本的WXSS 样式写法，具体的属性和语法还需要参考微信小程序的官方文档。
wxss 手册
wxss 手册引言概述WXSS（WeChat Style Sheets）是微信小程序中的样式表语言，用于定义小程序的页面样式和布局。
WXSS借鉴了CSS的语法，但也有一些特有的语法和规则。
本手册将深入介绍WXSS的基本概念、语法规则以及一些高级特性，旨在帮助开发者更好地理解和使用WXSS，提高小程序样式设计的效率和质量。
1. 基本概念1.1 WXSS简介1.1.1 WXSS的定义WXSS是一种样式表语言，专门用于微信小程序，用于描述小程序的页面元素的样式。
1.1.2 WXSS与CSS的关系本小点将详细介绍WXSS与CSS的关系，包括相似的语法、不同的特性以及在小程序中的应用场景。
1.2 样式规则1.2.1 选择器WXSS中的选择器用于选择页面中的元素，了解WXSS中支持的选择器类型及其用法。
1.2.2 样式声明详细说明如何使用样式声明定义元素的样式，包括颜色、字体、边距等。
1.2.3 优先级介绍WXSS中样式优先级的计算方式，帮助开发者理解和调整样式的权重。
1.3 布局与盒模型1.3.1 盒模型解释WXSS中的盒模型，包括内容框、内边距、边框和外边距。
1.3.2 布局方式介绍WXSS中的常用布局方式，包括Flex布局和Grid布局，以及它们的应用场景。
1.3.3 响应式设计讲解如何使用WXSS实现响应式设计，使小程序在不同设备上都能够良好展示。
2. WXSS高级特性2.1 自定义样式变量2.1.1 定义和使用介绍如何在WXSS中定义自定义样式变量，并在样式中灵活使用。
2.1.2 作用域解释自定义样式变量的作用域，以及在不同作用域中的优先级。
2.2 动画和过渡2.2.1 CSS动画学习如何使用WXSS创建元素的动画效果，包括关键帧动画等。
2.2.2 过渡效果介绍WXSS中过渡效果的应用，使元素的状态变化更加平滑。
2.3 条件样式与模板2.3.1 条件样式了解如何根据不同条件应用不同的样式，实现更灵活的样式控制。
浅谈background的用法
浅谈background的⽤法div css 背景样式background属性⼀、语法及参数1、语法：background : background-color(颜⾊) || background-image(图⽚地址) || background-repeat(平铺⽅式) || background-attachment(固定⽅式) || background-position(定位⼤⼩)2、background参数：background属性是复合属性。
通俗说background后值可以设置为多值，包括背景颜⾊，背景图⽚等等，以及位置和平铺⽅式的更改等等。
⼆、background写法1、整体写background:url(图⽚地址) no-repeat 20px 20px;2、分开写就需要⽤到background-image:url(图⽚地址);background-repeat(平铺⽅式) background-position(定位)三、background详解分析css background背景样式结构分析上⾯（⼆）中的css进⾏⼀个详细的说明1>url我就不说了没什么可以说的2>平铺⽅式repeat:默认的，背景图像将在垂直⽅向和⽔平⽅向重复。
repeat-x：背景图像将在⽔平⽅向重复，当然y的话就是垂直了no-repeat:图⽚显⽰⼀次inherit：简单来说的话就是继承⽗元素的3>定位上⾯的20px 20px分别代表的意思是 --------->距左边20px，距上边20px接下来第⼀个20px的位置实际上有三个属性left right center 图⽚靠左开始显⽰靠右⽔平居中第⼆个20px位置也有三个属性top bottom center 图⽚靠上开始显⽰靠下垂直居中四、设置背景颜⾊1、背景颜⾊设置实例CSS代码background:red设置背景颜⾊为红⾊2、承接上⾯的代码我们可以如下操作background:red url(图⽚地址) no-repeat 20px 20px;这段css代码和上⾯差不多，唯⼀多的地⽅就是背景图⽚显⽰不到的地⽅就是⽤红⾊代替。
【CSS】使用边框和背景
【CSS】使⽤边框和背景1. 应⽤边框样式先从控制边框样式的属性开始。
简单边框有三个关键属性：border-width、border-style 和 border-color 。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Example</title><style type="text/css">p{border-width:5px;border-style:solid;border-color: black;;}</style></head><body><p>你的特别不是因为你在创业，不是因为你进了⽜企，不是因为你的⽜offer，⽽是因为你就是你，坚信⾃⼰的特别，坚信⾃⼰的内⼼，勇敢做⾃⼰。
IT DOESN'T MATTER WHERE YOU ARE, IT MATTERS WHO YOU ARE.</p></body></html>在代码中，使⽤了p元素定义了⼀个段落，使⽤ style 元素为这个段落应⽤边框样式，边框样式是通过设置 border-width、border-style 和border-color 属性来定义的。
1.1 设置边框的宽度border-width 属性的取值可能是常规CSS长度值，可能是边框绘制区域宽度的百分数，也可能是三个快捷值中的任意⼀个。
下表描述了边框宽度的可能取值。
边框宽度默认值是 medium 。
1.2 定义边框样式border-style 属性的值可以是下表的任意⼀个。
默认值是 none，即没有。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Example</title><style type="text/css">span { width:160px; height: 100px; margin: 5px; display: block; float: left; text-align: center;line-height: 100px;}.border-none { border-style: none;}.border-dashed { border-style: dashed;}.border-dotted { border-style: dotted;}.border-double { border-style: double;}.border-groove { border-style: groove;}.border-inset { border-style: inset;}.border-outset { border-style: outset;}.border-ridge { border-style: ridge;}.border-solid { border-style: solid;}</style></head><body><div><span class="border-none">None</span><span class="border-dashed">Dashed</span><span class="border-dotted">Dotted</span><span class="border-double">Double</span><span class="border-groove">Groove</span><span class="border-inset">Inset</span><span class="border-outset">Outset</span><span class="border-ridge">Ridge</span><span class="border-solid">Solid</span></div></body></html>这些边框的外观效果如下图所⽰：1.3 位⼀条边应⽤边框样式元素的四条边可以应⽤不同的边框样式，这就要⽤到特定属性，如下表所⽰：可以使⽤这些元素为元素的边应⽤边框样式，也可以将它们与更为通⽤的属性结合使⽤来颠覆特定的边框样式。
微信小程序wxml和wxss样式
微信⼩程序wxml和wxss样式对于css不熟悉的android程序员来说，开发微信⼩程序⾯临的⼀个⽐较困难的问题就是界⾯的排版了。
微信⼩程序的排版就跟wxml和wxss 有关了，它们两者相当于android的布局⽂件，其中wxml指定了界⾯的框架结构，⽽wxss指定了界⾯的框架及元素的显⽰样式。
⼀、wxml界⾯结构wxmL⽐较容易理解，主要是由⼋⼤类基础组件构成：⼀、视图容器(View Container)：⼆、基础内容(Basic Content)组件名说明组件名说明view视图容器icon图标scroll-view可滚动视图容器text⽂字swiper可滑动的视图容器progress进度条三、表单组件(Form)四、操作反馈组件(Interaction)组件名说明组件名说明button按钮action-sheet上拉菜单form表单modal模态弹窗input输⼊框progress进度条checkbox多项选择器toast短通知radio单项选择器五、导航(Navigation)picker列表选择器组件名说明slider滑动选择器navigator应⽤内跳转switch开关选择器label标签六、多媒体(Media)七、地图(Map)组件名说明组件名说明audio⾳频map地图image图⽚video视频⼋、画布(Canvas)组件名说明canvas画布关于这⼋⼤类的属性和具体⽤法可参考以下参考⽂献链接：⼆、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语句来导⼊外联样式表，其后⾯跟需要导⼊外联样式表的相对路径，并以分号结束。
css3系列之详解background
css3系列之详解backgroundbackgroundbackground 的⼏个属性回顾⼀下，⽽且还有css3 的⼏个属性。
----------------------------------------------------------------------------------------------------------------- background-color:设置背景颜⾊⽀持单词，⼗六进制正整数 #ff0 rgb rgba hsl hsla transparent background-image:设置⼀张图⽚，或者多张背景图⽚⼀般的话，也没有⼈使⽤background-image 来放两张图⽚，在⽹络不好的情况下，有可能图⽚显⽰不出来，那么我们不能留个空位给⽤户看吧。
所以，这个时候，你可以再设置多⼀张图⽚，⽤来，第⼀张图⽚显⽰不出来的时候占位 background-repeat:设置图⽚是否平铺，和平铺的效果参数： repeat-x repeat-y repeat no-repeat 这⼀⾏值，只能设置⼀个。
round space 这⼀⾏值，可以设置⼀个或两个第⼀个值代表横向，第⼆个值代表纵向。
如果只设置了⼀个值，那么这个值会应⽤于横向和纵向 默认值是：repeat 表⽰在横向，和纵向都平铺 round：当背景图像不能以整数次平铺时，会根据情况缩放图像。
也就是说，如果图⽚平铺的⼤⼩不能再添加⼀个图⽚进去，会压缩，或者拉伸其他图⽚。
记得这个 round 会拉伸，或者压缩图⽚就⾏， space,他不会拉伸图⽚，但是有空⽩区域 space不够填充的地⽅，有空⽩区域，但是不会拉伸图⽚。
background-position:根据容器来定位图⽚的位置。
默认值是：0% 0% ，第⼀个值设置 left 第⼆个值设置 top。
如果只设置⼀个值，第⼆个值默认是 center 可以接受定位第⼆张图⽚，第三张图⽚的写法，只需要加个，号例如： background-position: 0 0 , 10px 10px background-attachment：定义滚动时背景图像相对于谁固定参数： scroll：其实很像 position: 的 fixed 效果。
使用CSS设置边框和背景
使用CSS设置边框和背景一、设置边框1、边框样式a、border-width属性自定义边框的宽度时，不能定义为百分比。
b、border-style属性以上属性可以设置一个、二个、三个、四个属性值，当设置一个值得时候四条边框都应用该属性值，当设置两个的时候时候上下使用第一个属性值，左右使用第二个属性值，当设置三个值的时候，第一个值应用在上边框，第二个应用到左右边框，第三个属性值应用到下边框当设置了四个属性值，按着顺时针的方向一次应用。
大部分情况下groove、ridge、inset、outset可以会使用双色边框，但是当border-color属性这设置成black是，两种颜色都会显示成黑色。
2、为一条边应用边框样式boder-top/bottom/right/left-width/style/color 用来设置一条边框的样式，可以和通用属性结合使用。
还可以使用border-bottom/top/left/right一次设置一条边框。
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Document</title>6<style type="text/css">7 div{8 width: 100px;9 height:200px;10 border-width: 10px;11 border-style: ridge;12 border-color: red;13 border-top-style: double;14 }15</style>16</head>17<body>18<div>1920</div>21</body>22</html>3、使用border简写属性可以使用一次来设置border的宽度、样式、颜色，三个属性值之间用空格分开。
css--背景和列表
css--背景和列表背景背景样式：background-color 设置元素的背景颜⾊background-image 把图像设置为背景background-repeat 设置背景图像是否重复及如何重复background-attachment 背景图像是否固定或者随着页⾯的其余部分滚动background-position 设置背景图像的起始位置background 简写属性，作⽤是将背景属性设置在⼀个声明中background-color设置元素的背景颜⾊background-color:颜⾊ | transparent说明：transparents是全透明⿊⾊的速记法，类似rgba(0,0,0,0)这样的值颜⾊值：（颜⾊名 | RGB | ⼗六进制）背景区包括内容，内边距（padding）和边框，不包含外边距（margin）<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p{height: 200px;width: 200px;background-color: red;}</style></head><body><p class="d1">CSS背景和列表</p></body></html>View Code上⾯代码我们给设置了⼀个红⾊的背景⾊我们给加上边距padding，发现变成了220*220的背景<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p{height: 200px;width: 200px;background-color: red;}p{padding: 10px}</style></head><body><p class="d1">CSS背景和列表</p></body></html>View Code我们在给加上5px的边框，实线<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p{height: 200px;width: 200px;background-color: red;}p{border: 5px solid}</style></head><body><p class="d1">CSS背景和列表</p></body></html>刷新代码我们发现，背景⾊还是200*200，这是因为边框的背景⾊默认为内容的颜⾊，因为内容的颜⾊是⿊⾊，所以边框的背景将我们设置的红⾊背景覆盖了，我们可以将solid换成虚线dashed，这样我们就能看出效果了<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p{height: 200px;width: 200px;background-color: red;}p{border: 5px dashed}</style></head><body><p class="d1">CSS背景和列表</p></body></html>View Code我们在给加上外边距margin<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p{height: 200px;width: 200px;background-color: red;}p{margin: 10px}</style></head><body><p class="d1">CSS背景和列表</p></body></html>View Code刷新发现背景⼤⼩还是200*200，所以印证了背景区包括内容，内边距（padding）和边框，不包含外边距（margin）background-image设置元素的背景图⽚background-image:URL | none说明：URL地址可以是相对地址也可以是绝对地址元素的背景占据了元素的全部尺⼨，包括内边距和边框，但不包括外边距默认的，背景图像位于元素的左上⾓，并在⽔平和垂直⽅向上重复（⽐如图⽚的⼤⼩为25*25，我们设置的背景图⽚的⼤⼩为100*100，这样的话，图⽚会显⽰16张，重复显⽰）<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p{width: 300px;height: 300px;background-image: url("bg.png")}</style></head><body><p class="d1"></p></body></html>background-repeat设置背景图像是否重复及如何重复上⾯我们设置的图⽚重复显⽰了，但是⼤多数情况下，我们不想让图⽚重复显⽰，这时就要⽤到background-repeat了语法：background-repeat:repeat | no-repeat | repeat-x | repeat-yrepeat 默认值，背景图⽚⽔平⽅向和垂直⽅向重复no-repeat 背景图⽚不重复repeat-x 背景图⽚⽔平⽅向重复repeat-y 背景图⽚垂直⽅向重复<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p{width: 200px;height: 200px;border: 1px solid red;background-image: url("bg-little.png");background-repeat: repeat-x;}</style></head><body><p class="d1"></p></body></html>background-attachment设置元素的背景图⽚的显⽰⽅式background-attachment:scroll | fixed说明：scroll 默认值，背景图⽚随滚动条滚动fixed 当页⾯的其余部分滚动时，背景图⽚不会移动<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p{width: 200px;height: 2000px;border: 1px solid red;background-image: url("bg-little.png");background-repeat: no-repeat;background-attachment:fixed;}</style></head><body><p class="d1"></p></body></html>background-position设置元素的背景图⽚的起始位置background-position：百分⽐ | 值或者 top | right | left | bottom | center背景缩写如果我们想加上背景图⽚，固定，不重复等等，那我们可以简写<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p{ width: 100%;height: 1000px;border: 1px solid red;background: url("bg-little.png") no-repeat fixed}</style></head><body><p class="d1"></p></body></html>各值之间⽤空格分割，不分先后顺序CSS列表样式list-style-type 设置列表项标志的类型list-style-image 将图像设置为列表项标志list-style-position 设置列表中列表项标志的位置list-style 简写属性，⽤于把所有列表的属性设置在⼀个声明中list-style-type设置列表项的标记样式类型list-style-type：关键字 | none<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style></style></head><body><ul><li>测试</li><li>开发</li><li>产品</li></ul></body></html>我们打开上⾯的⽹页，发现li标签有默认样式⼩圆点，但我们有时候不需要这些样式或者想换个样式，这时候就要⽤到list-style-type了去掉默认的样式，将list-style-type设置为none<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>li {list-style-type: none}</style></head><body><ul><li>测试</li><li>开发</li><li>产品</li></ul></body></html>点我还有其他的样式，如下图，⼤家可以⾃⼰去尝试⽆序列表有序列表使⽤图⽚设置列表项的标记有时候我们想在列表的前⾯显⽰⼀些⼩图标，这样上⾯的⽅法就不能满⾜我们的需求了，我们就要⽤到list-style-image了，⽐如我们想要达到下⾯的效果<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>li {list-style-image:url("remind.png")}</style></head><body><ul><li>测试</li><li>开发</li><li>产品</li></ul></body></html>点我列表项标记位置设置列表项的标记位置list-style-position:inside | outsideinside:列表项⽬标记放置在⽂本以内，且环绕⽂本根据标记对齐outside：默认值，列表项⽬标记放在⽂本以外，且环绕⽂本不根据标记对齐好吧，我知道你没有看懂，直接看效果吧使⽤inside的效果<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>li {list-style-position: inside;list-style-image: url("remind.png")}</style></head><body><ul><li>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</li> <li>开发</li><li>产品</li></ul></body></html>点我偷看使⽤outside的效果<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>li {list-style-position: outside;list-style-image: url("remind.png")}</style></head><body><ul><li>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</li> <li>开发</li><li>产品</li></ul></body></html>点我偷看list-style简写⽅式，看下图，懒的敲代码。
- 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：根据边框的尺寸动态调整图片的之间的间距，使得刚好铺满整个边框。