微信小程序WXSS样式全解

尺寸
1.高度

height: 高度
line-height: 行高
max-height: 最大高度
min-heught: 最小高度

2.宽度

width: 宽度
max-width: 最大宽度
min-width: 最小宽度

3.设置方法

像素值
    px，如20px
    rp

List item

x，如20rpx

• 说明：px=2rpx

  百分比
  如10%

背景
1.backgroung

多属性的缩略写法，顺序分别是background-color,图像地址，图像重复，图像是否重 复 ，图像是否固定，图像位置
2.background-attachment:图像是否固定，或随着页面的其余部分滚动

默认值scroll，即随着页面其余部分滚动
fixed，图像固定不动
inherit，从父元素继承background-attachment属性值

3.bacground-color:背景颜色

color_name,颜色名称，如red
hex_number,颜色16进制值，如：#00ff00
rgb_number ,rgb背景颜色，如rgb(255,123,111)
transparent,默认值即透明
inherit,从父元素继承background-image属性的值

4.background-image：背景图像，不能在wxss中定义

默认值none，即不显示图像
url(“url”),指向图像的路径
inherit，从父元素继承background-image属性的值

5.background-position：设置背景图片的位置

默认值0%0%，如果只设置了一个关键词，则第二个默认是center
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
    第一值是水平位置，第二个值是垂直位置
    左上角是0% 0%，右下角是100% 100%
    如果只设置了第一个值，第二个值默认是50%
xpos ypos
    第一值是水平位置，第二个值是垂直位置
    左上角是0 0
    如果只设置了第一个值，第二个值默认是50%

6.background-repeat：如何重复背景图像

默认值repeat, 背景图像将在垂直方向和水平方向重复
repeat-x ,在水平方向重复
repeat-y ,在垂直方向重复
no-repeat ,仅显示一次
inherit ,从父元素继承background-repeat属性设置

边框
1.border

针对四个边的属性设置，border-width,border-style,border-color的缩写，如border: 5px soild green
2.border-style:元素所有边框的样式

默认值none，即无边框
hidden，隐藏边框，同none
dotted，点状边框
dashed，虚线边框
solid，实线
doubie，双线
groove，3D凹槽边框
ridge，3D垄状边框
inset，3Dinset 边框
outset，3Doutset边框
inherit，从父元素继承边框样式

3.border-width:边框的高度
4.border-color：边框的颜色
5.上边框

border-top:上边框的属性
border-top-color：上边框的颜色
border-top-style：上边框的样式
border-top-width: 上边框的宽度

6.下边框

border-bottom:下边框的属性
border-bottom-color：下边框的颜色
border-bottom-style：下边框的样式
border-bottom-width: 下边框的宽度

7.左边框

border-left:左边框的属性
border-left-color：左边框的颜色
border-left-style：左边框的样式
border-left-width: 左边框的宽度

8.右边框

border-right:右边框的属性
border-right-color：右边框的颜色
border-right-style：右边框的样式
border-right-width: 右边框的宽度

9.border-radius:圆角
轮廓
1.元素周围的一条线，即在边框边缘的外围
2.outline：

outline-color
outline-style
outline-width

3.outline-color:轮廓颜色
4.outline-style:轮廓样式
5.outline-width:轮廓宽度

none:无轮廓，默认值
dotted:点状轮廓图
dashed：虚线轮廓
solid：实现轮廓
double：双线轮廓
groove：3D凹槽轮廓
ridge：3D凸轮廓
inset：3D凹边轮廓
outset：3D凸边轮廓
inherit：从父元素继承轮廓

边距
1.内边距

padding：四个边距，padding-top，padding-right，padding-bottom，padding-left的简写，如：padding：10px 10px 10px 10px；
padding-top:上边距
padding-right:右边距
padding-bottom:下边距
padding-left:左边距

2.外边距

margin:top right bottom left
margin-top:上外边距:(1)默认值0，允许使用负值 （2）auto （3） length固定的值 （4）%基于父对象总高度的百分比上外边距 （5）inherit从父元素继承上外边距
margin-right:右外边距
margin-bottom：下外边距
margin-left：左外边距

3.外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度重的较大者。

文本
1.color:文本颜色

