跳到主要内容

CSS 属性

CSS 属性控制 HTML 元素的各种外观和行为。本章详细介绍常用属性及其用法。

文本属性​

字体 font-family​

/* 单个字体 */
body {
    font-family: 'Microsoft YaHei';
}

/* 字体列表（依次查找） */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* 常用字体栈 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-family: Georgia, 'Times New Roman', serif;
font-family: 'SF Mono', Consolas, 'Courier New', monospace;

字体大小 font-size​

/* 固定值 */
font-size: 16px;
font-size: 1.2em;
font-size: 1rem;

/* 关键词 */
font-size: small;
font-size: medium;
font-size: large;

/* 百分比（相对于父元素） */
font-size: 120%;

/* 视口单位 */
font-size: 2vw;

字体粗细 font-weight​

font-weight: normal;    /* 400 */
font-weight: bold;      /* 700 */
font-weight: lighter;  /* 相对于父元素 */
font-weight: bolder;    /* 相对于父元素 */

font-weight: 100;  /* 最细 */
font-weight: 300;  /* 细 */
font-weight: 400;  /* 正常 */
font-weight: 500;  /* 中等 */
font-weight: 600;  /* 半粗 */
font-weight: 700;  /* 粗 */
font-weight: 900;  /* 最粗 */

字体样式 font-style​

font-style: normal;   /* 正常 */
font-style: italic;  /* 斜体 */
font-style: oblique;  /* 倾斜文字 */

行高 line-height​

/* 推荐值：1.4 - 1.8 */
line-height: 1.6;
line-height: 24px;
line-height: 150%;
line-height: 1.5em;

效果预览： 不同 line-height 值的对比效果：

  • line-height: 1.2 - 紧凑行高
  • line-height: 1.8 - 舒适行高

文本颜色 color​

/* 颜色名称 */
color: red;
color: blue;

/* 十六进制 */
color: #ff0000;
color: #f00;  /* 简写 */

/* RGB */
color: rgb(255, 0, 0);
color: rgb(100%, 0%, 0%);

/* RGBA（带透明度） */
color: rgba(255, 0, 0, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);

文本对齐 text-align​

text-align: left;    /* 左对齐（默认） */
text-align: right;   /* 右对齐 */
text-align: center;   /* 居中 */
text-align: justify;  /* 两端对齐 */

效果预览： text-align 的三种对齐方式效果：

  • left - 文字靠左对齐
  • center - 文字居中
  • right - 文字靠右对齐

文本装饰 text-decoration​

text-decoration: none;                /* 无装饰 */
text-decoration: underline;           /* 下划线 */
text-decoration: overline;            /* 上划线 */
text-decoration: line-through;        /* 删除线 */
text-decoration: underline wavy red; /* 波浪红色下划线 */

其他文本属性​

/* 文本缩进 */
text-indent: 2em;

/* 字母间距 */
letter-spacing: 2px;

/* 单词间距 */
word-spacing: 5px;

/* 文本转换 */
text-transform: uppercase;     /* 全大写 */
text-transform: lowercase;     /* 全小写 */
text-transform: capitalize;    /* 首字母大写 */

/* 空白处理 */
white-space: nowrap;      /* 不换行 */
white-space: pre;         /* 保留空白 */
white-space: pre-wrap;    /* 保留空白并换行 */

背景属性​

背景颜色 background-color​

background-color: #3498db;
background-color: rgba(52, 152, 219, 0.5);
background-color: transparent;  /* 透明 */

背景图片 background-image​

