К содержанию

HTML og CSS Tutorial for begyndere

En simpel tutorial i HTML og CSS for begyndere med detaljeret teori og opgavesamling.

Selectorer

Slægtskabsrelationer mellem tags i HTML

Arv af CSS egenskaber

Gruppering af selektorer i CSS

Generelle egenskaber ved gruppering af selektorer i CSS

Afkom-vælger i CSS

Child-selektorer i CSS

Elementklasser i CSS

Span-tagget for tekststykker i HTML

Div-tag til gruppering af tags i HTML

Gruppering af klasser i CSS

Tag med givet klasse i CSS

Afkommer-vælger og klasser i CSS

Komplekse kombinationer af afkom-vælger og klasser i CSS

Begynders fejl i afkom-vælger

Element med flere CSS-klasser

Valg af element efter unikt id i CSS

Vælger efter id og CSS-klasser

Brug af id i CSS

Valg af element efter flere klasser i CSS

Flere selektorer skrevet sammen i CSS

Fejl ved brug af flere CSS-selectorer

Gruppering af komplekse selektorer i CSS

Fejl ved gruppering af komplekse CSS-selektorer

Praksis på kombinationer af CSS-selektorer

CSS-selectorers prioritet

Bemærkning til CSS egenskabskonflikt

Specificitetsregler i CSS

Prioritet for efterkommer-selektorer i CSS

Nabose selektor i CSS

Søskende-selektor i CSS

Universel selector i CSS

Attributselektorer i CSS

Tilstande for links i CSS

Nuancer af rækkefølgen af linktilstande i CSS

Tilstande for links: link og visited i CSS

Almindelig brug af linktilstande i CSS

Komplekse selektorer med tilstande for links i CSS

Link med klasse i CSS

Valg af ende elementer i CSS

Udvælgelse efter elementposition i CSS

Udvælgelse af enkelt barn i CSS

Udvælgelse af tomme elementer i CSS

Udvælgelse baseret på position og elementtype i CSS

Nægtelsesselektoren i CSS

Dekoration

Sådan indstiller du baggrundsfarve i CSS

Grundlæggende arbejde med grænser i CSS

Solid grænse i CSS

Prikket kant i CSS

Stiplet kant i CSS

Konvekse kanter i CSS

Dobbel kant i CSS

CSS-egenskab for border som forkortelse

Kant for enkelte sider i CSS

Afrunding af blokkanter i CSS

Afrunding af baggrundskanter i CSS

Oprettelse af en cirkel i CSS

Forskellige afrundinger for forskellige hjørner i CSS

Fire værdier for afrunding af forskellige hjørner i CSS

To værdier for afrunding for forskellige hjørner i CSS

Tre værdier for afrunding til forskellige hjørner i CSS

Afrundede hjørner i procent i CSS

Oprettelse af en cirkel ved hjælp af procentvis afrunding i CSS

Baggrundsbillede i CSS

Gentagelse af baggrundsbillede i CSS

Andre egenskaber for baggrund i CSS

Arbejde med markører for ul-lister i CSS

Kvadratiske listemarkører for ul i CSS

UL-listemarkører som cirkler i CSS

Arbejde med ul-listemarkører i CSS

Fjerning af UL liste-markører i CSS

Arbejde med markører for ol-lister i CSS

Små romertal til lister med ol i CSS

Store romerske tal for lister ol i CSS

Små latinske bogstaver for ol-lister i CSS

Store latinske bogstaver for ol-lister i CSS

Små græske bogstaver for lister ol i CSS

Tal med foranstillet nul for ol-lister i CSS

Boksmodel

Arbejde med margener i CSS

Margen-indryk for forskellige sider i CSS

Flere værdier i margin-egenskaben i CSS

Fire værdier i margin egenskaben i CSS

To værdier i margin egenskaben i CSS

Tre værdier i margin-egenskaben i CSS

Arbejde med padding-indrykninger i CSS

Indvendige margener padding for forskellige sider i CSS

Flere værdier i padding egenskaben i CSS

Arbejde med padding i CSS

Indflydelse af rammer på udvidelse af elementer i CSS

Indvirkning af padding og ramme på udvidelse af elementer i CSS

Annullering af elementekspansion i CSS

Egenskaber ved blokelementer i CSS

Bredde og højde af blokelementer i CSS

Bredden af en blokelement i CSS

Højden af et blokelement i CSS

Højden af et blokelement uden indhold i CSS

Flere blokelementer sideløbende i CSS

Træk ved inline-elementer i CSS

Bredde og højde af inline-element i CSS

Flere inline-elementer sideløbende i CSS

Indryk mellem inline-elementer i CSS

Definition af HTML-taggers blokmodel

