html – CSS Dot符号命名约定

html – CSS Dot符号命名约定,第1张

概述我开始学习CSS了. 在浏览w3schools的教程时. 我意识到一些例子开始于 .awesome-text-box{} 两者之间是否存在差异? .awesome-text-box {} and awesome-text-box{} 没有点? 点符号在这里意味着什么 p.one {border-style: solid;border-width: 5px;}p.two {border- 我开始学习CSS了.

在浏览w3schools的教程时.

我意识到一些例子开始于

.awesome-text-Box{}

两者之间是否存在差异?

.awesome-text-Box {} and awesome-text-Box{}

没有点?

点符号在这里意味着什么

p.one {border-style: solID;border-wIDth: 5px;}p.two {border-style: solID;border-wIDth: medium;}

p referes?

解决方法 CSS中的一个点用于所谓的类.

它们几乎可以调用任何东西,例如在CSS中你可以创建一个类并为它添加样式(在这种情况下,我将背景设置为黑色);

.my-first-class {    background-color: #000;    ...}

要将此类应用于HTML元素,您将执行以下 *** 作

<body >    ...</body>

这意味着页面的主体会变黑.

现在,您可以为CSS样式创建类,也可以直接引用HTML元素,例如(再次使用CSS);

body {    background-color: #000;}

将直接引用< body>页面上的元素,并再次执行相同的 *** 作.

两者之间的主要区别在于CSS类是可重用的.相比之下,直接引用HTML标记将影响页面上的所有标记(相同),例如(再次使用CSS);

body {    background-color: #000;}.my-first-class {    background-color: #FFF;}

现在是一些HTML;

<body>    <p >This is the first line</p>    <p >This is the second line</p></body>

这将产生一个黑色页面,其中有2个带有文本的白色框(试一试!)

现在关于p.one {…} CSS的问题的最后一部分.

这是对< p>的引用.添加了class =“one”的标记,< p class =“one”> …< / p>

该CSS仅适用于< p>添加了一个类的标记(如上所述).

专家额外…

还有一个选择器类型,它被称为ID(我个人在做CSS样式时不会使用这些,但有些人也喜欢这样,我不知道为什么……)

就像一个类,你可以在HTML元素上有一个ID; < p ID =“my-first-ID”>< / p>

并且为此添加CSS样式,你会放(在CSS中);

#my-first-ID {    ...}

并且会为添加了该ID的所有元素设置样式.

希望这有助于回答所有部分,再次询问您是否需要更好的解释:)

总结

以上是内存溢出为你收集整理的html – CSS Dot符号命名约定全部内容,希望文章能够帮你解决html – CSS Dot符号命名约定所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1131343.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存