目录
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-image属性 | |
设置对象的背景颜色 | |
设置对象的背景图像 | |
设置对象的背景图像位置。必须先指定background-image属性 | |
background-repeat | 设置对象的背景图像如何铺排填充。必须先指定background-image属性 |
指定对象的背景图像向外裁剪的区域 | |
设置对象的背景图像计算background-position时的参考原点(位置) | |
设置对象的背景图像的尺寸大小 | |
边框(Border) 和 轮廓(Outline) 属性 | |
复合属性。设置对象边框的特性 | |
border-direction | 复合属性。设置对象底部边框的特性,direction为:buttom/left/right/top |
border-direction-color | 设置对象的底部/左边/右边/顶部边框颜色 |
border-direction-style | 设置对象的底部/左边/右边/顶部边框样式 |
border-direction-width | 设置对象的底部/左边/右边/顶部边框宽度 |
设置对象的边框颜色 | |
设置对象的边框宽度 | |
复合属性。设置对象外的线条轮廓 | |
设置对象外的线条轮廓的颜色 | |
设置对象外的线条轮廓的样式 | |
设置对象外的线条轮廓的宽度 | |
设置或检索对象的左下角圆角边框。提供2个参数,2个参数以空格分隔,每个参数允许设置1个参数值,第1个参数表示水平半径,第2个参数表示垂直半径 | |
设置或检索对象的右下角圆角边框 | |
设置对象的边框样式使用图像来填充 | |
规定边框图像超过边框的量 | |
规定图像边框是否应该被重复(repeated)、拉伸(stretched)或铺满(rounded) | |
规定图像边框的向内偏移 | |
规定要使用的图像,代替 border-style 属性中设置的边框样式 | |
规定图像边框的宽度 | |
设置对象使用圆角边框 | |
定义左上角边框的形状 | |
定义右上角边框的形状 | |
box-decoration-break | 规定行内元素被折行 |
向方框添加一个或多个阴影 | |
盒子(Box) 属性 | |
围绕由 rotation-point 属性定义的点对元素进行旋转 | |
定义距离上左边框边缘的偏移点 | |
颜色(Color) 属性 | |
设置一个元素的透明度级别 | |
内边距(Padding) 属性 | |
在一个声明中设置所有填充属性 | |
设置元素的底填充 | |
设置元素的左填充 | |
设置元素的右填充 | |
设置元素的顶部填充 | |
尺寸(Dimension) 属性 | |
设置元素的高度 | |
设置元素的宽度 | |
设置元素的最大高度 | |
设置元素的最大宽度 | |
设置元素的最小高度 | |
设置元素的最小宽度 | |
字体(Font) 属性 | |
在一个声明中设置所有字体属性 | |
规定文本的字体系列 | |
规定文本的字体尺寸 | |
规定文本的字体样式 | |
规定文本的字体样式 | |
规定字体的粗细 | |
超链接(Hyperlink) 属性 | |
简写属性设置target-name, target-new,和target-position属性 | |
指定在何处打开链接(目标位置) | |
指定是否有新的目标链接打开一个新窗口或在现有窗口打开新标签 | |
指定应该放置新的目标链接的位置 | |
外边距(Margin) 属性 | |
在一个声明中设置所有外边距属性 | |
设置元素的下外边距 | |
设置元素的左外边距 | |
设置元素的右外边距 | |
设置元素的上外边距 | |
文本(Text) 属性 | |
设置文本的颜色 | |
规定文本的方向 / 书写方向 | |
设置字符间距 | |
设置行高 | |
规定文本的水平对齐方式 | |
规定添加到文本的装饰效果 | |
规定文本块首行的缩进 | |
控制文本的大小写 |
3、CSS选择器
4、CSS函数
函数 | 描述 |
返回选择元素的属性值。 | |
允许计算 CSS 的属性值,比如动态计算长度值。 | |
定义了一个贝塞尔曲线(Cubic Bezier)。 | |
定义了一个圆锥渐变。 | |
设置计数器。 | |
使用色相、饱和度、亮度来定义颜色。 | |
使用色相、饱和度、亮度、透明度来定义颜色。 | |
创建一个线性渐变的图像 | |
从一个逗号分隔的表达式列表中选择最大的值作为属性的值。 | |
从一个逗号分隔的表达式列表中选择最小的值作为属性的值。 | |
用径向渐变创建图像。 | |
用重复的线性渐变创建图像。 | |
类似 radial-gradient(),用重复的径向渐变创建图像。 | |
重复的圆锥渐变。 | |
使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。 | |
使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。 | |
用于插入自定义的属性值。 |
本来都记录好了,后来发现菜鸟教程的元素、选择器、函数都是超链接做好的,复制过来也能用,真是太好了,又重新替换了一下
现在也有CSS3,但是我主要是为了学习微信小程序所以只是简单的学习一下,就不去看了,毕竟我可能永远不会真正的用到,看完CSS感觉就够了