站点示例客户端：完整的网页设计与开发实践

大奇鸭

于 2024-08-29 16:12:41 发布

阅读量771

点赞数 10

本文链接：https://blog.csdn.net/weixin_31720909/article/details/141693379

版权

本文还有配套的精品资源，点击获取

简介：“trincheiraexemplo1：站点示例客户端”是一个旨在展示或测试网站客户端功能的项目，包含了多种网页设计和开发元素，特别是与CSS相关的技术。CSS负责定义网页的布局、颜色、字体、大小等视觉样式。项目使用Git版本控制系统，并以"master"分支代表项目的主线代码。CSS的关键点包括选择器、盒模型、布局模式、响应式设计、CSS预处理器、CSS权重、动画和过渡、浏览器兼容性、CSS重置/正常化以及BEM方法。通过研究"trincheiraexemplo1-master"文件，可以学习到CSS技巧和最佳实践。

1. CSS选择器的深入探索

CSS选择器的基本概念

CSS选择器是页面样式的基石，它决定了哪些元素将被应用特定的样式规则。基本选择器包括元素选择器、类选择器、ID选择器和属性选择器。了解它们的使用和优先级对于开发者来说至关重要。

/* 元素选择器 */
p {
  color: blue;
}

/* 类选择器 */
.highlight {
  background-color: yellow;
}

/* ID选择器 */
#main-header {
  font-size: 24px;
}

/* 属性选择器 */
a[href="***"] {
  color: green;
}

选择器的组合与复杂选择器

为了精确控制样式，CSS允许选择器组合使用，例如使用逗号分隔选择多个元素，以及使用空格和大于号等符号来表示父子或相邻兄弟关系。

/* 同时为p元素和li元素设置样式 */
p, li {
  font-size: 16px;
}

/* 设置子代的p元素样式 */
div > p {
  color: red;
}

/* 设置相邻兄弟元素的样式 */
h1 + p {
  margin-top: 0;
}

伪类和伪元素的高级用法

伪类和伪元素为开发者提供了更多选择元素的方式，它们可以用来添加特殊效果，如悬停、访问过的链接、表单元素状态等，以及在元素内容之前或之后插入内容。

/* 伪类 */
a:hover {
  text-decoration: underline;
}

input[type="checkbox"]:checked + label {
  color: red;
}

/* 伪元素 */
p::first-line {
  font-weight: bold;
}

p::before {
  content: "»";
  margin-right: 5px;
}

通过不断深入探索CSS选择器的多样性与灵活性，开发者能够更加精确和有效地对HTML文档进行样式化。随着实践的积累，你将能够灵活运用各种选择器，以实现更加复杂和富有表现力的网页设计。

2. 精通CSS盒模型

2.1 盒模型基础知识

2.1.1 盒模型的组成与作用

在网页设计中，CSS盒模型是构建布局和元素排版的基础概念。盒模型描述了HTML元素如何显示为矩形盒子，以及这些盒子是如何相互作用的。每个盒子由四个主要部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。这些部分共同作用，确定了元素的最终尺寸和在页面上的位置。

内容区是盒子中的实际内容区域，而内边距为内容提供呼吸空间，边框则围绕内边距提供视觉上的界定，外边距用于控制盒子之间的距离。通过调整这些属性，设计师可以精确控制布局的各个方面，包括元素之间的空间、元素的尺寸以及元素之间的对齐方式。

2.1.2 margin、border、padding和content的计算方式

CSS盒模型的计算方式对布局的精确控制至关重要。盒子的总宽度和高度是由内容区的宽度和高度加上边距、边框和内边距的总和决定的。具体来说：

width 和 height 属性定义了内容区域的尺寸。
padding 属性定义了内容区域与边框之间的空间。
border 属性定义了盒子的边框厚度和样式。
margin 属性定义了盒子与其它盒子之间的空间。

当设置一个元素的宽度时，它只包括内容区的宽度。如果添加了内边距和边框，那么这些部分会在元素的总宽度和高度上增加。外边距不计入总尺寸，但会影响元素与其兄弟元素之间的距离。

2.2 盒模型的高级技巧

2.2.1 盒模型对布局的影响

理解盒模型对布局的影响是CSS布局策略中的关键。如果不对盒模型有深刻的理解，很容易在布局中遇到难以预测的空间问题。例如，不正确的内边距设置可能导致元素比预期的要宽，进而影响整个布局的布局。

