8.5前端之类和id

8.5前端之类和id

类

好处：

  • 对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

  • 为相同的类设置相同的样式，或者为不同的类设置不同的样式。

<head>
            <style>
            .ctities{
                background-color: black;
                color: white;
                margin: 20px;
                padding: 20px;
            }
        </style>
</head>
<body>
            <div class="ctities">
            <h2>ShenZhen</h2>
            <p>请说出你想说的:</p>
            <input size="7" style="font-family: '微软雅黑'; color: red; font-size: medium;">
            <p>再次说出你想说的:</p>
            <input size="7" style="font-family: '微软雅黑'; color: red; font-size: medium;">
        </div>
</body>

  • HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

  • 设置<div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类

id

特点：

  • HTML id 属性用于 为HTML 元素指定唯一的 id*

  • 一个 HTML文档中不能存在多个有相同 id 的元素。

  • id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。

  • id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

  • id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。

实例：

<style>
    #mydiv{
        background-color: lightblue;
        color: black;
        padding: 40px;
        text-align: center;
    }
</style>
        <div id="mydiv" style="font-family: '微软雅黑';">
            这是自己设定的CSS
        </div>

注意：

  • id 名称对大小写敏感！

  • id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

通过 ID 和链接实现 HTML 书签

<a href="PracticeDemoNo1.html#tips">点击跳转到另一个html的该标签元素处</a>

JavaScript使用id 属性为特定元素执行某些任务

<!--使用 getElementById() 方法访问拥有特定 id 的元素-->
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Class和id的区别

  • 同一个类名可以由多个 HTML 元素使用，而一个 id 名称只能由页面中的一个 HTML 元素使用

        <div class="ctities">
            <h3>LiuZhou</h3>
            <p>柳州好呀!</p>
            <input size="7" style="font-family: '微软雅黑'; color: red;" />
        </div>
        <a href="PracticeDemoNo1.html#tips">点击跳转到另一个html</a>
        <div class="ctities">
            <h2>ShenZhen</h2>
            <p>请说出你想说的:</p>
            <input size="7" style="font-family: '微软雅黑'; color: red; font-size: medium;">
            <p>再次说出你想说的:</p>
            <input size="7" style="font-family: '微软雅黑'; color: red; font-size: medium;">
        </div>

 

posted @ 2021-08-05 19:19  俊king  阅读(117)  评论(0)  编辑  收藏  举报