CSS知识点大全

CSS（层叠样式表）是一种用来描述网页和其他HTML文件样式的语言。以下是一些常见的CSS知识点和实例代码：

1. 字体样式：

p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
}

2. 背景和边框：

div {
  background-color: #cccccc;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

3. 浮动和定位：

.float-left {
  float: left;
  margin-right: 10px;
}
 
.position-relative {
  position: relative;
  top: 5px;
  left: 5px;
}

4. 列表样式：

ul {
  list-style-type: square;
}

5. 盒模型：

div {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid black;
  margin: 10px;
}

6. 响应式设计：

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

7. 伪类和伪元素：

a:link { color: blue; }
a:visited { color: green; }
a:hover { color: red; }
 
p::first-letter {
  font-size: 200%;
}

8. CSS3特效：

.box {
  width: 100px;
  height: 100px;
  background-color: yellow;
  box-shadow: 10px 10px 5px grey;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}
 
.box:hover {
  box-shadow: 15px 15px 5px grey;
  transform: rotate(10deg);
}

CSS是网页设计的核心技术之一，上述代码展示了一些基本的CSS样式和一些CSS3的动画效果，涵盖了CSS的常见知识点。