CSS属性全可查用笔记-九七博客

前言

之前写的笔记不够全面，这次发帖会长期维护，把CSS的常用属性值列举出来，方便在刚入门的时候查找。

本篇文章适用于：英语不好，记性比较一般，刚入门的小白新人

新人可以收藏，老人直接无视吧！

大家看到有哪些没有的可以评论区留言，站长会不定期维护更新的！

CSS常用属性

属性有很多，这里就给个分类，方便查看

文本属性

font-family：字体系列
font-size：字体大小
font-weight：字体粗细 bolder(更粗的)/bold（加粗）/normal（常规）/100—900
color：颜色
font-style：字体样式 italic（斜体字）/oblique（倾斜的文字）/normal（常规显示）
line-height：文本行高
text-align：文本对齐 left（左对齐）/right（右对齐）/center（居中对齐）/justify（两端对齐中文不起作用）
text-decoration：文本修饰 none（没有修饰{超链接去下划线}）/underline（添加下划线）/overline（添加上划线）/line-through（添加删除线）
text-indent：首行缩进可以取负值；属性只对第一行起作用。
letter-spacing:value：字间距，控制英文字母或汉字的字距。
word-spacing:value：词间距，控制英文单词词距。
text-shadow：阴影阴影颜色，水平偏移，垂直偏移，阴影半径

超链接伪类

a:link {color: #FF0000}/* 未访问的链接 */

a:visited {color: #00FF00}/* 已访问的链接,点击之后的状态*/

a:hover {color: #FF00FF}/* 鼠标移动到链接上,鼠标悬浮的状态*/

a:active {color: #0000FF}/* 选定的链接,鼠标按住未释放的状态*/

列表

list-style-type：定义列表符号样式 disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)

list-style-image：使用图片作为列表符号 url(所使用图片的路径及全称)

list-style-position：定义列表符号的位置 outside(外边)/inside(里边)

list-style：简写属性，可以同时设置list-style-type、list-style-position和list-style-image

盒子/边框属性

padding：内边距
border：边框
margin：外边距
left->左 right->右 top->上 bottom->下

border：边框宽度边框风格边框颜色这是简写方式（例如：border:5px solid #ff0000）
border-width：边框宽度
border-color：边框颜色
border-style：边框样式 solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框
border-bottom：边框宽度边框风格边框颜色;底边框
border-left：边框宽度边框风格边框颜色;左边框
border-right：边框宽度边框风格边框颜色;右边框
border-top：边框宽度边框风格边框颜色;上边框
扩展：border-radius：圆角边框左上右上右下左下，顺时针方向/圆圈：圆角 = 半径
示例： div{ width: 100px; height: 100px; border: 10px solid red; border-radius: 100px; }

box-shadow：盒子阴影

[zd-plane title=”盒子阴影扩展”]

我学习的课程没有说盒子阴影处理，所以索引以下案例来帮助理解如何使用。

下面写的比较详细是因为，我感觉有必要把里面每一个代表的属性都写下来，这样方便我们更快的理解和使用

水平偏移 (horizontal offset): 必需的值，指定阴影相对于元素在水平方向的位置。正值会将阴影向右偏移，负值向左。

垂直偏移 (vertical offset): 必需的值，指定阴影相对于元素在垂直方向的位置。正值会将阴影向下偏移，负值向上。

模糊半径 (blur radius): 可选值，定义阴影的模糊程度。值越大，阴影越模糊。如果没有设置这个值或者值为0，则阴影边缘锐利。

扩展半径 (spread radius): 可选值，指定阴影的尺寸扩展。正值会让阴影扩大，负值会让阴影缩小。

颜色 (color): 必需的值，定义阴影的颜色。可以使用颜色名、十六进制值、RGB、RGBA、HSL 或 HSLA 值。

投影方式 (inset): 可选值，关键字 inset 可以改变外部阴影（outset）为内部阴影。

多阴影: box-shadow 属性可以包含多个阴影效果，每个阴影由逗号分隔。

一个 box-shadow 的例子，包含所有可选参数：
box-shadow: 2px 4px 8px 6px rgba(0, 0, 0, 0.5) inset;
这个例子中，阴影是内部阴影（由 inset 指定），水平偏移是 2px，垂直偏移是 4px，模糊半径是 8px，扩展半径是 6px，颜色是半透明的黑色。

如果你只需要简单的阴影效果，可以省略可选参数：
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
在这个例子中，阴影有水平偏移 10px，垂直偏移 10px，模糊半径 5px，颜色是具有透明度的黑色。

[/zd-plane]

背景

background-color
- 设置元素的背景颜色。例如：background-color: #ff0; 或 background-color: yellow;
background-image
- 设置元素的背景图像。例如：background-image: url('image.png');
background-repeat
- 控制背景图像的重复方式。可选项包括：repeat（默认，背景图像在垂直和水平方向上平铺）、repeat-x（仅水平方向平铺）、repeat-y（仅垂直方向平铺）、no-repeat（不重复，只显示一次背景图像）。
background-position
- 控制背景图像的位置。可以是关键词（如：center、top、right、bottom、left）或具体数值（如：50% 50%）。默认值为0% 0%（图像左上角对齐元素的左上角）。
background-size
- 控制背景图像的尺寸。可以是关键词（如：cover（覆盖整个元素，保持宽高比，可能会裁剪图像）、contain（包含整个图像，不裁剪，但可能留有空白））或具体数值（如：100px 100px 或 10% 50%）。
background-clip
- 定义背景图像的绘制区域。默认值为border-box，其他选项包括：padding-box、content-box。
background-origin
- 定义背景图像的定位区域。默认值为padding-box，其他选项包括：border-box、content-box。
background-attachment
- 控制背景图像在页面滚动时的行为。可选项包括：scroll（默认，背景随页面滚动）、fixed（背景固定，不随页面滚动移动）。
background
- 简写属性，可以同时设置以上多个背景属性。属性的顺序没有固定要求，但常见的顺序是：颜色、图像、重复、位置、大小、附加属性。