Handledning i HTML och CSS för nybörjare

Grundläggande HTML

Introduktion HTML-språket HTML-taggar Attribut Stilar Sidans grundläggande struktur Grundläggande taggar Stycken Rubriker Fetstil Kursiv stil Oordnade listor Ordnade listor Länkar Interna länkar Bilder Bildens bredd Bildens höjd Ställa in bildens bredd och höjd Tabeller Tabellebredd och höjd Rubrikceller Praktikum

Grundläggande CSS

Introduktion till CSS Hur man använder CSS Färgvärden Alla färger Bredd och höjd Textjustering Högerjusterad text Centrerad text Vänsterjusterad text Justerad text (vänster och höger) Praktik på textjustering Fetstil Kursiv Teckenstorlek Teckensnittsfamilj Radavstånd Line-height värde utan enheter Font-genvägs egenskap Första radens indrag Texteffekter Understruken text Överstruken text Genomstruken text Avbryt effekter för text Praktikum

Väljare

Taggars släktskapsförhållanden Egenskapernas arv Gruppering av väljare Gemensamma egenskaper Väljare för avkomlingar Barnväljare Klassväljare Taggen span Taggen div Gruppering av klasser Tagg med given klass Väljare för avkomlingar och klasser Komplexa kombinationer av väljare för avkomlingar och klasser Nybörjarfel i väljare för avkomlingar Element med flera klasser Väljare efter id Väljare efter id och klasser Användning av id Väljare efter flera klasser Flera väljare ihop Fel med flera väljare Gruppering av komplexa väljare Fel vid gruppering Träning på kombinationer av väljare Väljares prioritet Anmärkning till egenskapskonflikt Regler för specificitet Prioritet för väljare av avkomlingar Angränsande syskonväljare Släktingväljare Universell väljare Väljare för attribut Länkars tillstånd Nyanser i sekvensen för länktillstånd Tillstånden link och visited Vanlig användning av länktillstånd Komplexa väljare med länkar Länk med klass Urval av slutelement Urval efter position Urval av endast barn Urval av tomma element Urval efter position och elementtyp Nekningen not

Formgivning

Bakgrundsfärg Grundläggande om ramar Hel ram Prickad ram Streckad ram Upphöjd ram Dubbel ram Sammanfattande ramegenskap Ramar för olika sidor Avrundade blockkanter Avrundade bakgrundskanter Skapa en cirkel Avrundning för olika hörn Fyra värden Två värden Tre värden Avrundning i procent Skapa en cirkel med avrundning i procent Bild för bakgrund Upprepning av bakgrundsbild Andra egenskaper för bakgrund Listmarkörer för ul Fyrkantiga listmarkörer för ul Listmarkörer för ul i form av cirklar Listmarkörer för ul i form av ifyllda cirklar Inga listmarkörer för ul Listmarkörer för ol Gemena romerska siffror för ol-listor Versala romerska siffror för ol-listor Gemena latinska bokstäver för ol-listor Versala latinska bokstäver för ol-listor Gemena grekiska bokstäver för ol-listor Tal med inledande nolla för ol-listor

Blockmodellen

Yttre marginal margin Marginal margin för olika sidor Flera värden i margin Fyra värden i margin Två värden i margin Tre värden i margin Inre utfyllnad padding Utfyllnad padding för olika sidor Flera värden i padding Utvidgning av element Gränsens inverkan på utvidgning av element Gemensam inverkan av padding och gräns på utvidgning av element Avbokning av elementutvidgning Blockelement Bredd och höjd på blockelement Bredd på blockelement Höjd på blockelement Höjd utan innehåll Flera blockelement bredvid varandra Inline-element Bredd och höjd på inline-element Flera inline-element bredvid varandra Mellanrum mellan inline-element Definition av blockmodellen Egenskapen display Inline-block-element Bredd och höjd på inline-block-element Bredd på inline-block-element Höjd på inline-block-element Flera inline-block-element bredvid varandra Justering av blockelement Justering av blockelement med vänstermarginal Justering av blockelement med högermarginal Justering av inline-element Centrering av inline-element Centrering av flera inline-element Justering av inline-element till högerkant Justering av inline-block-element Centrering av inline-block-element Justering av inline-block-element till högerkant Flex-element Höjd på förälder till flex-element Bredd på förälder till flex-element Inline-block-förälder Utfyllnad padding för förälder Marginal margin för barn Justering av flex-element Centrering av flex-element Justering av flex-element längs föräldern Justering av flex-element längs föräldern med marginaler Justering av flex-element längs föräldern med lika marginaler

Positionering

Absolut Relativ Absolut relativt förälder Absolut relativt absolut Absolut utan koordinater Centrering via absolute Negativa värden för absolute Fixerad positionering Block med helskärmsbredd Överlagring av element längs Z-axeln Reglering av överlagring längs Z-axeln Nyanser vid användning av negativt z-index-värde

Float

Introduktion till float-egenskapen Float-egenskapen och taggar Kombination av float och margin Kombination av float och padding Flytande element under taggar Floats påverkan på föräldern Förälderns höjd till floats Text i förälder till floats Textflyt Avbryta textflyt Separativ div med clearfix Förälderns höjd och clearfix Float-egenskapen för block Float-egenskapen och flera block Float-egenskapen och förälder utan text

Flex

Placering i rad eller kolumn Placering av flex-element i omvänd rad Placering av flex-element i kolumn Omvändning av kolumn med flex-element Huvud- och tväraxel Justering längs huvudaxeln Justering längs tväraxeln Värdet center för egenskapen align-items Centrering utan höjd på block Centrering med olika blockhöjder Värdet stretch för egenskapen align-items Praktik på justering längs axlar Justering av enskilt element Ordning på flex-block

Grid

Introduktion till grid Spår och linjer Visning i debugger Kolumner Enheten fr Bråktals-fr Pixlar och fr Procent och fr Funktionen repeat Värdet auto Värdet auto-fill Funktionen minmax Värdet auto-fit Rader Genväg för rader och kolumner Kombinera rader Kombinera kolumner Kombinationer av kombinationer Överlappande kolumner Avstånd mellan kolumner Avstånd mellan rader Avstånd mellan kolumner och rader Kakel

Layout

Skapa meny Enkla layout med en kolumn Layoutschema med flera wrappers Webbplatsens strukturella block Layoutschema med två kolumner Layoutschema med tre kolumner Specialtaggar för layoutelement Huvudsakliga layouttaggar Tagg för sektioner Praktik på layout

↑