Sådan indstilles en baggrund i HTML

Tilføjelse af et baggrundsbillede til din side kan bidrage til at pynte udseendet. I denne korte artikel vises de grundlæggende trin for at tilføje en baggrund til en HTML-side. Her kan du kombinere CSS (Cascading Style Sheet

) til HTML for at opnå nogle flotte, flotte resultater. HTML (HyperText Markup Language) bruges til at oprette strukturen på en side, mens CSS giver den en stil - men uden HTML ville vi ikke have noget at style.

trin

1
Åbn din hovedfil.css i din editor. Hovedfilen indeholder listen over alle klasser eller id`er, der tilhører hovedindholdsområdet på siden i alfabetisk rækkefølge. Disse klasser bør ikke omdirigeres. Derefter vil id`erne blive opført efter klasserne, og vil også blive opført alfabetisk.
  • Gør det ikke antage at dette vil fungere: Mange sider tilbyder præfabrikerede DIV overlejringer og instruerer dig om brugen af ​​dine billeder og hvor du skal "indsætte" den type kode, der tilbydes.
  • Forstå, at strukturen på siden er defineret af CSS-klasser af HTML-elementer. Disse klasser indeholder også oplysninger om det endelige udseende af den skærmvisning, der er oprettet af HTML-dokumentet. Brug HTML til indhold - CSS til visuel præsentation. Det viste dokument er HTML-kodet, og de nye strukturer, der skal defineres, er begrænset til den stil, der bestemmes af CSS og ID`er. Desuden vil det endelige dokument blive konstrueret, der anvender det til præsentationen af ​​disse klasser i HTML-strukturen.
  • Video: The Choice is Ours (2016) Official Full Version

    2
    Opret og juster baggrundsbilledet som en del af fanen BODY for en hvilken som helst side, der er defineret af filen.css. Øverst på dit CSS-dokument (i den åbne fil) kan du prøve at tilføje kode, der ligner den i de følgende kodeprøver.
    • CAVEAT, Undtagelse: Selvfølgelig kan dette billede ignoreres effektivt i HTML, hvis stilarket sætter baggrunden alene. Dit valg kunne nægtes på en tilsyneladende tom baggrund og overlejret af en hvid eller sort billede defineret af typografiark, eller arket kunne forlade det udefineret, så du kan lignende justeringer, der er vist i eksemplerne.
    • BODY {text-align: center-baggrund: url (img / rome_da_imagem.jpg) centervægt-} / * indtaste en kommentar her med en stjerne * /
      • Hvis du har et stort billede, der dækker hele siden, skal du tilføje "no-repeat"i det foregående eksempel, kort efter"center"Ellers vil baggrunden være fyldt med billeder, der er placeret side om side, som om det var en slags fyldestruktur.
  • 3
    Bemærk at dette trin kan gøres på flere måder. Her er nogle andre eksempler:
    • Krop {baggrund: url (banner.jpg) 50% 0%}
    • Krop {baggrundsbillede: url (banner.jpeg) - baggrundsposition: øverste center-}
    • Krop {baggrund: url (banner.jpeg) øverst til venstre}
    • Krop {baggrund: url (banner.jpeg) 0% 0%}
    • P {baggrund: URL (xadrez.jpg) grå 50% gentagelse fast}
  • 4
    Indtast adressen på det angivne sted sammen med navnet på billedet.


  • 5
    Se dokumentet. Når du har indtastet en af ​​ovennævnte kodetyper, skal du gemme dokumentet og åbne siden for at se resultatet!
  • Typer af stilarter

    1. Video: Moviemaker tutorial på dansk - juster lyd og indsæt musik

      1
      Lær at bruge alle tre typer stilarter, undgå overflødige og spredte metoder - centralisere koder.

    Undgå "stilarter inline"der er skrevet direkte til flere tags i et dokument. inline påvirker kun de tags, hvor de anvendes, såsom: Undgå indbyggede stilarter eller "indlejrede stilarter. "I overskriften på hvert dokument Bemærk, at inline stilarter er overflødige, da de er skrevet flere gange og påvirker kun de tags på den side, hvor de blev placeret F.eks.: Link til "eksterne stilarter", der er skrevet i et separat dokument og forbundet til forskellige webdokumenter, for at få færre koder på individuelle sider. Eksternt stilark kan påvirke ethvert dokument, som de er tilsluttet i stilprogrammet, såsom:

    1
    Få hurtigere side downloads som en fordel ved at bruge CSS bedste praksis, som anbefaler dig at standardisere præsentationen af ​​titler og tekst (bannere, kolonner, skrifttyper, størrelser og stilarter) og billeder (størrelser, grænser, afrundede hjørner, etc.) i eksterne stilark for at vise de sider, der er forbundet til et websted.
  • Video: Desarrollo de Extensiones para Chrome 02 - Configurar manifest.json de una Extension Chrome

    Video: Sådan tester du tilgængelighed på din hjemmeside med en Mac

    2
    Brug cascading stilark til at føje til en side, der er forbundet med det pågældende CSS-kodeark (eller -dokument). Du kan selvfølgelig have mere end én stil ark til forskellige typer af sider (hoved, galleri, artikler, lister, osv), men de kan kombineres til stilarter og id`er er konsistente, begrænsede og kalder når det er nødvendigt.
  • tips

    • Vedhæft eller "embed"- i digital teknologi - betyder sted noget (tekst, billede, lyd, video eller aktiv kode) i en computer-fil, HTML-dokument, software eller elektronisk enhed: vedhæfte billeder i deres side-vedhæfte software i biler og fly til drift motorovervågning eller navigationskontrol mv.
    • Stilen på selve siden må muligvis ændres for at passe til baggrunden.
    • "DIV overlejringer er blevet den mest populære måde at udsmykke MySpace profiler uden stor HTML viden. At finde en præfabrikeret DIV afhænger primært af hvor du vil bruge koden. For eksempel kræver en DIV-overlejring dig normalt at "skjule" den kode, der er almindelig for visning af en bestemt side. Så hvis du bruger MySpace, skal du sørge for, at koderne indeholder den gældende MySpace-kodning - så gør andre blogs eller sociale sider. Der er flere hjemmesider, der tilbyder DIV-koder, og nogle af dem kan tjene som en guide i hele processen med at lave din egen, og endnu mere, der giver dig enkelheden ved at pege og klikke. Det er ikke nødvendigt at have omfattende kendskab til HTML, men det er vigtigt, at du i det mindste forstår det grundlæggende i dets funktion, når det bruges i forbindelse med CSS, da CSS-sprog er den måde, hvorpå DIV overlejringer oprettes. "

    advarsler

    • Dit valg kan overstyres som standard stilindstillinger i CSS-filen.
    Del på sociale netværk:

    Relaterede
    © 2024 HodTari.com