Hur man utformar specifika element med CSS - dummies

När du utformar specifika element med CSS, är det till hjälp att visualisera HTML-koden som ett släktträd med föräldrar, barn och syskon. I följande kodexempel börjar trädet med elementet html , som har två barn huvud och kropp . huvudet har ett barnelement som heter titel . kroppen har h1 , ul och p element som barn. Slutligen har elementet ul li element som barn, och elementet p har a som barn.

Figur 4-3: DOM

Parodi Tech Twitter-konton

• Bored Elon Musk

• Vinod Coleslaw

• Hästböcker

Parodys icke-tekniska Twitter-konton

Modern Seinfeld

Lord_Voldemort7

Så här visas koden i webbläsaren .

Styling av ett släktträd av element.

Den här versionen visar en skildring av koden med hjälp av trädmetaforen.

Parody Tech och Non-Tech Twitter konton (webbläsare).

Här visas varje relation en gång. Till exempel i koden finns ett a -element inuti vart och ett av tre li -elementen, och den här bilden visar detta ul li a relation en gång.

Parodi Tech och Non-Tech Twitter-konto (HTML-träd eller dokumentobjektmodell).

Bored Elon Musk är en parodi av Elon Musk, grundaren av PayPal, Tesla och SpaceX. Vinod Coleslaw är en parodi av Vinod Khosla, Sun Microsystems grundare och riskkapitalist. Hästböcker är en spambot som blev ett fenomen på Internet.

HTML-trädet heter DOM- eller dokumentobjektmodellen.

Barnväljare

Parodi-non-Tech Twitter-ankarkoderna är omedelbara barn till stycke-taggarna. Om du bara vill ställa in Parody Non-Tech Twitter-kontona kan du använda barnväljaren, som väljer de närmaste barnen i ett visst element. En barnväljare skapas genom att först ange förälderväljaren, sedan ett större än tecken (>) och slutligen barnväljaren.

I följande exempel markeras ankaretiketterna som är omedelbara barn i stycketiketterna, och de här hyperlänkarna är utformade med en röd teckensnittsfärg och utan någon understrukning. Parody Tech Twitter-kontona är inte stylad eftersom de är direkta barn i listobjektet.

p> a {

färg: röd;

text-dekoration: ingen;

}

Barnväljaren brukade ställa in Parody Non-Tech Twitter-kontona.

Om du bara använder a väljaren här, skulle alla länkar på sidan bli stylade istället för bara ett urval.

Nedstigningsväljare

Parodi Tech Twitter-kontot ankare är efterkommande, eller ligger inom, den oordnade listan. Om du bara vill ställa in Parody Tech Twitter-kontona kan du använda ättlingarväljaren, som inte bara väljer omedelbara barn av ett specificerat element utan alla element som är nästa inom det angivna elementet. En efterföljande väljare skapas genom att först ange förälderväljaren, ett mellanslag och slutligen den efterföljande väljaren du vill rikta in.

I följande exempel markeras ankarkoderna som är efterkommande av den oordnade listan, och dessa hyperlänkar är utformade med en blå teckenfärg och korsas ut. Parody Non-Tech Twitter konton är inte stylad eftersom de inte är efterkommande av en orörd lista.

ul a {

färg: blå;

text-dekoration: linje genom;

}

Barnväljaren brukade ställa in Parody Tech Twitter-kontona.

Intresserad av styling bara den första ankerkoden i en lista, som det moderna Seinfeld Twitter-kontot eller det andra listobjektet, som Vinod Coleslaw Twitter-kontot? Gå till w3schools. com och läs mer om första barnet och nth-barn väljare.