css制作样式

CSS 基础语法

CSS（层叠样式表）通过选择器和声明块定义样式。基本语法如下：

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

示例：

p {
  color: blue;
  font-size: 16px;
}

选择器类型

1. 元素选择器：直接使用 HTML 标签名。

   h1 {
     font-weight: bold;
   }

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

   .highlight {
     background-color: yellow;
   }

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

   #header {
     padding: 20px;
   }

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

   [type="text"] {
     border: 1px solid gray;
   }

盒模型

CSS 盒模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。

div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 15px;
}

布局技术

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

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

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

   .grid-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
   }

响应式设计

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

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

动画与过渡

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

   

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

2. 动画（Animation）：通过关键帧定义复杂动画。

   @keyframes slide {
     from { transform: translateX(0); }
     to { transform: translateX(100px); }
   }
   .box {
     animation: slide 2s infinite;
   }

常见样式示例

1. 居中元素

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

2. 阴影效果

   .shadow {
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
   }

3. 圆角边框

   .rounded {
     border-radius: 8px;
   }

通过组合选择器、布局技术和样式属性，可以高效实现复杂的页面设计。