跳至内容
概览
软件开发
Web开发
CSS 基础

CSS 基础

CSS（Cascading Style Sheets，层叠样式表）用于控制 HTML 元素的视觉呈现——字体、颜色、布局、动画等。掌握 CSS 的核心是理解选择器（找到谁）和盒模型（怎么布局）。

引入方式

方式写法推荐场景
内联样式<p style="color:red">临时调试
<style> 标签写在 <head> 内单页面样式
外部文件<link rel="stylesheet" href="style.css">正式项目，推荐

优先级：内联 > <style> > 外部文件（越近越优先）。

语法结构 

选择器 {
  属性: 值;
  属性: 值;
}

注释用 /* … */，单行多行均可。

选择器

基本选择器

选择器语法说明
标签选择器p { }匹配所有 <p>
类选择器.btn { }匹配 class="btn" 的元素
ID 选择器#nav { }匹配 id="nav" 的元素，页面唯一
通用选择器* { }匹配所有元素
/* 去掉所有元素的默认 margin 和 padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#header { background-color: #333; }
.btn    { border-radius: 4px; }
p       { line-height: 1.6; }

组合选择器 

/* 后代选择器（div 内所有 span） */
div span { color: red; }

/* 子选择器（div 的直接子 span） */
div > span { color: blue; }

/* 相邻兄弟（紧接在 div 后的 span） */
div + span { color: green; }

/* 通用兄弟（div 后所有同级 span） */
div ~ span { color: orange; }

/* 分组（并列选中多个标签） */
h1, h2, h3 { font-family: sans-serif; }

属性选择器 

[type]            /* 含 type 属性的元素 */
[type="text"]     /* type 属性值为 text */
input[type="text"] { border: 1px solid #ccc; }
[href^="https"]   /* href 以 https 开头 */
[href$=".pdf"]    /* href 以 .pdf 结尾 */
[class*="btn"]    /* class 中包含 btn */

伪类选择器 

/* 链接状态 */
a:link    { color: blue; }     /* 未访问 */
a:visited { color: purple; }   /* 已访问 */
a:hover   { color: red; }      /* 鼠标悬浮 */
a:active  { color: orange; }   /* 点击不松开 */

/* 表单 */
input:focus { outline: 2px solid steelblue; }

/* 结构 */
li:first-child  { font-weight: bold; }
li:last-child   { color: gray; }
li:nth-child(2) { background: #f0f0f0; }

伪元素选择器 

p::first-letter { font-size: 2em; }    /* 首字母 */
p::first-line   { font-weight: bold; } /* 首行 */

/* 清除浮动经典写法 */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

选择器优先级

行内样式 > ID 选择器 > 类/伪类/属性选择器 > 标签选择器 > 通用选择器

相同权重时，写在后面的规则生效（就近原则）。

常用属性

字体与文本 

p {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;   /* normal | bold | 100~900 */
  color: #333;

  text-align: center;     /* left | center | right | justify */
  text-decoration: none;  /* none | underline | line-through */
  text-indent: 2em;       /* 首行缩进 */
  line-height: 1.6;       /* 行高 */
  letter-spacing: 0.05em; /* 字间距 */
}

/* 常用：去掉 a 标签下划线 */
a { text-decoration: none; }

背景 

div {
  background-color: #f5f5f5;
  background-image: url("bg.jpg");
  background-repeat: no-repeat; /* repeat | repeat-x | repeat-y | no-repeat */
  background-position: center center;
  background-size: cover;       /* contain | cover | 100% auto */
  background-attachment: fixed; /* scroll（默认）| fixed（视差效果） */

  /* 简写 */
  background: #f5f5f5 url("bg.jpg") no-repeat center/cover;
}

边框 

p {
  border: 2px solid #ccc;                /* 简写：宽度 样式 颜色 */
  border-top: 3px dashed red;            /* 单边设置 */
  border-radius: 8px;                    /* 圆角 */
  border-radius: 50%;                    /* 长宽相等时变圆形 */
}

/* border-style 取值 */
/* none | solid | dashed | dotted | double | groove | ridge */

display 属性 

/* 常用取值 */
.hidden   { display: none; }         /* 隐藏，不占位 */
.block    { display: block; }        /* 块级 */
.inline   { display: inline; }       /* 行内 */
.flex-box { display: inline-block; } /* 行内块：可设宽高，不独占行 */
display: none 隐藏后不占位；visibility: hidden 隐藏后仍占位。

盒模型 

┌──────────────────────────────────┐
│          margin（外边距）         │
│  ┌────────────────────────────┐  │
│  │       border（边框）        │  │
│  │  ┌──────────────────────┐  │  │
│  │  │   padding（内边距）   │  │  │
│  │  │  ┌────────────────┐  │  │  │
│  │  │  │   content      │  │  │  │
│  │  │  └────────────────┘  │  │  │
│  │  └──────────────────────┘  │  │
│  └────────────────────────────┘  │
└──────────────────────────────────┘
div {
  width: 300px;
  height: 200px;
  padding: 16px;          /* 内边距（上下左右） */
  padding: 10px 20px;     /* 上下 10px，左右 20px */
  margin: 0 auto;         /* 块级元素水平居中 */
  border: 1px solid #ccc;

  /* 推荐：让 width/height 包含 padding 和 border */
  box-sizing: border-box;
}

浏览器默认给 body 加了 8px margin，通常在全局重置掉：

* { margin: 0; padding: 0; box-sizing: border-box; }

浮动 

.left  { float: left; }
.right { float: right; }
.clear { clear: both; }    /* 清除两侧浮动影响 */

/* 父元素塌陷的通用解法 */
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

浮动元素脱离正常文档流，块级特性消失（大小由内容决定）。

溢出 

div {
  overflow: hidden;   /* 裁剪溢出 */
  overflow: scroll;   /* 始终显示滚动条 */
  overflow: auto;     /* 溢出时才显示滚动条 */
}

/* 圆形头像 */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}
.avatar img { width: 100%; }

定位

定位方式说明是否脱离文档流
static默认，无法偏移否
relative相对自身原位置偏移否
absolute相对最近的已定位祖先是
fixed相对浏览器窗口是
sticky滚动到阈值后固定否（粘住前）
/* 绝对定位常用场景：子绝父相 */
.parent { position: relative; }
.badge {
  position: absolute;
  top: -5px;
  right: -5px;
}

/* 固定定位：回到顶部按钮 */
.back-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
}

/* 垂直水平居中（现代写法） */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

z-index 层叠

z-index 只对已定位元素（非 static）生效，数值越大越靠上。

/* 模态框经典三层结构 */
.page-content { z-index: 0; }      /* 底层内容 */
.mask {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}
.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: white;
  padding: 24px;
  border-radius: 8px;
}

透明度 

/* opacity 同时影响颜色和内容（包括文字） */
.dim { opacity: 0.5; }

/* rgba 只影响颜色，不影响文字透明度 */
.dim-bg { background-color: rgba(0, 0, 0, 0.5); }

Flexbox 快速布局 

.container {
  display: flex;
  flex-direction: row;         /* 主轴方向：row | column */
  justify-content: center;     /* 主轴对齐：flex-start | center | space-between */
  align-items: center;         /* 交叉轴对齐：stretch | center | flex-start */
  flex-wrap: wrap;             /* 是否换行 */
  gap: 16px;                   /* 子元素间距 */
}

.item {
  flex: 1;                     /* 等分剩余空间 */
}
最后更新于
HTML 基础JavaScript 基础