🎨 CSS属性完全指南：从入门到精通的样式秘籍

CSS 属性

CSS属性是定义元素样式的关键部分，它们控制着元素的外观、布局、行为等各个方面。本文将介绍最常用和最重要的CSS属性。

文本属性

文本属性控制文本的外观，包括字体、大小、颜色、对齐方式等。

字体属性

.text {
  /* 字体系列 */
  font-family: Arial, Helvetica, sans-serif;
  
  /* 字体大小 */
  font-size: 16px;
  
  /* 字体粗细 */
  font-weight: bold; /* 或 normal, 100-900 */
  
  /* 字体样式 */
  font-style: italic; /* 或 normal, oblique */
  
  /* 字体变体 */
  font-variant: small-caps; /* 或 normal */
  
  /* 字体行高 */
  line-height: 1.5;
  
  /* 简写属性 */
  font: italic bold 16px/1.5 Arial, sans-serif;
}

文本格式属性

.text {
  /* 文本颜色 */
  color: #333;
  
  /* 文本对齐 */
  text-align: center; /* 或 left, right, justify */
  
  /* 文本装饰 */
  text-decoration: underline; /* 或 none, overline, line-through */
  text-decoration-color: red;
  text-decoration-style: wavy; /* 或 solid, double, dotted, dashed */
  text-decoration-thickness: 2px;
  
  /* 文本转换 */
  text-transform: uppercase; /* 或 none, lowercase, capitalize */
  
  /* 文本缩进 */
  text-indent: 2em;
  
  /* 字母间距 */
  letter-spacing: 1px;
  
  /* 单词间距 */
  word-spacing: 2px;
  
  /* 文本阴影 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  
  /* 空白处理 */
  white-space: nowrap; /* 或 normal, pre, pre-line, pre-wrap */
  
  /* 文本溢出 */
  text-overflow: ellipsis; /* 或 clip */
  overflow: hidden;
  
  /* 文本方向 */
  direction: ltr; /* 或 rtl */
  
  /* 垂直对齐 */
  vertical-align: middle; /* 或 top, bottom, baseline, sub, super */
}

现代文本属性

.text {
  /* 文本换行 */
  word-break: break-all; /* 或 normal, keep-all, break-word */
  overflow-wrap: break-word; /* 或 normal */
  
  /* 文本书写模式 */
  writing-mode: vertical-rl; /* 或 horizontal-tb, vertical-lr */
  
  /* 文本强调 */
  text-emphasis: filled red; /* 组合了style和color */
  
  /* 文本对齐最后一行 */
  text-align-last: justify; /* 或 auto, left, right, center */
  
  /* 文本描边 */
  -webkit-text-stroke: 1px black; /* 非标准但广泛支持 */
}

背景属性

背景属性控制元素的背景外观，包括颜色、图像、位置等。

基本背景属性

.element {
  /* 背景颜色 */
  background-color: #f0f0f0;
  
  /* 背景图像 */
  background-image: url('image.jpg');
  
  /* 背景重复 */
  background-repeat: no-repeat; /* 或 repeat, repeat-x, repeat-y */
  
  /* 背景位置 */
  background-position: center center; /* 或 top left, 50% 25%, 20px 30px 等 */
  
  /* 背景尺寸 */
  background-size: cover; /* 或 contain, auto, 100% 100%, 200px 100px 等 */
  
  /* 背景附着 */
  background-attachment: fixed; /* 或 scroll, local */
  
  /* 背景原点 */
  background-origin: padding-box; /* 或 border-box, content-box */
  
  /* 背景裁剪 */
  background-clip: padding-box; /* 或 border-box, content-box, text */
  
  /* 简写属性 */
  background: #f0f0f0 url('image.jpg') no-repeat center/cover fixed;
}

多重背景

.element {
  /* 多重背景，先列出的在上层 */
  background: 
    url('overlay.png') no-repeat center/100%,
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('background.jpg') no-repeat center/cover;
}

渐变背景

.element {
  /* 线性渐变 */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  
  /* 径向渐变 */
  background-image: radial-gradient(circle at center, white, blue);
  
  /* 重复渐变 */
  background-image: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #e0e0e0 10px, #e0e0e0 20px);
  
  /* 圆锥渐变 */
  background-image: conic-gradient(from 0deg, red, yellow, green, blue, purple, red);
}

边框属性

边框属性定义元素的边框样式、宽度和颜色。

