CSS点符号命名约定 [英] CSS Dot Notation Naming Convention
问题描述
我正在学习CSS。
浏览w3schools的教程。
我意识到一些例子是以
.awesome-文本框{}
.awesome-text-box {}和awesome-text-box {}
没有点？
这里的点符号是什么意思
p.one {
border-style：solid;
border-width：5px;
}
p.two {
border-style：solid;
border-width：medium;
}
p referes to
？
css中的一个点是用于所谓的类的。
几乎可以调用任何东西，例如在你的CSS中，你会创建一个类并为其添加样式（在这种情况下，我将背景变成黑色）;
.my-first-class {
background-color：＃000;
...
}
并将此类应用于HTML元素，你可以做以下事情：
< body class =my-first-class>
...
< / 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 class =my-first-class>这是第一行< / p>
< p class =my-first-class>这是第二行< / p>
< / body>
这会产生一个黑色的页面，里面有2个白色的文本框（试用它！）
现在针对 p.one {...} CSS问题的最后部分。
这是对< p> 标记的引用，它具有 class =one添加到它，< p class =one> ...< / p>
这个CSS只会在< p> 标签上工作，一个如上所述）。
专家专享...
还有一个选择器类型，它被称为ID（我个人在做CSS样式时不会使用这些选择，但有些人也喜欢，我不知道为什么......） / p>
很像一个类，你可以在HTML元素上有一个id; < p id =my-first-id>< / p>
CSS样式到这个，你会把（在CSS中）;
＃my-first-id {
。 ..
}
并且可以添加添加了该id的所有元素。
希望这有助于回答所有部分，请再次询问您是否需要更好的解释：）
I am getting started with learning CSS.
While looking through the tutorial on w3schools.
I realized some of the example start with
.awesome-text-box{}
Is there a different between
.awesome-text-box {} and awesome-text-box{}
without the dot?
What does the dot notation means here
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p referes to
?
A dot in css is for what is called a class.
They can be called almost anything, for example in your CSS you would create a class and add style for it (in this case, I'm making the background black);
.my-first-class {
background-color: #000;
...
}
and to apply this class to an HTML element, you would do the following
<body class="my-first-class">
...
</body>
this would mean the body of the page would become black.
Now, you can create classes for CSS style or you can reference HTML elements directly, for example (CSS again);
body {
background-color: #000;
}
would directly reference the <body> element on the page and do the same again.
The main difference between the two is that CSS classes are reusable. By comparison, referencing the HTML tag directly will affect all tags on the page (that are the same), for example (CSS again);
body {
background-color: #000;
}
.my-first-class {
background-color: #FFF;
}
and now for some HTML;
<body>
<p class="my-first-class">This is the first line</p>
<p class="my-first-class">This is the second line</p>
</body>
This would produce a black page, with 2 white boxes with text inside them (try it out!)
Now for your last part of the question about p.one {...} CSS.
This is a reference to a <p> tag that has class="one" added to it, <p class="one">...</p>
That CSS will only work on a <p> tag with the one class added (as above).
Extra for experts...
There is also one more selector type and it's called an ID (and I personally do not use these when doing CSS styling but some people like too and I don't know why...)
Much like a class, you can have an id on an HTML element; <p id="my-first-id"></p>
and to add CSS style to this, you would put (in the CSS);
#my-first-id {
...
}
and that would style all elements with that id added.
Hopefully that helped answer all the parts, ask again if you need an even better explanation :)
这篇关于CSS点符号命名约定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