background-image: url('bg.jpg');
background-image: linear-gradient(to bottom, #fff, #ccc);
background-image: radial-gradient(circle, #fff, #ccc);

/* 多重背景 */
background-image: url('logo.png'), url('pattern.png');

背景重复 background-repeat​

background-repeat: repeat;      /* 默认：水平和垂直重复 */
background-repeat: no-repeat;   /* 不重复 */
background-repeat: repeat-x;     /* 只水平重复 */
background-repeat: repeat-y;     /* 只垂直重复 */
background-repeat: space;       /* 平铺并留白 */
background-repeat: round;       /* 平铺并缩放 */

背景位置 background-position​

/* 关键词 */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* 具体值 */
background-position: 20px 30px;
background-position: 50% 50%;
background-position: right top;

背景尺寸 background-size​

background-size: auto auto;     /* 保持原始尺寸 */
background-size: cover;         /* 覆盖整个容器（可能裁剪） */
background-size: contain;       /* 完整显示（可能留白） */
background-size: 100% 100%;    /* 拉伸填充 */
background-size: 200px 100px;   /* 指定尺寸 */

背景固定 background-attachment​

background-attachment: scroll; /* 随页面滚动 */
background-attachment: fixed;  /* 固定不滚动 */
background-attachment: local;  /* 随元素内容滚动 */

background 简写​

background: #f5f5f5 url('bg.jpg') no-repeat center top / cover;

边框属性​

边框宽度 border-width​

border-width: 1px;
border-width: thin medium thick;  /* 上 右 下 左 */
border-width: 10px 20px;          /* 上下 左右 */

边框样式 border-style​

border-style: none;    /* 无边框 */
border-style: hidden;   /* 隐藏（表格边框重叠时） */
border-style: dotted;   /* 点线 */
border-style: dashed;   /* 虚线 */
border-style: solid;    /* 实线 */
border-style: double;   /* 双线 */
border-style: groove;   /* 3D凹槽 */
border-style: ridge;    /* 3D凸脊 */
border-style: inset;    /* 3D凹入 */
border-style: outset;   /* 3D凸出 */

效果预览： 不同 border-style 的效果：

  • dotted - 点线边框
  • dashed - 虚线边框
  • solid - 实线边框
  • double - 双线边框

边框颜色 border-color​

border-color: #3498db;
border-color: red blue green yellow;  /* 上 右 下 左 */

边框简写 border​

border: 1px solid #333;           /* 完整简写 */
border-top: 2px dashed red;       /* 只设置上边框 */
border-bottom: 1px solid #ccc;   /* 只设置下边框 */

圆角 border-radius​

border-radius: 5px;                      /* 所有角 */
border-radius: 50%;                       /* 圆形 */
border-radius: 10px 20px;                 /* 左上右下 右上左下 */
border-radius: 5px 10px 15px 20px;        /* 左上 右上 右下 左下 */
border-radius: 50% / 10px;                /* 椭圆 */

效果预览： 不同 border-radius 值的圆角效果：

  • border-radius: 5px - 小圆角
  • border-radius: 50% - 圆形
  • border-radius: 10px 20px - 椭圆角

盒模型属性​

外边距 margin​

margin: 10px;                      /* 所有边 */
margin: 10px 20px;                 /* 上下 左右 */
margin: 5px 10px 15px 20px;        /* 上 右 下 左 */

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* 居中 */
margin: 0 auto;
margin-left: auto;
margin-right: auto;

内边距 padding​

padding: 10px;                      /* 所有边 */
padding: 10px 20px;                 /* 上下 左右 */
padding: 5px 10px 15px 20px;        /* 上 右 下 左 */

padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

宽高 width / height​

width: 200px;
width: 50%;
width: auto;

height: 100px;
height: auto;
height: 100vh;

尺寸限制​

min-width: 300px;
max-width: 1200px;

min-height: 200px;
max-height: 500px;

盒子尺寸计算 box-sizing​

/* 默认：content-box，内容盒模型 */
box-sizing: content-box;
元素的 width = 内容宽度

/* 推荐：border-box，边框盒模型 */
box-sizing: border-box;
元素的 width = 内容 + padding + border

显示属性 display​

display: block;       /* 块级元素 */
display: inline;       /* 行内元素 */
display: inline-block; /* 行内块元素 */
display: flex;         /* flex 容器 */
display: grid;         /* grid 容器 */
display: none;         /* 不显示 */
display: contents;      /* 移除容器自身 */

display: block​

div, p, h1, ul, article {
    display: block;
}

块级元素特点：

  • 独占一行
  • 可以设置宽高
  • 可以设置 margin 和 padding

display: inline​

span, a, strong, em {
    display: inline;
}

行内元素特点：

  • 不独占一行
  • 不能设置宽高（由内容决定）
  • 水平方向 margin 和 padding 有效，垂直方向无效

display: inline-block​

button, input, select {
    display: inline-block;
}

行内块元素特点：

  • 不独占一行
  • 可以设置宽高
  • margin 和 padding 四方向都有效

溢出属性 overflow​

overflow: visible;  /* 默认：溢出可见 */
overflow: hidden;   /* 溢出隐藏 */
overflow: scroll;    /* 始终显示滚动条 */
overflow: auto;      /* 需要时显示滚动条 */

/* 分方向设置 */
overflow-x: auto;
overflow-y: hidden;

效果预览： 不同 overflow 值的处理方式：

  • overflow: visible - 溢出内容可见（默认）
  • overflow: hidden - 溢出内容被隐藏
  • overflow: auto - 需要时显示滚动条

定位属性​

position​

position: static;     /* 默认：静态定位 */
position: relative;  /* 相对定位（相对于自身） */
position: absolute;   /* 绝对定位（相对于最近定位祖先） */
position: fixed;      /* 固定定位（相对于视口） */
position: sticky;     /* 粘性定位 */

定位偏移​

/* 配合 position 使用 */
top: 10px;
bottom: 20px;
left: 30px;
right: 40px;

/* 百分比 */
top: 50%;
left: 50%;

/* 负值 */
top: -10px;

z-index 层级​

z-index: auto;   /* 默认：与父元素同层 */
z-index: 1;     /* 正整数：数值越大越在上层 */
z-index: -1;     /* 负数：在普通内容下方 */

浮动属性 float​

float: none;    /* 默认：不浮动 */
float: left;    /* 左浮动 */
float: right;   /* 右浮动 */

清除浮动：

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

透明度 opacity​

opacity: 1;      /* 完全不透明 */
opacity: 0.5;    /* 半透明 */
opacity: 0;      /* 完全透明 */

/* 与 rgba 的区别 */
/* opacity 影响整个元素（包括子元素） */
/* rgba 只影响背景颜色 */

鼠标样式 cursor​

cursor: default;      /* 默认箭头 */
cursor: pointer;      /* 手型 */
cursor: text;         /* 文本选择 */
cursor: move;         /* 移动 */
cursor: not-allowed;  /* 禁止 */
cursor: wait;         /* 等待/加载 */
cursor: help;         /* 帮助 */
cursor: crosshair;    /* 十字 */

阴影属性​

盒子阴影 box-shadow​

/* 基础用法 */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

/* 参数：水平偏移 垂直偏移 模糊距离 颜色 */
box-shadow: h-shadow v-shadow blur spread color inset;

/* 多重阴影 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
            0 4px 8px rgba(0, 0, 0, 0.1);

/* 内阴影 */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);

/* 常用效果 */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);           /* 卡片 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);            /* 浮动元素 */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);        /* 弹窗 */