颜色名称，如：red
十六进制颜色值，如：#ff00dd
rgb颜色值，如：rgb（10,111,233）
inherit：从父元素继承颜色值

2.direction：文本方向

ltr：默认值，从左向右
rtl：从右向左
inherit：从父元素继承

3.line-height：行高

normal：默认，设置合理的行间距
number:设置的数字会与当前的字体尺寸相乘来设置行间距
length：设置固定的行间距
%：基于当前字体尺寸的百分比间距
inherit：从父元素继承

4.letter-spacing字符间距

normal:默认，没有额外的空间
length：固定空间，允许使用负值
inherit：从父元素继承

5.text-align：对齐元素中的文本

left:默认，文本排序到左边
right：文本排序到右边
center：文本排列到中间
justify：两端对齐
inherit：从父元素继承

6.text-decoration：祥文本中添加修饰

none:默认
underline:文本下的一条线
overline：文本上的一条线
line-through：穿过文本下的一条线，即删除线
blink：闪烁的文本
inherit：从父元素继承

7.text-indent：缩进元素中文本的首行

length：默认值0,固定的缩进
%：基于父元素宽度的百分比
inherit：从父元素继承

8.text-shadow:设置文件阴影
9.text-transform:控制元素中的字母

none：默认，标准的文本
capitalize：每个单词以大写字母开头
uppercase：大写字母
lowercase：小写字母
inherit：从父元素继承

10.unicode-bidi:设置文本方向
11.white-space:设置元素中空白的处理方式

normal:默认，空白会被浏览器忽略
pre：空白会被浏览器保留
nowrap：文件不会换行，直到遇到
标签换行
pre-wrap：保留空白符序列，正常换行
pre-line：合并空白符序列，保留换行符
inherit：从父元素继承

12.word-spacing:设置字间距

normal:默认，定义标准空间
length：固定空间
inherit：从父元素继承

尺寸
1.高度

height: 高度
line-height: 行高
max-height: 最大高度
min-heught: 最小高度

2.宽度

width: 宽度
max-width: 最大宽度
min-width: 最小宽度

3.设置方法

像素值
    px，如20px
    rpx，如20rpx
    说明：px=2rpx
百分比
如10%

背景
1.backgroung

多属性的缩略写法，顺序分别是background-color,图像地址，图像重复，图像是否重 复 ，图像是否固定，图像位置
2.background-attachment:图像是否固定，或随着页面的其余部分滚动

默认值scroll，即随着页面其余部分滚动
fixed，图像固定不动
inherit，从父元素继承background-attachment属性值

3.bacground-color:背景颜色

color_name,颜色名称，如red
hex_number,颜色16进制值，如：#00ff00
rgb_number ,rgb背景颜色，如rgb(255,123,111)
transparent,默认值即透明
inherit,从父元素继承background-image属性的值

4.background-image：背景图像，不能在wxss中定义

默认值none，即不显示图像
url(“url”),指向图像的路径
inherit，从父元素继承background-image属性的值

5.background-position：设置背景图片的位置

默认值0%0%，如果只设置了一个关键词，则第二个默认是center
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
    第一值是水平位置，第二个值是垂直位置
    左上角是0% 0%，右下角是100% 100%
    如果只设置了第一个值，第二个值默认是50%
xpos ypos
    第一值是水平位置，第二个值是垂直位置
    左上角是0 0
    如果只设置了第一个值，第二个值默认是50%

6.background-repeat：如何重复背景图像

默认值repeat, 背景图像将在垂直方向和水平方向重复
repeat-x ,在水平方向重复
repeat-y ,在垂直方向重复
no-repeat ,仅显示一次
inherit ,从父元素继承background-repeat属性设置

边框
1.border

针对四个边的属性设置，border-width,border-style,border-color的缩写，如border: 5px soild green
2.border-style:元素所有边框的样式

默认值none，即无边框
hidden，隐藏边框，同none
dotted，点状边框
dashed，虚线边框
solid，实线
doubie，双线
groove，3D凹槽边框
ridge，3D垄状边框
inset，3Dinset 边框
outset，3Doutset边框
inherit，从父元素继承边框样式

3.border-width:边框的高度
4.border-color：边框的颜色
5.上边框

border-top:上边框的属性
border-top-color：上边框的颜色
border-top-style：上边框的样式
border-top-width: 上边框的宽度