为了有效管理布局，设计师需要考虑盒子的每一方面。外边距合并是盒模型中影响布局的一个特殊现象，需要特别注意。当两个垂直相邻的元素使用外边距时，它们的外边距会合并成一个外边距，这个外边距的大小是两个外边距中较大的那个。这可以用于创建间距，但也会导致意外的布局变化，设计师需要了解如何处理这种情况。

2.2.2 解决常见布局问题的策略

面对盒模型相关的布局问题，一些策略可以帮助我们有效解决。例如：

当需要元素的尺寸包含边框和内边距时，可以使用 box-sizing: border-box; 属性。这样设置后，元素的宽度和高度计算将包括内容、内边距和边框。
对于外边距合并问题，一种方法是使用 display: inline-block; 替代块级元素，或者给元素添加 overflow: hidden; 属性。

以下是使用 box-sizing 的CSS代码示例：

*, *::before, *::after {
  box-sizing: border-box;
}

这段代码确保所有元素的宽高都包含内容、内边距和边框，使布局更为直观和容易控制。

通过深入理解盒模型的各个方面以及它对布局的影响，开发者可以更加灵活地控制页面的布局，解决许多布局中出现的问题。这种对盒模型的熟练运用，是成为一个高级前端开发者必不可少的技能。

3. 现代网页布局技术

现代网页布局技术随着Web标准的发展而不断演进，传统布局技术如表格和浮动布局，已经被更为灵活、强大的CSS布局技术所取代。本章节将探讨两种现代网页布局技术：Flexbox和Grid。这两种布局模型极大地简化了页面布局的构建过程，并提供了对复杂布局的更强控制能力。

3.1 Flexbox布局原理与应用

Flexbox布局，全称为弹性盒子布局，它提供了一种更加高效的方式来对齐和分布容器内的项目空间，即使它们的大小未知或是动态变化的。

3.1.1 Flexbox的基本概念和属性

Flexbox布局模型由容器和项目组成，容器定义了子项目的布局环境，而项目则是在布局环境中进行排列的元素。容器可以决定子项目的排列方向、换行行为、对齐方式和尺寸比例等。

核心属性包括： - display : 设置为 flex 或 inline-flex ，定义了容器的类型。 - flex-direction : 确定主轴方向，可以是 row 、 row-reverse 、 column 、 column-reverse 。 - flex-wrap : 控制子项目是否换行，可以是 nowrap 、 wrap 、 wrap-reverse 。 - flex-flow : 是 flex-direction 和 flex-wrap 的简写属性。 - justify-content : 控制项目在主轴上的对齐方式。 - align-items : 控制项目在交叉轴上的对齐方式。 - align-content : 当项目有多行时，控制多行在交叉轴上的对齐方式。

3.1.2 解决复杂布局的Flexbox实例

Flexbox适用于多种复杂的布局场景。以下是一个实际案例，说明如何使用Flexbox创建一个响应式的导航栏。

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
}

.navbar-item {
    flex: 1;
    text-align: center;
    padding: 15px;
    color: white;
    text-decoration: none;
    &:hover {
        background-color: #ddd;
        color: black;
    }
}

在上述CSS代码中， .navbar 使用 display: flex; 声明了使用Flexbox布局。 justify-content: space-between; 属性使得导航栏中的项目分散排列， align-items: center; 则是让项目在垂直方向上居中对齐。 .navbar-item 是导航栏中的每一个链接项，通过设置 flex: 1; 每个链接项将会平分空间。 :hover 伪类为导航项提供了交互效果。

以下是导航栏的HTML结构：

<nav class="navbar">
  <a class="navbar-item" href="#">Home</a>
  <a class="navbar-item" href="#">About</a>
  <a class="navbar-item" href="#">Services</a>
  <a class="navbar-item" href="#">Contact</a>
</nav>

通过上述的代码和解释，可以清晰地看到使用Flexbox来实现响应式导航栏的灵活性和简洁性。布局适应不同的屏幕尺寸，项目间均匀分布，无需媒体查询即可自动适应屏幕大小。

3.2 Grid布局详解

Grid布局，即网格布局，它将页面分割成网格结构，可以更精确地控制网格内元素的位置和大小。与Flexbox相比，Grid布局更适合二维布局。

3.2.1 Grid布局的基本属性和用法

Grid布局由行(row)和列(column)构成，提供了一种在两个维度上排列元素的方式。

