微信小程序之CSS-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序之CSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、CSS简介

1.1、内联样式

1.2、内部样式表

1.3、外部引用

2、CSS属性

3、CSS选择器

4、CSS函数

学习路径：菜鸟教程，自己做了一个适合自己的记录

1、CSS简介

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式，可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件（推荐使用）

1.1、内联样式


<!-- 将整个可见背景渲染成黄色 -->
<body style="background-color:yellow;">
<!-- 将h2的标题的背景色渲染成红色 -->
<h2 style="background-color:red;">这是一个标题</h2>
<!-- 将文本渲染成字体为红色，距离左边距20px -->
<p style="color:blue;margin-left:20px;">这是一个段落。</p>
<!-- 将文本的背景色渲染成绿色 -->
<p style="background-color:green;">这是一个段落。</p>
<!-- 将文本字体组使用arial，字体颜色红色，字体大小20px -->
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
<!-- 将标题设置为居中对齐 -->
<h1 style="text-align:center;">居中对齐的标题</h1>
</body>

1.2、内部样式表

<!-- 相当于将文件内的样式全部设置默认值 -->
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

<body>
<!-- 标题的背景色：黄色 -->
<h1>这是一个标题</h1>
<!-- 字体颜色：黄蓝色 -->
<p>这是一个段落。</p>
</body>

1.3、外部引用

<!-- <link> 标签定义文档与外部资源的关系 -->
<!--  link 元素是空元素，它仅包含属性，作用域只在head块内，但可以多次调用 -->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2、CSS属性

仅记录一下自己可能会用到的

属性	功能
背景属性
background	复合属性。设置对象的背景特性
background-attachment	设置背景图像是随对象内容滚动还是固定的。必须先指定background-image属性
background-color	设置对象的背景颜色
background-image	设置对象的背景图像
background-position	设置对象的背景图像位置。必须先指定background-image属性
background-repeat	设置对象的背景图像如何铺排填充。必须先指定background-image属性
background-clip	指定对象的背景图像向外裁剪的区域
background-origin	设置对象的背景图像计算background-position时的参考原点(位置)
background-size	设置对象的背景图像的尺寸大小
边框(Border) 和轮廓(Outline) 属性
border	复合属性。设置对象边框的特性
border-direction	复合属性。设置对象底部边框的特性，direction为：buttom/left/right/top
border-direction-color	设置对象的底部/左边/右边/顶部边框颜色
border-direction-style	设置对象的底部/左边/右边/顶部边框样式
border-direction-width	设置对象的底部/左边/右边/顶部边框宽度
border-color	设置对象的边框颜色
border-width	设置对象的边框宽度
outline	复合属性。设置对象外的线条轮廓
outline-color	设置对象外的线条轮廓的颜色
outline-style	设置对象外的线条轮廓的样式
outline-width	设置对象外的线条轮廓的宽度
border-bottom-left-radius	设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径
border-bottom-right-radius	设置或检索对象的右下角圆角边框
border-image	设置对象的边框样式使用图像来填充
border-image-outset	规定边框图像超过边框的量
border-image-repeat	规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）
border-image-slice	规定图像边框的向内偏移
border-image-source	规定要使用的图像，代替 border-style 属性中设置的边框样式
border-image-width	规定图像边框的宽度
border-radius	设置对象使用圆角边框
border-top-left-radius	定义左上角边框的形状
border-top-right-radius	定义右上角边框的形状
box-decoration-break	规定行内元素被折行
box-shadow	向方框添加一个或多个阴影
盒子(Box) 属性
rotation	围绕由 rotation-point 属性定义的点对元素进行旋转
rotation-point	定义距离上左边框边缘的偏移点
颜色(Color) 属性
opacity	设置一个元素的透明度级别
内边距(Padding) 属性
padding	在一个声明中设置所有填充属性
padding-bottom	设置元素的底填充
padding-left	设置元素的左填充
padding-right	设置元素的右填充
padding-top	设置元素的顶部填充
尺寸(Dimension) 属性
height	设置元素的高度
width	设置元素的宽度
max-height	设置元素的最大高度
max-width	设置元素的最大宽度
min-height	设置元素的最小高度
min-width	设置元素的最小宽度
字体（Font）属性
font	在一个声明中设置所有字体属性
font-family	规定文本的字体系列
font-size	规定文本的字体尺寸
font-style	规定文本的字体样式
font-variant	规定文本的字体样式
font-weight	规定字体的粗细
超链接(Hyperlink) 属性
target	简写属性设置target-name, target-new,和target-position属性
target-name	指定在何处打开链接（目标位置）
target-new	指定是否有新的目标链接打开一个新窗口或在现有窗口打开新标签
target-position	指定应该放置新的目标链接的位置
外边距(Margin) 属性
margin	在一个声明中设置所有外边距属性
margin-bottom	设置元素的下外边距
margin-left	设置元素的左外边距
margin-right	设置元素的右外边距
margin-top	设置元素的上外边距
文本（Text）属性
color	设置文本的颜色
direction	规定文本的方向 / 书写方向
letter-spacing	设置字符间距
line-height	设置行高
text-align	规定文本的水平对齐方式
text-decoration	规定添加到文本的装饰效果
text-indent	规定文本块首行的缩进
text-transform	控制文本的大小写

3、CSS选择器

4、CSS函数

函数	描述
attr()	返回选择元素的属性值。
calc()	允许计算 CSS 的属性值，比如动态计算长度值。
cubic-bezier()	定义了一个贝塞尔曲线(Cubic Bezier)。
conic-gradient()	定义了一个圆锥渐变。
counter()	设置计数器。
hsl()	使用色相、饱和度、亮度来定义颜色。
hsla()	使用色相、饱和度、亮度、透明度来定义颜色。
linear-gradient()	创建一个线性渐变的图像
max()	从一个逗号分隔的表达式列表中选择最大的值作为属性的值。
min()	从一个逗号分隔的表达式列表中选择最小的值作为属性的值。
radial-gradient()	用径向渐变创建图像。
repeating-linear-gradient()	用重复的线性渐变创建图像。
repeating-radial-gradient()	类似 radial-gradient()，用重复的径向渐变创建图像。
repeating-conic-gradient()	重复的圆锥渐变。
rgb()	使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。
rgba()	使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。
var()	用于插入自定义的属性值。