6.下边框

border-bottom:下边框的属性
border-bottom-color：下边框的颜色
border-bottom-style：下边框的样式
border-bottom-width: 下边框的宽度

7.左边框

border-left:左边框的属性
border-left-color：左边框的颜色
border-left-style：左边框的样式
border-left-width: 左边框的宽度

8.右边框

border-right:右边框的属性
border-right-color：右边框的颜色
border-right-style：右边框的样式
border-right-width: 右边框的宽度

9.border-radius:圆角
轮廓
1.元素周围的一条线，即在边框边缘的外围
2.outline：

outline-color
outline-style
outline-width

3.outline-color:轮廓颜色
4.outline-style:轮廓样式
5.outline-width:轮廓宽度

none:无轮廓，默认值
dotted:点状轮廓图
dashed：虚线轮廓
solid：实现轮廓
double：双线轮廓
groove：3D凹槽轮廓
ridge：3D凸轮廓
inset：3D凹边轮廓
outset：3D凸边轮廓
inherit：从父元素继承轮廓

边距
1.内边距

padding：四个边距，padding-top，padding-right，padding-bottom，padding-left的简写，如：padding：10px 10px 10px 10px；
padding-top:上边距
padding-right:右边距
padding-bottom:下边距
padding-left:左边距

2.外边距

margin:top right bottom left
margin-top:上外边距:(1)默认值0，允许使用负值 （2）auto （3） length固定的值 （4）%基于父对象总高度的百分比上外边距 （5）inherit从父元素继承上外边距
margin-right:右外边距
margin-bottom：下外边距
margin-left：左外边距

3.外边距合并

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度重的较大者。

文本
1.color:文本颜色

颜色名称，如：red
十六进制颜色值，如：#ff00dd
rgb颜色值，如：rgb（10,111,233）
inherit：从父元素继承颜色值

2.direction：文本方向

ltr：默认值，从左向右
rtl：从右向左
inherit：从父元素继承

3.line-height：行高

normal：默认，设置合理的行间距
number:设置的数字会与当前的字体尺寸相乘来设置行间距
length：设置固定的行间距
%：基于当前字体尺寸的百分比间距
inherit：从父元素继承

4.letter-spacing字符间距

normal:默认，没有额外的空间
length：固定空间，允许使用负值
inherit：从父元素继承

5.text-align：对齐元素中的文本

left:默认，文本排序到左边
right：文本排序到右边
center：文本排列到中间
justify：两端对齐
inherit：从父元素继承

6.text-decoration：祥文本中添加修饰

none:默认
underline:文本下的一条线
overline：文本上的一条线
line-through：穿过文本下的一条线，即删除线
blink：闪烁的文本
inherit：从父元素继承

7.text-indent：缩进元素中文本的首行

length：默认值0,固定的缩进
%：基于父元素宽度的百分比
inherit：从父元素继承

8.text-shadow:设置文件阴影
9.text-transform:控制元素中的字母

none：默认，标准的文本
capitalize：每个单词以大写字母开头
uppercase：大写字母
lowercase：小写字母
inherit：从父元素继承

10.unicode-bidi:设置文本方向
11.white-space:设置元素中空白的处理方式

normal:默认，空白会被浏览器忽略
pre：空白会被浏览器保留
nowrap：文件不会换行，直到遇到
标签换行
pre-wrap：保留空白符序列，正常换行
pre-line：合并空白符序列，保留换行符
inherit：从父元素继承

12.word-spacing:设置字间距

normal:默认，定义标准空间
length：固定空间
inherit：从父元素继承

字体
1.fornt:多个属性的简写
2.font-family:字体系列
3.font-size：字体尺寸

length：设置为一个固定的值
%：设置为基于父元素的一个百分比值
larger：设置为比父元素更大的尺寸
smaller：设置为比父元素更小的尺寸
insert：从父元素继承
取值：
    xx-samll:最小值
    x-smaller
    small
    medium：默认值
    large
    x-large
    xx-large：最大值

4.font-size-adjust:字体智能缩放

none:默认
number：定义字体的aspect值比率
    首选字体的尺寸*（font-size-adjust值/可用字体的aspect值）=可应用到可用字体的字体尺寸
    取值：0.1~1

