css知识点总结

CSS（层叠样式表）是一种用来为网页添加样式的语言，可以控制网页的布局、颜色、字体大小等多种属性。以下是一些常见的CSS知识点和它们的简单用法：

1. 字体和文本样式：

/* 字体大小 */
p {
  font-size: 16px;
}
 
/* 字体加粗 */
strong {
  font-weight: bold;
}
 
/* 文本颜色 */
p {
  color: red;
}
 
/* 文本对齐 */
p {
  text-align: center;
}

2. 背景和边框样式：

/* 背景颜色 */
body {
  background-color: #f3f3f3;
}
 
/* 边框宽度和样式 */
div {
  border: 1px solid black;
}
 
/* 圆角边框 */
div {
  border-radius: 5px;
}
 
/* 背景图片 */
body {
  background-image: url('background.jpg');
}

3. 布局和浮动：

/* 宽度和高度 */
div {
  width: 100px;
  height: 100px;
}
 
/* 外边距和内边距 */
p {
  margin: 10px;
  padding: 20px;
}
 
/* 浮动（左侧浮动） */
img {
  float: left;
}

4. 盒模型和定位：

/* 盒模型：内容、边框、内边距、外边距 */
div {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}
 
/* 绝对定位 */
div {
  position: absolute;
  top: 10px;
  left: 10px;
}
 
/* 相对定位 */
div {
  position: relative;
  top: 5px;
}

5. 伪类和伪元素：

/* 链接伪类 */
a:link {
  color: blue;
}
a:hover {
  color: red;
}
 
/* 首字下沉点 */
p::first-letter {
  font-size: 200%;
}
 
/* 伪元素（插入内容） */
p::before {
  content: '前缀';
}

6. CSS3特效和动画：

/* 阴影效果 */
div {
  box-shadow: 5px 5px 10px #888888;
}
 
/* 圆形图片 */
img {
  border-radius: 50%;
}
 
/* CSS3 动画 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: example;
  animation-duration: 4s;
}

CSS是网页设计的核心技术之一，上面的例子涵盖了CSS的基础知识点。在实际开发中，CSS可以用于创建复杂的布局和动画，以及响应式设计，以适应不同的屏幕尺寸。