核心属性包括： - display : 设置为 grid 或 inline-grid ，定义了容器的类型。 - grid-template-columns 和 grid-template-rows : 定义列和行的大小。 - grid-template-areas : 通过命名区域来定义网格的结构。 - grid-column 和 grid-row : 用于指定网格项的位置和跨越的行数/列数。 - grid-gap : 设置网格项目之间的间隙。

3.2.2 构建复杂网格系统的案例

下面的CSS代码展示了如何利用Grid布局来构建一个复杂的网页布局。

.container {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: auto 50px;
    grid-template-areas: 
        "sidebar main"
        "sidebar footer";
    grid-gap: 10px;
}

.sidebar {
    grid-area: sidebar;
    /* 样式细节 */
}

.main-content {
    grid-area: main;
    /* 样式细节 */
}

.footer {
    grid-area: footer;
    /* 样式细节 */
}

在上述代码中， .container 声明了一个网格容器，定义了两列和两行的布局，以及每个区域的名称。 .sidebar 、 .main-content 和 .footer 则是网格中的项目，通过 grid-area 属性分别指定了它们在网格中的位置。

此处的HTML结构可能如下：

<div class="container">
  <div class="sidebar">Sidebar Content</div>
  <div class="main-content">Main Content</div>
  <div class="footer">Footer</div>
</div>

通过上述案例，我们可以看到Grid布局的强大之处，它使得创建复杂的布局变得直接且简单。网格的对齐、间距和区域划分都非常直观，易于理解和维护。

在现代网页布局技术中，Flexbox和Grid布局互为补充，各自解决了一定的布局需求。开发者应根据项目的具体需求选择最合适的布局方式。在响应式网页设计中，这两种布局技术更是提供了前所未有的灵活性和控制力。

以上就是现代网页布局技术中的Flexbox和Grid布局的详细介绍和应用。随着CSS技术的不断演进，我们有理由相信未来的布局技术会更加灵活和强大。

4. 响应式网页设计的实战技巧

4.1 响应式设计的基本理念

在我们深入探讨响应式设计的实战技巧之前，了解响应式设计的基本理念是至关重要的。响应式设计是一种网页设计方法，它使得网页能够以灵活的方式适应不同尺寸的设备屏幕。这不仅仅是为了适应不同的屏幕尺寸，更是为了提供最优化的用户体验。响应式设计依赖于灵活的布局、可伸缩的图片以及媒体查询，以达到在各种设备上都能保持内容的可访问性和易读性。

4.1.1 响应式设计的媒体查询使用

媒体查询（Media Queries）是CSS3中引入的一个特性，它允许我们根据设备的特性来应用不同的样式规则。我们可以根据屏幕宽度、高度、分辨率等特性来调整页面布局和样式。下面是一个简单的媒体查询示例，展示了如何为不同屏幕宽度的设备设置不同的背景颜色：

/* 基础样式 */
body {
    background-color: white;
}

/* 当屏幕宽度为768px或更小时 */
@media screen and (max-width: 768px) {
    body {
        background-color: lightgray;
    }
}

/* 当屏幕宽度为480px或更小时 */
@media screen and (max-width: 480px) {
    body {
        background-color: silver;
    }
}

在上述代码中， @media 规则用于定义媒体查询， screen 代表我们针对的是屏幕媒体类型， max-width 则是用来指定媒体的最大宽度。如果屏幕宽度小于或等于768px，页面背景色将变为 lightgray ；如果屏幕宽度小于或等于480px，背景色则变为 silver 。

4.1.2 常用的布局断点和设计原则

布局断点（Breakpoints）是指在不同的屏幕尺寸下，页面布局发生改变的临界点。合理地设置断点能够确保在各种屏幕尺寸下都能提供优秀的用户体验。常见的断点包括手机（480px以下）、平板（768px到1024px之间）以及桌面（1024px以上）。

在设计响应式布局时，我们应该遵循以下原则：

流式布局（Fluid Grids） ：使用百分比而不是固定像素来定义元素的宽度，使得元素大小能够随着屏幕尺寸的变化而变化。
弹性图片（Elastic Images） ：图片应该能够自动缩放，以适应不同的屏幕尺寸。
媒体查询（Media Queries） ：合理地利用媒体查询来应用不同的样式规则，从而优化布局和设计。
避免使用固定的字体大小 ：字体大小应使用相对单位，如em或rem，以保证在不同设备上的可读性。

