CSS核心基础--CSS样式规则
CSS样式
如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS，实现结构与表现的分离。
CSS样式
在HTML编写过程中我们除了应用基本的标签元素还会使用css样式来丰富界面使之有不同的呈现效果。
未设置css样式
设置css样式
单击此处添加副标题内容
CSS样式规则
01
CSS样式规则
CSS 代码规范还是有存在的必要的，尤其是在团队配合，多人协作下，规范就显得尤为重要。
图1-1
属性的书写形式
02
属性的书写形式
在上面图1-1中：
1.选择器用于指定CSS样式作用的HTML对象。花括号内是对该对象设置的其体样式。
2.属性和属性值以“键值对”的形式出现，
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等，
4.属性和属性值之间用英文”:”连接
5.多个“键值对”之间用英文”;”进行区分
总结
03
通过CSS样式简介了解
CSS样式是什么
通过CSS样式规则简介了解
CSS样式规则
了解掌握属性的书写形式
总结
小任务
要求：
1、规范使用CSS样式规则实现如下图样式：
感
谢
聆
听
BUSENESS ACT
在网页设计领域，HTML5 和 CSS3 是两个至关重要的技术，它们共同负责构建现代网页的结构和外观。HTML5 提供了丰富的语义化标签，用于描述页面内容，而 CSS3 则是用于控制这些内容的展示方式，使得网页不仅美观，而且易于维护和更新。
CSS（Cascading Style Sheets）样式规则是CSS的核心组成部分，它定义了HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。CSS将内容的结构与外观分离，允许开发者独立地更改样式而不会影响页面的内容。
1. CSS 样式规则的基本结构：
- 选择器：选择器是CSS样式规则中的起点，它指定样式将应用于哪些HTML元素。例如，`p` 选择器表示所有段落元素，`#header` 选择器针对ID为"header"的元素，`.class` 选择器则应用于具有特定类名的元素。
- 花括号：选择器后面的一对大括号 `{}` 内包含要应用的样式属性和对应的值。
- 属性和属性值：每个样式规则由一个或多个属性-值对组成，如 `color: red;` 定义文本颜色为红色，`font-size: 16px;` 设置字体大小为16像素。
- 分隔符：属性和其值之间用冒号 `:` 分割，而每个属性-值对之间则用分号 `;` 隔开。
2. CSS 代码规范：
- 为了保证代码的可读性和团队协作的效率，遵循一定的编码规范是必要的。这包括但不限于：
- 使用一致的缩进，通常为2或4个空格。
- 每行只定义一个属性-值对，以提高可读性。
- 尽量避免使用内联样式，优先使用外部样式表或内部样式块。
- 注释清晰，以便理解代码的用途和功能。
3. 属性的书写形式：
- 保持属性名称全小写，如 `background-color` 而非 `Background-Color`。
- 使用简写形式可以减少代码量，例如 `padding: 10px;` 代替 `padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;`。
- 当需要定义多个值时，如边框宽度，顺序通常是 `border-width: top right bottom left;`。
学习和熟练掌握CSS样式规则后，你可以创建各种复杂的布局和视觉效果，包括但不限于色彩、字体、间距、布局、动画和响应式设计。在实际项目中，这将帮助你实现美观、功能丰富的网页，并确保代码的可维护性。
在实践任务中，根据提供的要求，你需要遵循这些CSS样式规则，实现特定的界面样式。这可能涉及设置背景颜色、字体样式、元素的尺寸和位置等。记住，良好的代码组织和规范能提高团队的工作效率，也是成为一名专业网页设计师的关键要素。
