W3C CSS 活动学习笔记

在这份学习笔记中，我们将学习 W3C CSS 的基本知识和实践技巧。CSS 是一种用于定义 HTML 页面样式的样式表语言，通过 CSS，我们可以控制网页中元素的样式，包括字体、颜色、大小、背景等。

CSS 基础语法

CSS 的基础语法由选择器、属性和值三部分组成，其中选择器用于选中 HTML 元素，属性表示要修改的样式属性，值表示要给样式属性设置的值。

例如，要将页面中所有段落文本的颜色设置为红色，可以使用以下 CSS 代码：

cssCopy Code
p {
  color: red;
}

CSS 样式优先级

当多个 CSS 规则同时作用于同一元素时，会发生样式冲突，此时需要了解 CSS 样式优先级。CSS 样式优先级是由选择器的特殊性和来源两部分组成，其中特殊性越高，来源越靠后的样式优先级越高。

例如，对于以下 CSS 代码：

cssCopy Code
/* 外部样式表 */
p {
  color: red;
}

/* 内部样式表 */
p {
  color: blue;
}

<!-- 内联样式 -->
<p style="color:green;">Hello World!</p>

元素 p 最终呈现的颜色将是绿色，因为内联样式的优先级最高。

CSS 布局技巧

除了基本语法和样式优先级，CSS 还提供了一些布局技巧，以帮助我们实现复杂的页面布局效果。其中比较常用的布局技巧包括浮动布局、定位布局和 Flexbox 布局等。

例如，要实现一个左侧固定宽度、右侧自适应宽度的两栏布局，可以使用以下 CSS 代码：

cssCopy Code
.container {
  width: 100%;
}

.left {
  float: left;
  width: 200px;
}

.right {
  margin-left: 200px;
}

CSS 实例代码

最后，我来展示一些实际的 CSS 代码，以帮助大家更好地理解 CSS 的应用场景。

按钮样式

cssCopy Code
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f44336;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #e53935;
}

文本溢出省略号

cssCopy Code
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

响应式图片

cssCopy Code
.responsive-image {
  max-width: 100%;
  height: auto;
}

通过以上 CSS 知识和实例，相信大家已经掌握了基本的 CSS 技能，可以开始实践自己的 CSS 项目了。