一般来说,我是 html 和 web 编码的新手。以下代码中变量之前的句点表示什么?
<style>
<!-- Modify these styles -->
.page_title {font-weight:bold}
.page_text {color:#000000}
</style>
... JS code
谢谢
这些不是变量。这些是 CSS 选择器,它们代表一个 HTML 节点,每个示例都有该类
<div class="page_title">Page Title</div>
您使用 CSS 选择器为 HTML 中的这些元素设置样式
既然他们建议了。=)
有几种方法可以在 CSS 中引用 HTML 节点,最常见的是 ID、类和标签名称。
看看这个例子
<div>
<ul id="first_set">
<li class="item"> Item 1 </li>
<li class="item"> Item 2 </li>
</ul>
<ul id="second_Set">
<li class="item"> Item 1 </li>
<li class="item"> Item 2 </li>
</ul>
</div>
行。我们有一个带有两个无序列表的 div,每个列表作为两个列表项,现在是 CSS:
div { background-color: #f00; }
#first_set { font-weight: bold; }
#second_set { font-weight: lighter; }
.item { color: #FF00DA }
选择div
器将选择 HTML 页面中的所有<div>
',# 表示 ID,因此#first_set
它将选择具有该 id 的对象,在这种情况下它将选择
<ul id="first_set">
点符号选择类,因此.item
选择器将选择具有项目类的所有对象,在这种情况下它将选择所有
<li class="item">
这只是基础知识,您可以将这些选择器混合在一起,以使每个示例更具体:
#first_set .item { text-decoration: underline; }
并且它只会选择#first_set 中具有类项的对象。
值得一提的是,一般来说,一个 ID(用#myID 选择)只能在 HTML 页面上使用一次,一个类可以在多个元素上使用。此外,一个元素可以有多个类;只需用空格分隔它们。(例如,
<li class="item special-item">
) –铂金 Azure
也就是在 CSS 中将一个样式分组标记为一个类。请阅读@w3schools 教程,这是一个非常好的入门教程。
通常是某物所属的类,例如
.treeListContainer input
treelistcontainer 是类,输入是类中的控件,因此样式仅影响该类中的控件
您谈论的部分是嵌入在 HTML 中的 CSS。CSS 和 HTML 都没有变量,您正在查看选择器。
点前缀表示它是一个类选择器,并将匹配作为给定类成员的 HTML 元素。
为了使元素成为类的成员,将类名添加到作为类属性值给出的空格分隔列表中。
因此.page_title
将匹配一个元素:
class="foo page_title bar baz"
然而,一般来说,任何你给类名(如“page_title”)的东西都可能与主标题相同,因此 HTML 通常应该如下所示:
<h1>Main heading goes here</h1>
和CSS:
h1 { … }
顺便说一句,<!-- Modify these styles -->
, 是 HTML(和与 HTML 兼容的 XHTML)中的错误。CSS 注释用/*
和分隔*/
。