基本边框属性

.element {
  /* 边框宽度 */
  border-width: 2px;
  border-top-width: 1px;
  border-right-width: 2px;
  border-bottom-width: 3px;
  border-left-width: 4px;
  
  /* 边框样式 */
  border-style: solid;
  border-top-style: dotted;
  border-right-style: dashed;
  border-bottom-style: double;
  border-left-style: groove;
  /* 其他样式: none, hidden, ridge, inset, outset */
  
  /* 边框颜色 */
  border-color: #333;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: yellow;
  
  /* 简写属性 */
  border: 2px solid #333;
  border-top: 1px dotted red;
  border-right: 2px dashed green;
  border-bottom: 3px double blue;
  border-left: 4px groove yellow;
}

圆角边框

.element {
  /* 所有角相同 */
  border-radius: 10px;
  
  /* 分别指定四个角 (左上, 右上, 右下, 左下) */
  border-radius: 10px 20px 30px 40px;
  
  /* 分别指定水平和垂直半径 */
  border-radius: 10px / 20px;
  
  /* 单独设置某个角 */
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
  
  /* 创建圆形或椭圆 */
  border-radius: 50%;
}

图像边框

.element {
  /* 边框图像源 */
  border-image-source: url('border.png');
  
  /* 边框图像切片 */
  border-image-slice: 27;
  
  /* 边框图像宽度 */
  border-image-width: 27px;
  
  /* 边框图像重复方式 */
  border-image-repeat: repeat; /* 或 stretch, round, space */
  
  /* 边框图像向外延伸 */
  border-image-outset: 10px;
  
  /* 简写属性 */
  border-image: url('border.png') 27 / 27px / 10px repeat;
}

轮廓属性

轮廓与边框类似，但不占用空间，不影响布局。

.element {
  /* 轮廓宽度 */
  outline-width: 2px;
  
  /* 轮廓样式 */
  outline-style: solid; /* 与border-style相同的值 */
  
  /* 轮廓颜色 */
  outline-color: red;
  
  /* 轮廓偏移 */
  outline-offset: 5px;
  
  /* 简写属性 */
  outline: 2px solid red;
}

尺寸属性

尺寸属性控制元素的宽度、高度和相关约束。

.element {
  /* 宽度和高度 */
  width: 300px;
  height: 200px;
  
  /* 最小/最大宽度和高度 */
  min-width: 100px;
  max-width: 500px;
  min-height: 100px;
  max-height: 500px;
  
  /* 内边距 */
  padding: 20px; /* 所有边相同 */
  padding: 10px 20px 30px 40px; /* 上 右 下 左 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
  
  /* 外边距 */
  margin: 20px; /* 所有边相同 */
  margin: 10px 20px 30px 40px; /* 上 右 下 左 */
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  margin: 0 auto; /* 水平居中 */
  
  /* 盒模型行为 */
  box-sizing: border-box; /* 或 content-box */
}

定位属性

定位属性控制元素在页面中的位置和层叠顺序。

.element {
  /* 定位方式 */
  position: relative; /* 或 static, absolute, fixed, sticky */
  
  /* 位置偏移 */
  top: 10px;
  right: 20px;
  bottom: 30px;
  left: 40px;
  
  /* 层叠顺序 */
  z-index: 10;
  
  /* 浮动 */
  float: left; /* 或 right, none */
  
  /* 清除浮动 */
  clear: both; /* 或 left, right, none */
}

现代定位属性

.parent {
  /* 定位上下文 */
  perspective: 1000px;
  transform-style: preserve-3d;
}

.element {
  /* 变换原点 */
  transform-origin: center center;
  
  /* 2D变换 */
  transform: translate(50px, 100px) rotate(45deg) scale(1.5) skew(10deg, 20deg);
  
  /* 3D变换 */
  transform: rotateX(45deg) rotateY(45deg) translateZ(100px);
  
  /* 回退变换 */
  transform: none;
}

显示属性

显示属性控制元素的显示方式、可见性和溢出行为。

