HTML Body Bakgrunn Tutorial

February 15

En nettside bakgrunn kan tydelig stylet ved å plassere Cascading Style Sheets stiler inne i HTML-body-koden. Ved å definere visse egenskaper, kan du bruke spesielle funksjoner, for eksempel bilder og farger, for å skille sidene fra andre nettsteder. Les om hvordan du kan bruke disse teknikkene til din egen HTML nettsider.

Legge til CSS

For å begynne, lage CSS stil plassholder innenfor omfatter hodet kodene for å legge kroppen bakgrunns stiler til HTML-fil. Skriv en åpning "<style>" tag og spesifisere at "text / css" er den typen. For eksempel:

Deretter legger du til en kropp identifikator slik at leseren vet å bruke stiler på siden. Å illustrere:

Følg koden med CSS, lukket mellom klammeparenteser, og legge bakgrunnen attributtet slutter med et semikolon. For eksempel:

<Head>
<Style type = "text / css">
body {background: fremtiden CSS her; }

Til slutt lukke stil og hodet kodene for å fullføre kode. Den fulle CSS posten er som følger:

<Head>
<Style type = "text / css">
body {background: fremtiden CSS her; }
</ Style>
</ Head>

Etter å legge CSS til plassholderen, og lagre filen, vil stilene automatisk tre i kraft.

bakgrunns~~POS=TRUNC Properties

Du kan bruke fem attributter, kjent som bakgrunnsegenskaper, for å kontrollere farge- og bilde detaljer om en kropp bakgrunn.

Først "background-color" tildeler maling av en side bakgrunn. Ved hjelp av en sekssifret heksadesimalt (hex) HTML fargekode, kan du angi nyansen av ditt valg i CSS plassholder. Disse hex fargekoder finnes i vanlige HTML-tekstredigeringsprogrammer, for eksempel Dreamweaver. For eksempel, for å sette en bakgrunn til lys gul, skriver du inn følgende:

body {background-color: # FFFF99; }

Deretter "bakgrunnsbilde" lar deg bruke et bilde i JPG eller GIF-format. Det anbefales at du bare bruker bilder i forbindelse med en bakgrunnsfarge i tilfelle filen lastes ikke inn på siden. Bildene blir automatisk plassert øverst til venstre flekk av et element og er gjentatt både vertikalt og horisontalt.

For å bruke et bilde, legge filen på samme sted som HTML-dokumentet på webserveren og deretter inn denne plasseringen (etter URL-indikator og lukket mellom enkelt apostrofer og parentes) innenfor CSS. For eksempel:

body {background-image: url ( 'sample.jpg'); }

Videre, ved hjelp av "background-repeat", kan du kontrollere hvordan bakgrunnsbildet er presentert. Sette dette attributtet til "gjenta-x" gjør et bilde bla horisontalt og "repeat-y" flytter den vertikalt. Du kan også ha bildet ditt vises bare en gang ved hjelp av "no-repeat". Uten "background-repeat", bilder automatisk dukke opp igjen både ned og på tvers. Hvis du vil angi en horisontal gjentakelse, skriver du:

body {background-repeat: repeat-x; }

For å fortsette, "background-attachment" instruerer bildet for å enten bo fast på ett sted, eller bla med siden. Standard blir automatisk satt til bla. For eksempel, for å gjøre den grafiske fast, Type:

body {background-attachment: fixed; }

Til slutt, ved hjelp av "background-position", kan du instruere bildet for å starte i et bestemt område ved å bruke visse ord, for eksempel "top center", og også "x" og "y" for å indikere spesifikke posisjonering. "X" og "Y" indikatorer styres med prosenter, der det øverste venstre hjørne er null prosent for begge, og med piksler også inneholder null verdi på samme sted. Å plassere et bilde i en horisontal og vertikal senterområdet på siden, skriver du:

body {background-posisjon: center center; }

Lagre filen og bruke HTML teksteditor er "preview" funksjonen for å verifisere at siden vises riktig.