asp.net – 在css文件中的div.classname

前端之家收集整理的这篇文章主要介绍了asp.net – 在css文件中的div.classname前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我看过一些开发者写的

HTML:

<div class="test"> some content </div>

CSS:

div.test {
  width:100px.
}

做div.className而不仅仅是.className的目的是什么。

这是否意味着只有当类应用于div时才会应用此样式。

所以< span class ='test'> content< / span>将不会对上面的css“test”有影响吗?如果是这样,最好的做法是?这几乎就像为不同类型的元素,混合风格与规则一样的风格!

解决方法

但是,为了真正回答你的问题,我首先要回答几个其他的问题。因为,你会看到,这是关于上下文。

> HTML的要点是什么?
什么是div?
>它与其他HTML元素有什么不同?
>当元素有一个类(或类的集合)时,这意味着什么?

我会就这些问题的答案给你我的意见,然后我们可以就最佳做法进行有意义的讨论。

HTML的要点是什么?

HTML的要点是为您的数据添加上下文。文本本身就可以是非常强大的事情。自从印刷机的发明以来,它作为一个非常强大的通信工具非常有效地为人类服务。以下列文件为例:

My shopping list
Bread
Milk
Eggs
Bacon

即使有了这个简单的文本文档,大多数人都可以贬低作者的意图;它的购物清单。有一个标题,以及需要购买的列表项目的集合。

那么HTML的意义何在,如果简单的文本文件就足够了?

公平的问题。如果文本足够沟通,那么为什么我们需要HTML?

该文档的读者试图解析他们得到的信息。这个过程嵌入了大量的文化技巧和学习的模式,用于重建原始意图。对于大多数基本了解英语的人来说,确定文档的含义是微不足道的。然而,随着文档的复杂性增加(或者读者与上下文的熟悉程度减小),则正确解析变得越来越困难。假设是假的上下文变得不清楚。最终,读者准确地解码消息的能力差异很大,消息是不可剥夺的。

这是HTML存在的空间。它旨在围绕数据,提供上下文和意义。所以即使你(或电脑)无法处理实际的信息,你也可以理解它应该在哪里。例如,与HTML相同的文档:

<h1>My shopping list</h1>
<ul>
    <li>Bread</li>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bacon</li>
</ul>

现在,即使我们无法了解实际的数据,我们也有一个背景资料来解释数据。我们有一个标题和一个无序的列表,其中包含列表项的集合。

<h1>Xasdk bop boop</h1>
<ul>
    <li>Zorch</li>
    <li>Quach</li>
    <li>Iach</li>
    <li>Xeru</li>
</ul>

我不知道这是什么意思,但至少我知道有一个标题和无序列表。这就是浏览器看到您的HTML文档的方式:一些数据,包含在上下文中。

什么是div?与其他HTML元素有什么不同?

HTML元素定义上下文;他们描述他们包围的内容。 HTML不应该改变或改变数据的含义,它只是增加它并定义数据之间的关系:parent,child,sibling,ancestor …所以一个li元素描述一个列表项。 h1元素描述一个标题。表格元素描述了一个表格,依此类推。

那么,什么是div呢?那么,div是一个没有自己的上下文的块级HTML元素。它本身并不意味着什么(除了它是块的事实)。

虽然大多数其他HTML元素(除了span元素之外)都具有某种显式上下文,但是div元素不是。这是一个巨大的区别。这是一个空白框。这是一个不意味着什么的盒子。当你把东西放在’div’的时候,你说的是在一个盒子里,但那个盒子真的不是很大的意思。

那么那么div的意思是什么呢?

div标签为您定义自己的上下文提供了一个空白的选项。回到我们的购物清单示例:现在,无序列表和标题之间的关系很弱。他们是弱相关的兄弟姐妹,他们只是碰巧彼此相邻,但没有什么真正把它们作为一个单位。我们真正想说的是:

<grocery_list>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</grocery_list>

但是我们不能在HTML规范的范围内做到这一点。但是我们可以做的是把它们放在一个“盒子”里:

<div>
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

当元素有一个类(或类的集合)时,这意味着什么?

但是,再一次,这个框并不意味着现在很多。我们真正想做的是给我们一些我们自己的背景。我们想发明自己的元素。这是类属性进入的地方。 HTML元素增加数据时,HTML属性增加元素。我们可以说:

<div class="shopping_list">
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

所以我们说我们的div真的是一个shopping_list。该shopping_list有一个标题和一个无序的项目列表。 HTML应该使你的数据更加清晰,而不是很清楚。

那么最后,这一切如何与你的问题有关?

当您编写CSS时,您正在利用您的上下文(元素,类,ids和元素之间的关系)来定义样式。

所以回到购物清单的例子。我可以写一个风格说:

<style>
    ul {
        background-color: red;
    }
</style>

但我真的在说什么?我在说:“所有无序的列表应该有一个红色的背景颜色”。问题是:真的是我的意思吗?编写CSS时,应该牢记你的结构。说所有的div元素应该是一个特定的方式,还是只给一个特定的类呢?例如,我会谨记这可能会更好:

div.shopping_list h1 { font-weight: bold; font-size: 2em; border-bottom: 1px solid black; }
div.shopping_list ul li { 
    margin-bottom: 1ex;
}

在这里,我说这些元素在这个特定的环境中应该是这样的。

所以在你的例子中,一个具有一类测试的div是什么意思?内容是什么?你想澄清什么背景?这将告诉你你的风格选择器应该是什么样子的。

例如:

<div class="shopping_list important">
    <h1>My shopping list</h1>
    <ul>
        <li>Bread</li>
        <li>Milk</li>
        <li>Eggs</li>
        <li>Bacon</li>
    </ul>
</div>

<table class="budget">
    <tbody>
        <tr class="important">
            <td>Account Balance</td><td>$0.00</td>
        </tr>
            </tbody>
</table>

是CSS的重要选择器是一个好主意吗? “重要购物清单”是否与预算表中的重要表格相同?

只有您可以回答这一点,具体取决于您的数据和您如何决定标记该数据。

有一些关于CSS特性的技术主题,例如维护复杂样式表和元素之间复杂关联的良好实践,但最终归结为回答这些问题:

>我想要沟通什么? (数据/内容)
>数据的内容是什么? (HTML)
>应该是什么样子? (CSS)

一旦你可以回答这些问题,其他的一切都将开始落实到位。

原文链接:https://www.f2er.com/aspnet/252792.html

猜你在找的asp.Net相关文章