Hvordan lage en CSS Banner

Hvordan lage en CSS Banner


Bannere er bilder som du oppretter og setter inn på en webside, men du har muligheten til å bruke Cascading Style Sheets (CSS) i stedet. Med CSS, vil banner være en mindre filstørrelse, noe som fører til raskere side-lasting. En CSS banner gir deg også muligheten til å raskt endre designelementer ved å redigere koden. Bruk datamaskinens tekst editor for å bygge en CSS banner.

Bruksanvisning

1 Start din tekst editor program og åpne nettsiden filen. Plasser markøren i mellom <head> taggene.

2 Skriv inn denne CSS-kode før den avsluttende </ head> element:

<Style type = "text / css">

banner {}

</ Style>

Den "#banner {}" mellom stil kodene begynner en distinkt regel som bygger banneret.

3 Skriv inn følgende attributter mellom klammeparenteser:. "Bredde", "høyde", "font-size", "font-family", "padding", "background-color" og "border-style"

4 Skriv inn tallverdier i piksler (px) etter "width" og "height" for å angi de ønskede banner dimensjoner. Koden skal se ut:

banner {width: 500px; height: 300px; }

5 Skriv en pikselverdi etter "font-size" og skriv inn en font-family for å finne ut hvordan din banner tekst vises. Skriv en padding verdi å etablere hvor mye plass som vises mellom tekst og banner grensen. For eksempel:

banner {font-size: 24px; font-family: Arial, Helvetica, sans-serif; padding: 10px; }

6 Skriv en heksadesimal fargeverdi etter "background-color" for å avgjøre skyggen. Skriv en pikselstørrelse, linjestil og fargeverdi etter "border-style" for å angi hvordan omriss rundt banneret skjermer. For eksempel:

banner {background-color: # FFFF00; border-style: 2px solid #cccccc; }

7 Plasser markøren i HTML-koden der du vil at banneret skal vises, og skriv inn følgende for å sette det på siden:

<Div id = "banner">

Skriv inn CSS for banner her

</ Div>

8 Lagre filen.

Hint

  • Skill CSS attributt med et semikolon for å sikre stiler arbeid. For eksempel:
  • #banner {
  • width: 500px;
  • height: 300px;
  • font-size: 24px;
  • font-family: Arial, Helvetica, sans-serif;
  • padding: 10px;
  • background-color: # FFFF00;
  • border-style: 2px solid #cccccc;
  • }