#微信小程序开发系列#CSS摘要-技术圈

-Start：关注本公众号后，可直接联系后台获取排版美化的详细文档！

-Hints：本篇文章所编纂的资料均来自网络，特此感谢参与奉献的有关人员。

样式层叠次序

样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1浏览器缺省设置

2外部样式表

3内部样式表（位于标签内部）

4内联样式（在 HTML 元素内部）

样式定义格式

标签(选择器) 属性：值

Id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器,CSS中 id 选择器以 # 来定义。

Class类选择器

class 选择器在 HTML 中以class 属性表示, 在CSS 中，类选择器以一个点"."号显示

标签选择器

标签选择器，即以 HTML 标签作为CSS 修饰所用的选择器。

内联选择器

内联选择器即直接在标签内部写 CSS 代码。

选择器有修饰上的优先级，即：内联选择器 > id选择器 > 类选择器 > 标签选择器

样式的属性类型：

颜色 color

文本布局 text-align

字体 font-family

字体大小 font-size

字体样式 font-style normal, italic, oblique

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

字体粗细 font-weight

左边间隔 margin-left

背景图片 background-image

背景颜色 background-color

设置背景图像是否及如何重复：background-repeat

背景中图像位置：background-position

背景图像是否固定或者随着页面的其余部分滚动：background-attachment

用来删除链接的下划线：text-decoration

文本转换大小写：text-transform uppercase、lowercase、capitalize(首字母大写)

文本缩进：text-indent

文本间隔: word-spacing

链接样式未访问过的连接 a:link

用户已访问过的链接 a:visited

鼠标放在链接上 a:hover

链接被点击的那一刻 a:active

列表样式 list-style-type

list-style-position 可以确定标志出现在列表项内容之外还是内容内部

用 padding-left 属性把文本置于列表中

边框 border

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

扩充 padding

宽度 width

高度 height

样式属性的值：

位置属性值：

top、bottom、left、right、center

颜色属性值：

十六进制值(3位、8位)、RGB值、颜色名称

列表样式属性值

none：不使用项目符号

disc：实心圆

circle：空心圆

square：实心方块

decimal：阿拉伯数字

lower-alpha：小写英文字母

upper-alpha：大写英文字母

lower-roman：小写罗马数字

upper-roman：大写罗马数字

边框样式属性值

none: 默认无边框

dotted: 定义一个点线框

dashed: 定义一个虚线框

solid: 定义实线边界

double: 定义两个边界。两个边界的宽度和border-width的值相同

groove: 定义3D沟槽边界。效果取决于边界的颜色值

ridge: 定义3D脊边界。效果取决于边界的颜色值

inset:定义一个3D的嵌入边框。效果取决于边界的颜色值

outset: 定义一个3D突出边框。效果取决于边界的颜色值

位置变动属性值

Positioning (定位)

CSS 定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

Static 定位

HTML 元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right 影响。

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

Relative 定位

相对定位元素的定位是相对其正常位置。

Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS Box Model (盒子模型)

不同部分的说明：

Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明

Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

Padding（内边距） -清除内容周围的区域。会受到框中填充的背景颜色影响

Content（内容） - 盒子的内容，显示文本和图像

CSS组合方式:

后代选取器(以空格分隔)

子元素选择器(以大于号分隔）

相邻兄弟选择器（以加号分隔）

普通兄弟选择器（以波浪号分隔）

CSS伪类:

CSS 伪类是用来添加一些选择器的特殊效果。

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

CSS透明度:

CSS3中属性的透明度是 opacity.

CSS媒体设置:

@media 规则允许在相同样式表为不同媒体设置不同的样式。

CSS属性选择器:

CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。

CSS使用总结:

使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。同时，学会如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。

公众号二维码

End：如果有兴趣了解量化交易、数据分析和互联网+的实用技术，欢迎关注本公众号