【CSS】CSS基本样式修饰

在CSS中，基础的样式修饰包括字体、颜色、背景、边框、布局等。以下是一些基本的CSS样式示例：

/* 字体样式 */
p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
 
/* 背景颜色和图片 */
body {
  background-color: #f0f0f0;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
 
/* 边框样式 */
div {
  border: 1px solid #000000;
  border-radius: 5px;
}
 
/* 布局 - 浮动和定位 */
img {
  float: left;
  margin-right: 20px;
}
 
/* 列表样式 */
ul {
  list-style-type: square;
}
 
/* 链接样式 */
a:link {
  color: #FF0000;
}
 
a:visited {
  color: #00FF00;
}
 
a:hover {
  color: #FF00FF;
}
 
a:active {
  color: #0000FF;
}
 
/* 伪类 - 首字下沉 */
p:first-letter {
  font-size: 200%;
  float: left;
}
 
/* 伪元素 - 内容插入 */
p::before {
  content: '[';
}
 
p::after {
  content: ']';
}
 
/* 显示和隐藏 */
.hidden {
  display: none;
}
 
.visible {
  visibility: hidden;
}

这些样式可以直接应用于HTML元素，提供基本的视觉修饰和交互体验。