css 控制html代码【html+css代码大全：代码示例】

CSS（层叠样式表）是一种用于控制HTML代码外观和布局的技术。通过CSS，我们可以选择性地对HTML元素应用样式，包括字体、颜色、背景、边框、布局等等。下面是一些常见的CSS代码示例，以帮助您理解如何通过CSS控制HTML代码。

1. 选择器：CSS使用选择器来选择要应用样式的HTML元素。例如，使用标签选择器，可以选择所有的段落元素，并将它们的颜色设置为红色：

p {
  color: red;
}

2. 类选择器：除了标签选择器外，我们还可以使用类选择器来选择具有相同类名的元素。例如，我们可以创建一个类名为"highlight"的类选择器，并将其应用于HTML中的多个元素：

.highlight {
  background-color: yellow;
}

3. ID选择器：与类选择器类似，ID选择器用于选择具有相同ID的元素。每个ID只能在HTML文档中唯一。例如，我们可以创建一个ID为"logo"的选择器，并将其应用于一个图像元素：

#logo {
  width: 200px;
  height: 100px;
}

4. 盒模型：CSS中的盒模型用于定义和控制元素的尺寸、边距和边框。例如，我们可以使用盒模型属性来设置元素的宽度、高度和边距：

.box {
  width: 200px;
  height: 200px;
  margin: 10px;
  padding: 20px;
  border: 1px solid black;
}

5. 浮动：通过浮动属性，我们可以将元素从正常的文档流中移动，并使其向左或向右浮动。这对于创建多列布局非常有用。例如，我们可以使用浮动属性将两个div元素并排显示：

.float-left {
  float: left;
  width: 50%;
}
.float-right {
  float: right;
  width: 50%;
}

6. 媒体查询：媒体查询允许我们根据设备的特性（如屏幕宽度）来应用不同的样式。这对于实现响应式设计非常有用。例如，我们可以使用媒体查询来设置在小屏幕上隐藏某个元素：

@media screen and (max-width: 600px) {
  .hide-on-small-screen {
    display: none;
  }
}

通过CSS，我们可以轻松地控制HTML代码的外观和布局。上述示例代码只是CSS的冰山一角，您可以根据需要使用更多的CSS属性和选择器来实现更复杂的样式效果。