跟着大佬学web前端笔记【CSS篇】

在这一部分中，我们将介绍CSS的基本选择器和一些常用的样式属性。

1. 基本选择器：

   • 标签选择器：直接使用HTML标签作为选择器。
   • 类选择器：通过class属性指定，以.开头。
   • ID选择器：通过id属性指定，以#开头。
   • 通用选择器：用*表示，匹配所有元素。
   • 分组选择器：用,分隔，可以将多个选择器组合在一起。

2. 常用样式属性：

   • color：文字颜色。
   • background-color：背景颜色。
   • font-size：字体大小。
   • font-weight：字体粗细。
   • text-align：文本水平对齐。
   • padding：内边距。
   • margin：外边距。
   • border：边框。
   • width和height：宽度和高度。

示例代码：

/* 标签选择器 */
p {
  color: blue;
}
 
/* 类选择器 */
.my-class {
  background-color: yellow;
}
 
/* ID选择器 */
#my-id {
  font-size: 20px;
}
 
/* 通用选择器 */
* {
  padding: 10px;
}
 
/* 分组选择器 */
h1, h2, h3 {
  font-weight: bold;
  text-align: center;
}

在HTML中使用这些选择器：

<p>这是一个段落。</p>
 
<div class="my-class">这是一个具有my-class类的div。</div>
 
<div id="my-id">这是一个具有my-id的div。</div>
 
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

以上代码展示了如何使用不同的选择器和样式属性来修饰HTML元素。