网页制作css笔记

CSS 基础概念

CSS（层叠样式表）用于控制网页的样式和布局。通过选择器（Selector）和声明块（Declaration Block）的组合，可以精确控制HTML元素的显示效果。

选择器类型

元素选择器：直接匹配HTML标签名称。

p {
  color: blue;
}

类选择器：以.开头，匹配class属性。

.highlight {
  background-color: yellow;
}

ID选择器：以#开头，匹配id属性（页面唯一）。

#header {
  font-size: 24px;
}

属性选择器：根据属性匹配元素。

a[target="_blank"] {
  color: red;
}

盒模型

每个HTML元素被视为一个盒子，包含以下部分：

• 内容区（Content）：显示实际内容。
• 内边距（Padding）：内容与边框之间的空间。
• 边框（Border）：围绕内边距的线条。
• 外边距（Margin）：盒子与其他元素之间的透明区域。

通过box-sizing属性可调整计算方式：

* {
  box-sizing: border-box; /* 宽度包含padding和border */
}

常用布局技术

Flexbox：弹性布局，适合一维排列。

.container {
  display: flex;
  justify-content: center; /* 水平对齐 */
  align-items: center;     /* 垂直对齐 */
}

Grid：网格布局，适合二维排列。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 两列，比例1:2 */
  gap: 10px;                      /* 间距 */
}

响应式设计

使用媒体查询（Media Queries）适配不同设备：

@media (max-width: 768px) {
  .menu {
    display: none; /* 小屏幕隐藏菜单 */
  }
}

动画与过渡

过渡（Transition）：平滑改变属性值。

.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #555;
}

关键帧动画（Keyframes）：定义复杂动画序列。

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element {
  animation: fadeIn 2s;
}

实用技巧

• 变量：使用CSS变量提高可维护性。

  :root {
  --main-color: #3498db;
  }
  .header {
  color: var(--main-color);
  }

• 伪类和伪元素：

  a:hover { color: green; }          /* 悬停状态 */
  p::first-line { font-weight: bold; } /* 首行样式 */

• BEM命名规范：避免样式冲突。

  

  .block__element--modifier { ... }