在本章的下一节中，我们将具体应用这些理念，介绍如何制作响应式导航栏和菜单以及如何处理响应式图片和视频。

5. CSS预处理器的高效运用

5.1 CSS预处理器简介

CSS预处理器扩展了CSS的功能，为前端开发人员提供了更高效和更模块化的编写CSS的方式。它们允许使用变量、嵌套规则、混合、函数等抽象概念，并最终编译成普通的CSS代码。

5.1.1 预处理器的主要功能和优势

CSS预处理器的主要功能包括变量（Variables）、混合（Mixins）、嵌套规则（Nesting）、继承（Inheritance）、函数（Functions）等。这些功能的优势在于：

变量：使得颜色、字体、尺寸等可以在整个样式表中重复使用的值被统一管理。
混合：允许创建可复用的代码块，这些代码块可以接受参数，非常适合创建跨浏览器的兼容性样式。
嵌套规则 ：允许开发者像在HTML中那样组织CSS，而不是逐行重复选择器。
继承：可以将一套样式属性从一个选择器传递给另一个，以避免重复代码。
函数：扩展了CSS的能力，例如在SASS中有颜色操作函数，可以动态地操作颜色。

5.1.2 SASS和LESS的对比分析

SASS（Syntactically Awesome Stylesheets）和LESS是两个流行的CSS预处理器。它们在语法和功能上有很多相似之处，但也有不同。

语法差异 ：SASS使用缩进来表示代码块，而LESS使用大括号和分号。SASS支持更接近于Ruby的语法，而LESS更接近于CSS原生语法。
性能和工具链 ：在性能方面，两者差异不大，都拥有良好的工具链支持。
社区和插件生态 ：由于LESS是基于JavaScript的，因此它可以在Node.js环境中使用，而SASS使用Ruby。这使得LESS在JavaScript开发者中可能更受欢迎，而SASS在Ruby社区中有更广泛的使用。
功能集 ：两者在基本功能上几乎相同，但是SASS还提供了更高级的特性，如条件语句、循环和列表处理。

5.2 利用预处理器增强CSS可维护性

5.2.1 变量、混合和函数的使用

预处理器通过提供变量、混合和函数的能力，极大地提高了CSS的可维护性。

变量的使用简化了样式的变更管理。例如，在SASS中，颜色代码可以被存储在一个变量中： ```scss // 定义变量 $primary-color: #333333;

// 使用变量 .button { background-color: $primary-color; } ```
混合在需要重复使用一组样式时非常有用。在SASS中定义和使用一个混合的例子： ```scss // 定义混合 @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

// 使用混合 .box { @include box-sizing; } ```
函数对于处理颜色或进行数学运算等任务非常有用。在SASS中对颜色进行操作的一个例子： ```scss // 对颜色进行淡化的函数 @function lighten-color($color, $amount) { @return mix(white, $color, $amount); }

// 使用函数 .light-text { color: lighten-color(#ff0000, 20%); } ```

5.2.2 组织代码和模块化的技巧

预处理器支持将CSS分解成多个文件，并通过 @import 语句将它们组织起来。这促进了模块化的设计，使得管理大型项目成为可能。

模块化的优点 包括更清晰的结构、更少的重复代码、更方便的维护和扩展。
代码组织的最佳实践 通常涉及将相关的CSS规则放在同一文件中，并在构建过程中将它们编译成一个单一的CSS文件。例如，使用SASS时，可以按组件或页面部分组织文件： ```scss // _buttons.scss .button { padding: 10px; border: 1px solid #ccc; // 其他按钮样式... }

// _layout.scss header { // 头部样式... }

footer { // 底部样式... }

// styles.scss @import "buttons"; @import "layout"; // 其他样式... ```
在大型项目中，组织代码的一种方法是使用组件化方法，为每个组件创建一个单独的SASS文件。然后使用 @import 语句将它们导入主样式表中。

通过掌握CSS预处理器的使用，开发者可以显著提高样式代码的效率和可维护性。预处理器不仅能够帮助开发者编写更加清晰和有组织的CSS，还能提供丰富的工具和抽象概念，简化开发流程和提高工作效率。

6. CSS权重和特异性规则

在Web开发中，CSS是构建和维护样式表的核心技术。了解和掌握CSS权重与特异性规则对于创建出既美观又功能强大的网页至关重要。随着项目规模的增长，CSS代码库常常变得复杂，权重和特异性的问题也随之浮现，需要谨慎处理。

