4BLOGGER中ID 与 CLASS 的区别

sfzy1 五月 30, 2023

如果你是前端开发的高手，这个知识点就很基本的了，你完全可以略过，我在这里主要是针对初学者的，尤其是想玩 blogger 的， class 和 ID 是我们读代码中见得最多的，在 CSS 中，他们看起来没什么区别，其实他们的区别还是很大的，今天我们就来详细解读一番。


本文索引


ID 与 CLASS：您需要了解的内容


None

CSS （层叠样式表）与 HTML（超文本标记语言）结合使用，是创建网页设计和布局的强大工具。

None

id 和 CLASS 是 CSS 的两个属性，可以用来添加任意数量的样式以增强 Web 页面的融和感，尽管它们具有相似的功能，但它们并不相同，并且不总是具有相同的目的。

None

None

ID 是唯一的，像我们的身份证一样


None
  • 每个元素只能有一个 ID
  • 每个 ID 可以应用无限数量的样式。
  • 每个页面只能有一个元素对应该 ID
  • ID 在 CSS 中用 “#” 标识，也可以用作 HTML 页内跳转链接的标识符。这允许您在同一网页上从一个位置跳转到另一个位置，可用于精心创建设计目录。
None

下面是 HTML 的 CSS 区域中使用的 ID 示例：

None
None

#bottom {
background-color: #FFF;
padding: 30px
}

None
None

CLASS 不是唯一的


None
  • 同一个 CLASS 可以用在多个不同的 HTML 标签里。
  • CLASS 命名区分大小写。
  • CLASS 在 CSS 中使用“.”在名称前面标识，如下图所示。
  • 每个 CLASS 可以应用无限数量的样式。
  • 可以对同一元素使用多个 CLASS
None

HTML 区域中使用的 CLASS 的示例：


None

.study1 {
color: black;
font-weight: bold;
font: 20px Arial, Helvetica, sans-serif;
}



None

有用的实例：


None

使用 ID 选择器创建页内跳转链接

None

在下面的示例中，我们说明了 ID 选择器构建超链接目录的有效行为。请记住，网络不是像硬拷贝页面那样的静态环境。利用跳转链接超链接的功能可使您的 Web 用户易于使用。

None

下面是一个实际的 HTML 页面，其中包含您可以复制的代码。

None
None

/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 30px;
text-align: center;
}

#locator {
background-color: yellow;
color: black;
padding: 10px;
text-align: left;
}


<a href="#gi">生产平面设计>/a>

<p>这是一段文字，用于拉长一下锚点的距离，以便演示这个使用ID选择器创建页内跳转链接的效果。这是一段文字，用于拉长一下锚点的距离，以便演示这个使用ID选择器创建页内跳转链接的效果。这是一段文字，用于拉长一下锚点的距离，以便演示这个使用ID选择器创建页内跳转链接的效果。这是一段文字，用于拉长一下锚点的距离，以便演示这个使用ID选择器创建页内跳转链接的效果。</p>

<!-- 超链接到这个定位 -->
<a name="gi">
None
从顶部的生产平面设计链接跳转到页面上的这个位置

None

None

在 Blogger 中 ID 的特殊用途和他的搭档 Name


在 Blogger 中 ID 在标识符 <b:includable id= >中代表一段程序，也就是相当于一个过程或者函数一样，它的调用又是一套不同的标签：<b:include name= > ，这里的 name 就是与前面的 ID 一致的名称。


下面是一个实际的 HTML 页面，其中包含您可以复制的代码。


<b: includable id='widget-title'>
<b: if cond='data:defaultTitle or data:title'>
<div class='widget-title'>
<h3 class='title'>
<data:title/>
</h3>
</div>
</b:if>
</b:includable>

None

以上是定义过程

<b:include name='widget-title'/>

以上是调用前面定义的过程。

None

这一点很少有地方提及到，加上其他的一些因素，导致 blogger 的代码的可读性非常的不好。

None

结尾：


None

对 CLASS 和 ID 选择器的介绍应该为进一步探究 HTML 提供的无限创意方面提供一个起点。我们将继续探索 HTML 设计的其他领域。我们希望这个介绍激起了你的兴趣，并激励你进一步探索并深入研究网页设计的世界。

None

None None

油管频道👉 https://bit.ly/2XNfakc 看最新视频，白嫖最新节点！

请朋友们优先使用订阅，特别是手机用户，更方便更快捷！




发表评论

0 评论

发表评论