5.font-stretch：水平拉伸

normal：默认
wider：更进一步的进展
narrower：更进一步的收缩
取值
    ultra-condensed：最宽的值
    extra-condensed
    condensed
    semi-condensed
    semi-expanded
    expanded
    extra-expanded
    ultra-expanded：最窄的值

font-style：字体风格

normal：默认
italic：斜体
oblique：倾斜
inherit：从父元素继承

font-variant：以小型大写字体或者正常字体显示文本

normal：默认
small-caps：显示小型大写字母
inherit：从父元素继承

font-weight：字体的粗细

normal：默认，值等同于400，取值100~900
bold：定义粗字符，值等同于700
bolder：定义更粗的字符
lighter：定义更细的字符
inherit：从父元素继承

列表
list-style：简写属性（list-style-type，list-style-position，list-style-image）
list-style-image：设置图像为列表标志

none：默认，无图形
URL：图像的路径
inherit：从父元素继承

list-style-type:列表项标志的类型

none：无标志
disc：默认，空心圆
circle：空心圆
square：实心方块
decimal：数字0~n
decimal-leading-zero：0开头的数字01~0n
lower-Roman：小罗马数字
upper-Roman：大罗马数字
lower-alpha：小写英文字母
upper-alpha：大写英文字母
lower-Greek：小写希腊字母
upper-Greek：大写希腊字母
lower-Latin：小写拉丁字母
upper：大写拉丁字母
Hebrew：传统希伯来编号
armenian：传统亚美尼亚编号
Georgian：传统乔治亚编号
cjk-ideographic：表单数字
hiragana：小写日文片假名，如a,i,u,e,o,ka,ki
katakana：大写日文片假名，如：A,I,U,E,O,KA,KI
hiragana-iroha：小写日文片假名，如：i,ro,ra,hi,ho,he,to
katakana-iroha：大写日文片假名，如I,RO,HA,NI,HO,HE,TO

表格
border-collapse，表格边框合并为单一的边框

separate，默认，边框被分开
collapse，边框合并为一个单一的边框
inherit，从父元素继承

border-spacing，分隔单元格边框的距离

length length
    相邻单边框的距离，不允许用负值
    只有一个length时，定义的是水平和垂直的间距
    有两个length时，一个定义水平间距，另一个定义垂直间距
inherit，从父类元素继承

cpation-side，表格标题的位置

top，默认，定位在表格之上
bottom，定位在表格之下
inherit，从父元素继承

empty-cells，是否显示表格中的空单元格

show，默认，在空单元格周围绘制边框
hide，不在空单元格周围绘制边框
inherit，从父元素继承

table-layout，显示单元、行和列的算法

automatic，默认，列宽由单元格内容设定
fixed，列宽由表格宽度和列宽设定
inherit，从父元素继承

基本选择器
类选择器 .name{…}

定义，如：.viewStyle{…}
使用，如： <view class=“viewStyle”>…</view>

ID选择器 #name{…}

定义，如： <view id=“idStyle”>…</view>

元素选择器 name{…}

定义：如：view{…}
使用，如：<view>…</view>

通配符选择器 *{}
包含选择器

p c{…},即parent child{…}
父元素下的所有层的子元素

子元素选择器

p>c{…},即parent>child{…}
父元素的下一层的子元素

邻近兄弟元素选择器 c + c{}
通用兄弟元素选择器 c ~ c{…}
属性选择器
属性字头选择器 E[attr|= “value” ]
属性开头选择器 E[attr^= “value”]
属性包含选择器 E[attr*= “value”]
属性单词选择器 E[attr~= “value”]
属性结尾选择器 E[attr$= “value”]
属性均等选择器 E[attr= “value”]
属性非均等选择器 E[attr!= “value”]
伪类选择器
动态伪类选择器

:link
:visited
:hover
:active
:focus

状态伪类选择器

:enabled,启用
:disabled,禁用
:checked,选中

选择伪类选择器

:first-child
:last-child
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
first-of-type
last-of-type
only-child
only-of-type

空内容伪类选择器 :empty
否定伪类选择器 :not
伪元素

::first-line
::first-letter
::before
::after
::selection

————————————————
版权声明：本文为CSDN博主「Cherrison_Time」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41984634/article/details/89738079