目录
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() | 用于插入自定义的属性值。 |
本来都记录好了，后来发现菜鸟教程的元素、选择器、函数都是超链接做好的，复制过来也能用，真是太好了，又重新替换了一下
现在也有CSS3，但是我主要是为了学习微信小程序所以只是简单的学习一下，就不去看了，毕竟我可能永远不会真正的用到，看完CSS感觉就够了
更多推荐
微信小程序之CSS
发布评论