2.03. Tekstin muotoilut tyylien avulla

Tehtävä

  1. Kirjota alla oleva koodi html tiedostoon ja testaa sivun toiminta
  2. Tarkista koodin oikeellisuus validaattorissa

Selaimessa

selaimessa

Koodi

koodi

Selite

Rivinumero Selite
1 Tiedoston määrittäminen HTML5 kielelle 
2 Kerrotaan selaimelle, että käytetään utf-8 kirjaimistoa
3 Aloitetaan tyyliosuus
4 Aloitetaan body tagin tyylien määrittely
5 Taustan väri
6 Tekstin väri
7 Lopetetaan body tagin tyylien määrittely
8 Aloitetaan otsikko 1 tason tyylien määrittely
9 Määritetään tekstin vaakasuuntaiseksia tasaukseksi keskitys
10 Määritetään kirjainten väliksi 3 pikseliä
11 Lopetetaan otsikko1 tason tyylien määrittely
12 Aloitetaan kappaleen tyylien määrittely
13 Määritellään vaakasuuntaiseksi tasaukseksi, molempien reunojen tasaus
14 Määritellään ensimmäisen rivin alkuun 50 pikselin tyhjä tila
15 Lopetetaan kappaleen tyylien määrittely
16 Lopetetaan tyylien määrittely head osiossa
17 Sivun otsikko selaimen otsikkorivillä
18 Aloitetaan body osio
19 Otsikko
21

Määritellään tähän kappaleeseen erilaiset asetukset kuin head osiossa on määritelty.

  • Text-decoration: overline –> yliviivaus
  • text-transform: uppercase –> Isoja kirjaimia
22

Määritellään tähän kappaleeseen erilaiset asetukset kuin head osiossa on määritelty.

  • Text-decoration: line-through –> yliviivaus
  • text-transform: lowercase –> pieniä kirjaimia
25

Määritellään tähän kappaleeseen erilaiset asetukset kuin head osiossa on määritelty.

  • Text-decoration: underline –> alleviivaus
  • text-transform: capitalize –> Sanojen ensimmäinen kirjain isolla
27

Määritellään tähän kappaleeseen erilaiset asetukset kuin head osiossa on määritelty.

  • line-height: 1.8 –> Rivin korkeus
29

Määritellään tähän kappaleeseen erilaiset asetukset kuin head osiossa on määritelty.

  • text-shadow: 2px 2px #cccccc –> Määritellään tekstille varjo
31

Lopetetaan body osio

32

Lopetetaan html sivun koodi

Comments are closed.

By continuing to use the site, you agree to the use of cookies. - - - - - - Jatkamalla sivuston käyttöä hyväksyt evästeet.
more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.
- - - - - -
Tällä sivulla käytetään evästeitä sivuston paremman toiminnan takaamiseksi. Jatkamalla sivuston käyttöä tai napsauttamalla "Accept" hyväksyt sivuston evästeet.

Close