`` `
* interna stilark: CSS -regler placeras direkt i taggen "
`` `
* inline -stilar: CSS -regler tillämpas direkt på enskilda HTML -element med hjälp av attributet "Style". Detta är i allmänhet avskräckt med undantag för mycket specifika fall.
`` `html
Detta är ett blått stycke.
`` `
4. Layoutmotorer:
* Roll: Webbläsarens layoutmotor (t.ex. Blink i Chrome, Gecko i Firefox, WebKit i Safari) är ansvarig för att tolka HTML och CSS och beräkna den exakta positionen och storleken på varje element på sidan.
* Process: Layoutmotorn bygger ett *renderträd *eller *domträd *, som representerar strukturen på sidan och de stilar som gäller för varje element. Den använder sedan detta träd för att bestämma den slutliga layouten.
* Box Model: CSS -boxmodellen är grundläggande för layout. Varje HTML -element behandlas som en rektangulär låda med innehåll, stoppning, kant och marginal. Layoutmotorn beräknar storleken och positionen på dessa lådor.
5. Positioneringstekniker:
* Normalt flöde: Som standard läggs HTML -element ut i det "normala flödet", vilket innebär att de är placerade efter varandra i den ordning de visas i HTML -dokumentet.
* `Position` Egendom: Egenskapen "Position" låter dig ändra positioneringsbeteendet för ett element. Vanliga värden inkluderar:
* `statisk" (standard): Elementet är placerat enligt det normala flödet.
* `Relative`: Elementet är placerat relativt dess normala position i flödet. Du kan använda "top", "höger", "botten" och "vänster" för att kompensera elementet.
* `absolut`: Elementet är placerat relativt dess * närmaste positionerade förfader * (en förfader med en annan position än "statisk"). Om det inte finns någon placerad förfader, är den placerad relativt det initiala innehållande blocket (" `element). "Top", "höger", "botten" och "vänster" används för att specificera förskjutningen.
* `fast`: Elementet är placerat relativt visningsporten (webbläsarfönstret) och förblir i samma position även när sidan rullas.
* `klibby`: Elementet uppför sig som "relativt" tills det når en viss punkt i visningsområdet, vid vilken tidpunkt det blir "fixat".
6. Layoutmetoder (moderna tillvägagångssätt):
* flexbox: En kraftfull layoutmodell för att skapa flexibla och lyhörd layouter, särskilt för endimensionella arrangemang (rader eller kolumner). Det ger finkornig kontroll över inriktningen och distributionen av element i en behållare.
* rutnät: Ett tvådimensionellt layoutsystem som gör att du kan skapa komplexa nätbaserade layouter med rader och kolumner. Det ger mycket kontroll över placeringen av element i nätet.
* floats (äldre teknik): Används för att linda in text runt bilder eller för att skapa flera kolumnlayouter. Det kan vara svårt att använda korrekt och kräver ofta rensning av flottörer för att förhindra layoutproblem. Generellt ersatt av Flexbox och rutnät.
7. Media Queries (Responsive Design):
* Syfte: Mediefrågor gör det möjligt för dig att tillämpa olika CSS -regler baserat på egenskaperna hos enheten eller visningsporten, såsom skärmstorlek, upplösning eller orientering.
* hur de fungerar: Du definierar mediefrågor i din CSS med regeln "`@Media ". Reglerna i mediefrågan tillämpas endast när de angivna villkoren är uppfyllda.
`` `CSS
@Media (max-bredd:768px) {
/ * Stilar som ska tillämpas på skärmar mindre än 768px breda */
kropp {
Fontstorlek:14px;
}
}
`` `
8. Bilder och andra tillgångar:
* urls: Bilder och andra tillgångar (t.ex. videor, teckensnitt) laddas med hjälp av URL:er som anges i HTML (t.ex. i "SRC" -attributet för " ![]()
`tag eller" url () "-funktionen i CSS).
* stigar: Dessa webbadresser kan vara absoluta (t.ex. `https:// www.example.com/bilder/logo.png`) eller relativ (t.ex.` bilder/logo.png`). Relativa vägar är relativt platsen för HTML -filen.
* nedladdning: Webbläsaren gör separata HTTP -förfrågningar för varje bild och tillgång att ladda ner dem.
* Bildoptimering: Viktigt att använda optimerade bilder (korrekt storlek, format och komprimering) för att förbättra sidbelastningstider.
Sammanfattning av processen
1. webbläsaren begär en HTML -sida från en webbserver baserad på en URL.
2. Servern svarar med HTML -markeringen på sidan.
3. webbläsaren analyserar HTML För att konstruera dokumentobjektmodellen (DOM), en trädliknande representation av sidans struktur.
4. Webbläsaren hämtar CSS -filer länkad i HTML:s `
`eller parses inbäddade stilar.
5. Webbläsaren tillämpar CSS -regler till DOM, bestämma utseendet och layouten för varje element.
6. Layoutmotorn beräknar elementpositioner Baserat på CSS -egenskaper, inklusive positionering, flottörer, flexbox, rutnät, etc.
7. Webbläsaren hämtar bilder, teckensnitt och andra externa resurser som hänvisas till i HTML och CSS.
8. webbläsaren gör sidan, Visa text, bilder och andra element i deras beräknade positioner med de angivna stilarna.
9. javascript Kan ytterligare modifiera DOM och CSS efter den första återgivningen, skapa dynamiska och interaktiva upplevelser.
Låt mig veta om du vill att jag ska förklara något av dessa koncept mer detaljerat!