Arbejde med display egenskaben i CSS

Særlige træk ved inline-blok elementer i CSS

Bredde og højde af inline-blok elementer i CSS

Bredden af et inline-block element i CSS

Højden af en inline-blok element i CSS

Flere inline-blokkelementer sideløbende i CSS

Justering af blokelementer i CSS

Justering af blokelement med venstre margen i CSS

Justering af blokelement med højre margen i CSS

Justering af inline elementer i CSS

Centrering af inline-elementer i CSS

Centrering af flere inline-elementer

Justering af inline-elementer til højre i CSS

Justering af inline-blok elementer i CSS

Centrering af inline-blok elementer i CSS

Justering af inline-blokkelementer til højre i CSS

Flex elementer i CSS

Højden af forælder til flex elementer i CSS

Forældre elementets bredde for flex elementer i CSS

Inline-blok forælder til flex elementer i CSS

Indrykninger af padding på forælder til flex-elementer i CSS

Margen-indryk til efterkommere i CSS

Justering af flex elementer i CSS

Centrering af flex elementer i CSS

Justering af flex-elementer efter forælder i CSS

Justering af flex-elementer i forælderen med marginer

Justering af flex-elementer efter forælder med lige marginer

Positionering

Absolut positionering af elementer i CSS

Relativ positionering af elementer i CSS

Positionering i forhold til forælder i CSS

Positionering i forhold til absolut forælder i CSS

Absolut positionering uden koordinater i CSS

Centrering via absolut i CSS

Negative værdier ved positionering i CSS

Fast positionering i CSS

Blok på fuld skærmbredde i CSS

Overlap af elementer langs Z-aksen i CSS

Regulering af overlapping af elementer langs Z-aksen i CSS

Nuancer ved brug af negativ z-index værdi i CSS

Floats

Introduktion til float egenskaben i CSS

Gennemtrængning af flydende elementer gennem tags i CSS

Kombination af float og margin i CSS

Kombination af float og padding i CSS

Flydende elementer under tags i CSS

Effekten af floats på forælderen i CSS

Højden af forælder til floats i CSS

Tekst i forælder til floats i CSS

Float i CSS

Ophævning af omflydning med clear egenskaben i CSS

Separat div med clearfix i CSS

Clearfix og forældrehøjde i CSS

Egenskaben float for blokke i CSS

CSS float egenskaben og flere blokke

CSS float egenskab og forælder uden tekst

Flexbox

Placering af flex-elementer i række eller kolonne i CSS

Placering af flex elementer i en omvendt række i CSS

Placerings af flex elementer i kolonne i CSS

At vende en kolonne med flex elementer i CSS

Hoved- og tværakse i flex-blokke i CSS

Justering af flex-elementer langs hovedaksen i CSS

Justering af flex-blokke langs den tværgående akse i CSS

Betydningen af center-værdien for align-items i CSS

Centrering uden blokkehøjder i CSS

Centrering med blokke af varierende højde i CSS

Betydningen af stretch-værdien for align-items i CSS

Praksis i justering af akser i CSS

Justering af individuelle elementer i flex-modellen i CSS

Rækkefølge af flex-blokke i CSS

Grids

Introduktion til CSS Grid

Spor og linjer i CSS grids

Visning af grids i browserens debugger

Antal og bredde af kolonner i CSS-grid

Fr-enheden i CSS grids

Fraktionerede enheder fr i CSS grids

Pixels og fr-enheder i CSS grids

Procenter og fr-enheder i CSS grids

Repeat-funktionen i CSS-grid

Betydningen af auto i CSS grids

Betydningen af auto-fill i CSS grids

Minmax-funktionen i CSS-grid

Betydningen af auto-fit i CSS-grid

Antal og bredde af rækker i CSS grids

Forkortelse for rækker og kolonner i CSS-grid

Sammenlægning af rækker i CSS-grid

Sammenlægning af kolonner i CSS-grids

Kombinationer af række- og søjlesammenslutninger i CSS grids

Overlap af kolonner i CSS grids

Afstand mellem kolonner i CSS grids

Afstand mellem rækker i CSS grids

Afstand mellem kolonner og rækker i CSS grids

CSS Grid Tiling

Layouts

Oprettelse af menu i CSS

Enkle enkeltkolonne layout til hjemmesider i CSS

Layoutskema med flere wrappere i CSS

Strukturelle blokke på en hjemmeside i HTML

Skema for en to-kolonne webside layout i CSS

Skema for en trekolonne-weblayout i CSS

Specielle tags til websidelayout elementer i HTML

Grundlæggende layout-tags i HTML

Sektionstag i HTML

Praktik på layout med HTML og CSS