Hier heb ik een idgegeven aan het divelement en het past de relevante CSS ervoor toe.
OF
.main {
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
<div class="main">
Welcome
</div>
Hier heb ik een classgegeven aan de diven het doet ook hetzelfde werk voor mij.
Wat is dan het exacte verschil tussen Iden classen wanneer moet ik idgebruiken en wanneer moet ik Ik gebruik class.? Ik ben een newbie in CSS en webdesign en een beetje in de war terwijl ik hiermee bezig ben.
Antwoord 1, autoriteit 100%
Voor meer informatie hierover klik hier .
Voorbeeld
<div id="header_id" class="header_class">Text</div>
#header_id {font-color:#fff}
.header_class {font-color:#000}
(Merk op dat CSS het voorvoegsel #gebruikt voor ID’s en .voor klassen.)
Echtercolorwas een HTML 4.01 <font>-tagkenmerk dat in HTML 5 is verouderd.
In CSS is er geen “font-color”, de stijl is colordus het bovenstaande zou moeten luiden:
Voorbeeld
<div id="header_id" class="header_class">Text</div>
#header_id {color:#fff}
.header_class {color:#000}
De tekst zou wit zijn.
Antwoord 2, autoriteit 96%
-
Gebruik een klassewanneer u meervoudige elementen consistent wilt opmakenop de pagina/site. Klassen zijn handig als je meer dan één element hebt, of mogelijk in de toekomst zult hebben, met dezelfde stijl. Een voorbeeld kan een div zijn van “opmerkingen” of een bepaalde lijststijl om te gebruiken voor gerelateerde links.
Bovendien kan aan een bepaald element meer dan één klasse zijn gekoppeld, terwijl een element slechts één id kan hebben. U kunt een div bijvoorbeeld twee klassen geven waarvan de stijlen beide van kracht zullen zijn.
Houd er bovendien rekening mee dat klassen vaak worden gebruikt om naast visuele stijlen ook gedragsstijlen te definiëren. De jQuery-plug-in voor formuliervalidatie gebruikt bijvoorbeeld veel klassen om het validatiegedrag van elementen te definiëren (bijvoorbeeld vereist of niet, of het definiëren van het type invoerformaat)
Voorbeelden van klassennamen zijn: tag, opmerking, werkbalkknop, waarschuwingsbericht of e-mail.
-
Gebruik de IDals je een enkel elementop de pagina hebt dat de stijl overneemt. Onthoud dat ID’s uniek moeten zijn. In jouw geval kan dit de juiste optie zijn, aangezien er vermoedelijk maar één “hoofd” div op de pagina zal zijn.
Voorbeelden van ID’s zijn: hoofdinhoud, koptekst, voettekst of linkerzijbalk.
Een goede manier om te onthouden dat dit een klasse is een type itemen de id is de unieke naam van een itemop de pagina.
Antwoord 3, autoriteit 95%
id‘s zijn uniek
- Elk element kan slechts één
id - Elke pagina kan slechts één element hebben met die
id
. hebben
classen zijn NIET uniek
- Je kunt dezelfde
classop meerdere elementen gebruiken. - Je kunt meerdere
classen gebruiken op hetzelfde element.
Javascript geeft om
JavaScript-mensen zijn waarschijnlijk al beter op de hoogte van de verschillen tussen classes en ids. JavaScript is afhankelijk van het feit dat er slechts één pagina-element is met een bepaalde id, of anders kan niet worden vertrouwd op de veelgebruikte functie getElementById.
Antwoord 4, autoriteit 56%
ID’s moeten uniek zijn – je mag niet meer dan één element met dezelfde ID in een html-document hebben. Klassen kunnen voor meerdere elementen worden gebruikt. In dit geval zou je een ID voor “main” willen gebruiken omdat deze (vermoedelijk) uniek is – het is de “main” div die dient als een container voor je andere inhoud en er zal er maar één zijn.
Als je een aantal menuknoppen of een ander element hebt waarvan je de stijl wilt herhalen, zou je ze allemaal aan dezelfde klasse kunnen toewijzen en die klasse vervolgens kunnen stylen.
Antwoord 5, autoriteit 28%
Zoals vrijwel iedereen heeft gezegd: gebruik ID voor eenmalige elementen en klasse voor elementen voor meervoudig gebruik.
Hier is een snel, te vereenvoudigd voorbeeld, neem HTML- en HEAD-tags als gelezen
<body>
<div id="leftCol">
You will only have one left column
</div>
<div id="mainContent">
Only one main content container, but.....
<p class="prettyPara">You might want more than one pretty paragraph</p>
<p>This one is boring and unstyled</p>
<p class="prettyPara">See I told you, you might need another!</p>
</div>
<div id="footer">
Not very HTML5 but you'll likely only have one of these too.
</div>
</body>
Ook, zoals vermeld in andere antwoorden-ID zijn goed zichtbaar aan JavaScript, klassen minder zo. Maar moderne JavaScript-frameworks zoals jQuery leverage klasse voor javascript
Antwoord 6, Autoriteit 22%
ID’s hebben de functionaliteit om te werken als koppelingen naar bepaalde secties binnen een webpagina.
Een sleutelwoord na # tag brengt u naar een bepaald gedeelte van de webpagina.
bijv. “http: //exampleurl.com#chapter5 ” in de adresbalk neemt u daarheen wanneer u een ” Hoofdstuk5 “ID gewikkeld rond het hoofdstuk 5-gedeelte van de pagina.
Antwoord 7, Autoriteit 11%
De classAttribuut kan worden gebruikt met meerdere HTML-elementen / tags en alles zal het effect nemen. Waar als de idis bedoeld voor een enkel element / tag en wordt beschouwd als uniek.
Meer dan idheeft een hogere specificiteitswaarde dan de class.
Antwoord 8, Autoriteit 11%
ID:
Het identificeert het unieke element van uw volledige pagina. Er moet geen ander element worden gedeclareerd met dezelfde ID.
De ID-selector wordt gebruikt om een stijl op te geven voor een enkel, uniek element.
De ID-selector gebruikt het ID-kenmerk van het HTML-element en wordt gedefinieerd met een “#”.
klasse:
De klassenkiezer wordt gebruikt om een stijl op te geven voor een groep elementen. In tegenstelling tot de ID-selector, wordt de klasseelector meestal op verschillende elementen gebruikt.
Hiermee kunt u een bepaalde stijl instellen voor veel HTML-elementen met dezelfde klasse.
De klassenschakelaar gebruikt het kenmerk HTML-klasse en wordt gedefinieerd met een “.”
Antwoord 9, Autoriteit 11%
Dit is heel eenvoudig te begrijpen: –
ID wordt gebruikt wanneer we CSS-eigenschap alleen op één attribuut moeten toepassen.
Klasse wordt gebruikt wanneer we CSS-eigenschap op veel locaties op dezelfde pagina of anders moeten gebruiken.
Algemeen: – Voor unieke structuur zoals starende div en knoppen Lay-out gebruiken we ID.
Voor dezelfde CSS in de pagina of het project gebruiken we klasse
ID is licht en klasse is weinig zwaar
Antwoord 10, Autoriteit 11%
Als er iets is om toe te voegen aan de vorige goede antwoorden, is het om uit te leggen waarom idS Unique per pagina moet zijn. Dit is belangrijk om te begrijpen voor een beginner, omdat het toepassen van dezelfde idnaar meerdere elementen op dezelfde pagina zal geen fout veroorzaken en heeft liever dezelfde effecten als een class.
Dus vanuit een HTML / CSS-perspectief, de uniekheid van idper pagina maakt geen sens. Maar vanuit het JavaScript-perspectief is het belangrijk om er een idper element per pagina te hebben, omdat getElementById()Identificeert, zoals zijn naam suggereert, elementen door hun idS.
Dus zelfs als u een pure HTML / CSS-ontwikkelaar bent, moet u het unieke aspect van idS PER PAGE voor twee goede redenen respecteren:
- Clarity: wanneer u een ID ziet, weet u zeker dat het niet elders bestaat binnen dezelfde pagina
- schaalbaarheid : zelfs als u alleen in HTML / CSS ontwikkelt, moet u innemen Overweging De dag waarop u of een andere ontwikkelaar gaat doorgaan met het onderhouden en toevoegen van functionaliteit aan uw website in JavaScript.
Antwoord 11, Autoriteit 6%
U kunt een classtoewijzen aan vele elementen. U kunt ook meer dan één classtoewijzen aan een element, bijv.
<button class="btn span4" ..>
in bootstrap. U kunt de idalleen aan één toewijzen.
Dus als je veel elementen wilt laten lijken, bijvoorbeeld. Lijstitems, u kiest class. Als u bepaalde acties op een element wilt activeren met Javascript, gebruikt u waarschijnlijk id.
Antwoord 12, Autoriteit 6%
Een klasse kan verschillende keren worden gebruikt, terwijl een ID slechts één keer kan worden gebruikt, dus u moet lessen gebruiken voor items die u weet dat u veel zult gebruiken. Een voorbeeld zou zijn als u alle alinea’s op uw webpagina dezelfde styling wilde geven, zou u lessen gebruiken.
Normen Geef aan dat een bepaalde ID-naam slechts één keer binnen een pagina of document kan worden verwezen. Gebruik ID’s wanneer er maar één voordeel per pagina is. Gebruik klassen wanneer er een of meerdere voorkomens per pagina zijn.
Antwoord 13, Autoriteit 6%
Een eenvoudige manier om naar te kijken, is dat een ID uniek is voor slechts één element.
Een klasse is niet uniek en toegepast op meerdere elementen.
Bijvoorbeeld:
<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>
Inhoud is een klasse omdat het waarschijnlijk ook van toepassing is op sommige andere tags, waar als “veryimportant” slechts één keer wordt gebruikt en nooit meer.
Antwoord 14
In tegenstelling tot de idselector, wordt de classselector meestal op verschillende elementen gebruikt.
Hiermee kunt u een bepaalde stijl instellen voor veel HTML-elementen met dezelfde klasse.
De classselector gebruikt het HTML class attribuut en wordt gedefinieerd met een “.”
Een eenvoudige manier om ernaar te kijken is dat een id uniek is voor slechts één element. classis beter te gebruiken omdat het je zal helpen om uit te voeren wat je maar wilt.
Antwoord 15
id selector kan worden gebruikt voor meer elementen. hier is het voorbeeld:
css:
#t_color{
color: red;
}
#f_style{
font-family: arial;
font-size: 20px;
}
html:
<p id="t_color"> test only </p>
<div id="t_color">the box text</div>
Ik heb getest in Internet Explorer (ver. 11.0) en Chrome (ver.47.0). het werkt op beide.
De “uniek” betekent alleen dat één element niet meer dan één id-attribuut kan hebben, zoals klassekiezer. Geen van beide
<p id="t_color f_style">...</p>
noch
<p id="t_color" id="f_style">...</p>