CSS属性和对应的值有哪些

CSS属性是网页样式设计的基础，通过定义CSS属性和对应的值，可以实现页面元素的美观与实用。下面是常用的CSS属性与对应的值： 1. 文本相关属性： color：定义文本颜色； font-size：定义文本字体大小； font-family：定义文本字体； text-align：定义文本水平对齐方式； text-indent：定义文本首行缩进； line-height：定义文本行高。 例如：

p{
  color: #333;
  font-size: 16px;
  font-family: Arial,sans-serif;
  text-align: center;
  text-indent: 2em;
  line-height: 1.5em;
}

2. 盒模型相关属性： width：定义元素宽度； height：定义元素高度； margin：定义元素外边距； padding：定义元素内边距； border：定义元素边框。 例如：

div{
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #999;
}

3. 背景相关属性： background-color：定义背景颜色； background-image：定义背景图片； background-repeat：定义背景图片是否重复； background-position：定义背景图片位置。 例如：

body{
  background-color: #f5f5f5;
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

4. 定位相关属性： position：定义元素定位方式； left、right、top、bottom：定义元素相对于父元素的位置。 例如：

#Box{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border: 1px solid #999;
}

5. 动画相关属性： animation-name：定义动画名称； animation-duration：定义动画时长； animation-timing-function：定义动画速度曲线； animation-delay：定义动画延迟播放时间； animation-iteration-count：定义动画播放次数。 例如：

#Box{
  animation-name: move;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
}
@keyframes move{
  0% {left: 0;}
  50% {left: 50%;}
  100% {left: 100%;}
}

总之，想要实现网页设计的各种效果，熟练掌握CSS属性和对应的值是必不可少的。