.element {
  /* 显示方式 */
  display: block; /* 或 inline, inline-block, flex, grid, none 等 */
  
  /* 可见性 */
  visibility: visible; /* 或 hidden, collapse */
  opacity: 0.5; /* 0到1之间的值 */
  
  /* 溢出处理 */
  overflow: auto; /* 或 visible, hidden, scroll */
  overflow-x: hidden;
  overflow-y: scroll;
  
  /* 裁剪 */
  clip: rect(0, 50px, 50px, 0); /* 已弃用 */
  clip-path: circle(50%); /* 现代替代方案 */
  
  /* 调整大小 */
  resize: both; /* 或 none, horizontal, vertical */
  
  /* 光标 */
  cursor: pointer; /* 或 default, text, move, not-allowed 等 */
  
  /* 用户选择 */
  user-select: none; /* 或 auto, text, all */
  
  /* 对象适应 */
  object-fit: cover; /* 或 fill, contain, none, scale-down */
  object-position: center center;
}

弹性盒布局属性

弹性盒(Flexbox)是一种强大的布局模型，用于创建灵活的响应式布局。

容器属性

.flex-container {
  /* 启用弹性盒布局 */
  display: flex; /* 或 inline-flex */
  
  /* 主轴方向 */
  flex-direction: row; /* 或 row-reverse, column, column-reverse */
  
  /* 换行行为 */
  flex-wrap: wrap; /* 或 nowrap, wrap-reverse */
  
  /* 简写属性 */
  flex-flow: row wrap;
  
  /* 主轴对齐 */
  justify-content: space-between; /* 或 flex-start, flex-end, center, space-around, space-evenly */
  
  /* 交叉轴对齐 */
  align-items: center; /* 或 flex-start, flex-end, stretch, baseline */
  
  /* 多行对齐 */
  align-content: space-between; /* 或 flex-start, flex-end, center, stretch, space-around */
  
  /* 间隙 */
  gap: 20px;
  row-gap: 10px;
  column-gap: 20px;
}

项目属性

.flex-item {
  /* 顺序 */
  order: 2;
  
  /* 放大比例 */
  flex-grow: 1;
  
  /* 缩小比例 */
  flex-shrink: 1;
  
  /* 基础尺寸 */
  flex-basis: 200px;
  
  /* 简写属性 */
  flex: 1 1 200px; /* grow shrink basis */
  flex: auto; /* 1 1 auto */
  flex: none; /* 0 0 auto */
  
  /* 自身对齐 */
  align-self: flex-end; /* 或 auto, flex-start, center, stretch, baseline */
}

网格布局属性

网格布局(Grid)是一种二维布局系统，适用于复杂的页面布局。

容器属性

.grid-container {
  /* 启用网格布局 */
  display: grid; /* 或 inline-grid */
  
  /* 定义列 */
  grid-template-columns: 1fr 2fr 1fr; /* 三列布局 */
  grid-template-columns: repeat(3, 1fr); /* 三等分列 */
  grid-template-columns: minmax(100px, 1fr) 2fr 1fr; /* 最小宽度限制 */
  
  /* 定义行 */
  grid-template-rows: 100px auto 100px; /* 固定头尾，中间自适应 */
  grid-template-rows: repeat(3, minmax(100px, auto)); /* 最小高度限制 */
  
  /* 定义区域 */
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
  
  /* 间隙 */
  grid-gap: 20px; /* 旧语法 */
  gap: 20px; /* 新语法 */
  row-gap: 10px;
  column-gap: 20px;
  
  /* 自动生成的网格轨道 */
  grid-auto-rows: 100px;
  grid-auto-columns: 1fr;
  grid-auto-flow: row; /* 或 column, dense */
  
  /* 对齐网格项 */
  justify-items: center; /* 或 start, end, stretch */
  align-items: center; /* 或 start, end, stretch */
  
  /* 对齐网格轨道 */
  justify-content: space-between; /* 或 start, end, center, space-around, space-evenly */
  align-content: space-between; /* 或 start, end, center, stretch, space-around, space-evenly */
}

项目属性

.grid-item {
  /* 指定位置 */
  grid-column: 1 / 3; /* 从第1条网格线到第3条网格线 */
  grid-column-start: 1;
  grid-column-end: 3; /* 或 span 2 */
  
  grid-row: 1 / 3;
  grid-row-start: 1;
  grid-row-end: 3; /* 或 span 2 */
  
  /* 简写属性 */
  grid-area: 1 / 1 / 3 / 3; /* row-start / column-start / row-end / column-end */
  grid-area: header; /* 使用模板区域名称 */
  
  /* 自身对齐 */
  justify-self: center; /* 或 start, end, stretch */
  align-self: center; /* 或 start, end, stretch */
}

过渡与动画属性

过渡和动画属性用于创建平滑的状态变化和动态效果。