6.1 理解CSS权重

CSS权重是指当两个或多个选择器针对同一个元素指定相同的样式属性时，浏览器如何决定应用哪一个选择器的样式。了解权重的计算方法和原理对于避免样式冲突，优化样式表的可维护性至关重要。

6.1.1 权重计算方法和原理

CSS权重的计算基于选择器的类型和数量。在权重的计算中，每种选择器都对应一个特定的数值。为了方便说明，我们可以将这些选择器分为几个类别：

内联样式：权重值最高，计为1000分
ID选择器：每个ID选择器计为100分
类选择器、伪类选择器和属性选择器：每个计为10分
元素选择器和伪元素选择器：每个计为1分
通用选择器（*）、关系选择器（>，+，~）和否定伪类（:not()）不贡献权重分，但会应用于样式规则

在实际应用中，权重分数是累加的，但要注意，权重是根据选择器的类型而定，不同类型的组合并不会导致权重分数的直接相加。

让我们通过一个例子来理解权重分数的计算：

body article .post h1 { /* 1 + 1 + 10 = 12分 */
  color: red;
}

.post h1 { /* 10 + 1 = 11分 */
  color: blue;
}

在上面的代码块中，我们有两个选择器都试图定义同一个 <h1> 元素的颜色。第一个选择器是更具体的选择器组合，它将赢得CSS计算的优先级，因此 <h1> 元素的颜色将是红色。

权重还会随着浏览器缓存和用户定义的样式表中样式规则的存在而变化，这些情况都可能影响最终应用的样式。因此，开发者需要清楚每个选择器的权重分值，并在编写CSS时充分考虑这一点。

6.1.2 解决冲突的策略和最佳实践

随着项目的复杂性增加，冲突变得不可避免。为了解决这些问题，需要制定一些CSS编码的最佳实践：

尽可能避免使用ID选择器来提高样式规则的权重。应该多使用类选择器，以保持权重较低，便于覆盖。
为组件定义一个可复用的类，并将相关的样式规则放在一个地方。这有助于减少重复代码，并简化权重冲突的管理。
使用统一的权重原则来避免不必要的冲突，比如始终在类选择器中添加一个特定的前缀。
利用浏览器开发者工具来检查和诊断样式冲突。在Chrome或Firefox中，可以轻松看到应用于特定元素的所有样式规则，并根据权重分来判断它们是如何生效的。

记住，适当的CSS注释也是避免未来冲突的关键。清晰的注释可以帮助其他开发者理解为什么某个样式被应用，以及它的优先级是多少。

6.2 管理和优化CSS特异性

特异性是CSS中用来决定哪个选择器在特定情况下最为适用的规则集。优化特异性不仅有助于管理大型的样式表，还可以提高Web页面的性能。

6.2.1 减少特异性冲突的方法

减少特异性冲突的一种常见方法是重置样式表。通过移除浏览器的默认样式，开发者可以开始构建一个不受浏览器默认样式干扰的样式表。这有助于减少冲突，因为所有样式都是从零开始。

* {
  margin: 0;
  padding: 0;
}

使用重置样式表的一个缺点是可能会导致开发中不必要的工作量增加，因为所有基本样式都需要重新定义。

另一种减少特异性冲突的方法是使用更具体的选择器来覆盖已有的规则。例如，如果一个元素的文本颜色被一个类选择器改变，但需要在特定情况下改变颜色，可以使用一个更具体的ID选择器来覆盖这个规则。

6.2.2 简化选择器的技巧

为了简化CSS和减少特异性的问题，可以考虑以下技巧：

尽量使用类选择器，因为它们既不会过度增加权重，又不会像元素选择器那样过度扩展。
使用组合类（compound classes），这样可以在需要时添加额外的类来增加特异性，而在不需要时通过移除类来降低特异性。
避免使用不必要的选择器，比如使用直接子选择器（>``），这样可以减少特异性的增加。
利用CSS预处理器的功能，如SASS中的 @extend ，以减少类选择器的重复使用。

在应用这些技巧时，始终牢记保持代码的可读性和可维护性。特异性规则并不是需要死记硬背的教条，而是要灵活运用，以便为项目带来最佳的样式解决方案。

在CSS中，权重和特异性规则是确保样式的正确应用和减少维护难度的关键。深入理解这些规则，并将它们应用到实际工作中，将有助于开发者更加高效地编写和管理CSS代码。随着技术的不断发展，CSS领域的新规范和工具也会出现，但良好的基础知识永远是最重要的资产。

