Bredder på HTML Styles

Når du oppretter websider i HTML, kan du søke styling egenskaper for elementene i dem, inkludert bredde egenskaper, ved hjelp av en kombinasjon av HTML markup og Cascading Style Sheet kode. Du kan håndheve bredde eiendommer på HTML-elementer på ulike måter. Med noen elementer, kan du inkludere en bredde hotellet direkte, mens med andre du trenger for å bruke CSS-kode. Du kan også velge mellom en rekke alternativer i form av verdiene du bruker i bredde erklæringer.

HTML Elements

Enkelte HTML-elementer kan inkludere en bredde attributt, selv om mange utviklere foretrekker å bruke CSS-kode. Dette er fordi separasjon av websiden innhold fra formatering gjør et område mer konsekvent og gir brukeren en større grad av kontroll over hvordan siden ser ut til dem. Det er imidlertid noen fordeler med å bruke bredde egenskaper, spesielt med bildeelement. Hvis du ønsker å legge til en bredde attributt til bildene dine, kan du bruke følgende eksempel markup:

<Img src = "picture.jpg" width = "200px" id = "pic" />

Fordelen med å bruke denne egenskapen er at leseren vet hvor mye plass til å fordele til bildet før filen har faktisk lastet.

CSS

I de fleste tilfeller setter nettstedet kode bredde egenskapene til HTML-elementer i CSS erklæringer. CSS erklæringer kan vises i hodet delen av en HTML-side eller i en egen CSS-fil koblet til fra hodet delen. Følgende eksempel markup demonstrerer skape en CSS-delen på siden hodet:

<Style type = "text / css">
/ Stil erklæringer her /
</ Style>

Inne i denne delen kan du legge til styling egenskapene du trenger, inkludert bredder for elementene på siden.

verdier

Når du setter bredder ved hjelp av CSS-kode, kan du bruke forskjellige typer verdi. Følgende erklæring setter en fast bredde verdi:
width: 600px;

Man kan alternativt stille inn bredden som en prosent av et element moder element:

width: 50%;

Dette elementet vil oppta halvparten av bredden av elementet som inneholdt den. Dette gjør sider til å tilpasse seg ulike brukerskjermstørrelser, samt tilpasse hvis brukeren endrer størrelsen nettleservinduet sitt. Som standard vil nettleseren beregne bredden på noen elementer, med mindre du leverer konkrete verdier. Hvis du vil angi at et element skal arve sin bredde fra overordnet element, kan du bruke følgende syntaks:

bredde: arve;

identifikatorer

For å søke bredde egenskapene til HTML elementer i CSS-koden, må du først identifisere de elementene. Følgende eksempelkode demonstrerer sette bredden for alle bildeelementer på en side:

img {width: 80%; }

For å søke bredder på elementer med en bestemt klasse attributt, kan du bruke følgende syntaks:

.mainClass {width: 400px; }

Hvis du vil angi bredde for elementer med en bestemt ID attributt, kan du bruke følgende kode:

footer {width: 90%; }