介绍
在本教程中,您将创建CSS _ID选择器,并学习如何和为什么在使用CSS和HTML构建网站时使用它们。
CSS ID Selector 功能类似于 CSS 类 Selector。它们允许您创建 CSS 规则,您可以将其应用于具有独特 ID 属性的 HTML 元素。像类一样,ID 名称是开发人员在使用 ID 选择器创建 CSS 规则时所选择的。然而,ID 与类不同,因为您只能在 HTML 文档中使用单独 ID once。因此,您只会为页面上出现一次的项目定义 ID,如顶部标志、网站标题或导航栏。
前提条件
要遵循本教程,请确保您已设置必要的文件和文件夹,如本系列中以前的教程中指示的那样 How To Set Up You CSS and HTML Practice Project。
创建 CSS ID 选择器
创建一个ID的规则时,将一个#提前为该ID的名称:
1#my-first-id {
2 color: blue;
3}
此 CSS 规则创建了一个名为My-first-id的 ID,并声明所分配的任何 HTML 文本元素将是蓝色的。
首先,请确保您已设置必要的文件和文件夹,如本系列中以前的教程中所指示的那样 How To Set Up You CSS and HTML Practice Project。
刪除你的「styles.css」檔案中的所有東西(如果你一直在跟隨這個系列),並在你的「styles.css」檔案中添加上面的CSS規則「#my-first-id」並保存檔案。
接下来,回到您的 index.html 文件并删除所有内容(除了第一个代码行:)。
1[label index.html]
2<p id="my-first-id">This text is styled using a CSS ID.</p>
保存文件并在浏览器中重新加载(有关下载HTML文件的说明,请访问我们的教程部分(How To View A Offline HTML File In Your Browser))。
你应该得到这样的东西:
在此练习中,您在styles.css文件中创建了CSS IDMy-first-id,然后使用突出的ID属性将其应用到您的index.html文件中的文本内容中。
结论
您探索了如何创建和使用在您的网页上只出现一次的样式元素的ID,在下一个教程中,您将了解CSS pseudo-classes,一种由某些状态激活的特殊类型,可以由用户行为触发。