Har jag förstått allt rätt med element m.m.? (HTML & CSS)

Permalänk
Medlem

Har jag förstått allt rätt med element m.m.? (HTML & CSS)

<!document html>
<html lang="sv">
<head>

</head>
<body>
<!--allt som skall synas på sidan så som bakgrounder m.m. skrivs här -->
<p class="test">
hejsan
</p>
<div class="test1" id="a">
<h1>Rubrik</h1>
<p>testar detta lite också.</p>
</div>
</body>
</html>

Element
Är en hel kodsnutt från starttagg till sluttag, elementets namn är samma som taggens namn.
Te.x allt inom <p></p> och inkl <p></p> ovan kallas element.

Attributet
Är funktioner inne i ett element te.x class, id, lang osv.
Te.x i kodsnutten ovan så är attributetn "class".

Attributetvärden
Är själva informationen som man ger attributetn som är inom "".
Te.x i kodsnutten ovan så är det "test".

<div>
Märker ett område på sidan te.x menyer, boxar m.m. så att man kan referera till den från CSS koden.

<span>
Märker en text snutt på sidan så att man sedan kan referera till den i css koden.

Attributet id
Används för att göra ett element unikt.

Attributet class
Används för att namnge flera element så att man enklare kan påverka alla dom elementen senare med CSS filen.

Blockelement

Jag tror att jag vet vad det är, jag tar denna kodsnutt för från koden ovan för att försöka att förklara:
<div class="test1" id="a">
<h1>Rubrik</h1>
<p>testar detta lite också.</p>
</div>

Då är <div> själva elementet, attributet är både class och id, attributet värde är "test1" och "a".
Blockelementen är <h1> och även <p> för att det blir "under" element inne i själva elementet och har således namnet blockelement stämmer detta?

Har jag förstått allt rätt?
Jag har lite svårt att förstå blockelement och inline-element, har någon lust att förklara vad dom två är för något?

Visa signatur

Supermicro X9SRI-F | Xeon E5-2690 v2 | 128GB 1600MHz RDIMM | Dell Perc H200 (9211-8i IT) | Windows Server 2016 DataCenter med Hyper-V

Permalänk
Medlem

skillnaden på block- och inline-element är hur de renderas (i sitt standardutförande).
div är exempelvis ett block-element, då det blir en "radbrytning" innan och efter. samma med h1 och p, som du redan konstaterat.
inline-element är element som inte "radbryter", som exempelvis span, strong, em, i osv.

Visa signatur

as far as we can tell, the massacre went well...

Permalänk
Hedersmedlem

Vad gäller blockelement så var också medveten om reglerna för vad vissa blockelement får innehålla och inte (oavsett CSS-regler). Se till att förstå hur exempelvis följande renderas med avseende på radbrytningar och färger:

<p style="color: green;">Grönt <p style="color: red;">Rött</p> Grönt?</p>

Visa signatur

Nu med kortare användarnamn, men fortfarande bedövande långa inlägg.

Permalänk
Medlem
Skrivet av jovnas:

skillnaden på block- och inline-element är hur de renderas (i sitt standardutförande).
div är exempelvis ett block-element, då det blir en "radbrytning" innan och efter. samma med h1 och p, som du redan konstaterat.
inline-element är element som inte "radbryter", som exempelvis span, strong, em, i osv.

Skrivet av phz:

Vad gäller blockelement så var också medveten om reglerna för vad vissa blockelement får innehålla och inte (oavsett CSS-regler). Se till att förstå hur exempelvis följande renderas med avseende på radbrytningar och färger:

<p style="color: green;">Grönt <p style="color: red;">Rött</p> Grönt?</p>

Jag kan inte hitta förklaring till vad ett klassselektor gör?
Och inte heller vad entiteter är.

HTML

<div class="hejsan"> <p>Test test</p> </div>

CSS

.hejsan { font-color: green; }

Klassselektor inleds alltid med en punkt det vet jag.
Men används klassselektor för att kunna påverka ett specifikt element med ett specifikt attributet värde? I detta fall "hejsan"?

Visa signatur

Supermicro X9SRI-F | Xeon E5-2690 v2 | 128GB 1600MHz RDIMM | Dell Perc H200 (9211-8i IT) | Windows Server 2016 DataCenter med Hyper-V

Permalänk
Medlem
Skrivet av Calby:

Jag kan inte hitta förklaring till vad ett klasselement gör?
Och inte heller vad entiteter är.

HTML

<div class="hejsan"> <p>Test test</p> </div>

CSS

.hejsan { font-color: green; }

Klasselement inleds alltid med en punkt det vet jag.
Men används klasselementet för att kunna påverka ett specifikt element med ett specifikt attributet värde? I detta fall "hejsan"?

Vet inte om det är svenska terminologin som bråkar men vet inte riktigt vad entiteter eller klasselement syftar på.

Det som i detta fall är ".hejsan" brukar kallas CSS selector på engelska och används för att identifiera element. En klass-selector identifierar samtliga element som är av given klass. Din div är av klass hejsan och kommer därför identifieras av denna selector och få dess attribut (font-color) tillämpade. Ett element kan vara flera klasser, och flera element kan använda samma klasser.

Visa signatur

AMD Ryzen 7 5800X | 32 GB Corsair Vengeance 3200 MHz | ASUS TUF Geforce RTX 3080