css样式表制作

CSS样式表制作基础

CSS（层叠样式表）用于控制网页的视觉呈现。通过CSS可以定义字体、颜色、布局等样式属性。

基本语法结构 选择器 { 属性: 值; 属性: 值; }

示例代码

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

.header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

CSS选择器类型

元素选择器

p {
  color: blue;
}

类选择器

.highlight {
  background-color: yellow;
}

ID选择器

#main-content {
  width: 80%;
  margin: 0 auto;
}

属性选择器

input[type="text"] {
  border: 1px solid #ccc;
}

CSS布局技术

Flexbox布局

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid布局

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

浮动布局

.float-left {
  float: left;
  width: 30%;
}

响应式设计

媒体查询

@media screen and (max-width: 768px) {
  .menu {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
}

视口单位

.full-width {
  width: 100vw;
  height: 100vh;
}

CSS动画效果

过渡效果

.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
}

关键帧动画

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 1s ease-in;
}

CSS预处理器

Sass变量

$primary-color: #3498db;
.button {
  background-color: $primary-color;
}

Less混合

.rounded-corners(@radius: 5px) {
  border-radius: @radius;
}
.box {
  .rounded-corners(10px);
}

CSS最佳实践

BEM命名规范

.block {}
.block__element {}
.block--modifier {}

CSS重置

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

性能优化

/* 避免通配符选择器 */
* {
  margin: 0;
}

/* 使用简写属性 */
padding: 10px 20px 10px 20px;
/* 简化为 */
padding: 10px 20px;

现代CSS特性

CSS变量

:root {
  --main-color: #06c;
}
.element {
  color: var(--main-color);
}

CSS Grid布局

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
}

Flexbox对齐

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}