7. CSS动画、过渡和兼容性处理

7.1 CSS动画和过渡技术

动画和过渡是网页设计中的亮点，它们可以让元素的变换、出现和消失过程变得更加平滑和吸引用户。CSS 提供了简单而强大的动画和过渡特性，允许开发者不必依赖JavaScript即可实现复杂的视觉效果。

7.1.1 关键帧动画的创建和应用

关键帧动画是通过定义动画序列中的关键帧来控制元素样式变化的方式。通过 @keyframes 规则，我们可以创建一系列的样式规则，在动画过程中逐渐变化。

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fade-in-out {
  animation: fadeInOut 3s ease-in-out infinite;
}

在上述示例中，我们定义了一个名为 fadeInOut 的关键帧动画，它会让元素在3秒内透明度从0变到1，再变回0，且动画在无限次重复中以 ease-in-out 缓动函数进行。

7.1.2 过渡效果的实现和优化

过渡是一种简单的动画效果，它允许在元素状态改变时，CSS属性值能够在一定时间范围内平滑过渡。使用 transition 属性可以轻松实现过渡效果。

button {
  opacity: 1;
  transition: opacity 0.5s;
}

button:hover {
  opacity: 0.5;
}

在上述示例中，按钮在鼠标悬停时，透明度会从1平滑过渡到0.5，过渡时间为0.5秒。过渡效果非常适用于响应用户的交互动作。

7.2 浏览器兼容性处理

在构建网页时，我们可能会遇到不同浏览器之间的兼容性问题。为了确保我们的设计能在所有浏览器中保持一致的表现，我们需要处理这些兼容性问题。

7.2.1 浏览器前缀和兼容性写法

浏览器前缀（例如 -webkit- 、 -moz- 、 -ms- 等）用于旧版本的浏览器，以便兼容新出现的CSS特性。但随着标准的确立，这些前缀通常会慢慢退出历史舞台。

.box {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

上述代码中，我们为 transform 属性添加了不同的浏览器前缀。通常，一旦特性变得稳定，浏览器会支持无前缀的形式。

7.2.2 使用Autoprefixer等工具简化兼容性处理

为了避免手动添加浏览器前缀，开发者经常使用自动化工具如Autoprefixer。该工具会根据需要为CSS规则自动添加前缀，并且可以配置针对特定浏览器的支持情况。

使用Autoprefixer可以极大地简化开发流程，尤其是在处理复杂项目的CSS时。

7.3 CSS重置、正常化与BEM的结合运用

随着Web开发标准的普及，CSS重置（Reset）和CSS正常化（Normalize）已经成为构建网站的基础，它们确保了不同浏览器之间的一致性。而BEM（块、元素、修饰符）则是一种流行的CSS命名约定，它有助于保持样式表的结构和可维护性。

7.3.1 CSS重置与正常化的意义和方法

CSS重置是为了移除所有浏览器默认的样式，而CSS正常化则是在重置的基础上保留一些有用的默认样式，保证网站在不同浏览器中显示的一致性。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

上述代码显示了一个非常基础的CSS重置样式。选择使用重置还是正常化，取决于项目需求和个人偏好。

7.3.2 BEM命名约定的介绍和实例应用

BEM是一种清晰和简洁的命名约定，它使用 block__element--modifier 的结构来定义样式的作用域。

/* block */
.navigation {}
/* element */
.navigation__item {}
/* modifier */
.navigation__item--active {}

使用BEM约定的好处是能够让CSS具有更好的可读性和可维护性。它帮助开发者清晰地知道每个样式块的层级关系，防止样式命名冲突。

在实际项目中，结合CSS重置/正常化和BEM命名约定可以创造出既统一又富有表现力的样式系统，从而保证网页设计的美观和一致性。

本文还有配套的精品资源，点击获取

大奇鸭

关注

10
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
站点示例客户端：完整的网页设计与开发实践

本文还有配套的精品资源，点击获取简介：“trincheiraexemplo1：站点示例客户端”是一个旨在展示或测试网站客户端功能的项目，包含了多种网页设计和开发元素，特别是与CSS相关的技术。CSS负责定义网页的布局、颜色、字体、大小等视觉样式。项目使用Git版本控制系统，并以"master"分支代表项目的主线代码。CSS的关键点包括选择器、盒模型、布局模式、响应式设计、...
复制链接

扫一扫