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;
- }