Die CSS-punktschreibweise Namenskonvention

Ich bin erste Schritte mit CSS lernen.

Während Sie durch die Tutorials auf w3schools.

Erkannte ich einige der Beispiel beginnen Sie mit

.awesome-text-box{}

Gibt es einen Unterschied zwischen

.awesome-text-box {} and awesome-text-box{}

ohne den Punkt?

Was bedeutet die dot-notation bedeutet hier

p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p referes zu

p ist der tag-name

InformationsquelleAutor sean | 2014-08-07

css html

17

Einen Punkt in css ist für die sogenannte a-Klasse.

Sie aufgerufen werden kann fast alles, beispielsweise in Ihren CSS erstellen Sie eine Klasse und Stil hinzufügen, für die es (in diesem Fall mache ich den hintergrund schwarz);
```
.my-first-class {
    background-color: #000;
    ...
}
```
und übernehmen Sie diese Klasse, um ein HTML-element möchten, führen Sie die folgenden
```
<body class="my-first-class">
    ...
</body>
```
dies würde bedeuten, den Körper von der Seite würde schwarz werden.

Nun können Sie Klassen erstellen für CSS-Stil oder können Sie auf die HTML-Elemente direkt, zum Beispiel CSS (einmal);
```
body {
    background-color: #000;
}
```
würde direkt auf den <body> element auf der Seite und das gleiche tun wieder.

Der Hauptunterschied zwischen den beiden ist, dass CSS-Klassen sind wiederverwendbar. Durch Vergleich, verweisen auf die HTML-Tags direkt auf alle tags auf der Seite (sind die gleichen), zum Beispiel CSS (einmal);
```
body {
    background-color: #000;
}

.my-first-class {
    background-color: #FFF;
}
```
nun für einige 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>
```
Diese produzieren würde, eine Seite schwarz, mit 2 weißen Felder mit text in Ihnen (probieren Sie es aus!)

Nun für den letzten Teil der Frage zu p.one {...} CSS.

Dies ist ein Verweis auf eine <p> tag, das hat class="one" Hinzugefügt, um es, <p class="one">...</p>

Dass CSS funktioniert nur auf <p> tag mit der one Klasse Hinzugefügt (wie oben).

Extra für die Experten...

Gibt es auch noch eine Selektor-Typ und es heißt eine ID (und ich persönlich glaube nicht, verwenden Sie diese, wenn dabei die CSS-styling, aber manche Leute mögen das auch und ich weiß nicht, warum...)

Ähnlich wie eine Klasse, können Sie eine id für ein HTML-element; <p id="my-first-id"></p>

und hinzufügen von CSS-Stil, um diese, Sie würden (in der CSS);
```
#my-first-id {
    ...
}
```
werden und das würde Stil alle Elemente mit dieser id Hinzugefügt.

Hoffentlich geholfen, beantworten alle Teile, Fragen Sie wieder, wenn Sie benötigen, eine noch bessere Erklärung 🙂
- Während die Klassen sind oft bevorzugten für die Auswahl der Elemente für styling über ids, diese basiert auf einer Prämisse der Wiederverwendbarkeit. Aber ids - eindeutige Bezeichner für ein einzelnes element - ein integraler Bestandteil von HTML und haben viele Anwendungen in einem HTML-Dokument. So macht es durchaus Sinn, zu nutzen für diese styling, wenn Sie verfügbar sind.
InformationsquelleAutor South Paw
10

Den Punkt bezeichnet, dass der Selektor ist eine Klasse. So wird es wählen Sie Elemente auf Ihrer Seite als solche:
```
.awesome-text-box {

}
<div class="awesome-text-box"></div>
```
Während ohne Punkt bezeichnet ein element Namen. Wie:
```
div {

}
<div></div>
```
In dem anderen Beispiel, das Sie Gaben, die dot-notation ist mit chaining dies ist, wo Sie können wählen Sie ein element mit zahlreichen Bedingungen. In deinem Beispiel:
```
p.one {

}
//Will find
<p class="one"></p>
//However it will not find
<div class="one"></div>
```
Während ich hier bin, kann ich Ihnen eine Liste von gemeinsamen Selektoren zu:
- #awesome-text-box => <div id="awesome-text-box"></div> => ID
- .btn.btn-style-1 => <span class="btn btn-style-1"></span> => Verkettung Klassen
- p > span => <p><span></span></p> => Kind
- p span => <p><a><span></span></a><span></span> => Nachkomme (etwas weiter unten)
- p + span => <p></p><span></span> => Geschwister
InformationsquelleAutor jshthornton
0

Einem". "eine Klasse bezeichnet, während ein" # " bezieht sich auf eine id.
Wenn weder ein '.' oder ein '#' verwendet werden, die CSS wird der Stil angewendet werden, um ein HTML-Objekt.
Also für p .eine und p .zwei, CSS angewendet werden, um die '.ein' und '.zwei' Klassen gibt es innerhalb der 'p' - Objekt.

Für ein detailliertes Beispiel;
```
<p class = "one">This text will have the CSS of "p .one"</p>
<p class = "two">This text will have the CSS of "p .two"</p>
```
InformationsquelleAutor Nischaal Cooray
0

. bedeutet eine Klasse. Sie nennen können, die CSS-Klasse mit HTML

Beispiel
```
<span class="awesome-text-box"> ABCD </span>
```
und P bedeutet <p> - tag in HTML können Sie anrufen
```
<p class="one"> ABCD </p>
```
Ref -

http://www.w3schools.com/css/css_selectors.asp

InformationsquelleAutor Thilanka De Silva
0

Die dot-notation für Klassen-und ohne Punkt, der nicht funktionieren würde. Die selector-name, wie div, p brauchen nicht die Punkt-notation. Und verwenden Sie hash - ( # ) für den Selektor id.

Ex-
```
<div id="foo">foo bar</div>
<div class="bar">foo bar</div>

#foo{} /* selects foo with id foo */
.bar{} /* selects foo with class bar */
div{} /* selects the div */
```
InformationsquelleAutor Bhojendra Rauniyar
0

Hier . ist Klasse selector. Es bedeutet Stil für alle Elemente die Klasse awesome-text-box ie,
```
<div class="awesome-text-box"></div>
```
während ohne Punkt-es ist tag-Namen, wie Sie erwähnen, im zweiten Beispiel p Hier p-tag:
```
<p>Some text</p>
```
Ähnlich p.one wenden Sie den Stil auf alle p - tags die Klasse one. ie,
```
<p class="one">Some text</p>
```
InformationsquelleAutor Zaheer Ahmed

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.