css常见样式

CSS 笔记详细整理

1. 颜色表示方式

1. 颜色的定义方式有五种：
   1. 颜色名: 使用颜色的名字表示颜色，如 red（红色）、green（绿色）、transparent（透明色）。
   2. 十六进制颜色值: 用六位十六进制的值表示颜色，格式为 #RRGGBB，00 表示没有颜色，ff 表示完全有颜色，例如 #ff0000 表示红色。
   3. RGB颜色值: 通过 rgb(red, green, blue) 来表示颜色，数值范围为 0-255，如 rgb(255, 0, 0) 表示红色。
   4. RGBA颜色值: 与 RGB 类似，但 A 表示透明度，范围为 0-1，如 rgba(255, 0, 0, 0.5) 表示半透明的红色。
   5. 线性渐变: 使用 linear-gradient 实现颜色渐变，格式为 linear-gradient(方向, 颜色1, 颜色2...)，如 linear-gradient(90deg, red, transparent)，代表从红色到透明的渐变，90deg 代表方向。

2. 字体相关属性

1. color: 设置字体颜色，例如 color: red;。
2. font-size: 设置字体大小，如 font-size: 20px;。
3. font-weight: 设置字体粗细，常用值有 normal（正常）、bold（加粗）、600（数字越大越粗）。
4. font-style: 设置字体风格，如 italic（斜体）、normal（正常字体）。
5. text-decoration: 设置文本修饰线，如 underline（下划线）、line-through（中划线）、overline（上划线）。
6. text-align: 设置文本的水平对齐方式，如 center（居中对齐）、left（左对齐）、right（右对齐）。
7. line-height: 设置行高，如 line-height: 1.5;。

3. 列表相关属性

1. list-style: 设置列表样式，none 取消列表项前面的符号，如 list-style: none;。

4. 圆角边框

1. border-radius: 设置元素的圆角效果，数值越大，圆角越明显。例如，border-radius: 10px;。

5. 阴影效果

1. box-shadow: 给元素添加盒子阴影，格式为 box-shadow: 水平偏移 垂直偏移 模糊距离 阴影颜色，如 box-shadow: 10px 10px 5px gray;。
2. text-shadow: 给文本添加阴影，格式与 box-shadow 类似，如 text-shadow: 5px 5px 2px black;。

6. 控制图片不变形

1. object-fit: 控制图片的显示方式，cover 表示图片覆盖整个容器，不会变形，如 object-fit: cover;。

7. 背景相关属性

1. background-color: 设置背景颜色，如 background-color: blue;。
2. background-image: 设置背景图片，使用 url() 函数指定图片地址，如 background-image: url('image.jpg');。
3. background-repeat: 设置背景图片是否平铺，常用值有 repeat（平铺）、no-repeat（不平铺）、repeat-x（只在 X 轴平铺）、repeat-y（只在 Y 轴平铺）。
4. background-size: 设置背景图片的大小，常用值有 cover（使图片覆盖整个背景）、contain（使图片完整显示），如 background-size: cover;。
5. background-attachment: 设置背景图片是否随页面滚动，fixed 表示背景固定不滚动，如 background-attachment: fixed;。
6. background-position: 设置背景图片的位置，如 center 表示居中对齐。

8. 定位属性

1. position: 定位方式有 static（默认，静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。
   1. static: 默认定位方式，元素遵循文档流，不偏移。
   2. relative: 相对定位，元素相对于其原始位置进行偏移，保留原来的占位。
   3. absolute: 绝对定位，元素相对于最近的非 static 定位的祖先元素进行偏移，不保留原来占位。
   4. fixed: 固定定位，元素相对于视窗进行定位，滚动页面时不会移动。
2. z-index: 设置元素的堆叠顺序，数值越大，元素越在上层，格式为 z-index: 数值;。

9. 鼠标样式

1. cursor: 设置鼠标指针样式，常用值有 pointer（手型）、wait（等待图标）等。如 cursor: pointer; 代表点击时出现手型指针。

10. 常见样式示例

div {

    width: 200px;

    height: 100px;

    background: rgba(0, 120, 212, 0.5); /* 半透明背景色 */

    color: #5352ed; /* 字体颜色 */

    font-size: 20px; /* 字体大小 */

    font-weight: 600; /* 字体粗细 */

    font-style: italic; /* 字体斜体 */

    text-decoration: overline; /* 上划线修饰 */

    text-align: center; /* 文本居中 */

    line-height: 100px; /* 行高 */

    border-radius: 40px; /* 圆角边框 */

    box-shadow: 10px 10px 5px pink; /* 盒子阴影 */

    text-shadow: 2px 2px 2px yellow; /* 文字阴影 */

}

11. 示例解释

1. .container 设置了宽高、背景颜色和 relative 定位。
2. .top, .middle, .bottom 都使用了 absolute 定位，设置了具体的 left 和 top 值，以便实现元素的重叠，且使用了 z-index 来控制它们的层次。