将CSS样式添加到一个HTML元素中

我刚刚开始学习web开发，我遇到了一些问题。在我当前创建的网站中，我有一个导航菜单。然而，我也有其他ul和li元素贯穿整个网页的主要内容。我一直在尝试让某些样式只应用于我的导航栏，而不应用于我内容中的项目符号列表，但无论我尝试了什么，我要么在导航栏和内容上都获得样式，要么没有。我浏览过谷歌和许多不同的网站，我尝试过在我的风格前面使用.navigation和#，但似乎没有任何效果。我一定是在什么地方做错了什么，但我不知道会是什么。如果有人能帮忙，那就太好了！以下是我的导航条形码：

<div id=navbar">
    <ul>
        <li>
            <a href="Home Page.html">Home</a>
        </li>
        <li>
            <a href="About Volleyball.html">About Volleyball</a>
        </li>
        <li>
            <a href="Sign-Up.html">Sign-Up</a>
        </li>
        <li>
            <a href="Announcements.html">Announcements</a>
        </li>
        <li>
            <a href="Contact Us.html">Contact Us</a>
        </li>
        <li>
            <a href="Links.html">Links</a>
        </li>
    </ul>
</div>

---

在.css文件中，您可以创建跨元素使用的类

在.css文件中试试这个

.hello {
    color: blue;
    text-align: center;
}

然后在你的html中试试这个

<h1 class="hello">Hello World</h1>

你好，世界

这将把.css文件中定义的样式应用于类为“hello”的元素

---

关于类的更多信息可以在这里找到：

如果你想向任何特定元素添加样式，那么你可以向该特定元素添加CSS代码，比如：对于标签，你可以使用

p{color:red}

或者使用class:p.my-element{color:red}或者使用ID:p{color red}

---

您正处于学习发展的初始阶段。因此，请阅读并编写您自己的代码

您只需在选择器前面加上

#navbar

，选择id为

navbar

的元素，然后选择器将只搜索其子元素，就可以只选择navbar的子元素：

#导航栏ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#4da6ff；
}
#李国宝{
浮动：左；
}
#纳瓦巴利阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 75px；
文字装饰：无；
}
#导航栏李a：悬停{
背景色：#80bff；
}

没有应用任何样式
没有应用任何样式

查看并查看

---

这将允许您单独设置元素的样式。

您需要查找id属性和类。CSS教程相当不错。与其写一个伪教程作为答案，不如给他一个解释得很好的完整教程的链接。还有，我只是写，然后在CSS中写。在我所有的样式元素前面导航？我不认为id是你的问题。您使用它的语法可能是。对于html中的样式元素，请将class=“navigation”放在标记内。查看此链接以获取更多帮助，然后单击“自己尝试”按钮。

<h1 class="hello">Hello World</h1>