过渡属性

.element {
  /* 过渡属性 */
  transition-property: all; /* 或 特定属性如 width, color 等 */
  
  /* 过渡持续时间 */
  transition-duration: 0.3s;
  
  /* 过渡延迟 */
  transition-delay: 0.1s;
  
  /* 过渡时间函数 */
  transition-timing-function: ease; /* 或 linear, ease-in, ease-out, ease-in-out, cubic-bezier() */
  
  /* 简写属性 */
  transition: all 0.3s ease 0.1s;
  
  /* 多个过渡 */
  transition: width 0.3s ease, height 0.5s ease-out, color 1s linear;
}

动画属性

/* 定义关键帧 */
@keyframes slide-in {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  /* 动画名称 */
  animation-name: slide-in;
  
  /* 动画持续时间 */
  animation-duration: 1s;
  
  /* 动画延迟 */
  animation-delay: 0.5s;
  
  /* 动画时间函数 */
  animation-timing-function: ease-out;
  
  /* 动画迭代次数 */
  animation-iteration-count: 3; /* 或 infinite */
  
  /* 动画方向 */
  animation-direction: alternate; /* 或 normal, reverse, alternate-reverse */
  
  /* 动画填充模式 */
  animation-fill-mode: forwards; /* 或 none, backwards, both */
  
  /* 动画播放状态 */
  animation-play-state: running; /* 或 paused */
  
  /* 简写属性 */
  animation: slide-in 1s ease-out 0.5s 3 alternate forwards;
  
  /* 多个动画 */
  animation: slide-in 1s ease-out, fade-in 2s linear;
}

其他重要属性

列表属性

ul, ol {
  /* 列表样式类型 */
  list-style-type: square; /* 或 disc, circle, decimal, lower-alpha 等 */
  
  /* 列表样式位置 */
  list-style-position: inside; /* 或 outside */
  
  /* 列表样式图像 */
  list-style-image: url('bullet.png');
  
  /* 简写属性 */
  list-style: square inside url('bullet.png');
}

表格属性

table {
  /* 表格布局 */
  table-layout: fixed; /* 或 auto */
  
  /* 边框合并 */
  border-collapse: collapse; /* 或 separate */
  
  /* 边框间距 */
  border-spacing: 5px;
  
  /* 空单元格显示 */
  empty-cells: hide; /* 或 show */
  
  /* 标题位置 */
  caption-side: bottom; /* 或 top */
}

打印属性

@media print {
  .element {
    /* 分页行为 */
    page-break-before: always; /* 或 auto, avoid, left, right */
    page-break-after: avoid;
    page-break-inside: avoid;
    
    /* 现代替代方案 */
    break-before: page;
    break-after: avoid;
    break-inside: avoid;
    
    /* 孤儿和遗孀控制 */
    orphans: 3;
    widows: 3;
  }
}

滤镜和混合模式

.element {
  /* 滤镜效果 */
  filter: blur(5px) brightness(1.2) contrast(1.4) grayscale(0.5) hue-rotate(90deg) invert(0.8) opacity(0.8) saturate(2) sepia(0.5) drop-shadow(5px 5px 10px black);
  
  /* 混合模式 */
  mix-blend-mode: multiply; /* 或 screen, overlay, darken, lighten 等 */
  background-blend-mode: soft-light;
}

书写模式和逻辑属性

.element {
  /* 书写模式 */
  writing-mode: vertical-rl; /* 或 horizontal-tb, vertical-lr */
  direction: rtl; /* 或 ltr */
  text-orientation: upright; /* 或 mixed, sideways */
  
  /* 逻辑属性 */
  margin-block-start: 1em; /* 替代 margin-top */
  margin-inline-end: 1em; /* 替代 margin-right (LTR) 或 margin-left (RTL) */
  padding-block-end: 1em; /* 替代 padding-bottom */
  border-inline-start: 1px solid; /* 替代 border-left (LTR) 或 border-right (RTL) */
  
  /* 逻辑尺寸 */
  inline-size: 200px; /* 替代 width */
  block-size: 100px; /* 替代 height */
}

性能优化属性

.element {
  /* 硬件加速 */
  transform: translateZ(0);
  
  /* 提示浏览器即将变化的属性 */
  will-change: transform, opacity;
  
  /* 内容可见性 */
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
  
  /* 内容包含 */
  contain: content; /* 或 strict, layout, paint, size */
}