效果预览： 不同 box-shadow 效果：

  • 卡片阴影 - 轻柔的投影效果
  • 弹窗阴影 - 更明显的深度效果
  • 内阴影 - 边框内部的阴影效果

文字阴影 text-shadow​

/* 参数：水平偏移 垂直偏移 模糊距离 颜色 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

/* 多重阴影 */
text-shadow: 1px 1px 0 white,
             2px 2px 0 rgba(0, 0, 0, 0.1);

/* 发光效果 */
text-shadow: 0 0 10px #3498db,
             0 0 20px #3498db,
             0 0 30px #3498db;

效果预览： 带有 text-shadow 的文字效果，阴影参数为 2px 2px 4px rgba(0,0,0,0.3)。

变形属性 transform​

/* 2D 变形 */
transform: rotate(45deg);           /* 旋转 */
transform: translate(10px, 20px); /* 移动 */
transform: scale(1.2);             /* 缩放 */
transform: skew(10deg, 20deg);     /* 倾斜 */

/* 组合变形 */
transform: rotate(45deg) scale(1.2);

/* 3D 变形 */
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: perspective(500px) rotateX(45deg);

过渡属性 transition​

/* 完整写法 */
transition: property duration timing-function delay;

/* 常用简写 */
transition: all 0.3s ease;
transition: background-color 0.3s, transform 0.5s ease-in-out;
transition: opacity 0.3s linear 0.1s;

/* 单独设置 */
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;

/* 常用 timing-function */
transition-timing-function: ease;        /* 慢-快-慢 */
transition-timing-function: linear;      /* 匀速 */
transition-timing-function: ease-in;     /* 慢开始 */
transition-timing-function: ease-out;    /* 慢结束 */
transition-timing-function: ease-in-out; /* 慢开始和结束 */

小结​

本章学习了：

  1. 文本属性：字体、大小、粗细、对齐、颜色等
  2. 背景属性：颜色、图片、重复、位置、尺寸
  3. 边框属性：宽度、样式、颜色、圆角
  4. 盒模型属性：margin、padding、width、height、box-sizing
  5. 显示属性：display 的各种值
  6. 定位属性：position 和 z-index
  7. 其他属性：overflow、opacity、cursor、shadow、transform、transition

练习​

  1. 设置一个段落的完整文字样式
  2. 创建一个带渐变背景的卡片
  3. 实现不同边框样式的效果
  4. 理解 content-box 和 border-box 的区别
  5. 创建一个带 hover 动画效果的按钮